diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 1fd5869..d72e069 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -5,5 +5,5 @@ module.exports = {
   },
   // eslint will auto add `eslint-config` for a no scope package(which not start with '@' chart), so here use absolute file path
   extends: [require.resolve("project-tool/baseLint")],
-  ignorePatterns: ["dist", "dev", "scripts", "node_modules", "next-app-example", "next-page-example"],
+  ignorePatterns: ["dist", "dev", "scripts", "node_modules", "next-app-example", "next-page-example", "packages/solid"],
 };
diff --git a/package.json b/package.json
index f18e8ab..5a7e8c7 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "dev:vue-ssr": "cd ui/vue-ssr-example && pnpm run dev",
     "dev:next-page": "cd ui/next-page-example && pnpm run dev",
     "dev:next-app": "cd ui/next-app-example && pnpm run dev",
+    "dev:solid": "cd ui/solid-example && pnpm run dev",
     "build:react": "cd ui/react-example && pnpm run build",
     "pre:release": "pnpm run lint && pnpm run prettier && pnpm run clean && pnpm run build:packages",
     "release": "pnpm run pre:release && pnpm run start:release",
diff --git a/packages/angular/package.json b/packages/angular/package.json
new file mode 100644
index 0000000..4f03a06
--- /dev/null
+++ b/packages/angular/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "@git-diff-view/angular"
+}
\ No newline at end of file
diff --git a/packages/core/src/diff-file.ts b/packages/core/src/diff-file.ts
index 5e80249..bc46f64 100644
--- a/packages/core/src/diff-file.ts
+++ b/packages/core/src/diff-file.ts
@@ -1411,6 +1411,7 @@ export class DiffFile {
     return this.#newFileSyntaxLines?.[lineNumber];
   };
 
+  // TODO improve
   subscribe = (listener: (() => void) & { isSyncExternal?: boolean }) => {
     this.#listeners.push(listener);
 
@@ -1578,7 +1579,7 @@ export class DiffFile {
     }
   };
 
-  _getHighlighterName = () => this.#highlighterName;
+  _getHighlighterName = () => this.#highlighterName || '';
 
   _getIsPureDiffRender = () => this.#composeByDiff;
 
diff --git a/packages/dom/package.json b/packages/dom/package.json
new file mode 100644
index 0000000..a6dc1c7
--- /dev/null
+++ b/packages/dom/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "@git-diff-view/dom"
+}
\ No newline at end of file
diff --git a/packages/react/src/components/DiffView.tsx b/packages/react/src/components/DiffView.tsx
index 270f729..25a23be 100644
--- a/packages/react/src/components/DiffView.tsx
+++ b/packages/react/src/components/DiffView.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { DiffFile, _cacheMap, SplitSide } from "@git-diff-view/core";
-import { diffFontSizeName } from "@git-diff-view/utils";
+import { diffFontSizeName, DiffModeEnum } from "@git-diff-view/utils";
 import { memo, useEffect, useMemo, forwardRef, useImperativeHandle, useRef } from "react";
 import * as React from "react";
 
@@ -20,16 +20,7 @@ import type { CSSProperties, ForwardedRef, ReactNode } from "react";
 
 _cacheMap.name = "@git-diff-view/react";
 
-export { SplitSide };
-
-export enum DiffModeEnum {
-  // github like
-  SplitGitHub = 1,
-  // gitlab like
-  SplitGitLab = 2,
-  Split = 1 | 2,
-  Unified = 4,
-}
+export { SplitSide, DiffModeEnum };
 
 export type DiffViewProps<T> = {
   data?: {
diff --git a/packages/solid/.eslintrc.cjs b/packages/solid/.eslintrc.cjs
new file mode 100644
index 0000000..e256508
--- /dev/null
+++ b/packages/solid/.eslintrc.cjs
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: ["solid"],
+  extends: ["../../.eslintrc.cjs", "plugin:solid/typescript"],
+  ignorePatterns: ["dist", "dev", "node_modules"],
+};
diff --git a/packages/solid/package.json b/packages/solid/package.json
new file mode 100644
index 0000000..6a20886
--- /dev/null
+++ b/packages/solid/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@git-diff-view/solid",
+  "description": "@git-diff-view/solid",
+  "author": "MrWangJustToDo",
+  "license": "MIT",
+  "version": "0.0.25",
+  "main": "index.js",
+  "type": "module",
+  "types": "index.d.ts",
+  "files": [
+    "dist",
+    "index.cjs",
+    "index.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MrWangJustToDo/git-diff-view.git",
+    "directory": "packages/solid"
+  },
+  "scripts": {
+    "build": "vite build",
+    "gen:type": "dts-bundle-generator -o index.d.ts dist/index.d.ts",
+    "gen:css1": "postcss src/tailwind.css -o dist/css/diff-view.css",
+    "gen:css2": "postcss src/tailwind_pure.css -o dist/css/diff-view-pure.css",
+    "gen:css": "npm run gen:css1 && npm run gen:css2"
+  },
+  "homepage": "https://mrwangjusttodo.github.io/git-diff-view",
+  "exports": {
+    ".": {
+      "require": "./index.cjs",
+      "types": "./index.d.ts",
+      "import": "./dist/vue-git-diff-view.mjs"
+    },
+    "./styles/*": "./dist/css/*",
+    "./package.json": "./package.json"
+  },
+  "keywords": [
+    "diff component",
+    "solid diff component"
+  ],
+  "dependencies": {
+    "@git-diff-view/core": "^0.0.29",
+    "@types/hast": "^3.0.0",
+    "highlight.js": "^11.11.0",
+    "lowlight": "^3.3.0",
+    "fast-diff": "^1.3.0",
+    "reactivity-store": "^0.3.11"
+  },
+  "devDependencies": {
+    "solid-js": "^1.9.0",
+    "vite-plugin-solid": "^2.11.0",
+    "autoprefixer": "^10.4.20",
+    "eslint-plugin-solid": "^0.14.5",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  }
+}
\ No newline at end of file
diff --git a/packages/solid/postcss.config.js b/packages/solid/postcss.config.js
new file mode 100644
index 0000000..c917e1b
--- /dev/null
+++ b/packages/solid/postcss.config.js
@@ -0,0 +1,32 @@
+export default {
+  plugins: {
+    tailwindcss: { config: "./tailwind.config.js" },
+    "postcss-prefix-selector": {
+      prefix: ".diff-tailwindcss-wrapper",
+      transform: function (prefix, selector, prefixedSelector, _filePath, rule) {
+        const filePath = rule.source?.input?.file;
+        // ignore base css
+        // TODO next release update
+        if (rule.source?.start?.line === 1 && rule.source?.start?.column === 1) {
+          return selector;
+        }
+        if (selector.includes("diff-line-extend-wrapper") || selector.includes("diff-line-widget-wrapper")) {
+          return selector;
+        }
+        if (selector.includes("[data-theme")) {
+          return prefix + selector;
+        }
+        if (filePath.includes("node_modules")) {
+          if (filePath.includes("dark.css")) {
+            return `${prefix}[data-theme="dark"] .diff-line-syntax-raw ${selector}`;
+          } else {
+            return `${prefix}[data-theme="light"] .diff-line-syntax-raw ${selector}`;
+          }
+        } else {
+          return prefixedSelector;
+        }
+      },
+    },
+    autoprefixer: {},
+  },
+};
diff --git a/packages/solid/src/_base.css b/packages/solid/src/_base.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/packages/solid/src/_base.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/solid/src/_base_pure.css b/packages/solid/src/_base_pure.css
new file mode 100644
index 0000000..7c05d4d
--- /dev/null
+++ b/packages/solid/src/_base_pure.css
@@ -0,0 +1,2 @@
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/solid/src/_com.css b/packages/solid/src/_com.css
new file mode 100644
index 0000000..aaed963
--- /dev/null
+++ b/packages/solid/src/_com.css
@@ -0,0 +1,172 @@
+* {
+  box-sizing: border-box;
+}
+
+[data-theme="light"] .diff-style-root {
+  --diff-border--: #dedede;
+  --diff-add-content--: #e6ffec;
+  --diff-del-content--: #ffebe9;
+  --diff-add-lineNumber--: #ccffd8;
+  --diff-del-lineNumber--: #ffd7d5;
+  --diff-plain-content--: #ffffff;
+  --diff-expand-content--: #fafafa;
+  --diff-plain-lineNumber--: #fafafa;
+  --diff-expand-lineNumber--: #fafafa;
+  --diff-plain-lineNumber-color--: #555555;
+  --diff-expand-lineNumber-color--: #555555;
+  --diff-hunk-content--: #ddf4ff;
+  --diff-hunk-lineNumber--: #c7ecff;
+  --diff-hunk-lineNumber-hover--: #0969da;
+  --diff-add-content-highlight--: #abf2bc;
+  --diff-del-content-highlight--: #ffb3ad;
+  --diff-add-widget--: #0969d2;
+  --diff-add-widget-color--: #ffffff;
+  --diff-empty-content--: #fafafa;
+  --diff-hunk-content-color--: #777777;
+
+  color: black;
+}
+
+.diff-style-root .diff-line-syntax-raw *,
+[data-theme="light"] .diff-line-syntax-raw * {
+  color: var(--diff-view-light, inherit);
+  font-weight: var(--diff-view-light-font-weight, inherit);
+}
+
+[data-theme="dark"] .diff-style-root {
+  --diff-border--: #3d444d;
+  --diff-add-content--: #14261f;
+  --diff-del-content--: #311b1f;
+  --diff-add-lineNumber--: #1f4429;
+  --diff-del-lineNumber--: #552527;
+  --diff-plain-content--: #0d1117;
+  --diff-expand-content--: #161b22;
+  --diff-plain-lineNumber--: #161b22;
+  --diff-expand-lineNumber--: #161b22;
+  --diff-plain-lineNumber-color--: #a0aaab;
+  --diff-expand-lineNumber-color--: #a0aaab;
+  --diff-hunk-content--: #131d2e;
+  --diff-hunk-lineNumber--: #204274;
+  --diff-hunk-lineNumber-hover--: #1f6feb;
+  --diff-add-content-highlight--: #1f572d;
+  --diff-del-content-highlight--: #80312f;
+  --diff-add-widget--: #0969d2;
+  --diff-add-widget-color--: #ffffff;
+  --diff-empty-content--: #161b22;
+  --diff-hunk-content-color--: #9298a0;
+
+  color: white;
+}
+
+[data-theme="dark"] .diff-line-syntax-raw * {
+  color: var(--diff-view-dark, inherit);
+  font-weight: var(--diff-view-dark-font-weight, inherit);
+}
+
+table,
+tr,
+td {
+  border-color: transparent;
+  border-width: 0px;
+  text-align: left;
+}
+
+.diff-line-old-num,
+.diff-line-new-num,
+.diff-line-num {
+  text-align: right;
+}
+
+.diff-style-root tr {
+  content-visibility: auto;
+}
+
+.diff-add-widget-wrapper {
+  transform-origin: center;
+  transform: translateX(-50%) !important;
+}
+
+.diff-line-old-content .diff-add-widget-wrapper,
+.diff-line-new-content .diff-add-widget-wrapper {
+  transform: translateX(50%) !important;
+}
+
+.diff-add-widget-wrapper:hover {
+  transform: translateX(-50%) scale(1.1) !important;
+}
+
+.diff-line-old-content .diff-add-widget-wrapper:hover,
+.diff-line-new-content .diff-add-widget-wrapper:hover {
+  transform: translateX(50%) scale(1.1) !important;
+}
+
+.diff-widget-tooltip {
+  position: relative;
+}
+
+.diff-add-widget,
+.diff-widget-tooltip {
+  font-family: inherit;
+  font-feature-settings: inherit;
+  font-variation-settings: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  color: inherit;
+  margin: 0;
+  text-transform: none;
+  border-width: 0px;
+  background-color: transparent;
+  background-image: none;
+}
+
+.diff-widget-tooltip::after {
+  display: none;
+  box-sizing: border-box;
+  background-color: #555555;
+  position: absolute;
+  content: attr(data-title);
+  font-size: 11px;
+  padding: 1px 2px;
+  border-radius: 4px;
+  overflow: hidden;
+  top: 50%;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  left: calc(100% + 8px);
+  color: #ffffff;
+}
+
+.diff-widget-tooltip::before {
+  display: none;
+  box-sizing: border-box;
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: calc(100% - 2px);
+  transform: translateY(-50%);
+  border: 6px solid transparent;
+  border-right-color: #555555;
+}
+
+.diff-widget-tooltip:hover {
+  background-color: var(--diff-hunk-lineNumber-hover--);
+  color: white;
+}
+
+.diff-widget-tooltip:hover::before {
+  display: block;
+}
+
+.diff-widget-tooltip:hover::after {
+  display: block;
+}
+
+.diff-line-extend-wrapper * {
+  color: initial;
+}
+
+.diff-line-widget-wrapper * {
+  color: initial;
+}
diff --git a/packages/solid/src/_theme.css b/packages/solid/src/_theme.css
new file mode 100644
index 0000000..3302cba
--- /dev/null
+++ b/packages/solid/src/_theme.css
@@ -0,0 +1,2 @@
+@import url(highlight.js/styles/github.css);
+@import url(highlight.js/styles/github-dark.css);
diff --git a/packages/solid/src/components/DiffAddWidget.tsx b/packages/solid/src/components/DiffAddWidget.tsx
new file mode 100644
index 0000000..c1f5f86
--- /dev/null
+++ b/packages/solid/src/components/DiffAddWidget.tsx
@@ -0,0 +1,73 @@
+import { diffFontSizeName, addWidgetColorName, addWidgetBGName } from "@git-diff-view/utils";
+
+import type { DiffFile, SplitSide } from "@git-diff-view/core";
+
+export const DiffSplitAddWidget = (props: {
+  index: number;
+  class?: string;
+  lineNumber: number;
+  diffFile: DiffFile;
+  side: SplitSide;
+  onOpenAddWidget: (lineNumber: number, side: SplitSide) => void;
+  onWidgetClick?: (event: "onAddWidgetClick", lineNumber: number, side: SplitSide) => void;
+}) => {
+  return (
+    <div
+      class={
+        "diff-add-widget-wrapper invisible select-none transition-transform hover:scale-110 group-hover:visible" +
+        (props.class ? " " + props.class : "")
+      }
+      style={{
+        width: `calc(var(${diffFontSizeName}) * 1.4)`,
+        height: `calc(var(${diffFontSizeName}) * 1.4)`,
+      }}
+    >
+      <button
+        class="diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]"
+        style={{
+          color: `var(${addWidgetColorName})`,
+          "background-color": `var(${addWidgetBGName})`,
+        }}
+        onClick={() => {
+          props.onOpenAddWidget(props.lineNumber, props.side);
+          props.onWidgetClick?.("onAddWidgetClick", props.lineNumber, props.side);
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+};
+
+export const DiffUnifiedAddWidget = (props: {
+  index: number;
+  diffFile: DiffFile;
+  lineNumber: number;
+  side: SplitSide;
+  onOpenAddWidget: (lineNumber: number, side: SplitSide) => void;
+  onWidgetClick?: (event: "onAddWidgetClick", lineNumber: number, side: SplitSide) => void;
+}) => {
+  return (
+    <div
+      class="diff-add-widget-wrapper invisible absolute left-[100%] top-[1px] translate-x-[-50%] select-none transition-transform hover:scale-110 group-hover:visible"
+      style={{
+        width: `calc(var(${diffFontSizeName}) * 1.4)`,
+        height: `calc(var(${diffFontSizeName}) * 1.4)`,
+      }}
+    >
+      <button
+        class="diff-add-widget z-[1] flex h-full w-full origin-center cursor-pointer items-center justify-center rounded-md text-[1.2em]"
+        style={{
+          color: `var(${addWidgetColorName})`,
+          "background-color": `var(${addWidgetBGName})`,
+        }}
+        onClick={() => {
+          props.onOpenAddWidget(props.lineNumber, props.side);
+          props.onWidgetClick?.("onAddWidgetClick", props.lineNumber, props.side);
+        }}
+      >
+        +
+      </button>
+    </div>
+  );
+};
diff --git a/packages/solid/src/components/DiffContent.tsx b/packages/solid/src/components/DiffContent.tsx
new file mode 100644
index 0000000..c2d6a90
--- /dev/null
+++ b/packages/solid/src/components/DiffContent.tsx
@@ -0,0 +1,380 @@
+import {
+  DiffLineType,
+  getSyntaxDiffTemplate,
+  type File,
+  type DiffFile,
+  type DiffLine,
+  getSyntaxLineTemplate,
+  getPlainDiffTemplate,
+  getPlainLineTemplate,
+} from "@git-diff-view/core";
+import {
+  addContentHighlightBGName,
+  delContentHighlightBGName,
+  diffFontSizeName,
+  getSymbol,
+  NewLineSymbol,
+} from "@git-diff-view/utils";
+import { createMemo, For, Show } from "solid-js";
+
+import { DiffNoNewLine } from "./DiffNoNewLine";
+
+const DiffString = (props: {
+  rawLine: string;
+  diffLine?: DiffLine;
+  operator?: "add" | "del";
+  plainLine?: File["plainFile"][number];
+  enableWrap?: boolean;
+  enableTemplate?: boolean;
+}) => {
+  const getRange = () => props.diffLine?.changes?.range;
+
+  const getStr1 = () => props.rawLine.slice(0, getRange?.()?.location);
+
+  const getStr2 = () =>
+    props.rawLine.slice(getRange?.()?.location, (getRange?.()?.location || 0) + (getRange?.()?.length || 0));
+
+  const getStr3 = () => props.rawLine.slice((getRange?.()?.location || 0) + (getRange?.()?.length || 0));
+
+  const getIsLast = () => getStr2().includes("\n");
+
+  const get_Str2 = () => (getIsLast() ? getStr2().replace("\n", "").replace("\r", "") : getStr2());
+
+  const getIsNewLineSymbolChanged = () => (getStr3() === "" ? props.diffLine?.changes?.newLineSymbol : null);
+
+  const initTemplateIfNeed = () => {
+    if (
+      props.enableTemplate &&
+      props.operator &&
+      props.diffLine &&
+      !props.diffLine?.plainTemplate &&
+      typeof getPlainDiffTemplate === "function"
+    ) {
+      getPlainDiffTemplate({ diffLine: props.diffLine, rawLine: props.rawLine, operator: props.operator });
+    }
+
+    if (props.enableTemplate && props.plainLine && !props.plainLine.template) {
+      props.plainLine.template = getPlainLineTemplate(props.plainLine.value);
+    }
+  };
+
+  // eslint-disable-next-line solid/reactivity
+  createMemo(initTemplateIfNeed);
+
+  return (
+    <Show
+      when={props.diffLine?.changes?.hasLineChange}
+      fallback={
+        <Show
+          when={props.enableTemplate && props.plainLine?.template}
+          fallback={<span class="diff-line-content-raw">{props.rawLine}</span>}
+        >
+          <span class="diff-line-content-raw">
+            {/* eslint-disable-next-line solid/no-innerhtml */}
+            <span data-template innerHTML={props.plainLine?.template} />
+          </span>
+        </Show>
+      }
+    >
+      <Show
+        when={props.enableTemplate && props.diffLine?.plainTemplate}
+        fallback={
+          <span class="diff-line-content-raw">
+            <span
+              data-range-start={getRange()?.location}
+              data-range-end={(getRange()?.location || 0) + (getRange()?.length || 0)}
+            >
+              {getStr1()}
+              <span
+                data-diff-highlight
+                class="rounded-[0.2em]"
+                style={{
+                  "background-color":
+                    props.operator === "add"
+                      ? `var(${addContentHighlightBGName})`
+                      : `var(${delContentHighlightBGName})`,
+                }}
+              >
+                {getIsLast() ? (
+                  <>
+                    {get_Str2()}
+                    <span data-newline-symbol>{getSymbol(getIsNewLineSymbolChanged())}</span>
+                  </>
+                ) : (
+                  getStr2()
+                )}
+              </span>
+              {getStr3()}
+            </span>
+            {getIsNewLineSymbolChanged() === NewLineSymbol.NEWLINE && (
+              <span
+                data-no-newline-at-end-of-file-symbol
+                class={props.enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
+                style={{
+                  width: `var(${diffFontSizeName})`,
+                  height: `var(${diffFontSizeName})`,
+                }}
+              >
+                <DiffNoNewLine />
+              </span>
+            )}
+          </span>
+        }
+      >
+        <span class="diff-line-content-raw">
+          {/* eslint-disable-next-line solid/no-innerhtml */}
+          <span data-template innerHTML={props.diffLine?.plainTemplate} />
+          {getIsNewLineSymbolChanged() === NewLineSymbol.NEWLINE && (
+            <span
+              data-no-newline-at-end-of-file-symbol
+              class={props.enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
+              style={{
+                width: `var(${diffFontSizeName})`,
+                height: `var(${diffFontSizeName})`,
+              }}
+            >
+              <DiffNoNewLine />
+            </span>
+          )}
+        </span>
+      </Show>
+    </Show>
+  );
+};
+
+const DiffSyntax = (props: {
+  rawLine: string;
+  diffLine?: DiffLine;
+  syntaxLine?: File["syntaxFile"][number];
+  operator?: "add" | "del";
+  enableWrap?: boolean;
+  enableTemplate?: boolean;
+}) => {
+  const getRange = () => props.diffLine?.changes?.range;
+
+  const getIsNewLineSymbolChanged = () => props.diffLine?.changes?.newLineSymbol;
+
+  const initTemplateIfNeed = () => {
+    if (
+      props.enableTemplate &&
+      props.diffLine &&
+      props.syntaxLine &&
+      props.operator &&
+      !props.diffLine?.syntaxTemplate &&
+      typeof getSyntaxDiffTemplate === "function"
+    ) {
+      getSyntaxDiffTemplate({ diffLine: props.diffLine, syntaxLine: props.syntaxLine, operator: props.operator });
+    }
+
+    if (props.enableTemplate && props.syntaxLine && !props.syntaxLine?.template) {
+      props.syntaxLine.template = getSyntaxLineTemplate(props.syntaxLine);
+    }
+  };
+
+  // eslint-disable-next-line solid/reactivity
+  createMemo(initTemplateIfNeed);
+
+  return (
+    <Show
+      when={props.syntaxLine}
+      fallback={
+        <DiffString
+          rawLine={props.rawLine}
+          diffLine={props.diffLine}
+          operator={props.operator}
+          enableWrap={props.enableWrap}
+          enableTemplate={props.enableTemplate}
+        />
+      }
+    >
+      <Show
+        when={props.diffLine?.changes?.hasLineChange}
+        fallback={
+          <Show
+            when={props.enableTemplate && props.syntaxLine?.template}
+            fallback={
+              <span class="diff-line-syntax-raw">
+                <For each={props.syntaxLine?.nodeList || []}>
+                  {({ node, wrapper }) => (
+                    <span
+                      data-start={node.startIndex}
+                      data-end={node.endIndex}
+                      class={wrapper?.properties?.className?.join(" ")}
+                      style={wrapper?.properties?.style}
+                    >
+                      {node.value}
+                    </span>
+                  )}
+                </For>
+              </span>
+            }
+          >
+            <span class="diff-line-syntax-raw">
+              {/* eslint-disable-next-line solid/no-innerhtml */}
+              <span data-template innerHTML={props.syntaxLine?.template} />
+            </span>
+          </Show>
+        }
+      >
+        <Show
+          when={props.enableTemplate && props.diffLine?.syntaxTemplate}
+          fallback={
+            <span class="diff-line-syntax-raw">
+              <span
+                data-range-start={getRange()?.location}
+                data-range-end={(getRange()?.location || 0) + (getRange()?.length || 0)}
+              >
+                <For each={props.syntaxLine?.nodeList}>
+                  {({ node, wrapper }) => {
+                    if (
+                      node.endIndex < getRange()!.location ||
+                      getRange()!.location + getRange()!.length < node.startIndex
+                    ) {
+                      return (
+                        <span
+                          data-start={node.startIndex}
+                          data-end={node.endIndex}
+                          class={wrapper?.properties?.className?.join(" ")}
+                          style={wrapper?.properties?.style}
+                        >
+                          {node.value}
+                        </span>
+                      );
+                    } else {
+                      const index1 = getRange()!.location - node.startIndex;
+                      const index2 = index1 < 0 ? 0 : index1;
+                      const str1 = node.value.slice(0, index2);
+                      const str2 = node.value.slice(index2, index1 + getRange()!.length);
+                      const str3 = node.value.slice(index1 + getRange()!.length);
+                      const isStart = str1.length || getRange()!.location === node.startIndex;
+                      const isEnd = str3.length || node.endIndex === getRange()!.location + getRange()!.length - 1;
+                      const isLast = str2.includes("\n");
+                      const _str2 = isLast ? str2.replace("\n", "").replace("\r", "") : str2;
+                      return (
+                        <span
+                          data-start={node.startIndex}
+                          data-end={node.endIndex}
+                          class={wrapper?.properties?.className?.join(" ")}
+                          style={wrapper?.properties?.style}
+                        >
+                          {str1}
+                          <span
+                            data-diff-highlight
+                            style={{
+                              "background-color":
+                                props.operator === "add"
+                                  ? `var(${addContentHighlightBGName})`
+                                  : `var(${delContentHighlightBGName})`,
+                              "border-top-left-radius": isStart ? "0.2em" : undefined,
+                              "border-bottom-left-radius": isStart ? "0.2em" : undefined,
+                              "border-top-right-radius": isEnd || isLast ? "0.2em" : undefined,
+                              "border-bottom-right-radius": isEnd || isLast ? "0.2em" : undefined,
+                            }}
+                          >
+                            {isLast ? (
+                              <>
+                                {_str2}
+                                <span data-newline-symbol>{getSymbol(getIsNewLineSymbolChanged())}</span>
+                              </>
+                            ) : (
+                              str2
+                            )}
+                          </span>
+                          {str3}
+                        </span>
+                      );
+                    }
+                  }}
+                </For>
+              </span>
+              {getIsNewLineSymbolChanged() === NewLineSymbol.NEWLINE && (
+                <span
+                  data-no-newline-at-end-of-file-symbol
+                  class={props.enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
+                  style={{
+                    width: `var(${diffFontSizeName})`,
+                    height: `var(${diffFontSizeName})`,
+                  }}
+                >
+                  <DiffNoNewLine />
+                </span>
+              )}
+            </span>
+          }
+        >
+          <span class="diff-line-syntax-raw">
+            {/* eslint-disable-next-line solid/no-innerhtml */}
+            <span data-template innerHTML={props.diffLine?.syntaxTemplate} />
+            {getIsNewLineSymbolChanged() === NewLineSymbol.NEWLINE && (
+              <span
+                data-no-newline-at-end-of-file-symbol
+                class={props.enableWrap ? "block !text-red-500" : "inline-block align-middle !text-red-500"}
+                style={{
+                  width: `var(${diffFontSizeName})`,
+                  height: `var(${diffFontSizeName})`,
+                }}
+              >
+                <DiffNoNewLine />
+              </span>
+            )}
+          </span>
+        </Show>
+      </Show>
+    </Show>
+  );
+};
+
+export const DiffContent = (props: {
+  rawLine: string;
+  plainLine?: File["plainFile"][number];
+  syntaxLine?: File["syntaxFile"][number];
+  diffLine?: DiffLine;
+  diffFile: DiffFile;
+  enableWrap: boolean;
+  enableHighlight: boolean;
+}) => {
+  const getIsAdded = () => props.diffLine?.type === DiffLineType.Add;
+
+  const getIsDelete = () => props.diffLine?.type === DiffLineType.Delete;
+
+  const getIsMaxLineLengthToIgnoreSyntax = () =>
+    props.syntaxLine?.nodeList ? props.syntaxLine?.nodeList?.length > 150 : false;
+
+  const getIsEnableTemplate = () => props.diffFile.getIsEnableTemplate?.() ?? true;
+
+  return (
+    <div
+      class="diff-line-content-item pl-[2.0em]"
+      style={{
+        "white-space": props.enableWrap ? "pre-wrap" : "pre",
+        "word-break": props.enableWrap ? "break-all" : "initial",
+      }}
+    >
+      <span
+        data-operator={getIsAdded() ? "+" : getIsDelete() ? "-" : undefined}
+        class="diff-line-content-operator ml-[-1.5em] inline-block w-[1.5em] select-none indent-[0.2em]"
+      >
+        {getIsAdded() ? "+" : getIsDelete() ? "-" : " "}
+      </span>
+      {props.enableHighlight && props.syntaxLine && !getIsMaxLineLengthToIgnoreSyntax() ? (
+        <DiffSyntax
+          operator={getIsAdded() ? "add" : getIsDelete() ? "del" : undefined}
+          rawLine={props.rawLine}
+          diffLine={props.diffLine}
+          syntaxLine={props.syntaxLine}
+          enableWrap={props.enableWrap}
+          enableTemplate={getIsEnableTemplate()}
+        />
+      ) : (
+        <DiffString
+          operator={getIsAdded() ? "add" : getIsDelete() ? "del" : undefined}
+          rawLine={props.rawLine}
+          diffLine={props.diffLine}
+          plainLine={props.plainLine}
+          enableWrap={props.enableWrap}
+          enableTemplate={getIsEnableTemplate()}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/packages/solid/src/components/DiffExpand.tsx b/packages/solid/src/components/DiffExpand.tsx
new file mode 100644
index 0000000..b2576d7
--- /dev/null
+++ b/packages/solid/src/components/DiffExpand.tsx
@@ -0,0 +1,23 @@
+export const ExpandDown = (props: { class: string }) => {
+  return (
+    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" class={props.class}>
+      <path d="m8.177 14.323 2.896-2.896a.25.25 0 0 0-.177-.427H8.75V7.764a.75.75 0 1 0-1.5 0V11H5.104a.25.25 0 0 0-.177.427l2.896 2.896a.25.25 0 0 0 .354 0ZM2.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75ZM8.25 5a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 4.25a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5a.75.75 0 0 1 .75.75Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" />
+    </svg>
+  );
+};
+
+export const ExpandUp = (props: { class?: string }) => {
+  return (
+    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" class={props.class}>
+      <path d="M7.823 1.677 4.927 4.573A.25.25 0 0 0 5.104 5H7.25v3.236a.75.75 0 1 0 1.5 0V5h2.146a.25.25 0 0 0 .177-.427L8.177 1.677a.25.25 0 0 0-.354 0ZM13.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Zm-3.75.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM7.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5ZM4 11.75a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75ZM1.75 11a.75.75 0 0 0 0 1.5h.5a.75.75 0 0 0 0-1.5h-.5Z" />
+    </svg>
+  );
+};
+
+export const ExpandAll = (props: { class?: string }) => {
+  return (
+    <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" class={props.class}>
+      <path d="m8.177.677 2.896 2.896a.25.25 0 0 1-.177.427H8.75v1.25a.75.75 0 0 1-1.5 0V4H5.104a.25.25 0 0 1-.177-.427L7.823.677a.25.25 0 0 1 .354 0ZM7.25 10.75a.75.75 0 0 1 1.5 0V12h2.146a.25.25 0 0 1 .177.427l-2.896 2.896a.25.25 0 0 1-.354 0l-2.896-2.896A.25.25 0 0 1 5.104 12H7.25v-1.25Zm-5-2a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM6 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 6 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5ZM12 8a.75.75 0 0 1-.75.75h-.5a.75.75 0 0 1 0-1.5h.5A.75.75 0 0 1 12 8Zm2.25.75a.75.75 0 0 0 0-1.5h-.5a.75.75 0 0 0 0 1.5h.5Z" />
+    </svg>
+  );
+};
diff --git a/packages/solid/src/components/DiffNoNewLine.tsx b/packages/solid/src/components/DiffNoNewLine.tsx
new file mode 100644
index 0000000..fdd9ce1
--- /dev/null
+++ b/packages/solid/src/components/DiffNoNewLine.tsx
@@ -0,0 +1,8 @@
+export const DiffNoNewLine = () => {
+  return (
+    <svg aria-label="No newline at end of file" role="img" viewBox="0 0 16 16" version="1.1" fill="currentColor">
+      <path d="M4.25 7.25a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Z" />
+      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z" />
+    </svg>
+  );
+};
diff --git a/packages/solid/src/components/DiffSplitContentLineWrap.tsx b/packages/solid/src/components/DiffSplitContentLineWrap.tsx
new file mode 100644
index 0000000..74963c0
--- /dev/null
+++ b/packages/solid/src/components/DiffSplitContentLineWrap.tsx
@@ -0,0 +1,208 @@
+import { checkDiffLineIncludeChange, DiffLineType, SplitSide, type DiffFile } from "@git-diff-view/core";
+import {
+  borderColorName,
+  emptyBGName,
+  expandLineNumberColorName,
+  getContentBG,
+  getLineNumberBG,
+  plainLineNumberColorName,
+} from "@git-diff-view/utils";
+import { createEffect, createSignal, onCleanup, Show } from "solid-js";
+
+import { useEnableAddWidget, useEnableHighlight, useOnAddWidgetClick } from "../hooks";
+
+import { DiffSplitAddWidget } from "./DiffAddWidget";
+import { DiffContent } from "./DiffContent";
+import { useDiffWidgetContext } from "./DiffWidgetContext";
+
+export const DiffSplitContentLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+  const [_, setWidget] = useDiffWidgetContext() || [];
+
+  const enableAddWidget = useEnableAddWidget();
+
+  const enableHighlight = useEnableHighlight();
+
+  const onAddWidgetClick = useOnAddWidgetClick();
+
+  const [oldLine, setOldLine] = createSignal(props.diffFile.getSplitLeftLine(props.index));
+
+  const [newLine, setNewLine] = createSignal(props.diffFile.getSplitRightLine(props.index));
+
+  const [oldSyntaxLine, setOldSyntaxLine] = createSignal(props.diffFile.getOldSyntaxLine(oldLine()?.lineNumber || 0));
+
+  const [newSyntaxLine, setNewSyntaxLine] = createSignal(props.diffFile.getNewSyntaxLine(newLine()?.lineNumber || 0));
+
+  const [oldPlainLine, setOldPlainLine] = createSignal(props.diffFile.getOldPlainLine(oldLine()?.lineNumber || 0));
+
+  const [newPlainLine, setNewPlainLine] = createSignal(props.diffFile.getNewPlainLine(newLine()?.lineNumber || 0));
+
+  const [hasDiff, setHasDiff] = createSignal(!!oldLine()?.diff || !!newLine()?.diff);
+
+  const [hasChange, setHasChange] = createSignal(
+    checkDiffLineIncludeChange(oldLine().diff) || checkDiffLineIncludeChange(newLine().diff)
+  );
+
+  const [hasHidden, setHasHidden] = createSignal(oldLine()?.isHidden && newLine()?.isHidden);
+
+  const [oldLineIsDelete, setOldLineIsDelete] = createSignal(oldLine()?.diff?.type === DiffLineType.Delete);
+
+  const [newLineIsAdded, setNewLineIsAdded] = createSignal(newLine()?.diff?.type === DiffLineType.Add);
+
+  createEffect(() => {
+    const init = () => {
+      setOldLine(props.diffFile.getSplitLeftLine(props.index));
+      setNewLine(props.diffFile.getSplitRightLine(props.index));
+      setOldSyntaxLine(props.diffFile.getOldSyntaxLine(oldLine()?.lineNumber || 0));
+      setNewSyntaxLine(props.diffFile.getNewSyntaxLine(newLine()?.lineNumber || 0));
+      setOldPlainLine(props.diffFile.getOldPlainLine(oldLine()?.lineNumber || 0));
+      setNewPlainLine(props.diffFile.getNewPlainLine(newLine()?.lineNumber || 0));
+      setHasDiff(!!oldLine()?.diff || !!newLine()?.diff);
+      setHasChange(checkDiffLineIncludeChange(oldLine().diff) || checkDiffLineIncludeChange(newLine().diff));
+      setHasHidden(oldLine()?.isHidden && newLine()?.isHidden);
+      setOldLineIsDelete(oldLine()?.diff?.type === DiffLineType.Delete);
+      setNewLineIsAdded(newLine()?.diff?.type === DiffLineType.Add);
+    };
+
+    init();
+
+    const cb = props.diffFile.subscribe(init);
+
+    onCleanup(cb);
+  });
+
+  const onOpenAddWidget = (lineNumber: number, side: SplitSide) => setWidget?.({ side: side, lineNumber: lineNumber });
+
+  return (
+    <Show when={!hasHidden()}>
+      <tr data-line={props.lineNumber} data-state={hasDiff() ? "diff" : "plain"} class="diff-line">
+        {oldLine().lineNumber ? (
+          <>
+            <td
+              class="diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top"
+              style={{
+                "background-color": getLineNumberBG(false, oldLineIsDelete(), hasDiff()),
+                color: `var(${hasDiff() ? plainLineNumberColorName : expandLineNumberColorName})`,
+              }}
+            >
+              {hasDiff() && enableAddWidget() && (
+                <DiffSplitAddWidget
+                  index={props.index}
+                  lineNumber={oldLine().lineNumber || 0}
+                  side={SplitSide.old}
+                  diffFile={props.diffFile}
+                  onWidgetClick={onAddWidgetClick}
+                  class="absolute left-[100%] z-[1] translate-x-[-50%]"
+                  onOpenAddWidget={onOpenAddWidget}
+                />
+              )}
+              <span data-line-num={oldLine().lineNumber} style={{ opacity: hasChange() ? undefined : 0.5 }}>
+                {oldLine().lineNumber}
+              </span>
+            </td>
+            <td
+              class="diff-line-old-content group relative pr-[10px] align-top"
+              style={{ "background-color": getContentBG(false, oldLineIsDelete(), hasDiff()) }}
+              data-side={SplitSide[SplitSide.old]}
+            >
+              {hasDiff() && enableAddWidget() && (
+                <DiffSplitAddWidget
+                  index={props.index}
+                  lineNumber={oldLine().lineNumber || 0}
+                  side={SplitSide.old}
+                  diffFile={props.diffFile}
+                  onWidgetClick={onAddWidgetClick}
+                  class="absolute right-[100%] z-[1] translate-x-[50%]"
+                  onOpenAddWidget={onOpenAddWidget}
+                />
+              )}
+              <DiffContent
+                enableWrap={true}
+                diffFile={props.diffFile}
+                rawLine={oldLine().value || ""}
+                diffLine={oldLine().diff}
+                plainLine={oldPlainLine()}
+                syntaxLine={oldSyntaxLine()}
+                enableHighlight={!!enableHighlight()}
+              />
+            </td>
+          </>
+        ) : (
+          <td
+            class="diff-line-old-placeholder select-none"
+            style={{ "background-color": `var(${emptyBGName})` }}
+            colspan={2}
+          >
+            <span>&ensp;</span>
+          </td>
+        )}
+        {newLine().lineNumber ? (
+          <>
+            <td
+              class="diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] pl-[10px] pr-[10px] text-right align-top"
+              style={{
+                "background-color": getLineNumberBG(newLineIsAdded(), false, hasDiff()),
+                color: `var(${hasDiff() ? plainLineNumberColorName : expandLineNumberColorName})`,
+                "border-left-color": `var(${borderColorName})`,
+                "border-left-style": "solid",
+              }}
+            >
+              {hasDiff() && enableAddWidget() && (
+                <DiffSplitAddWidget
+                  index={props.index}
+                  lineNumber={newLine().lineNumber || 0}
+                  side={SplitSide.new}
+                  diffFile={props.diffFile}
+                  // TODO  test
+                  onWidgetClick={onAddWidgetClick}
+                  class="absolute left-[100%] z-[1] translate-x-[-50%]"
+                  onOpenAddWidget={onOpenAddWidget}
+                />
+              )}
+              <span data-line-num={newLine().lineNumber} style={{ opacity: hasChange() ? undefined : 0.5 }}>
+                {newLine().lineNumber}
+              </span>
+            </td>
+            <td
+              class="diff-line-new-content group relative pr-[10px] align-top"
+              style={{ "background-color": getContentBG(newLineIsAdded(), false, hasDiff()) }}
+              data-side={SplitSide[SplitSide.new]}
+            >
+              {hasDiff() && enableAddWidget() && (
+                <DiffSplitAddWidget
+                  index={props.index}
+                  lineNumber={newLine().lineNumber || 0}
+                  side={SplitSide.new}
+                  diffFile={props.diffFile}
+                  onWidgetClick={onAddWidgetClick}
+                  class="absolute right-[100%] z-[1] translate-x-[50%]"
+                  onOpenAddWidget={onOpenAddWidget}
+                />
+              )}
+              <DiffContent
+                enableWrap={true}
+                diffFile={props.diffFile}
+                rawLine={newLine().value || ""}
+                diffLine={newLine().diff}
+                plainLine={newPlainLine()}
+                syntaxLine={newSyntaxLine()}
+                enableHighlight={!!enableHighlight()}
+              />
+            </td>
+          </>
+        ) : (
+          <td
+            class="diff-line-new-placeholder select-none border-l-[1px]"
+            style={{
+              "background-color": `var(${emptyBGName})`,
+              "border-left-color": `var(${borderColorName})`,
+              "border-left-style": "solid",
+            }}
+            colspan={2}
+          >
+            <span>&ensp;</span>
+          </td>
+        )}
+      </tr>
+    </Show>
+  );
+};
diff --git a/packages/solid/src/components/DiffSplitExtendLineWrap.tsx b/packages/solid/src/components/DiffSplitExtendLineWrap.tsx
new file mode 100644
index 0000000..1d41c3e
--- /dev/null
+++ b/packages/solid/src/components/DiffSplitExtendLineWrap.tsx
@@ -0,0 +1,108 @@
+import { SplitSide, type DiffFile } from "@git-diff-view/core";
+import { borderColorName, emptyBGName } from "@git-diff-view/utils";
+import { createEffect, createSignal, onCleanup, Show } from "solid-js";
+
+import { useExtendData, useRenderExtend } from "../hooks";
+
+export const DiffSplitExtendLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+  const extendData = useExtendData();
+
+  const renderExtend = useRenderExtend();
+
+  const [oldLine, setOldLine] = createSignal(props.diffFile.getSplitLeftLine(props.index));
+
+  const [newLine, setNewLine] = createSignal(props.diffFile.getSplitRightLine(props.index));
+
+  const [enableExpand, setEnableExpand] = createSignal(props.diffFile.getExpandEnabled());
+
+  const [oldLineExtend, setOldLineExtend] = createSignal(extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
+
+  const [newLineExtend, setNewLineExtend] = createSignal(extendData()?.newFile?.[newLine()?.lineNumber || ""]);
+
+  const checkIsShow = () => {
+    const oldExtend = oldLineExtend();
+    const newExtend = newLineExtend();
+    const oldLineData = oldLine();
+    const newLineData = newLine();
+    const enableExpandValue = enableExpand();
+    const renderExtendValue = renderExtend();
+
+    return (
+      (oldExtend || newExtend) &&
+      ((!oldLineData?.isHidden && !newLineData?.isHidden) || enableExpandValue) &&
+      renderExtendValue
+    );
+  };
+
+  const [currentIsShow, setCurrentIsShow] = createSignal(!!checkIsShow());
+
+  createEffect(() => {
+    const init = () => {
+      setOldLine(props.diffFile.getSplitLeftLine(props.index));
+      setNewLine(props.diffFile.getSplitRightLine(props.index));
+      setEnableExpand(props.diffFile.getExpandEnabled());
+      setOldLineExtend(extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
+      setNewLineExtend(extendData()?.newFile?.[newLine()?.lineNumber || ""]);
+      setCurrentIsShow(!!checkIsShow());
+    };
+
+    init();
+
+    const cb = props.diffFile.subscribe(init);
+
+    onCleanup(cb);
+  });
+
+  return (
+    <Show when={currentIsShow()}>
+      <tr data-line={`${props.lineNumber}-extend`} data-state="extend" class="diff-line diff-line-extend">
+        {renderExtend() ? (
+          <td class="diff-line-extend-old-content p-0" colspan={2}>
+            <div class="diff-line-extend-wrapper">
+              {renderExtend()?.({
+                diffFile: props.diffFile,
+                side: SplitSide.old,
+                lineNumber: oldLine()?.lineNumber || 0,
+                data: oldLineExtend()?.data,
+                onUpdate: props.diffFile.notifyAll,
+              })}
+            </div>
+          </td>
+        ) : (
+          <td
+            class="diff-line-extend-old-placeholder select-none p-0"
+            style={{ "background-color": `var(${emptyBGName})` }}
+            colspan={2}
+          />
+        )}
+        {renderExtend() ? (
+          <td
+            class="diff-line-extend-new-content border-l-[1px] p-0"
+            colspan={2}
+            style={{ "border-left-color": `var(${borderColorName})`, "border-left-style": "solid" }}
+          >
+            <div class="diff-line-extend-wrapper">
+              {renderExtend()?.({
+                diffFile: props.diffFile,
+                side: SplitSide.new,
+                lineNumber: newLine()?.lineNumber || 0,
+                data: newLineExtend()?.data,
+                onUpdate: props.diffFile.notifyAll,
+              })}
+            </div>
+          </td>
+        ) : (
+          <td
+            class="diff-line-extend-new-placeholder select-none border-l-[1px] p-0"
+            style={{
+              "background-color": `var(${emptyBGName})`,
+              "border-left-color": `var(${borderColorName})`,
+              "border-left-style": "solid",
+            }}
+            colspan={2}
+          />
+        )}
+      </tr>
+    </Show>
+  );
+};
diff --git a/packages/solid/src/components/DiffSplitHunkLineWrap.tsx b/packages/solid/src/components/DiffSplitHunkLineWrap.tsx
new file mode 100644
index 0000000..96de9d8
--- /dev/null
+++ b/packages/solid/src/components/DiffSplitHunkLineWrap.tsx
@@ -0,0 +1,370 @@
+import { composeLen, type DiffFile } from "@git-diff-view/core";
+import {
+  borderColorName,
+  DiffModeEnum,
+  hunkContentBGName,
+  hunkContentColorName,
+  hunkLineNumberBGName,
+  plainLineNumberColorName,
+} from "@git-diff-view/utils";
+import { createEffect, createMemo, createSignal, Show } from "solid-js";
+
+import { useMode } from "../hooks";
+
+import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
+
+const DiffSplitHunkLineGitHub = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+  const [currentHunk, setCurrentHunk] = createSignal(props.diffFile.getSplitHunkLine(props.index));
+
+  const [enableExpand, setEnableExpand] = createSignal(props.diffFile.getExpandEnabled());
+
+  const [couldExpand, setCouldExpand] = createSignal(enableExpand() && currentHunk()?.splitInfo);
+
+  const checkCurrentShowExpandAll = () => {
+    const hunk = currentHunk();
+    return hunk && hunk.splitInfo && hunk.splitInfo.endHiddenIndex - hunk.splitInfo.startHiddenIndex >= composeLen;
+  };
+
+  const [currentShowExpandAll, setCurrentShowExpandAll] = createSignal(checkCurrentShowExpandAll());
+
+  const checkCurrentIsShow = () => {
+    const hunk = currentHunk();
+    return hunk && hunk.splitInfo && hunk.splitInfo.startHiddenIndex < hunk.splitInfo.endHiddenIndex;
+  };
+
+  const [currentIsShow, setCurrentIsShow] = createSignal(checkCurrentIsShow());
+
+  const currentIsFirstLine = createMemo(() => {
+    const hunk = currentHunk();
+    return hunk && hunk.isFirst;
+  });
+
+  const currentIsPureHunk = createMemo(() => {
+    const hunk = currentHunk();
+    return hunk && !hunk.splitInfo;
+  });
+
+  const currentIsLastLine = createMemo(() => {
+    const hunk = currentHunk();
+    return hunk && hunk.isLast;
+  });
+
+  createEffect(() => {
+    const init = () => {
+      setCurrentHunk(props.diffFile.getSplitHunkLine(props.index));
+      setEnableExpand(props.diffFile.getExpandEnabled());
+      setCouldExpand(enableExpand() && currentHunk()?.splitInfo);
+      setCurrentShowExpandAll(checkCurrentShowExpandAll());
+      setCurrentIsShow(checkCurrentIsShow());
+    };
+
+    init();
+
+    const cb = props.diffFile.subscribe(init);
+
+    return () => {
+      cb();
+    };
+  });
+
+  return (
+    <Show when={currentIsShow() || currentIsPureHunk()}>
+      <tr data-line={`${props.lineNumber}-hunk`} data-state="hunk" class="diff-line diff-line-hunk">
+        <td
+          class="diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]"
+          style={{
+            "background-color": `var(${hunkLineNumberBGName})`,
+            color: `var(${plainLineNumberColorName})`,
+          }}
+        >
+          {couldExpand() ? (
+            currentIsFirstLine() ? (
+              <button
+                class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                title="Expand Up"
+                data-title="Expand Up"
+                onClick={() => props.diffFile.onSplitHunkExpand("up", props.index)}
+              >
+                <ExpandUp class="fill-current" />
+              </button>
+            ) : currentIsLastLine() ? (
+              <button
+                class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                title="Expand Down"
+                data-title="Expand Down"
+                onClick={() => props.diffFile.onSplitHunkExpand("down", props.index)}
+              >
+                <ExpandDown class="fill-current" />
+              </button>
+            ) : currentShowExpandAll() ? (
+              <button
+                class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                title="Expand All"
+                data-title="Expand All"
+                onClick={() => props.diffFile.onSplitHunkExpand("all", props.index)}
+              >
+                <ExpandAll class="fill-current" />
+              </button>
+            ) : (
+              <>
+                <button
+                  class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                  title="Expand Down"
+                  data-title="Expand Down"
+                  onClick={() => props.diffFile.onSplitHunkExpand("down", props.index)}
+                >
+                  <ExpandDown class="fill-current" />
+                </button>
+                <button
+                  class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                  title="Expand Up"
+                  data-title="Expand Up"
+                  onClick={() => props.diffFile.onSplitHunkExpand("up", props.index)}
+                >
+                  <ExpandUp class="fill-current" />
+                </button>
+              </>
+            )
+          ) : (
+            <div class="min-h-[28px]">&ensp;</div>
+          )}
+        </td>
+        <td
+          class="diff-line-hunk-content pr-[10px] align-middle"
+          style={{ "background-color": `var(${hunkContentBGName})` }}
+          colspan={3}
+        >
+          <div
+            class="pl-[1.5em]"
+            style={{
+              color: `var(${hunkContentColorName})`,
+            }}
+          >
+            {currentHunk().splitInfo?.plainText || currentHunk().text}
+          </div>
+        </td>
+      </tr>
+    </Show>
+  );
+};
+
+const DiffSplitHunkLineGitLab = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+  const [currentHunk, setCurrentHunk] = createSignal(props.diffFile.getSplitHunkLine(props.index));
+
+  const [enableExpand, setEnableExpand] = createSignal(props.diffFile.getExpandEnabled());
+
+  const [couldExpand, setCouldExpand] = createSignal(enableExpand() && currentHunk()?.splitInfo);
+
+  const checkCurrentShowExpandAll = () => {
+    const hunk = currentHunk();
+    return hunk && hunk.splitInfo && hunk.splitInfo.endHiddenIndex - hunk.splitInfo.startHiddenIndex >= composeLen;
+  };
+
+  const [currentShowExpandAll, setCurrentShowExpandAll] = createSignal(checkCurrentShowExpandAll());
+
+  const checkCurrentIsShow = () => {
+    const hunk = currentHunk();
+    return hunk && hunk.splitInfo && hunk.splitInfo.startHiddenIndex < hunk.splitInfo.endHiddenIndex;
+  };
+
+  const [currentIsShow, setCurrentIsShow] = createSignal(checkCurrentIsShow());
+
+  const currentIsFirstLine = createMemo(() => {
+    const hunk = currentHunk();
+    return hunk && hunk.isFirst;
+  });
+
+  const currentIsPureHunk = createMemo(() => {
+    const hunk = currentHunk();
+    return hunk && !hunk.splitInfo;
+  });
+
+  const currentIsLastLine = createMemo(() => {
+    const hunk = currentHunk();
+    return hunk && hunk.isLast;
+  });
+
+  createEffect(() => {
+    const init = () => {
+      setCurrentHunk(props.diffFile.getSplitHunkLine(props.index));
+      setEnableExpand(props.diffFile.getExpandEnabled());
+      setCouldExpand(enableExpand() && currentHunk()?.splitInfo);
+      setCurrentShowExpandAll(checkCurrentShowExpandAll());
+      setCurrentIsShow(checkCurrentIsShow());
+    };
+
+    init();
+
+    const cb = props.diffFile.subscribe(init);
+
+    return () => {
+      cb();
+    };
+  });
+
+  return (
+    <Show when={currentIsShow() || currentIsPureHunk()}>
+      <tr data-line={`${props.lineNumber}-hunk`} data-state="hunk" class="diff-line diff-line-hunk">
+        <td
+          class="diff-line-hunk-action relative w-[1%] min-w-[40px] select-none p-[1px]"
+          style={{
+            "background-color": `var(${hunkLineNumberBGName})`,
+            color: `var(${plainLineNumberColorName})`,
+          }}
+        >
+          {couldExpand() ? (
+            currentIsFirstLine() ? (
+              <button
+                class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                title="Expand Up"
+                data-title="Expand Up"
+                onClick={() => props.diffFile.onSplitHunkExpand("up", props.index)}
+              >
+                <ExpandUp class="fill-current" />
+              </button>
+            ) : currentIsLastLine() ? (
+              <button
+                class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                title="Expand Down"
+                data-title="Expand Down"
+                onClick={() => props.diffFile.onSplitHunkExpand("down", props.index)}
+              >
+                <ExpandDown class="fill-current" />
+              </button>
+            ) : currentShowExpandAll() ? (
+              <button
+                class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                title="Expand All"
+                data-title="Expand All"
+                onClick={() => props.diffFile.onSplitHunkExpand("all", props.index)}
+              >
+                <ExpandAll class="fill-current" />
+              </button>
+            ) : (
+              <>
+                <button
+                  class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                  title="Expand Down"
+                  data-title="Expand Down"
+                  onClick={() => props.diffFile.onSplitHunkExpand("down", props.index)}
+                >
+                  <ExpandDown class="fill-current" />
+                </button>
+                <button
+                  class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                  title="Expand Up"
+                  data-title="Expand Up"
+                  onClick={() => props.diffFile.onSplitHunkExpand("up", props.index)}
+                >
+                  <ExpandUp class="fill-current" />
+                </button>
+              </>
+            )
+          ) : (
+            <div class="min-h-[28px]">&ensp;</div>
+          )}
+        </td>
+        <td
+          class="diff-line-hunk-content pr-[10px] align-middle"
+          style={{ "background-color": `var(${hunkContentBGName})` }}
+        >
+          <div
+            class="pl-[1.5em]"
+            style={{
+              color: `var(${hunkContentColorName})`,
+            }}
+          >
+            {currentHunk().splitInfo?.plainText || currentHunk().text}
+          </div>
+        </td>
+        <td
+          class="diff-line-hunk-action relative z-[1] w-[1%] min-w-[40px] select-none border-l-[1px] p-[1px]"
+          style={{
+            "background-color": `var(${hunkLineNumberBGName})`,
+            color: `var(${plainLineNumberColorName})`,
+            "border-left-color": `var(${borderColorName})`,
+            "border-left-style": "solid",
+          }}
+        >
+          {couldExpand() ? (
+            currentIsFirstLine() ? (
+              <button
+                class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                title="Expand Up"
+                data-title="Expand Up"
+                onClick={() => props.diffFile.onSplitHunkExpand("up", props.index)}
+              >
+                <ExpandUp class="fill-current" />
+              </button>
+            ) : currentIsLastLine() ? (
+              <button
+                class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                title="Expand Down"
+                data-title="Expand Down"
+                onClick={() => props.diffFile.onSplitHunkExpand("down", props.index)}
+              >
+                <ExpandDown class="fill-current" />
+              </button>
+            ) : currentShowExpandAll() ? (
+              <button
+                class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[6px]"
+                title="Expand All"
+                data-title="Expand All"
+                onClick={() => props.diffFile.onSplitHunkExpand("all", props.index)}
+              >
+                <ExpandAll class="fill-current" />
+              </button>
+            ) : (
+              <>
+                <button
+                  class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                  title="Expand Down"
+                  data-title="Expand Down"
+                  onClick={() => props.diffFile.onSplitHunkExpand("down", props.index)}
+                >
+                  <ExpandDown class="fill-current" />
+                </button>
+                <button
+                  class="diff-widget-tooltip flex w-full cursor-pointer items-center justify-center rounded-[2px] py-[2px]"
+                  title="Expand Up"
+                  data-title="Expand Up"
+                  onClick={() => props.diffFile.onSplitHunkExpand("up", props.index)}
+                >
+                  <ExpandUp class="fill-current" />
+                </button>
+              </>
+            )
+          ) : (
+            <div class="min-h-[28px]">&ensp;</div>
+          )}
+        </td>
+        <td
+          class="diff-line-hunk-content relative pr-[10px] align-middle"
+          style={{ "background-color": `var(${hunkContentBGName})` }}
+        >
+          <div
+            class="pl-[1.5em]"
+            style={{
+              color: `var(${hunkContentColorName})`,
+            }}
+          >
+            {currentHunk().splitInfo?.plainText || currentHunk().text}
+          </div>
+        </td>
+      </tr>
+    </Show>
+  );
+};
+
+export const DiffSplitHunkLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+  const mode = useMode();
+
+  return (
+    <Show
+      when={mode() === DiffModeEnum.SplitGitHub || mode() === DiffModeEnum.Split}
+      fallback={<DiffSplitHunkLineGitLab {...props} />}
+    >
+      <DiffSplitHunkLineGitHub index={props.index} diffFile={props.diffFile} lineNumber={props.lineNumber} />
+    </Show>
+  );
+};
diff --git a/packages/solid/src/components/DiffSplitView.tsx b/packages/solid/src/components/DiffSplitView.tsx
new file mode 100644
index 0000000..02486da
--- /dev/null
+++ b/packages/solid/src/components/DiffSplitView.tsx
@@ -0,0 +1,18 @@
+import { Show } from "solid-js";
+
+import { useEnableWrap } from "../hooks";
+
+import { DiffSplitViewNormal } from "./DiffSplitViewNormal";
+import { DiffSplitViewWrap } from "./DiffSplitViewWrap";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+export const DiffSplitView = (props: { diffFile: DiffFile }) => {
+  const enableWrap = useEnableWrap();
+
+  return (
+    <Show when={enableWrap()} fallback={<DiffSplitViewNormal diffFile={props.diffFile} />}>
+      <DiffSplitViewWrap diffFile={props.diffFile} />
+    </Show>
+  );
+};
diff --git a/packages/solid/src/components/DiffSplitViewNormal.tsx b/packages/solid/src/components/DiffSplitViewNormal.tsx
new file mode 100644
index 0000000..6261570
--- /dev/null
+++ b/packages/solid/src/components/DiffSplitViewNormal.tsx
@@ -0,0 +1,5 @@
+import type { DiffFile } from "@git-diff-view/core";
+
+export const DiffSplitViewNormal = (props: { diffFile: DiffFile }) => {
+  return <div>12</div>;
+};
diff --git a/packages/solid/src/components/DiffSplitViewWrap.tsx b/packages/solid/src/components/DiffSplitViewWrap.tsx
new file mode 100644
index 0000000..bd9d411
--- /dev/null
+++ b/packages/solid/src/components/DiffSplitViewWrap.tsx
@@ -0,0 +1,128 @@
+import { getSplitContentLines, SplitSide } from "@git-diff-view/core";
+import { diffAsideWidthName, diffFontSizeName, removeAllSelection } from "@git-diff-view/utils";
+import { createEffect, createMemo, createSignal, onCleanup, For } from "solid-js";
+
+import { useFontSize, useTextWidth } from "../hooks";
+
+import type { DiffFile } from "@git-diff-view/core";
+
+const Style = (props: { splitSideInfo: { side?: SplitSide }; id: string }) => {
+  return (
+    <style data-select-style>
+      {props.splitSideInfo.side === SplitSide.old
+        ? `#${props.id} [data-side="${SplitSide[SplitSide.new]}"] {user-select: none} \n#${props.id} [data-state="extend"] {user-select: none} \n#${props.id} [data-state="hunk"] {user-select: none} \n#${props.id} [data-state="widget"] {user-select: none}`
+        : props.splitSideInfo.side === SplitSide.new
+          ? `#${props.id} [data-side="${SplitSide[SplitSide.old]}"] {user-select: none} \n#${props.id} [data-state="extend"] {user-select: none} \n#${props.id} [data-state="hunk"] {user-select: none} \n#${props.id} [data-state="widget"] {user-select: none}`
+          : ""}
+    </style>
+  );
+};
+
+export const DiffSplitViewWrap = (props: { diffFile: DiffFile }) => {
+  const [lines, setLines] = createSignal(getSplitContentLines(props.diffFile));
+
+  const [maxText, setMaxText] = createSignal(props.diffFile.splitLineLength.toString());
+
+  const [splitSideInfo, setSplitInfo] = createSignal<{ side?: SplitSide }>({ side: undefined });
+
+  const fontSize = useFontSize();
+
+  const font = createMemo(() => ({ fontSize: `${fontSize() || 14}px`, fontFamily: "Menlo, Consolas, monospace" }));
+
+  createEffect(() => {
+    const init = () => {
+      setLines(getSplitContentLines(props.diffFile));
+      setMaxText(props.diffFile.splitLineLength.toString());
+    };
+
+    init();
+
+    const cb = props.diffFile.subscribe(init);
+
+    onCleanup(cb);
+  });
+
+  const onMouseDown = (e: MouseEvent) => {
+    let ele = e.target;
+
+    // need remove all the selection
+    if (ele && ele instanceof HTMLElement && ele.nodeName === "BUTTON") {
+      removeAllSelection();
+      return;
+    }
+
+    while (ele && ele instanceof HTMLElement) {
+      const state = ele.getAttribute("data-state");
+      const side = ele.getAttribute("data-side");
+      if (side) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        setSplitInfo({ side: SplitSide[side] });
+        removeAllSelection();
+      }
+      if (state) {
+        if (state === "extend" || state === "hunk" || state === "widget") {
+          setSplitInfo({ side: undefined });
+          removeAllSelection();
+          return;
+        } else {
+          return;
+        }
+      }
+
+      ele = ele.parentElement;
+    }
+  };
+
+  const width = useTextWidth({ text: maxText, font });
+
+  const memoWidth = createMemo(() => Math.max(40, width() + 25));
+
+  return (
+    <div class="split-diff-view split-diff-view-warp w-full">
+      <div
+        class="diff-table-wrapper w-full"
+        style={{
+          [diffAsideWidthName]: `${Math.round(memoWidth())}px`,
+          "font-family": "Menlo, Consolas, monospace",
+          "font-size": `var(${diffFontSizeName})`,
+        }}
+      >
+        <Style splitSideInfo={splitSideInfo()} id={`diff-root${props.diffFile.getId()}`} />
+        <table class="diff-table w-full table-fixed border-collapse border-spacing-0">
+          <colgroup>
+            <col class="diff-table-old-num-col" width={Math.round(memoWidth())} />
+            <col class="diff-table-old-content-col" />
+            <col class="diff-table-new-num-col" width={Math.round(memoWidth())} />
+            <col class="diff-table-new-content-col" />
+          </colgroup>
+          <thead class="hidden">
+            <tr>
+              <th scope="col">old line number</th>
+              <th scope="col">old line content</th>
+              <th scope="col">new line number</th>
+              <th scope="col">new line content</th>
+            </tr>
+          </thead>
+          <tbody class="diff-table-body leading-[1.4]" onMouseDown={onMouseDown}>
+            <For each={lines()}>
+              {(item) => (
+                <>
+                  <DiffSplitHunkLine index={item.index} lineNumber={item.lineNumber} diffFile={props.diffFile} />
+                  <DiffSplitContentLine index={item.index} lineNumber={item.lineNumber} diffFile={props.diffFile} />
+                  <DiffSplitWidgetLine index={item.index} lineNumber={item.lineNumber} diffFile={props.diffFile} />
+                  <DiffSplitExtendLine index={item.index} lineNumber={item.lineNumber} diffFile={props.diffFile} />
+                </>
+              )}
+            </For>
+            <DiffSplitHunkLine
+              index={props.diffFile.splitLineLength}
+              lineNumber={props.diffFile.splitLineLength}
+              diffFile={props.diffFile}
+            />
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/solid/src/components/DiffSplitWidgetLineWrap.tsx b/packages/solid/src/components/DiffSplitWidgetLineWrap.tsx
new file mode 100644
index 0000000..498795f
--- /dev/null
+++ b/packages/solid/src/components/DiffSplitWidgetLineWrap.tsx
@@ -0,0 +1,39 @@
+import { SplitSide, type DiffFile } from "@git-diff-view/core";
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+
+import { useRenderWidget } from "../hooks";
+
+import { useDiffWidgetContext } from "./DiffWidgetContext";
+
+export const DiffSplitWidgetLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => {
+  const renderWidget = useRenderWidget();
+
+  const [widget, setWidget] = useDiffWidgetContext() || [];
+
+  const [oldLine, setOldLine] = createSignal(props.diffFile.getSplitLeftLine(props.index));
+
+  const [newLine, setNewLine] = createSignal(props.diffFile.getSplitRightLine(props.index));
+
+  const oldLineWidget = createMemo(
+    () => oldLine().lineNumber && widget?.()?.side === SplitSide.old && widget?.()?.lineNumber === oldLine().lineNumber
+  );
+
+  const newLineWidget = createMemo(
+    () => newLine().lineNumber && widget?.()?.side === SplitSide.new && widget?.()?.lineNumber === newLine().lineNumber
+  );
+
+  createEffect(() => {
+    const init = () => {
+      setOldLine(props.diffFile.getSplitLeftLine(props.index));
+      setNewLine(props.diffFile.getSplitRightLine(props.index));
+    };
+
+    init();
+
+    const cb = props.diffFile.subscribe(init);
+
+    onCleanup(cb);
+  });
+
+  const onCloseWidget = () => setWidget?.({});
+};
diff --git a/packages/solid/src/components/DiffUnifiedView.tsx b/packages/solid/src/components/DiffUnifiedView.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/packages/solid/src/components/DiffView.tsx b/packages/solid/src/components/DiffView.tsx
new file mode 100644
index 0000000..ea42aaa
--- /dev/null
+++ b/packages/solid/src/components/DiffView.tsx
@@ -0,0 +1,253 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+import { _cacheMap, DiffFile, SplitSide } from "@git-diff-view/core";
+import { diffFontSizeName, DiffModeEnum } from "@git-diff-view/utils";
+import { type JSXElement, type JSX, createSignal, createEffect, createMemo, onCleanup } from "solid-js";
+
+import { DiffViewContext } from "./DiffViewContext";
+import { DiffWidgetContext } from "./DiffWidgetContext";
+import { createDiffConfigStore } from "./tools";
+
+import type { DiffHighlighter, DiffHighlighterLang } from "@git-diff-view/core";
+
+_cacheMap.name = "@git-diff-view/solid";
+
+export { SplitSide, DiffModeEnum };
+
+export type DiffViewProps<T> = {
+  data?: {
+    oldFile?: { fileName?: string | null; fileLang?: DiffHighlighterLang | string | null; content?: string | null };
+    newFile?: { fileName?: string | null; fileLang?: DiffHighlighterLang | string | null; content?: string | null };
+    hunks: string[];
+  };
+  extendData?: { oldFile?: Record<string, { data: T } | undefined>; newFile?: Record<string, { data: T } | undefined> };
+  initialWidgetState?: { side: SplitSide; lineNumber: number };
+  diffFile?: DiffFile;
+  class?: string;
+  style?: JSX.CSSProperties;
+  registerHighlighter?: Omit<DiffHighlighter, "getHighlighterEngine">;
+  diffViewMode?: DiffModeEnum;
+  diffViewWrap?: boolean;
+  diffViewTheme?: "light" | "dark";
+  diffViewFontSize?: number;
+  diffViewHighlight?: boolean;
+  diffViewAddWidget?: boolean;
+  renderWidgetLine?: ({
+    diffFile,
+    side,
+    lineNumber,
+    onClose,
+  }: {
+    lineNumber: number;
+    side: SplitSide;
+    diffFile: DiffFile;
+    onClose: () => void;
+  }) => JSXElement;
+  renderExtendLine?: ({
+    diffFile,
+    side,
+    data,
+    lineNumber,
+    onUpdate,
+  }: {
+    lineNumber: number;
+    side: SplitSide;
+    data: T;
+    diffFile: DiffFile;
+    onUpdate: () => void;
+  }) => JSXElement;
+  onAddWidgetClick?: (lineNumber: number, side: SplitSide) => void;
+};
+
+type DiffViewProps_1<T> = Omit<DiffViewProps<T>, "data"> & {
+  data?: {
+    oldFile?: { fileName?: string | null; fileLang?: DiffHighlighterLang | null; content?: string | null };
+    newFile?: { fileName?: string | null; fileLang?: DiffHighlighterLang | null; content?: string | null };
+    hunks: string[];
+  };
+};
+
+type DiffViewProps_2<T> = Omit<DiffViewProps<T>, "data"> & {
+  data?: {
+    oldFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
+    newFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null };
+    hunks: string[];
+  };
+};
+
+const InternalDiffView = <T extends unknown>(props: DiffViewProps<T>) => {
+  const getInstance = () => {
+    let diffFile: DiffFile | null = null;
+    if (props.diffFile) {
+      diffFile = DiffFile.createInstance({});
+      diffFile._mergeFullBundle(props.diffFile._getFullBundle());
+    } else if (props.data) {
+      diffFile = new DiffFile(
+        props.data.oldFile?.fileName || "",
+        props.data.oldFile?.content || "",
+        props.data.newFile?.fileName || "",
+        props.data.newFile?.content || "",
+        props.data.hunks || [],
+        props.data.oldFile?.fileLang || "",
+        props.data.newFile?.fileLang || ""
+      );
+    }
+
+    onCleanup(() => diffFile?.clear?.());
+
+    return diffFile;
+  };
+
+  let wrapperRef: HTMLDivElement | undefined;
+
+  const diffFile = createMemo(getInstance);
+
+  const [isMounted, setIsMounted] = createSignal(false);
+
+  createEffect(() => {
+    setIsMounted(true);
+  });
+
+  const [widgetState, setWidgetState] = createSignal<{ side?: SplitSide; lineNumber?: number }>({
+    side: props.initialWidgetState?.side,
+    lineNumber: props.initialWidgetState?.lineNumber,
+  });
+
+  const reactiveHook = createDiffConfigStore(props, diffFile()?.getId() || "");
+
+  createEffect(() => {
+    const {
+      setId,
+      setEnableAddWidget,
+      setEnableHighlight,
+      setEnableWrap,
+      setExtendData,
+      setFontSize,
+      setIsIsMounted,
+      setMode,
+      setOnAddWidgetClick,
+      setRenderExtendLine,
+      setRenderWidgetLine,
+    } = reactiveHook.getReadonlyState();
+    const currentDiffFile = diffFile();
+
+    setId(currentDiffFile?.getId() || "");
+
+    setEnableAddWidget(!!props.diffViewAddWidget);
+
+    setEnableHighlight(!!props.diffViewHighlight);
+
+    setEnableWrap(!!props.diffViewWrap);
+
+    setFontSize(props.diffViewFontSize || 14);
+
+    setIsIsMounted(isMounted());
+
+    setMode(props.diffViewMode || DiffModeEnum.Split);
+
+    setOnAddWidgetClick({ current: props.onAddWidgetClick });
+
+    setRenderExtendLine(props.renderExtendLine);
+
+    setRenderWidgetLine(props.renderWidgetLine);
+
+    setExtendData(props.extendData);
+  });
+
+  createEffect(() => {
+    if (props.initialWidgetState) {
+      setWidgetState({
+        side: props.initialWidgetState.side,
+        lineNumber: props.initialWidgetState.lineNumber,
+      });
+    }
+  });
+
+  const initSubscribe = () => {
+    const mounted = isMounted();
+    const currentDiffFile = diffFile();
+    if (mounted && props.diffFile && currentDiffFile) {
+      props.diffFile._addClonedInstance(currentDiffFile);
+      onCleanup(() => props.diffFile?._delClonedInstance(currentDiffFile));
+    }
+  };
+
+  const initDiff = () => {
+    const mounted = isMounted();
+    const currentDiffFile = diffFile();
+    if (mounted && currentDiffFile) {
+      currentDiffFile.initTheme(props.diffViewTheme);
+      currentDiffFile.initRaw();
+      currentDiffFile.buildSplitDiffLines();
+      currentDiffFile.buildUnifiedDiffLines();
+    }
+  };
+
+  const initSyntax = () => {
+    const mounted = isMounted();
+    const currentDiffFile = diffFile();
+    if (mounted && currentDiffFile && props.diffViewHighlight) {
+      currentDiffFile.initSyntax({ registerHighlighter: props.registerHighlighter });
+      currentDiffFile.notifyAll();
+    }
+  };
+
+  const initAttribute = () => {
+    const mounted = isMounted();
+    const currentDiffFile = diffFile();
+    if (mounted && currentDiffFile && wrapperRef) {
+      const cb = currentDiffFile.subscribe(() => {
+        wrapperRef?.setAttribute("data-theme", currentDiffFile._getTheme() || "light");
+        wrapperRef?.setAttribute("data-highlighter", currentDiffFile._getHighlighterName());
+      });
+
+      onCleanup(() => cb());
+    }
+  };
+
+  createEffect(initSubscribe);
+
+  createEffect(initDiff);
+
+  createEffect(initSyntax);
+
+  createEffect(initAttribute);
+
+  onCleanup(() => reactiveHook.clear());
+
+  return (
+    <div
+      class="diff-tailwindcss-wrapper"
+      data-component="git-diff-view"
+      data-theme={diffFile()?._getTheme?.() || "light"}
+      data-version={__VERSION__}
+      data-highlighter={diffFile()?._getHighlighterName?.()}
+      ref={wrapperRef}
+    >
+      <DiffViewContext.Provider value={reactiveHook}>
+        <DiffWidgetContext.Provider value={[widgetState, setWidgetState]}>
+          <div class="diff-style-root" style={{ [diffFontSizeName]: (props.diffViewFontSize || 14) + "px" }}>
+            <div
+              id={isMounted() ? `diff-root${diffFile()?.getId()}` : undefined}
+              class={"diff-view-wrapper" + (props.class ? ` ${props.class}` : "")}
+              style={props.style}
+            >
+              {/* {!props.diffViewMode || props.diffViewMode & DiffModeEnum.Split ? (
+            <DiffSplitView key={DiffModeEnum.Split} diffFile={diffFile.value as DiffFile} />
+          ) : (
+            <DiffUnifiedView key={DiffModeEnum.Unified} diffFile={diffFile.value as DiffFile} />
+          )} */}
+            </div>
+          </div>
+        </DiffWidgetContext.Provider>
+      </DiffViewContext.Provider>
+    </div>
+  );
+};
+
+function SolidDiffView<T>(props: DiffViewProps_1<T>): JSXElement;
+function SolidDiffView<T>(props: DiffViewProps_2<T>): JSXElement;
+function SolidDiffView<T>(props: DiffViewProps<T>): JSXElement {
+  return <InternalDiffView {...props} />;
+}
+
+export const DiffView = SolidDiffView;
diff --git a/packages/solid/src/components/DiffViewContext.ts b/packages/solid/src/components/DiffViewContext.ts
new file mode 100644
index 0000000..96e388a
--- /dev/null
+++ b/packages/solid/src/components/DiffViewContext.ts
@@ -0,0 +1,7 @@
+import { createContext, useContext } from "solid-js";
+
+import type { createDiffConfigStore } from "./tools";
+
+export const DiffViewContext = createContext<ReturnType<typeof createDiffConfigStore>>();
+
+export const useDiffViewContext = () => useContext(DiffViewContext);
diff --git a/packages/solid/src/components/DiffWidgetContext.ts b/packages/solid/src/components/DiffWidgetContext.ts
new file mode 100644
index 0000000..7beaf70
--- /dev/null
+++ b/packages/solid/src/components/DiffWidgetContext.ts
@@ -0,0 +1,11 @@
+import { createContext, useContext } from "solid-js";
+
+import type { SplitSide } from "..";
+import type { Accessor, Setter } from "solid-js";
+
+export const DiffWidgetContext =
+  createContext<
+    [Accessor<{ side?: SplitSide; lineNumber?: number }>, Setter<{ side?: SplitSide; lineNumber?: number }>]
+  >();
+
+export const useDiffWidgetContext = () => useContext(DiffWidgetContext);
diff --git a/packages/solid/src/components/tools.ts b/packages/solid/src/components/tools.ts
new file mode 100644
index 0000000..f395387
--- /dev/null
+++ b/packages/solid/src/components/tools.ts
@@ -0,0 +1,124 @@
+import { createStore, ref } from "reactivity-store";
+
+import type { DiffModeEnum, DiffViewProps, SplitSide } from "./DiffView";
+
+export const createDiffConfigStore = (props: DiffViewProps<any>, diffFileId: string) => {
+  return createStore(() => {
+    const id = ref(diffFileId);
+
+    const setId = (_id: string) => (id.value = _id);
+
+    const mode = ref(props.diffViewMode);
+
+    const setMode = (_mode: DiffModeEnum) => (mode.value = _mode);
+
+    const isMounted = ref(false);
+
+    const setIsIsMounted = (_isMounted: boolean) => (isMounted.value = _isMounted);
+
+    const enableWrap = ref(props.diffViewWrap);
+
+    const setEnableWrap = (_enableWrap: boolean) => (enableWrap.value = _enableWrap);
+
+    const enableAddWidget = ref(props.diffViewAddWidget);
+
+    const setEnableAddWidget = (_enableAddWidget: boolean) => (enableAddWidget.value = _enableAddWidget);
+
+    const enableHighlight = ref(props.diffViewHighlight);
+
+    const setEnableHighlight = (_enableHighlight: boolean) => (enableHighlight.value = _enableHighlight);
+
+    const fontSize = ref(props.diffViewFontSize);
+
+    const setFontSize = (_fontSize: number) => (fontSize.value = _fontSize);
+
+    const extendData = ref({
+      oldFile: { ...props.extendData?.oldFile },
+      newFile: { ...props.extendData?.newFile },
+    });
+
+    const setExtendData = (_extendData: DiffViewProps<any>["extendData"]) => {
+      const existOldKeys = Object.keys(extendData.value.oldFile || {});
+      const inComingOldKeys = Object.keys(_extendData?.oldFile || {});
+      for (const key of existOldKeys) {
+        if (!inComingOldKeys.includes(key)) {
+          delete extendData.value.oldFile[key];
+        }
+      }
+      for (const key of inComingOldKeys) {
+        extendData.value.oldFile[key] = _extendData?.oldFile?.[key];
+      }
+      const existNewKeys = Object.keys(extendData.value.newFile || {});
+      const inComingNewKeys = Object.keys(_extendData?.newFile || {});
+      for (const key of existNewKeys) {
+        if (!inComingNewKeys.includes(key)) {
+          delete extendData.value.newFile[key];
+        }
+      }
+      for (const key of inComingNewKeys) {
+        extendData.value.newFile[key] = _extendData?.newFile?.[key];
+      }
+    };
+
+    const renderWidgetLine = ref(props.renderWidgetLine);
+
+    const setRenderWidgetLine = (_renderWidgetLine: typeof renderWidgetLine.value) =>
+      (renderWidgetLine.value = _renderWidgetLine);
+
+    const renderExtendLine = ref(props.renderExtendLine);
+
+    const setRenderExtendLine = (_renderExtendLine: typeof renderExtendLine.value) =>
+      (renderExtendLine.value = _renderExtendLine);
+
+    // 避免无意义的订阅
+    const onAddWidgetClick = { current: props.onAddWidgetClick };
+
+    const setOnAddWidgetClick = (_onAddWidgetClick: typeof onAddWidgetClick) =>
+      (onAddWidgetClick.current = _onAddWidgetClick.current);
+
+    return {
+      id,
+      setId,
+      mode,
+      setMode,
+      isMounted,
+      setIsIsMounted,
+      enableWrap,
+      setEnableWrap,
+      enableAddWidget,
+      setEnableAddWidget,
+      enableHighlight,
+      setEnableHighlight,
+      fontSize,
+      setFontSize,
+      extendData,
+      setExtendData,
+      renderWidgetLine,
+      setRenderWidgetLine,
+      renderExtendLine,
+      setRenderExtendLine,
+      onAddWidgetClick,
+      setOnAddWidgetClick,
+    };
+  });
+};
+
+export const createDiffWidgetStore = (useDiffContextRef: ReturnType<typeof createDiffConfigStore>) => {
+  return createStore(() => {
+    const widgetSide = ref<SplitSide>();
+
+    const widgetLineNumber = ref<number>();
+
+    const setWidget = ({ side, lineNumber }: { side?: SplitSide; lineNumber?: number }) => {
+      const { renderWidgetLine } = useDiffContextRef?.getReadonlyState?.() || {};
+
+      if (typeof renderWidgetLine !== "function") return;
+
+      widgetSide.value = side;
+
+      widgetLineNumber.value = lineNumber;
+    };
+
+    return { widgetSide, widgetLineNumber, setWidget };
+  });
+};
diff --git a/packages/solid/src/global.d.ts b/packages/solid/src/global.d.ts
new file mode 100644
index 0000000..1de7eae
--- /dev/null
+++ b/packages/solid/src/global.d.ts
@@ -0,0 +1,11 @@
+declare global {
+  const __VERSION__: string;
+
+  namespace NodeJS {
+    interface ProcessEnv {
+      NODE_ENV: "development" | "production" | "test";
+    }
+  }
+}
+
+export {};
diff --git a/packages/solid/src/hooks/generate.ts b/packages/solid/src/hooks/generate.ts
new file mode 100644
index 0000000..a4a4a57
--- /dev/null
+++ b/packages/solid/src/hooks/generate.ts
@@ -0,0 +1,32 @@
+import { createEffect, createSignal, onCleanup } from "solid-js";
+
+import { useDiffViewContext } from "../components/DiffViewContext";
+
+import type { createDiffConfigStore } from "../components/tools";
+
+type AllKey = keyof ReturnType<ReturnType<typeof createDiffConfigStore>["getReadonlyState"]>;
+
+type Data = ReturnType<ReturnType<typeof createDiffConfigStore>["getReadonlyState"]>;
+
+export const generateHook = <T extends AllKey, K extends Data[T] = Data[T]>(key: T) => {
+  return () => {
+    const reactiveHook = useDiffViewContext();
+
+    const [state, setState] = createSignal<K>(reactiveHook?.getReadonlyState()[key] as K);
+
+    createEffect(() => {
+      const unsubscribe = reactiveHook?.subscribe(
+        (s) => s[key],
+        () => {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          setState(reactiveHook?.getReadonlyState()[key]);
+        }
+      );
+
+      onCleanup(() => unsubscribe?.());
+    });
+
+    return state;
+  };
+};
diff --git a/packages/solid/src/hooks/index.ts b/packages/solid/src/hooks/index.ts
new file mode 100644
index 0000000..e5815fd
--- /dev/null
+++ b/packages/solid/src/hooks/index.ts
@@ -0,0 +1,11 @@
+export * from "./useEnableWrap";
+export * from "./useFontSize";
+export * from "./useIsMounted";
+export * from "./useTextWidth";
+export * from "./useMode";
+export * from "./useExtendData";
+export * from "./useRenderExtend";
+export * from "./useRenderWidget";
+export * from "./useEnableAddWidget";
+export * from "./useEnableHighlight";
+export * from "./useOnAddWidgetClick";
diff --git a/packages/solid/src/hooks/useEnableAddWidget.ts b/packages/solid/src/hooks/useEnableAddWidget.ts
new file mode 100644
index 0000000..f6c5e50
--- /dev/null
+++ b/packages/solid/src/hooks/useEnableAddWidget.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useEnableAddWidget = generateHook("enableAddWidget");
diff --git a/packages/solid/src/hooks/useEnableHighlight.ts b/packages/solid/src/hooks/useEnableHighlight.ts
new file mode 100644
index 0000000..5171573
--- /dev/null
+++ b/packages/solid/src/hooks/useEnableHighlight.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useEnableHighlight = generateHook("enableHighlight");
diff --git a/packages/solid/src/hooks/useEnableWrap.ts b/packages/solid/src/hooks/useEnableWrap.ts
new file mode 100644
index 0000000..ddbba53
--- /dev/null
+++ b/packages/solid/src/hooks/useEnableWrap.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useEnableWrap = generateHook("enableWrap");
diff --git a/packages/solid/src/hooks/useExtendData.ts b/packages/solid/src/hooks/useExtendData.ts
new file mode 100644
index 0000000..4428066
--- /dev/null
+++ b/packages/solid/src/hooks/useExtendData.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useExtendData = generateHook("extendData");
diff --git a/packages/solid/src/hooks/useFontSize.ts b/packages/solid/src/hooks/useFontSize.ts
new file mode 100644
index 0000000..cff5f70
--- /dev/null
+++ b/packages/solid/src/hooks/useFontSize.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useFontSize = generateHook("fontSize");
diff --git a/packages/solid/src/hooks/useIsMounted.ts b/packages/solid/src/hooks/useIsMounted.ts
new file mode 100644
index 0000000..b04eba3
--- /dev/null
+++ b/packages/solid/src/hooks/useIsMounted.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useIsMounted = generateHook("isMounted");
diff --git a/packages/solid/src/hooks/useMode.ts b/packages/solid/src/hooks/useMode.ts
new file mode 100644
index 0000000..b78f416
--- /dev/null
+++ b/packages/solid/src/hooks/useMode.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useMode = generateHook("mode");
diff --git a/packages/solid/src/hooks/useOnAddWidgetClick.ts b/packages/solid/src/hooks/useOnAddWidgetClick.ts
new file mode 100644
index 0000000..771baa4
--- /dev/null
+++ b/packages/solid/src/hooks/useOnAddWidgetClick.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useOnAddWidgetClick = generateHook("onAddWidgetClick");
diff --git a/packages/solid/src/hooks/useRenderExtend.ts b/packages/solid/src/hooks/useRenderExtend.ts
new file mode 100644
index 0000000..5a59016
--- /dev/null
+++ b/packages/solid/src/hooks/useRenderExtend.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useRenderExtend = generateHook("renderExtendLine");
diff --git a/packages/solid/src/hooks/useRenderWidget.ts b/packages/solid/src/hooks/useRenderWidget.ts
new file mode 100644
index 0000000..90a2bdc
--- /dev/null
+++ b/packages/solid/src/hooks/useRenderWidget.ts
@@ -0,0 +1,3 @@
+import { generateHook } from "./generate";
+
+export const useRenderWidget = generateHook("renderWidgetLine");
diff --git a/packages/solid/src/hooks/useTextWidth.ts b/packages/solid/src/hooks/useTextWidth.ts
new file mode 100644
index 0000000..776401a
--- /dev/null
+++ b/packages/solid/src/hooks/useTextWidth.ts
@@ -0,0 +1,32 @@
+import { getTextMeasureInstance } from "@git-diff-view/utils";
+import { createEffect, createSignal, type Accessor } from "solid-js";
+
+import { useIsMounted } from "./useIsMounted";
+
+export const useTextWidth = ({
+  text,
+  font,
+}: {
+  text: Accessor<string>;
+  font?: Accessor<{ fontSize: string; fontFamily: string }>;
+}) => {
+  const isMounted = useIsMounted();
+
+  let baseSize = 6;
+
+  const fontSize = parseInt(font?.()?.fontSize || "14");
+
+  baseSize += fontSize > 10 ? (fontSize - 10) * 0.6 : 0;
+
+  const [width, setWidth] = createSignal(baseSize * text().length);
+
+  const measureText = () => {
+    const isMountedValue = isMounted();
+    if (!isMountedValue) return;
+    setWidth(getTextMeasureInstance().measure(text(), font?.() || {}));
+  };
+
+  createEffect(measureText);
+
+  return width;
+};
diff --git a/packages/solid/src/index copy.ts b/packages/solid/src/index copy.ts
new file mode 100644
index 0000000..77008b3
--- /dev/null
+++ b/packages/solid/src/index copy.ts	
@@ -0,0 +1,3 @@
+export * from "./components/DiffView";
+
+export * from "@git-diff-view/core";
diff --git a/packages/solid/src/index.ts b/packages/solid/src/index.ts
new file mode 100644
index 0000000..37d8547
--- /dev/null
+++ b/packages/solid/src/index.ts
@@ -0,0 +1,7 @@
+import "highlight.js/styles/github.css";
+import "highlight.js/styles/github-dark.css";
+import "./tailwind.css";
+
+export * from "./components/DiffView";
+
+export * from "@git-diff-view/core";
\ No newline at end of file
diff --git a/packages/solid/src/tailwind.css b/packages/solid/src/tailwind.css
new file mode 100644
index 0000000..60012bc
--- /dev/null
+++ b/packages/solid/src/tailwind.css
@@ -0,0 +1,3 @@
+@import url(./_base.css);
+@import url(./_com.css);
+@import url(./_theme.css);
diff --git a/packages/solid/src/tailwind_pure.css b/packages/solid/src/tailwind_pure.css
new file mode 100644
index 0000000..623edfa
--- /dev/null
+++ b/packages/solid/src/tailwind_pure.css
@@ -0,0 +1,3 @@
+@import url(./_base_pure.css);
+@import url(./_com.css);
+@import url(./_theme.css);
diff --git a/packages/solid/tailwind.config.js b/packages/solid/tailwind.config.js
new file mode 100644
index 0000000..614c86b
--- /dev/null
+++ b/packages/solid/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/packages/solid/tsconfig.json b/packages/solid/tsconfig.json
new file mode 100644
index 0000000..7fafd44
--- /dev/null
+++ b/packages/solid/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "rootDir": "src",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+  },
+  "include": ["./src"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/solid/vite.config.ts b/packages/solid/vite.config.ts
new file mode 100644
index 0000000..2967e3e
--- /dev/null
+++ b/packages/solid/vite.config.ts
@@ -0,0 +1,36 @@
+import * as path from "path";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import solidPlugin from "vite-plugin-solid";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [solidPlugin(), dts()],
+  server: {
+    port: 3000,
+  },
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.withStyle.ts"),
+      name: "GitDiffView",
+      formats: ["es", "cjs"],
+      fileName: (format) =>
+        format === "cjs"
+          ? `solid-git-diff-view.cjs`
+          : format === "es"
+            ? `solid-git-diff-view.mjs`
+            : `solid-git-diff-view.js`,
+    },
+    sourcemap: true,
+    rollupOptions: {
+      external: ["solid-js", "@git-diff-view/core"],
+      output: {
+        assetFileNames: "css/diff-view.css",
+      },
+    },
+  },
+  define: {
+    __VERSION__: JSON.stringify(pkg.version),
+  },
+});
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
new file mode 100644
index 0000000..2b07d19
--- /dev/null
+++ b/packages/svelte/package.json
@@ -0,0 +1,3 @@
+{
+  "name": "@git-diff-view/svelte"
+}
\ No newline at end of file
diff --git a/packages/utils/index.d.ts b/packages/utils/index.d.ts
index b5878af..7cffed0 100644
--- a/packages/utils/index.d.ts
+++ b/packages/utils/index.d.ts
@@ -44,6 +44,12 @@ export declare enum NewLineSymbol {
 	NORMAL = 5,
 	NULL = 6
 }
-export declare const getSymbol: (symbol: NewLineSymbol) => "" | "\u240A" | "\u240D" | "\u240D\u240A";
+export declare const getSymbol: (symbol: NewLineSymbol | string | null | undefined) => "" | "\u240A" | "\u240D" | "\u240D\u240A";
+export declare enum DiffModeEnum {
+	SplitGitHub = 1,
+	SplitGitLab = 2,
+	Split = 3,
+	Unified = 4
+}
 
 export {};
diff --git a/packages/utils/src/symbol.ts b/packages/utils/src/symbol.ts
index a859f05..78f0930 100644
--- a/packages/utils/src/symbol.ts
+++ b/packages/utils/src/symbol.ts
@@ -7,7 +7,7 @@ export enum NewLineSymbol {
   NULL = 6,
 }
 
-export const getSymbol = (symbol: NewLineSymbol) => {
+export const getSymbol = (symbol: NewLineSymbol | string | null | undefined) => {
   switch (symbol) {
     case NewLineSymbol.LF:
       return "␊";
@@ -19,3 +19,12 @@ export const getSymbol = (symbol: NewLineSymbol) => {
       return "";
   }
 };
+
+export enum DiffModeEnum {
+  // github like
+  SplitGitHub = 1,
+  // gitlab like
+  SplitGitLab = 2,
+  Split = 1 | 2,
+  Unified = 4,
+}
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 66c6ea6..ac2675b 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -53,7 +53,7 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17",
-    "vite": "^5.4.14",
+    "vite": "^5.4.19",
     "vite-plugin-dts": "^4.5.0",
     "vue": "^3.5.13",
     "vue-tsc": "^2.2.0"
diff --git a/packages/vue/src/components/DiffSplitWidgetLineWrap.tsx b/packages/vue/src/components/DiffSplitWidgetLineWrap.tsx
index c4f8a4d..00e0ef3 100644
--- a/packages/vue/src/components/DiffSplitWidgetLineWrap.tsx
+++ b/packages/vue/src/components/DiffSplitWidgetLineWrap.tsx
@@ -40,6 +40,7 @@ export const DiffSplitWidgetLine = defineComponent(
       newLine.value = diffFile.getSplitRightLine(props.index);
     });
 
+    // TODO improve
     const currentIsShow = computed(
       () =>
         (!!oldLineWidget.value || !!newLineWidget.value) &&
diff --git a/packages/vue/src/components/DiffView.tsx b/packages/vue/src/components/DiffView.tsx
index 5463dc4..d03a5ad 100644
--- a/packages/vue/src/components/DiffView.tsx
+++ b/packages/vue/src/components/DiffView.tsx
@@ -1,5 +1,5 @@
 import { DiffFile, _cacheMap, SplitSide } from "@git-diff-view/core";
-import { diffFontSizeName } from "@git-diff-view/utils";
+import { diffFontSizeName, DiffModeEnum } from "@git-diff-view/utils";
 import { defineComponent, provide, ref, watch, watchEffect, computed, onUnmounted } from "vue";
 
 import {
@@ -27,16 +27,7 @@ import type { CSSProperties, SlotsType } from "vue";
 
 _cacheMap.name = "@git-diff-view/vue";
 
-export enum DiffModeEnum {
-  // github like
-  SplitGitHub = 1,
-  // gitlab like
-  SplitGitLab = 2,
-  Split = 1 | 2,
-  Unified = 4,
-}
-
-export { SplitSide };
+export { SplitSide, DiffModeEnum };
 
 export type DiffViewProps<T> = {
   data?: {
@@ -125,8 +116,6 @@ export const DiffView = defineComponent<
             side: props.initialWidgetState.side,
             lineNumber: props.initialWidgetState.lineNumber,
           };
-        } else {
-          widgetState.value = {};
         }
       },
       { immediate: true, deep: true }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7d2531c..8734ae4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -84,6 +84,8 @@ importers:
         specifier: 5.3.3
         version: 5.3.3
 
+  packages/angular: {}
+
   packages/core:
     dependencies:
       '@git-diff-view/lowlight':
@@ -103,6 +105,8 @@ importers:
         specifier: ^3.0.0
         version: 3.0.4
 
+  packages/dom: {}
+
   packages/file:
     dependencies:
       '@git-diff-view/core':
@@ -189,6 +193,54 @@ importers:
         specifier: ^1.29.2
         version: 1.29.2
 
+  packages/solid:
+    dependencies:
+      '@git-diff-view/core':
+        specifier: ^0.0.29
+        version: link:../core
+      '@types/hast':
+        specifier: ^3.0.0
+        version: 3.0.4
+      fast-diff:
+        specifier: ^1.3.0
+        version: 1.3.0
+      highlight.js:
+        specifier: ^11.11.0
+        version: 11.11.1
+      lowlight:
+        specifier: ^3.3.0
+        version: 3.3.0
+      reactivity-store:
+        specifier: ^0.3.11
+        version: 0.3.11(react@19.0.0)
+    devDependencies:
+      autoprefixer:
+        specifier: ^10.4.20
+        version: 10.4.20(postcss@8.5.1)
+      eslint-plugin-solid:
+        specifier: ^0.14.5
+        version: 0.14.5(eslint@8.57.1)(typescript@5.7.2)
+      postcss:
+        specifier: ^8.5.1
+        version: 8.5.1
+      solid-js:
+        specifier: ^1.9.0
+        version: 1.9.5
+      tailwindcss:
+        specifier: ^3.4.17
+        version: 3.4.17(ts-node@10.9.2(@swc/core@1.10.15(@swc/helpers@0.5.15))(@types/node@22.13.1)(typescript@5.7.2))
+      vite:
+        specifier: ^5.4.19
+        version: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vite-plugin-dts:
+        specifier: ^4.5.0
+        version: 4.5.0(@types/node@22.13.1)(rollup@4.34.6)(typescript@5.7.2)(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
+      vite-plugin-solid:
+        specifier: ^2.11.0
+        version: 2.11.6(solid-js@1.9.5)(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
+
+  packages/svelte: {}
+
   packages/utils:
     dependencies:
       '@git-diff-view/core':
@@ -215,10 +267,10 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
-        version: 5.2.1(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.7.2))
+        version: 5.2.1(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.7.2))
       '@vitejs/plugin-vue-jsx':
         specifier: ^4.1.1
-        version: 4.1.1(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.7.2))
+        version: 4.1.1(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.7.2))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.5.1)
@@ -229,11 +281,11 @@ importers:
         specifier: ^3.4.17
         version: 3.4.17(ts-node@10.9.2(@swc/core@1.10.15(@swc/helpers@0.5.15))(@types/node@22.13.1)(typescript@5.7.2))
       vite:
-        specifier: ^5.4.14
-        version: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+        specifier: ^5.4.19
+        version: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
       vite-plugin-dts:
         specifier: ^4.5.0
-        version: 4.5.0(@types/node@22.13.1)(rollup@4.34.6)(typescript@5.7.2)(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
+        version: 4.5.0(@types/node@22.13.1)(rollup@4.34.6)(typescript@5.7.2)(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.2)
@@ -377,7 +429,7 @@ importers:
         version: 0.3.13(@my-react/react@0.3.13)
       '@my-react/react-vite':
         specifier: ^0.0.17
-        version: 0.0.17(@my-react/react-refresh@0.3.13(@my-react/react@0.3.13))(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
+        version: 0.0.17(@my-react/react-refresh@0.3.13(@my-react/react@0.3.13))(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
       '@types/lodash':
         specifier: ^4.17.15
         version: 4.17.15
@@ -395,7 +447,7 @@ importers:
         version: 8.23.0(eslint@8.57.1)(typescript@5.3.3)
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.3.4(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
+        version: 4.3.4(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.5.1)
@@ -421,11 +473,27 @@ importers:
         specifier: 5.3.3
         version: 5.3.3
       vite:
-        specifier: ^5.4.14
-        version: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+        specifier: ^5.4.19
+        version: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
       vite-tsconfig-paths:
         specifier: ^5.1.4
-        version: 5.1.4(typescript@5.3.3)(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
+        version: 5.1.4(typescript@5.3.3)(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
+
+  ui/solid-example:
+    dependencies:
+      solid-js:
+        specifier: ^1.9.7
+        version: 1.9.7
+    devDependencies:
+      typescript:
+        specifier: 5.3.3
+        version: 5.3.3
+      vite:
+        specifier: ^5.4.19
+        version: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vite-plugin-solid:
+        specifier: ^2.11.0
+        version: 2.11.6(solid-js@1.9.7)(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
 
   ui/vue-example:
     dependencies:
@@ -438,7 +506,7 @@ importers:
     devDependencies:
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
-        version: 5.2.1(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.3.3))
+        version: 5.2.1(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.3.3))
       autoprefixer:
         specifier: ^10.4.20
         version: 10.4.20(postcss@8.5.1)
@@ -452,8 +520,8 @@ importers:
         specifier: 5.3.3
         version: 5.3.3
       vite:
-        specifier: ^5.4.14
-        version: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+        specifier: ^5.4.19
+        version: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
       vue-tsc:
         specifier: ^2.2.0
         version: 2.2.0(typescript@5.3.3)
@@ -484,7 +552,7 @@ importers:
         version: 22.13.1
       '@vitejs/plugin-vue':
         specifier: ^5.2.1
-        version: 5.2.1(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.3.3))
+        version: 5.2.1(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.3.3))
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
@@ -492,8 +560,8 @@ importers:
         specifier: 5.3.3
         version: 5.3.3
       vite:
-        specifier: ^5.4.14
-        version: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+        specifier: ^5.4.19
+        version: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
       vue-tsc:
         specifier: ^2.2.0
         version: 2.2.0(typescript@5.3.3)
@@ -542,6 +610,10 @@ packages:
     resolution: {integrity: sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-module-imports@7.18.6':
+    resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-imports@7.25.9':
     resolution: {integrity: sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==}
     engines: {node: '>=6.9.0'}
@@ -1941,6 +2013,16 @@ packages:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
 
+  babel-plugin-jsx-dom-expressions@0.39.7:
+    resolution: {integrity: sha512-8GzVmFla7jaTNWW8W+lTMl9YGva4/06CtwJjySnkYtt8G1v9weCzc2SuF1DfrudcCNb2Doetc1FRg33swBYZCA==}
+    peerDependencies:
+      '@babel/core': ^7.20.12
+
+  babel-preset-solid@1.9.5:
+    resolution: {integrity: sha512-85I3osODJ1LvZbv8wFozROV1vXq32BubqHXAGu73A//TRs3NLI1OFP83AQBUTSQHwgZQmARjHlJciym3we+V+w==}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -2580,6 +2662,13 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
+  eslint-plugin-solid@0.14.5:
+    resolution: {integrity: sha512-nfuYK09ah5aJG/oEN6P1qziy1zLgW4PDWe75VNPi4CEFYk1x2AEqwFeQfEPR7gNn0F2jOeqKhx2E+5oNCOBYWQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+      typescript: '>=4.8.4'
+
   eslint-scope@7.2.2:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -2921,6 +3010,9 @@ packages:
   hookified@1.7.0:
     resolution: {integrity: sha512-XQdMjqC1AyeOzfs+17cnIk7Wdfu1hh2JtcyNfBf5u9jHrT3iZUlGHxLTntFBuk5lwkqJ6l3+daeQdHK5yByHVA==}
 
+  html-entities@2.3.3:
+    resolution: {integrity: sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==}
+
   html-tags@3.3.1:
     resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
     engines: {node: '>=8'}
@@ -2995,6 +3087,9 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
+  inline-style-parser@0.2.4:
+    resolution: {integrity: sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -3071,6 +3166,10 @@ packages:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
 
+  is-html@2.0.0:
+    resolution: {integrity: sha512-S+OpgB5i7wzIue/YSE5hg0e5ZYfG3hhpNh9KGl6ayJ38p7ED6wxQLd1TV91xHpcTvw90KMJ9EwN3F/iNflHBVg==}
+    engines: {node: '>=8'}
+
   is-map@2.0.3:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
@@ -3136,6 +3235,10 @@ packages:
     resolution: {integrity: sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==}
     engines: {node: '>= 0.4'}
 
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
   isarray@2.0.5:
     resolution: {integrity: sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==}
 
@@ -3203,6 +3306,9 @@ packages:
     resolution: {integrity: sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==}
     engines: {node: '>=4.0'}
 
+  kebab-case@1.0.2:
+    resolution: {integrity: sha512-7n6wXq4gNgBELfDCpzKc+mRrZFs7D+wgfF5WRFLNAr4DA/qtr9Js8uOAVAfHhuLMfAcQ0pRKqbpjx+TcJVdE1Q==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -3213,6 +3319,9 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
+  known-css-properties@0.30.0:
+    resolution: {integrity: sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==}
+
   known-css-properties@0.35.0:
     resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
 
@@ -3329,6 +3438,10 @@ packages:
     resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
     engines: {node: '>=18'}
 
+  merge-anything@5.1.7:
+    resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
+    engines: {node: '>=12.13'}
+
   merge-descriptors@2.0.0:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
@@ -3572,6 +3685,9 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse5@7.2.1:
+    resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -4341,6 +4457,26 @@ packages:
   serialize-javascript@6.0.2:
     resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==}
 
+  seroval-plugins@1.2.1:
+    resolution: {integrity: sha512-H5vs53+39+x4Udwp4J5rNZfgFuA+Lt+uU+09w1gYBVWomtAl98B+E9w7yC05Xc81/HgLvJdlyqJbU0fJCKCmdw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval-plugins@1.3.2:
+    resolution: {integrity: sha512-0QvCV2lM3aj/U3YozDiVwx9zpH0q8A60CTWIv4Jszj/givcudPb48B+rkU5D51NJ0pTpweGMttHjboPa9/zoIQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval@1.2.1:
+    resolution: {integrity: sha512-yBxFFs3zmkvKNmR0pFSU//rIsYjuX418TnlDmc2weaq5XFDqDIV/NOMPBoLrbxjLH42p4UzRuXHryXh9dYcKcw==}
+    engines: {node: '>=10'}
+
+  seroval@1.3.2:
+    resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==}
+    engines: {node: '>=10'}
+
   serve-static@2.1.0:
     resolution: {integrity: sha512-A3We5UfEjG8Z7VkDv6uItWw6HY2bBSBJT1KtVESn6EOoOr2jAxNhxWCLY3jDE2WcuHXByWju74ck3ZgLwL8xmA==}
     engines: {node: '>= 18'}
@@ -4417,6 +4553,17 @@ packages:
   smob@1.5.0:
     resolution: {integrity: sha512-g6T+p7QO8npa+/hNx9ohv1E5pVCmWrVCUzUXJyLdMmftX6ER0oiWY/w9knEonLpnOp6b6FenKnMfR8gqwWdwig==}
 
+  solid-js@1.9.5:
+    resolution: {integrity: sha512-ogI3DaFcyn6UhYhrgcyRAMbu/buBJitYQASZz5WzfQVPP10RD2AbCoRZ517psnezrasyCbWzIxZ6kVqet768xw==}
+
+  solid-js@1.9.7:
+    resolution: {integrity: sha512-/saTKi8iWEM233n5OSi1YHCCuh66ZIQ7aK2hsToPe4tqGm7qAejU1SwNuTPivbWAYq7SjuHVVYxxuZQNRbICiw==}
+
+  solid-refresh@0.6.3:
+    resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==}
+    peerDependencies:
+      solid-js: ^1.3
+
   sonic-boom@4.2.0:
     resolution: {integrity: sha512-INb7TM37/mAcsGmc9hyyI6+QR3rR1zVRu36B0NeGXKnOOLiZOfER5SA+N7X7k3yUYRzLWafduTDvJAfDswwEww==}
 
@@ -4525,6 +4672,9 @@ packages:
   style-mod@4.1.2:
     resolution: {integrity: sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==}
 
+  style-to-object@1.0.8:
+    resolution: {integrity: sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==}
+
   styled-jsx@5.1.6:
     resolution: {integrity: sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==}
     engines: {node: '>= 12.0.0'}
@@ -4906,6 +5056,9 @@ packages:
   v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
+  validate-html-nesting@1.2.2:
+    resolution: {integrity: sha512-hGdgQozCsQJMyfK5urgFcWEqsSSrK63Awe0t/IMR0bZ0QMtnuaiHzThW81guu3qx9abLi99NEuiaN6P9gVYsNg==}
+
   vary@1.1.2:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
@@ -4925,6 +5078,16 @@ packages:
       vite:
         optional: true
 
+  vite-plugin-solid@2.11.6:
+    resolution: {integrity: sha512-Sl5CTqJTGyEeOsmdH6BOgalIZlwH3t4/y0RQuFLMGnvWMBvxb4+lq7x3BSiAw6etf0QexfNJW7HSOO/Qf7pigg==}
+    peerDependencies:
+      '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.*
+      solid-js: ^1.7.2
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+    peerDependenciesMeta:
+      '@testing-library/jest-dom':
+        optional: true
+
   vite-tsconfig-paths@5.1.4:
     resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
     peerDependencies:
@@ -4933,8 +5096,8 @@ packages:
       vite:
         optional: true
 
-  vite@5.4.14:
-    resolution: {integrity: sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==}
+  vite@5.4.19:
+    resolution: {integrity: sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -4964,6 +5127,14 @@ packages:
       terser:
         optional: true
 
+  vitefu@1.0.6:
+    resolution: {integrity: sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
   vscode-uri@3.1.0:
     resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
 
@@ -5144,6 +5315,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-module-imports@7.18.6':
+    dependencies:
+      '@babel/types': 7.26.8
+
   '@babel/helper-module-imports@7.25.9':
     dependencies:
       '@babel/traverse': 7.26.8
@@ -5733,13 +5908,13 @@ snapshots:
     dependencies:
       '@my-react/react': 0.3.13
 
-  '@my-react/react-vite@0.0.17(@my-react/react-refresh@0.3.13(@my-react/react@0.3.13))(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))':
+  '@my-react/react-vite@0.0.17(@my-react/react-refresh@0.3.13(@my-react/react@0.3.13))(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))':
     dependencies:
       '@babel/core': 7.26.8
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.8)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.8)
       '@my-react/react-refresh': 0.3.13(@my-react/react@0.3.13)
-      vite: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -6255,6 +6430,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/typescript-estree@8.23.0(typescript@5.7.2)':
+    dependencies:
+      '@typescript-eslint/types': 8.23.0
+      '@typescript-eslint/visitor-keys': 8.23.0
+      debug: 4.4.0
+      fast-glob: 3.3.3
+      is-glob: 4.0.3
+      minimatch: 9.0.5
+      semver: 7.7.1
+      ts-api-utils: 2.0.1(typescript@5.7.2)
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/utils@8.23.0(eslint@8.57.1)(typescript@5.3.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
@@ -6266,6 +6455,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/utils@8.23.0(eslint@8.57.1)(typescript@5.7.2)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@8.57.1)
+      '@typescript-eslint/scope-manager': 8.23.0
+      '@typescript-eslint/types': 8.23.0
+      '@typescript-eslint/typescript-estree': 8.23.0(typescript@5.7.2)
+      eslint: 8.57.1
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/visitor-keys@8.23.0':
     dependencies:
       '@typescript-eslint/types': 8.23.0
@@ -6273,35 +6473,35 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitejs/plugin-react@4.3.4(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))':
+  '@vitejs/plugin-react@4.3.4(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))':
     dependencies:
       '@babel/core': 7.26.8
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.8)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.8)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@4.1.1(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.7.2))':
+  '@vitejs/plugin-vue-jsx@4.1.1(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@babel/core': 7.26.8
       '@babel/plugin-transform-typescript': 7.26.8(@babel/core@7.26.8)
       '@vue/babel-plugin-jsx': 1.2.5(@babel/core@7.26.8)
-      vite: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
       vue: 3.5.13(typescript@5.7.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.2.1(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.3.3))':
+  '@vitejs/plugin-vue@5.2.1(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.3.3))':
     dependencies:
-      vite: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
       vue: 3.5.13(typescript@5.3.3)
 
-  '@vitejs/plugin-vue@5.2.1(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.7.2))':
+  '@vitejs/plugin-vue@5.2.1(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))(vue@3.5.13(typescript@5.7.2))':
     dependencies:
-      vite: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
       vue: 3.5.13(typescript@5.7.2)
 
   '@volar/language-core@2.4.11':
@@ -6631,6 +6831,21 @@ snapshots:
 
   axobject-query@4.1.0: {}
 
+  babel-plugin-jsx-dom-expressions@0.39.7(@babel/core@7.26.8):
+    dependencies:
+      '@babel/core': 7.26.8
+      '@babel/helper-module-imports': 7.18.6
+      '@babel/plugin-syntax-jsx': 7.25.9(@babel/core@7.26.8)
+      '@babel/types': 7.26.8
+      html-entities: 2.3.3
+      parse5: 7.2.1
+      validate-html-nesting: 1.2.2
+
+  babel-preset-solid@1.9.5(@babel/core@7.26.8):
+    dependencies:
+      '@babel/core': 7.26.8
+      babel-plugin-jsx-dom-expressions: 0.39.7(@babel/core@7.26.8)
+
   balanced-match@1.0.2: {}
 
   balanced-match@2.0.0: {}
@@ -7400,6 +7615,19 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
+  eslint-plugin-solid@0.14.5(eslint@8.57.1)(typescript@5.7.2):
+    dependencies:
+      '@typescript-eslint/utils': 8.23.0(eslint@8.57.1)(typescript@5.7.2)
+      eslint: 8.57.1
+      estraverse: 5.3.0
+      is-html: 2.0.0
+      kebab-case: 1.0.2
+      known-css-properties: 0.30.0
+      style-to-object: 1.0.8
+      typescript: 5.7.2
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-scope@7.2.2:
     dependencies:
       esrecurse: 4.3.0
@@ -7828,6 +8056,8 @@ snapshots:
 
   hookified@1.7.0: {}
 
+  html-entities@2.3.3: {}
+
   html-tags@3.3.1: {}
 
   html-void-elements@3.0.0: {}
@@ -7888,6 +8118,8 @@ snapshots:
 
   ini@1.3.8: {}
 
+  inline-style-parser@0.2.4: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -7970,6 +8202,10 @@ snapshots:
     dependencies:
       is-extglob: 2.1.1
 
+  is-html@2.0.0:
+    dependencies:
+      html-tags: 3.3.1
+
   is-map@2.0.3: {}
 
   is-module@1.0.0: {}
@@ -8030,6 +8266,8 @@ snapshots:
       call-bound: 1.0.3
       get-intrinsic: 1.2.7
 
+  is-what@4.1.16: {}
+
   isarray@2.0.5: {}
 
   isexe@2.0.0: {}
@@ -8092,6 +8330,8 @@ snapshots:
       object.assign: 4.1.7
       object.values: 1.2.1
 
+  kebab-case@1.0.2: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -8102,6 +8342,8 @@ snapshots:
 
   kind-of@6.0.3: {}
 
+  known-css-properties@0.30.0: {}
+
   known-css-properties@0.35.0: {}
 
   kolorist@1.8.0: {}
@@ -8202,6 +8444,10 @@ snapshots:
 
   meow@13.2.0: {}
 
+  merge-anything@5.1.7:
+    dependencies:
+      is-what: 4.1.16
+
   merge-descriptors@2.0.0: {}
 
   merge2@1.4.1: {}
@@ -8440,6 +8686,10 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse5@7.2.1:
+    dependencies:
+      entities: 4.5.0
+
   parseurl@1.3.3: {}
 
   path-browserify@1.0.1: {}
@@ -9034,6 +9284,13 @@ snapshots:
       react: 18.3.1
       use-sync-external-store: 1.5.0(react@18.3.1)
 
+  reactivity-store@0.3.11(react@19.0.0):
+    dependencies:
+      '@vue/reactivity': 3.5.16
+      '@vue/shared': 3.5.16
+      react: 19.0.0
+      use-sync-external-store: 1.5.0(react@19.0.0)
+
   read-cache@1.0.0:
     dependencies:
       pify: 2.3.0
@@ -9234,6 +9491,18 @@ snapshots:
     dependencies:
       randombytes: 2.1.0
 
+  seroval-plugins@1.2.1(seroval@1.2.1):
+    dependencies:
+      seroval: 1.2.1
+
+  seroval-plugins@1.3.2(seroval@1.3.2):
+    dependencies:
+      seroval: 1.3.2
+
+  seroval@1.2.1: {}
+
+  seroval@1.3.2: {}
+
   serve-static@2.1.0:
     dependencies:
       encodeurl: 2.0.0
@@ -9366,6 +9635,36 @@ snapshots:
 
   smob@1.5.0: {}
 
+  solid-js@1.9.5:
+    dependencies:
+      csstype: 3.1.3
+      seroval: 1.2.1
+      seroval-plugins: 1.2.1(seroval@1.2.1)
+
+  solid-js@1.9.7:
+    dependencies:
+      csstype: 3.1.3
+      seroval: 1.3.2
+      seroval-plugins: 1.3.2(seroval@1.3.2)
+
+  solid-refresh@0.6.3(solid-js@1.9.5):
+    dependencies:
+      '@babel/generator': 7.26.8
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/types': 7.26.8
+      solid-js: 1.9.5
+    transitivePeerDependencies:
+      - supports-color
+
+  solid-refresh@0.6.3(solid-js@1.9.7):
+    dependencies:
+      '@babel/generator': 7.26.8
+      '@babel/helper-module-imports': 7.25.9
+      '@babel/types': 7.26.8
+      solid-js: 1.9.7
+    transitivePeerDependencies:
+      - supports-color
+
   sonic-boom@4.2.0:
     dependencies:
       atomic-sleep: 1.0.0
@@ -9489,6 +9788,10 @@ snapshots:
 
   style-mod@4.1.2: {}
 
+  style-to-object@1.0.8:
+    dependencies:
+      inline-style-parser: 0.2.4
+
   styled-jsx@5.1.6(react@19.0.0):
     dependencies:
       client-only: 0.0.1
@@ -9779,6 +10082,10 @@ snapshots:
     dependencies:
       typescript: 5.3.3
 
+  ts-api-utils@2.0.1(typescript@5.7.2):
+    dependencies:
+      typescript: 5.7.2
+
   ts-interface-checker@0.1.13: {}
 
   ts-node@10.9.2(@swc/core@1.10.15(@swc/helpers@0.5.15))(@types/node@20.17.17)(typescript@5.3.3):
@@ -10008,12 +10315,18 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  use-sync-external-store@1.5.0(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+
   util-deprecate@1.0.2: {}
 
   utils-merge@1.0.1: {}
 
   v8-compile-cache-lib@3.0.1: {}
 
+  validate-html-nesting@1.2.2: {}
+
   vary@1.1.2: {}
 
   vfile-message@4.0.2:
@@ -10026,7 +10339,7 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite-plugin-dts@4.5.0(@types/node@22.13.1)(rollup@4.34.6)(typescript@5.7.2)(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)):
+  vite-plugin-dts@4.5.0(@types/node@22.13.1)(rollup@4.34.6)(typescript@5.7.2)(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)):
     dependencies:
       '@microsoft/api-extractor': 7.49.2(@types/node@22.13.1)
       '@rollup/pluginutils': 5.1.4(rollup@4.34.6)
@@ -10039,24 +10352,50 @@ snapshots:
       magic-string: 0.30.17
       typescript: 5.7.2
     optionalDependencies:
-      vite: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
     transitivePeerDependencies:
       - '@types/node'
       - rollup
       - supports-color
 
-  vite-tsconfig-paths@5.1.4(typescript@5.3.3)(vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)):
+  vite-plugin-solid@2.11.6(solid-js@1.9.5)(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)):
+    dependencies:
+      '@babel/core': 7.26.8
+      '@types/babel__core': 7.20.5
+      babel-preset-solid: 1.9.5(@babel/core@7.26.8)
+      merge-anything: 5.1.7
+      solid-js: 1.9.5
+      solid-refresh: 0.6.3(solid-js@1.9.5)
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vitefu: 1.0.6(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-plugin-solid@2.11.6(solid-js@1.9.7)(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)):
+    dependencies:
+      '@babel/core': 7.26.8
+      '@types/babel__core': 7.20.5
+      babel-preset-solid: 1.9.5(@babel/core@7.26.8)
+      merge-anything: 5.1.7
+      solid-js: 1.9.7
+      solid-refresh: 0.6.3(solid-js@1.9.7)
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vitefu: 1.0.6(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1))
+    transitivePeerDependencies:
+      - supports-color
+
+  vite-tsconfig-paths@5.1.4(typescript@5.3.3)(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)):
     dependencies:
       debug: 4.4.0
       globrex: 0.1.2
       tsconfck: 3.1.5(typescript@5.3.3)
     optionalDependencies:
-      vite: 5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.4.14(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1):
+  vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.1
@@ -10067,6 +10406,10 @@ snapshots:
       sugarss: 4.0.1(postcss@8.5.1)
       terser: 5.38.1
 
+  vitefu@1.0.6(vite@5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)):
+    optionalDependencies:
+      vite: 5.4.19(@types/node@22.13.1)(sugarss@4.0.1(postcss@8.5.1))(terser@5.38.1)
+
   vscode-uri@3.1.0: {}
 
   vue-tsc@2.2.0(typescript@5.3.3):
diff --git a/scripts/build.ts b/scripts/build.ts
index 0b6eb0c..45bbe65 100644
--- a/scripts/build.ts
+++ b/scripts/build.ts
@@ -109,6 +109,11 @@ const start = async () => {
 
 start();
 
+// (async () => {
+//   await rollupBuild({ packageName: "utils", packageScope: "packages", external: externalCorePackage });
+//   await buildType("utils");
+// })();
+
 // (async () => {
 //   await buildCss('react');
 //   await buildCss('vue');
diff --git a/ui/react-example/package.json b/ui/react-example/package.json
index 02fb731..1522e25 100644
--- a/ui/react-example/package.json
+++ b/ui/react-example/package.json
@@ -43,7 +43,7 @@
     "postcss-preset-mantine": "^1.17.0",
     "tailwindcss": "^3.4.17",
     "typescript": "5.3.3",
-    "vite": "^5.4.14",
+    "vite": "^5.4.19",
     "vite-tsconfig-paths": "^5.1.4"
   }
 }
diff --git a/ui/solid-example/.gitignore b/ui/solid-example/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/ui/solid-example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/ui/solid-example/README.md b/ui/solid-example/README.md
new file mode 100644
index 0000000..167c567
--- /dev/null
+++ b/ui/solid-example/README.md
@@ -0,0 +1,28 @@
+## Usage
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev`
+
+Runs the app in the development mode.<br>
+Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br>
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br>
+Your app is ready to be deployed!
+
+## Deployment
+
+Learn more about deploying your application with the [documentations](https://vite.dev/guide/static-deploy.html)
diff --git a/ui/solid-example/index.html b/ui/solid-example/index.html
new file mode 100644
index 0000000..7021737
--- /dev/null
+++ b/ui/solid-example/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Solid + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/ui/solid-example/package.json b/ui/solid-example/package.json
new file mode 100644
index 0000000..0e83e7e
--- /dev/null
+++ b/ui/solid-example/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "solid-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "solid-js": "^1.9.7"
+  },
+  "devDependencies": {
+    "typescript": "5.3.3",
+    "vite": "^5.4.19",
+    "vite-plugin-solid": "^2.11.0"
+  }
+}
diff --git a/ui/solid-example/public/vite.svg b/ui/solid-example/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/ui/solid-example/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/ui/solid-example/src/App.css b/ui/solid-example/src/App.css
new file mode 100644
index 0000000..613607d
--- /dev/null
+++ b/ui/solid-example/src/App.css
@@ -0,0 +1,27 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.solid:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
diff --git a/ui/solid-example/src/App.tsx b/ui/solid-example/src/App.tsx
new file mode 100644
index 0000000..1f906bf
--- /dev/null
+++ b/ui/solid-example/src/App.tsx
@@ -0,0 +1,38 @@
+import { createSignal } from 'solid-js'
+
+import solidLogo from './assets/solid.svg'
+
+// eslint-disable-next-line import/no-unresolved
+import viteLogo from '/vite.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = createSignal(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vite.dev" target="_blank">
+          <img src={viteLogo} class="logo" alt="Vite logo" />
+        </a>
+        <a href="https://solidjs.com" target="_blank">
+          <img src={solidLogo} class="logo solid" alt="Solid logo" />
+        </a>
+      </div>
+      <h1>Vite + Solid</h1>
+      <div class="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count()}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p class="read-the-docs">
+        Click on the Vite and Solid logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App
diff --git a/ui/solid-example/src/assets/solid.svg b/ui/solid-example/src/assets/solid.svg
new file mode 100644
index 0000000..025aa30
--- /dev/null
+++ b/ui/solid-example/src/assets/solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 155.3"><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" fill="#76b3e1"/><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="27.5" y1="3" x2="152" y2="63.5"><stop offset=".1" stop-color="#76b3e1"/><stop offset=".3" stop-color="#dcf2fd"/><stop offset="1" stop-color="#76b3e1"/></linearGradient><path d="M163 35S110-4 69 5l-3 1c-6 2-11 5-14 9l-2 3-15 26 26 5c11 7 25 10 38 7l46 9 18-30z" opacity=".3" fill="url(#a)"/><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" fill="#518ac8"/><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="95.8" y1="32.6" x2="74" y2="105.2"><stop offset="0" stop-color="#76b3e1"/><stop offset=".5" stop-color="#4377bb"/><stop offset="1" stop-color="#1f3b77"/></linearGradient><path d="M52 35l-4 1c-17 5-22 21-13 35 10 13 31 20 48 15l62-21S92 26 52 35z" opacity=".3" fill="url(#b)"/><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="18.4" y1="64.2" x2="144.3" y2="149.8"><stop offset="0" stop-color="#315aa9"/><stop offset=".5" stop-color="#518ac8"/><stop offset="1" stop-color="#315aa9"/></linearGradient><path d="M134 80a45 45 0 00-48-15L24 85 4 120l112 19 20-36c4-7 3-15-2-23z" fill="url(#c)"/><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="75.2" y1="74.5" x2="24.4" y2="260.8"><stop offset="0" stop-color="#4377bb"/><stop offset=".5" stop-color="#1a336b"/><stop offset="1" stop-color="#1a336b"/></linearGradient><path d="M114 115a45 45 0 00-48-15L4 120s53 40 94 30l3-1c17-5 23-21 13-34z" fill="url(#d)"/></svg>
\ No newline at end of file
diff --git a/ui/solid-example/src/index.css b/ui/solid-example/src/index.css
new file mode 100644
index 0000000..6119ad9
--- /dev/null
+++ b/ui/solid-example/src/index.css
@@ -0,0 +1,68 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/ui/solid-example/src/index.tsx b/ui/solid-example/src/index.tsx
new file mode 100644
index 0000000..0e0597e
--- /dev/null
+++ b/ui/solid-example/src/index.tsx
@@ -0,0 +1,9 @@
+/* @refresh reload */
+import { render } from 'solid-js/web'
+
+import './index.css'
+import App from './App.tsx'
+
+const root = document.getElementById('root')
+
+render(() => <App />, root!)
diff --git a/ui/solid-example/src/vite-env.d.ts b/ui/solid-example/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/ui/solid-example/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/ui/solid-example/tsconfig.app.json b/ui/solid-example/tsconfig.app.json
new file mode 100644
index 0000000..542583a
--- /dev/null
+++ b/ui/solid-example/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/ui/solid-example/tsconfig.json b/ui/solid-example/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/ui/solid-example/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/ui/solid-example/tsconfig.node.json b/ui/solid-example/tsconfig.node.json
new file mode 100644
index 0000000..db0becc
--- /dev/null
+++ b/ui/solid-example/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/ui/solid-example/vite.config.ts b/ui/solid-example/vite.config.ts
new file mode 100644
index 0000000..4a303c3
--- /dev/null
+++ b/ui/solid-example/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import solid from "vite-plugin-solid";
+
+export default defineConfig({
+  plugins: [solid()],
+});
diff --git a/ui/vue-example/package.json b/ui/vue-example/package.json
index 87024dc..594bbbc 100644
--- a/ui/vue-example/package.json
+++ b/ui/vue-example/package.json
@@ -18,7 +18,7 @@
     "postcss": "^8.5.1",
     "tailwindcss": "^3.4.17",
     "typescript": "5.3.3",
-    "vite": "^5.4.14",
+    "vite": "^5.4.19",
     "vue-tsc": "^2.2.0"
   }
 }
diff --git a/ui/vue-ssr-example/package.json b/ui/vue-ssr-example/package.json
index 90ab7ec..301dc65 100644
--- a/ui/vue-ssr-example/package.json
+++ b/ui/vue-ssr-example/package.json
@@ -23,7 +23,7 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "cross-env": "^7.0.3",
     "typescript": "5.3.3",
-    "vite": "^5.4.14",
+    "vite": "^5.4.19",
     "vue-tsc": "^2.2.0"
   }
 }
\ No newline at end of file