c063 1.3.2 → 1.4.1

package/dist/components/CodeBlock.d.ts

@@ -1,4 +1,4 @@
-import { CodeBlockProps } from "../types/props";
+import { CodeBlockProps } from "../types/index";
 /**
  * 顯示完整程式碼區塊，支援多行語法 token 與行號顯示。
  *

package/dist/components/CodeLine.d.ts

@@ -1,4 +1,4 @@
-import { CodeLineProps } from "../types/props";
+import { CodeLineProps } from "../types/index";
 /**
  * 渲染單一程式碼行，包含多個語法 token。
  *

package/dist/components/CodeToken.d.ts

@@ -1,4 +1,4 @@
-import { CodeTokenProps } from "../types/props";
+import { CodeTokenProps } from "../types/index";
 /**
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
  *

package/dist/components/CodeToken.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { themeMap } from "../libs";
+import { useLayoutEffect, useState } from "react";
+import { loadTheme } from "../utils/theme";
 /**
  * 渲染單一語法 token（例如關鍵字、字串、註解等），可指定標籤與樣式。
  *
@@ -13,8 +14,16 @@ import { themeMap } from "../libs";
  */
 export const CodeToken = ({ as, style, children, type, theme, ...rest }) => {
     const Tag = as || "span";
-    return (_jsx(Tag, { ...rest, style: {
-            color: themeMap[theme || "default-dark-modern"][type || "default"],
+    const [currTheme, setCurrTheme] = useState(null);
+    useLayoutEffect(() => {
+        if (theme) {
+            loadTheme(theme).then((res) => setCurrTheme(res));
+        }
+    }, [theme]);
+    return (
+    // eslint-disable-next-line react/react-in-jsx-scope
+    _jsx(Tag, { ...rest, style: {
+            color: (currTheme === null || currTheme === void 0 ? void 0 : currTheme[type || "default"]) || undefined,
             ...style,
         }, children: children }));
 };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './types';
 export * from './components';
-export * from './utils';
-export * from './libs';
+import c063, { whiteSpace } from './utils';
+export default c063;
+export { whiteSpace };

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from './types';
 export * from './components';
-export * from './utils';
-export * from './libs';
+import c063, { whiteSpace } from './utils';
+export default c063;
+export { whiteSpace };

package/dist/libs/index.d.ts

@@ -1,18 +1,2 @@
-import type { CodeTokenType, CodeTheme } from "../types";
-declare const _themeRegistry: {
-    readonly "default-dark-modern": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "default-dark": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "default-dark-plus": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "visual-studio-light": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "default-light-plus": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "default-light-modern": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-light": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-light-default": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-light-colorblind": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-dark": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-dark-default": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-    readonly "github-dark-colorblind": Record<CodeTokenType, import("csstype").Property.Color | undefined>;
-};
-export declare const themes: (keyof typeof _themeRegistry)[];
-export declare const themeMap: Record<CodeTheme, Record<CodeTokenType, React.CSSProperties["color"]>>;
-export {};
+export declare const themes: readonly ["default-dark-modern", "default-dark", "default-dark-plus", "visual-studio-light", "default-light-plus", "default-light-modern", "github-light", "github-light-default", "github-light-colorblind", "github-dark", "github-dark-default", "github-dark-colorblind"];
+export declare const parsableLanguages: readonly ["javascript"];

package/dist/libs/index.js

@@ -1,30 +1,15 @@
-import { map as darkModern } from "./default-dark-modern";
-import { map as dark } from "./default-dark";
-import { map as darkPlus } from "./default-dark-plus";
-import { map as vsLight } from "./visual-studio-light";
-import { map as lightPlus } from "./default-light-plus";
-import { map as lightModern } from "./default-light-modern";
-import { map as ghLight } from "./github-light";
-import { map as ghLightDefault } from "./github-light-default";
-import { map as ghLightBilnd } from "./github-light-colorblind";
-import { map as ghDark } from "./github-dark";
-import { map as ghDarkDefault } from "./github-dark-default";
-import { map as ghDarkBilnd } from "./github-dark-colorblind";
-const _themeRegistry = {
-    "default-dark-modern": darkModern,
-    "default-dark": dark,
-    "default-dark-plus": darkPlus,
-    "visual-studio-light": vsLight,
-    "default-light-plus": lightPlus,
-    "default-light-modern": lightModern,
-    "github-light": ghLight,
-    "github-light-default": ghLightDefault,
-    "github-light-colorblind": ghLightBilnd,
-    "github-dark": ghDark,
-    "github-dark-default": ghDarkDefault,
-    "github-dark-colorblind": ghDarkBilnd,
-};
-// 自動推導主題名稱
-export const themes = Object.keys(_themeRegistry);
-// themeMap 保留給外部使用
-export const themeMap = _themeRegistry;
+export const themes = [
+    "default-dark-modern",
+    "default-dark",
+    "default-dark-plus",
+    "visual-studio-light",
+    "default-light-plus",
+    "default-light-modern",
+    "github-light",
+    "github-light-default",
+    "github-light-colorblind",
+    "github-dark",
+    "github-dark-default",
+    "github-dark-colorblind",
+];
+export const parsableLanguages = ["javascript"];

package/dist/libs/themes/default-dark-modern.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-dark-modern.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#dcdcaa",
+    keyword1: "#569cd6",
+    keyword2: "#c586c0",
+    string: "#ce9178",
+    number: "#b5cea8",
+    comment: "#6a9955",
+    variable: "#9cdcfe",
+    constant: "#4fc1ff",
+    type: "#4ec9b0",
+    brackets1: "#ffd700",
+    brackets2: "#da70d6",
+    brackets3: "#179fff",
+    operator: "#d4d4d4",
+    default: "#d4d4d4",
+};

package/dist/libs/themes/default-dark-plus.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-dark-plus.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#dcdcaa",
+    keyword1: "#569cd6",
+    keyword2: "#c586c0",
+    string: "#ce9178",
+    number: "#b5cea8",
+    comment: "#6a9955",
+    variable: "#9cdcfe",
+    constant: "#4fc1ff",
+    type: "#4ec9b0",
+    brackets1: "#ffd700",
+    brackets2: "#da70d6",
+    brackets3: "#179fff",
+    operator: "#d4d4d4",
+    default: "#d4d4d4",
+};

package/dist/libs/themes/default-dark.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-dark.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#d4d4d4",
+    keyword1: "#569cd6",
+    keyword2: "#569cd6",
+    string: "#ce9178",
+    number: "#b5cea8",
+    comment: "#6a9955",
+    variable: "#d4d4d4",
+    constant: "#d4d4d4",
+    type: "#d4d4d4",
+    brackets1: "#ffd700",
+    brackets2: "#da70d6",
+    brackets3: "#179fff",
+    operator: "#d4d4d4",
+    default: "#d4d4d4",
+};

package/dist/libs/themes/default-light-modern.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-light-modern.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "rgb(121, 94, 38)",
+    keyword1: "rgb(0, 0, 255)",
+    keyword2: "rgb(175, 0, 219)",
+    string: "rgb(163, 21, 21)",
+    number: "rgb(9, 134, 88)",
+    comment: "rgb(0, 128, 0)",
+    variable: "rgb(0, 16, 128)",
+    constant: "rgb(0, 112, 193)",
+    type: "rgb(0, 0, 255)",
+    brackets1: "rgb(4, 49, 250)",
+    brackets2: "rgb(49, 147, 49)",
+    brackets3: "rgb(123, 56, 20)",
+    operator: "rgb(0, 0, 0)",
+    default: "rgb(0, 0, 0)",
+};

package/dist/libs/themes/default-light-plus.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/default-light-plus.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#795e26",
+    keyword1: "#0000ff",
+    keyword2: "#af00db",
+    string: "#a31515",
+    number: "#098658",
+    comment: "#008000",
+    variable: "#001080",
+    constant: "#0070c1",
+    type: "#267f99",
+    brackets1: "#0431fa",
+    brackets2: "#319331",
+    brackets3: "#7b3814",
+    operator: "#000000",
+    default: "#000000",
+};

package/dist/libs/themes/github-dark-colorblind.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-dark-colorblind.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "rgb(210, 168, 255)",
+    keyword1: "rgb(236, 142, 44)",
+    keyword2: "rgb(236, 142, 44)",
+    string: "rgb(165, 214, 255)",
+    number: "rgb(121, 192, 255)",
+    comment: "#rgb(139, 148, 158)",
+    variable: "rgb(201, 209, 217)",
+    constant: "rgb(121, 192, 255)",
+    type: "rgb(236, 142, 44)",
+    brackets1: "rgb(121, 192, 255)",
+    brackets2: "rgb(121, 192, 255)",
+    brackets3: "rgb(227, 179, 65)",
+    operator: "rgb(236, 142, 44)",
+    default: "rgb(201, 209, 217)",
+};

package/dist/libs/themes/github-dark-default.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-dark-default.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#d2a8ff",
+    keyword1: "#ff7b72",
+    keyword2: "#ff7b72",
+    string: "#a5d6ff",
+    number: "#79c0ff",
+    comment: "#6a737d",
+    variable: "#e6edf3",
+    constant: "#79c0ff",
+    type: "#ff7b72",
+    brackets1: "#79c0ff",
+    brackets2: "#56d364",
+    brackets3: "#e3b341",
+    operator: "#ff7b72",
+    default: "#e6edf3",
+};

package/dist/libs/themes/github-dark.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-dark.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#b392f0",
+    keyword1: "#f97583",
+    keyword2: "#f97583",
+    string: "#9ecbff",
+    number: "#79b8ff",
+    comment: "##6a737d",
+    variable: "#e1e4e8",
+    constant: "#79b8ff",
+    type: "#f97583",
+    brackets1: "#79b8ff",
+    brackets2: "#ffab70",
+    brackets3: "#b392f0",
+    operator: "#f97583",
+    default: "#e1e4e8",
+};

package/dist/libs/themes/github-light-colorblind.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-light-colorblind.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#8250df",
+    keyword1: "#b35900",
+    keyword2: "#b35900",
+    string: "#0a3069",
+    number: "#0550ae",
+    comment: "#6e7781",
+    variable: "#24292f",
+    constant: "#0550ae",
+    type: "#b35900",
+    brackets1: "#0969da",
+    brackets2: "#0969da",
+    brackets3: "#9a6700",
+    operator: "#b35900",
+    default: "#24292f",
+};

package/dist/libs/themes/github-light-default.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-light-default.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#8250df",
+    keyword1: "#cf222e",
+    keyword2: "#cf222e",
+    string: "#0a3069",
+    number: "##0550ae",
+    comment: "#6e7781",
+    variable: "#1f2328",
+    constant: "#0550ae",
+    type: "#cf222e",
+    brackets1: "#0969da",
+    brackets2: "#1a7f37",
+    brackets3: "#9a6700",
+    operator: "#cf222e",
+    default: "#24292e",
+};

package/dist/libs/themes/github-light.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/github-light.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#6f42c1",
+    keyword1: "#d73a49",
+    keyword2: "#d73a49",
+    string: "#032f62",
+    number: "#005cc5",
+    comment: "#6a737d",
+    variable: "#24292e",
+    constant: "#0070c1",
+    type: "#6f42c1",
+    brackets1: "#005cc5",
+    brackets2: "#e36209",
+    brackets3: "#5a32a3",
+    operator: "#d73a49",
+    default: "#24292e",
+};

package/dist/libs/themes/visual-studio-light.d.ts

@@ -0,0 +1,2 @@
+import { CodeTokenType } from "../../types";
+export declare const map: Record<CodeTokenType, React.CSSProperties["color"]>;

package/dist/libs/themes/visual-studio-light.js

@@ -0,0 +1,16 @@
+export const map = {
+    function: "#000000",
+    keyword1: "#0000ff",
+    keyword2: "#0000ff",
+    string: "#a31515",
+    number: "#098658",
+    comment: "#008000",
+    variable: "#000000",
+    constant: "#000000",
+    type: "#000000",
+    brackets1: "#0431fa",
+    brackets2: "#319331",
+    brackets3: "#7b3814",
+    operator: "#000000",
+    default: "#800000",
+};

package/dist/types/index.d.ts

@@ -1,2 +1,117 @@
-export * from "./common";
-export * from "./props";
+import { parsableLanguages, themes } from "../libs";
+import { AsComponentProps, OverrideProps } from "./common";
+/**
+ * 用於表示語法高亮中每個 token 的語意分類，對應於 `<CodeToken />` 中的 `type`。
+ *
+ * 每個類型會對應特定的顏色與用途，例如關鍵字、數字、字串、註解等，
+ * 可配合 `codeColoreMap` 指定顯示樣式。s
+ *
+ * 類型分為以下幾大類：
+ *
+ * - `keyword1` / `keyword2`: 關鍵字，如 `const`、`return`、`import` 等，分顏色類別。
+ * - `string`: 字串常值，如 `'text'`、`"value"`。
+ * - `number`: 數字常值，如 `123`、`3.14`。
+ * - `comment`: 註解內容，如 `//`。
+ * - `type`: 類型定義，如 `interface`、`enum`、`type`。
+ * - `variable`: 識別符號，如變數名、函式名、類別名。
+ * - `constant`: 常數或靜態值，如 `PI`、`MAX_VALUE`。
+ * - `brackets1 | brackets2 | brackets3`: 括號配對，區分不同層級的括號。
+ * - `operator`: 運算符，如 `=`, `+`, `===`, `<`, `>=`。
+ * - `default`: 其他符號，如 `;`, `,`, `.`, `?`, `"`, `'`。
+ *
+ * @example
+ * const token: CodeTokenType = "keyword1";
+ * const token2: CodeTokenType = "string";
+ */
+export type CodeTokenType = `keyword${1 | 2}` | "function" | "string" | "number" | "comment" | "type" | "variable" | "constant" | `brackets${1 | 2 | 3}` | "operator" | "default";
+/**
+ * 表示可用的語法高亮主題名稱。
+ * 對應 `themes` 陣列中定義的名稱，例如 `"vscode-dark"`。
+ *
+ * @example
+ * const theme: CodeTheme = "vscode-dark";
+ */
+export type CodeTheme = (typeof themes)[number];
+/**
+ * 單一語法 token 的屬性，用於 <CodeToken /> 元件。
+ *
+ * @template T HTML 或客製元素，例如 span、a、Link 等
+ */
+export type CodeTokenProps<T extends React.ElementType> = AsComponentProps<T, {
+    /**
+     * 語法 token 的語意類型，用於指定樣式顏色。
+     */
+    type?: CodeTokenType;
+    /**
+     * 語法主題名稱。
+     * @default "vscode-dark"
+     */
+    theme?: CodeTheme;
+}>;
+export type CodeTokenBuilder = <T extends React.ElementType>(children: CodeTokenProps<T>["children"], props?: CodeTokenProps<T>) => CodeTokenProps<T>;
+/**
+ * 用於單一程式碼行的屬性，用在 <CodeLine /> 或類似元件中。
+ */
+export type CodeLineProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLElement>, {
+    /**
+     * 該行所包含的語法 token。
+     *
+     * @example
+     * ```tsx
+     * <CodeLine tokens={[
+     *   { type: "keyword-blue", children: "const" },
+     *   { type: "variable", children: "myVar" },
+     *   { type: "operator", children: "=" },
+     *   { type: "string", children: "'Hello'" },
+     * ]} />
+     * ```
+     */
+    tokens: CodeTokenProps<T>[];
+    /**
+     * 語法主題名稱。
+     * @default "vscode-dark"
+     */
+    theme?: CodeTheme;
+}>;
+export type CodeBlockProps<T extends React.ElementType> = OverrideProps<React.HTMLAttributes<HTMLPreElement>, {
+    /**
+     * 所有程式碼行的 token 陣列。
+     *
+     * @example
+     * ```tsx
+     * <CodeBlock tokenLines={[
+     *   [
+     *     { type: "keyword-blue", children: "const" },
+     *     { type: "variable", children: "x" },
+     *     { type: "operator", children: "=" },
+     *     { type: "number", children: "42" },
+     *   ],
+     *   [
+     *     { type: "keyword-purple", children: "return" },
+     *     { type: "variable", children: "x" },
+     *   ],
+     * ]} />
+     * ```
+     */
+    tokenLines: CodeTokenProps<T>[][];
+    /**
+     * 是否顯示行號。
+     * @default true
+     */
+    showLineNumbers?: boolean;
+    /**
+     * 行號的樣式。
+     * @default { color: "#888", fontSize: "0.8em" }
+     * @example
+     * ```tsx
+     * <CodeBlock lineNumberStyle={{ color: "#888", fontSize: "0.8em" }} />
+     * ```
+     * */
+    lineNumberStyle?: React.CSSProperties;
+    /**
+     * 語法主題名稱。
+     * @default "vscode-dark"
+     */
+    theme?: CodeTheme;
+}>;
+export type ParsableLanguage = (typeof parsableLanguages)[number];

package/dist/types/index.js

@@ -1,2 +1 @@
-export * from "./common";
-export * from "./props";
+export {};

package/dist/utils/index.d.ts

@@ -15,7 +15,7 @@ import { CodeTokenBuilder, CodeTokenProps, CodeTokenType } from "../types";
  *
  * @returns 一個以 `CodeTokenType` 為 key 的建構器函式集合
  */
-export declare const c063: Record<CodeTokenType, CodeTokenBuilder>;
+declare const c063: Record<CodeTokenType, CodeTokenBuilder>;
 /**
  * 產生指定空白數量的 CodeToken，用於程式碼中的縮排或空格。
  *
@@ -26,3 +26,4 @@ export declare const c063: Record<CodeTokenType, CodeTokenBuilder>;
  * tokens.push(whiteSpace(2)); // -> { type: "default", children: "  " }
  */
 export declare const whiteSpace: (count?: number) => CodeTokenProps<"span">;
+export default c063;

package/dist/utils/index.js

@@ -14,7 +14,7 @@
  *
  * @returns 一個以 `CodeTokenType` 為 key 的建構器函式集合
  */
-export const c063 = new Proxy({}, {
+const c063 = new Proxy({}, {
     get: (_, prop) => {
         const builder = (children, props) => {
             return {
@@ -36,3 +36,4 @@ export const c063 = new Proxy({}, {
  * tokens.push(whiteSpace(2)); // -> { type: "default", children: "  " }
  */
 export const whiteSpace = (count = 1) => c063.default(" ".repeat(count));
+export default c063;

package/dist/utils/parser.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/parser.js

@@ -0,0 +1,26 @@
+import { parsableLanguages } from "../libs";
+const isParsableLanguage = (lang) => {
+    return parsableLanguages.includes(lang);
+};
+// 解析單行 CodeTokenProps
+const _parseTokenLine = (line, lang) => {
+    if (!isParsableLanguage(lang))
+        return [];
+    const result = [];
+    // 這邊放對應語言的解析邏輯或呼叫外部 parser
+    // 目前先用預設行全文字 token
+    result.push({ type: "default", children: line });
+    return result;
+};
+const parseTokenLines = new Proxy({}, {
+    get: (_, prop) => (content) => content.split("\n").map((line) => _parseTokenLine(line, prop)),
+});
+// parseTokenLines.javascript(
+//   `const FanYu = {
+//   name: '范余振富',
+//   nickname: '飯魚',
+//   age: 19, // <-點看看🤫
+//   hobbies: ['寫程式', '繪畫'],
+//   skills: ['TypeScript', 'React', 'Python'],
+// } as const;`
+// );

package/dist/utils/theme.d.ts

@@ -0,0 +1,2 @@
+import { CodeTheme, CodeTokenType } from "../types";
+export declare const loadTheme: (theme: CodeTheme) => Promise<Record<CodeTokenType, React.CSSProperties["color"]>>;

package/dist/utils/theme.js

@@ -0,0 +1,4 @@
+export const loadTheme = async (theme) => {
+    const { map } = await import(`../libs/themes/${theme}`);
+    return map;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "c063",
-  "version": "1.3.2",
+  "version": "1.4.1",
   "description": "A React component for displaying code snippets with syntax highlighting.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,25 +16,17 @@
     "Code.js",
     "Fanyu",
     "Syntax Highlighting",
-    "Code Snippet",
     "Code Display",
-    "Code Viewer",
     "Code Block",
     "Code Highlighting",
-    "Code Formatter",
-    "Code Viewer Component",
     "Code Syntax",
     "Code Snippet Viewer",
     "Code Snippet Highlighter",
     "Code Snippet Formatter",
     "Code Snippet Display",
-    "Code Snippet Viewer Component",
     "Code Snippet Highlighter Component",
-    "Code Snippet Formatter Component",
     "Code Snippet Display Component",
-    "Code Snippet Viewer React",
     "Code Snippet Highlighter React",
-    "Code Snippet Formatter React",
     "Code Snippet Display React"
   ],
   "repository": {

package/src/components/CodeBlock.tsx

@@ -1,4 +1,4 @@
-import { CodeBlockProps } from "../types/props";
+import { CodeBlockProps } from "../types/index";
 import { CodeLine } from "./CodeLine";
 /**
  * 顯示完整程式碼區塊，支援多行語法 token 與行號顯示。

package/src/components/CodeLine.tsx

@@ -1,4 +1,4 @@
-import { CodeLineProps } from "../types/props";
+import { CodeLineProps } from "../types/index";
 import { CodeToken } from "./CodeToken";
 /**
  * 渲染單一程式碼行，包含多個語法 token。