@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/dist/themePalette.d.ts

@@ -0,0 +1,66 @@
+/** Appearance of the shared Tokyo Night application palette. */
+export type ThemeMode = 'dark' | 'light';
+declare const dark: {
+    readonly canvas: "#24283b";
+    readonly sidebar: "#1f2335";
+    readonly panel: "#292e42";
+    readonly inset: "#202437";
+    readonly hover: "#30374e";
+    readonly border: "#454d6c";
+    readonly divider: "#353c55";
+    readonly text: "#c0caf5";
+    readonly secondary: "#a9b1d6";
+    readonly muted: "#9aa5ce";
+    readonly accent: "#7aa2f7";
+    readonly accentSoft: "#2c3855";
+    readonly onAccent: "#1f2335";
+    readonly purple: "#bb9af7";
+    readonly cyan: "#7dcfff";
+    readonly success: "#9ece6a";
+    readonly warning: "#e0af68";
+    readonly danger: "#f7768e";
+    readonly render: "#9ece6a";
+    readonly compute: "#a6afff";
+    readonly copy: "#e0af68";
+    readonly clear: "#c4cf89";
+    readonly command: "#bb9af7";
+    readonly external: "#ff9e64";
+    readonly declaration: "#cfc9c2";
+    readonly output: "#f5a2c0";
+    readonly texture: "#f5a2c0";
+    readonly buffer: "#73daca";
+    readonly edge: "#9aa5ce";
+    readonly group: "#8592bd";
+    readonly comment: "#9aa5ce";
+    readonly keyword: "#bb9af7";
+    readonly string: "#9ece6a";
+    readonly number: "#ff9e64";
+    readonly function: "#7aa2f7";
+    readonly type: "#7dcfff";
+    readonly property: "#73daca";
+};
+/** Semantic colors shared by the Inspector and its hosts. */
+export type VisualPalette = {
+    readonly [Key in keyof typeof dark]: string;
+};
+/** Tokyo Night Storm and Light semantic palettes. */
+export declare const visualThemes: Readonly<Record<ThemeMode, VisualPalette>>;
+/** Shared typography, spacing, and corner dimensions. */
+export declare const visualMetrics: {
+    readonly fontUi: "system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Microsoft YaHei\", sans-serif";
+    readonly fontMono: "ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", \"Microsoft YaHei\", monospace";
+    readonly fontBody: "14px";
+    readonly fontControl: "13px";
+    readonly fontTitle: "28px";
+    readonly fontCode: "14px";
+    readonly space1: "4px";
+    readonly space2: "8px";
+    readonly space3: "12px";
+    readonly space4: "16px";
+    readonly space6: "24px";
+    readonly space8: "32px";
+    readonly radiusSmall: "6px";
+    readonly radiusPanel: "10px";
+};
+export {};
+//# sourceMappingURL=themePalette.d.ts.map

package/dist/themePalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themePalette.d.ts","sourceRoot":"","sources":["../src/themePalette.ts"],"names":[],"mappings":"AAAA,gEAAgE;AAChE,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAEzC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAWA,CAAC;AAEX,6DAA6D;AAC7D,MAAM,MAAM,aAAa,GAAG;IAAE,QAAQ,EAAE,GAAG,IAAI,MAAM,OAAO,IAAI,GAAG,MAAM;CAAE,CAAC;AAE5E,qDAAqD;AACrD,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE,aAAa,CAAC,CAcnE,CAAC;AAEF,yDAAyD;AACzD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;CAMhB,CAAC"}

package/dist/themePalette.js

@@ -0,0 +1,37 @@
+const dark = {
+    canvas: '#24283b', sidebar: '#1f2335', panel: '#292e42', inset: '#202437',
+    hover: '#30374e', border: '#454d6c', divider: '#353c55',
+    text: '#c0caf5', secondary: '#a9b1d6', muted: '#9aa5ce',
+    accent: '#7aa2f7', accentSoft: '#2c3855', onAccent: '#1f2335',
+    purple: '#bb9af7', cyan: '#7dcfff', success: '#9ece6a', warning: '#e0af68', danger: '#f7768e',
+    render: '#9ece6a', compute: '#a6afff', copy: '#e0af68', clear: '#c4cf89',
+    command: '#bb9af7', external: '#ff9e64', declaration: '#cfc9c2', output: '#f5a2c0',
+    texture: '#f5a2c0', buffer: '#73daca', edge: '#9aa5ce', group: '#8592bd',
+    comment: '#9aa5ce', keyword: '#bb9af7', string: '#9ece6a', number: '#ff9e64',
+    function: '#7aa2f7', type: '#7dcfff', property: '#73daca',
+};
+/** Tokyo Night Storm and Light semantic palettes. */
+export const visualThemes = {
+    dark,
+    light: {
+        canvas: '#f5f6fa', sidebar: '#eceef5', panel: '#ffffff', inset: '#eef0f7',
+        hover: '#e2e6f1', border: '#909ab0', divider: '#d8ddea',
+        text: '#343b58', secondary: '#59627d', muted: '#5e667e',
+        accent: '#2959aa', accentSoft: '#e1e9f8', onAccent: '#ffffff',
+        purple: '#5a3e8e', cyan: '#006c86', success: '#385f0d', warning: '#8f5e15', danger: '#a03b50',
+        render: '#385f0d', compute: '#5155a6', copy: '#8f5e15', clear: '#566423',
+        command: '#5a3e8e', external: '#965027', declaration: '#65553e', output: '#963c67',
+        texture: '#963c67', buffer: '#236b62', edge: '#606982', group: '#606982',
+        comment: '#606982', keyword: '#5a3e8e', string: '#385f0d', number: '#965027',
+        function: '#2959aa', type: '#006c86', property: '#236b62',
+    },
+};
+/** Shared typography, spacing, and corner dimensions. */
+export const visualMetrics = {
+    fontUi: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif',
+    fontMono: 'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Microsoft YaHei", monospace',
+    fontBody: '14px', fontControl: '13px', fontTitle: '28px', fontCode: '14px',
+    space1: '4px', space2: '8px', space3: '12px', space4: '16px', space6: '24px', space8: '32px',
+    radiusSmall: '6px', radiusPanel: '10px',
+};
+//# sourceMappingURL=themePalette.js.map

package/dist/themePalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themePalette.js","sourceRoot":"","sources":["../src/themePalette.ts"],"names":[],"mappings":"AAGA,MAAM,IAAI,GAAG;IACZ,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS;IACzE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS;IACvD,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS;IACvD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS;IAC7D,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;IAC7F,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS;IACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;IAClF,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS;IACxE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;IAC5E,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS;CAChD,CAAC;AAKX,qDAAqD;AACrD,MAAM,CAAC,MAAM,YAAY,GAA+C;IACvE,IAAI;IACJ,KAAK,EAAE;QACN,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS;QACzE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS;QACvD,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS;QACvD,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS;QAC7D,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;QAC7F,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS;QACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;QAClF,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS;QACxE,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS;QAC5E,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS;KACzD;CACD,CAAC;AAEF,yDAAyD;AACzD,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,MAAM,EAAE,yFAAyF;IACjG,QAAQ,EAAE,yFAAyF;IACnG,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAC1E,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;IAC5F,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM;CAC9B,CAAC","sourcesContent":["/** Appearance of the shared Tokyo Night application palette. */\nexport type ThemeMode = 'dark' | 'light';\n\nconst dark = {\n\tcanvas: '#24283b', sidebar: '#1f2335', panel: '#292e42', inset: '#202437',\n\thover: '#30374e', border: '#454d6c', divider: '#353c55',\n\ttext: '#c0caf5', secondary: '#a9b1d6', muted: '#9aa5ce',\n\taccent: '#7aa2f7', accentSoft: '#2c3855', onAccent: '#1f2335',\n\tpurple: '#bb9af7', cyan: '#7dcfff', success: '#9ece6a', warning: '#e0af68', danger: '#f7768e',\n\trender: '#9ece6a', compute: '#a6afff', copy: '#e0af68', clear: '#c4cf89',\n\tcommand: '#bb9af7', external: '#ff9e64', declaration: '#cfc9c2', output: '#f5a2c0',\n\ttexture: '#f5a2c0', buffer: '#73daca', edge: '#9aa5ce', group: '#8592bd',\n\tcomment: '#9aa5ce', keyword: '#bb9af7', string: '#9ece6a', number: '#ff9e64',\n\tfunction: '#7aa2f7', type: '#7dcfff', property: '#73daca',\n} as const;\n\n/** Semantic colors shared by the Inspector and its hosts. */\nexport type VisualPalette = { readonly [Key in keyof typeof dark]: string };\n\n/** Tokyo Night Storm and Light semantic palettes. */\nexport const visualThemes: Readonly<Record<ThemeMode, VisualPalette>> = {\n\tdark,\n\tlight: {\n\t\tcanvas: '#f5f6fa', sidebar: '#eceef5', panel: '#ffffff', inset: '#eef0f7',\n\t\thover: '#e2e6f1', border: '#909ab0', divider: '#d8ddea',\n\t\ttext: '#343b58', secondary: '#59627d', muted: '#5e667e',\n\t\taccent: '#2959aa', accentSoft: '#e1e9f8', onAccent: '#ffffff',\n\t\tpurple: '#5a3e8e', cyan: '#006c86', success: '#385f0d', warning: '#8f5e15', danger: '#a03b50',\n\t\trender: '#385f0d', compute: '#5155a6', copy: '#8f5e15', clear: '#566423',\n\t\tcommand: '#5a3e8e', external: '#965027', declaration: '#65553e', output: '#963c67',\n\t\ttexture: '#963c67', buffer: '#236b62', edge: '#606982', group: '#606982',\n\t\tcomment: '#606982', keyword: '#5a3e8e', string: '#385f0d', number: '#965027',\n\t\tfunction: '#2959aa', type: '#006c86', property: '#236b62',\n\t},\n};\n\n/** Shared typography, spacing, and corner dimensions. */\nexport const visualMetrics = {\n\tfontUi: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Microsoft YaHei\", sans-serif',\n\tfontMono: 'ui-monospace, SFMono-Regular, Consolas, \"Liberation Mono\", \"Microsoft YaHei\", monospace',\n\tfontBody: '14px', fontControl: '13px', fontTitle: '28px', fontCode: '14px',\n\tspace1: '4px', space2: '8px', space3: '12px', space4: '16px', space6: '24px', space8: '32px',\n\tradiusSmall: '6px', radiusPanel: '10px',\n} as const;\n"]}

package/dist/themes.css

@@ -0,0 +1,165 @@
+/* Generated from Inspector theme definitions. */
+[data-zfgi-theme="tokyo-night-storm"] {
+  --zfgi-color-scheme: dark;
+  --zfgi-canvas: #24283b;
+  --zfgi-background: #292e42;
+  --zfgi-surface: #202437;
+  --zfgi-surface-raised: #292e42;
+  --zfgi-surface-hover: #30374e;
+  --zfgi-border: #454d6c;
+  --zfgi-border-subtle: #353c55;
+  --zfgi-border-strong: #454d6c;
+  --zfgi-text: #c0caf5;
+  --zfgi-text-secondary: #a9b1d6;
+  --zfgi-muted: #9aa5ce;
+  --zfgi-accent: #7aa2f7;
+  --zfgi-accent-soft: #2c3855;
+  --zfgi-accent-hover: #30374e;
+  --zfgi-success: #9ece6a;
+  --zfgi-warning: #e0af68;
+  --zfgi-danger: #f7768e;
+  --zfgi-shadow: 0 8px 24px #0006;
+  --zfgi-backdrop: #13172899;
+  --zfgi-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
+  --zfgi-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Microsoft YaHei", monospace;
+  --zfgi-font-size: 13px;
+  --zfgi-font-size-small: 12px;
+  --zfgi-control-height: 32px;
+  --zfgi-row-height: 36px;
+  --zfgi-radius-sm: 6px;
+  --zfgi-radius-md: 10px;
+  --zfgi-space-1: 4px;
+  --zfgi-space-2: 8px;
+  --zfgi-space-3: 12px;
+  --zfgi-space-4: 16px;
+  --zfgi-graph-tint: 18%;
+  --zfgi-graph-text: #d5ddff;
+  --zfgi-graph-muted: #9aa5ce;
+  --zfgi-graph-font-family: var(--zfgi-font-mono, ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Microsoft YaHei", monospace);
+  --zfgi-graph-font-size: 13px;
+  --zfgi-graph-node-border-width: 1.25px;
+  --zfgi-graph-group-border-width: 1.5px;
+  --zfgi-graph-edge-width: 1.5px;
+  --zfgi-graph-edge-opacity: 1;
+  --zfgi-graph-ordering-opacity: 1;
+  --zfgi-graph-group-opacity: 1;
+  --zfgi-graph-arrow-scale: 0.8;
+  --zfgi-graph-hover-width: 2.5px;
+  --zfgi-graph-selected-width: 3px;
+  --zfgi-graph-selected: var(--zfgi-accent, #7aa2f7);
+  --zfgi-graph-hover: #d5ddff;
+  --zfgi-graph-active-bg: var(--zfgi-graph-text, #d5ddff);
+  --zfgi-graph-active-bg-opacity: 0.08;
+  --zfgi-graph-active-bg-size: 12px;
+  --zfgi-graph-group-stroke: #8592bd;
+  --zfgi-graph-group-fill: #292e42;
+  --zfgi-graph-group-alternate-fill: #30364b;
+  --zfgi-graph-value: #9aa5ce;
+  --zfgi-graph-ordering: #9aa5ce;
+  --zfgi-graph-read: #73daca;
+  --zfgi-graph-write: #e0af68;
+  --zfgi-graph-culled-stroke: #9aa5ce;
+  --zfgi-graph-culled-fill: #202437;
+  --zfgi-graph-render-stroke: #9ece6a;
+  --zfgi-graph-render-fill: color-mix(in srgb, var(--zfgi-graph-render-stroke, #9ece6a) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+  --zfgi-graph-compute-stroke: #a6afff;
+  --zfgi-graph-compute-fill: color-mix(in srgb, var(--zfgi-graph-compute-stroke, #a6afff) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+  --zfgi-graph-copy-stroke: #e0af68;
+  --zfgi-graph-copy-fill: color-mix(in srgb, var(--zfgi-graph-copy-stroke, #e0af68) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+  --zfgi-graph-clear-stroke: #c4cf89;
+  --zfgi-graph-clear-fill: color-mix(in srgb, var(--zfgi-graph-clear-stroke, #c4cf89) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+  --zfgi-graph-command-stroke: #bb9af7;
+  --zfgi-graph-command-fill: color-mix(in srgb, var(--zfgi-graph-command-stroke, #bb9af7) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+  --zfgi-graph-external-stroke: #ff9e64;
+  --zfgi-graph-external-fill: color-mix(in srgb, var(--zfgi-graph-external-stroke, #ff9e64) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+  --zfgi-graph-declaration-stroke: #cfc9c2;
+  --zfgi-graph-declaration-fill: color-mix(in srgb, var(--zfgi-graph-declaration-stroke, #cfc9c2) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+  --zfgi-graph-output-stroke: #f5a2c0;
+  --zfgi-graph-output-fill: color-mix(in srgb, var(--zfgi-graph-output-stroke, #f5a2c0) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+  --zfgi-graph-texture-stroke: #f5a2c0;
+  --zfgi-graph-texture-fill: color-mix(in srgb, var(--zfgi-graph-texture-stroke, #f5a2c0) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+  --zfgi-graph-buffer-stroke: #73daca;
+  --zfgi-graph-buffer-fill: color-mix(in srgb, var(--zfgi-graph-buffer-stroke, #73daca) var(--zfgi-graph-tint, 18%), var(--zfgi-canvas, #24283b));
+}
+[data-zfgi-theme="tokyo-night-light"] {
+  --zfgi-color-scheme: light;
+  --zfgi-canvas: #f5f6fa;
+  --zfgi-background: #ffffff;
+  --zfgi-surface: #eef0f7;
+  --zfgi-surface-raised: #ffffff;
+  --zfgi-surface-hover: #e2e6f1;
+  --zfgi-border: #909ab0;
+  --zfgi-border-subtle: #d8ddea;
+  --zfgi-border-strong: #909ab0;
+  --zfgi-text: #343b58;
+  --zfgi-text-secondary: #59627d;
+  --zfgi-muted: #5e667e;
+  --zfgi-accent: #2959aa;
+  --zfgi-accent-soft: #e1e9f8;
+  --zfgi-accent-hover: #e2e6f1;
+  --zfgi-success: #385f0d;
+  --zfgi-warning: #8f5e15;
+  --zfgi-danger: #a03b50;
+  --zfgi-shadow: 0 8px 24px #343b5826;
+  --zfgi-backdrop: #343b5840;
+  --zfgi-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
+  --zfgi-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Microsoft YaHei", monospace;
+  --zfgi-font-size: 13px;
+  --zfgi-font-size-small: 12px;
+  --zfgi-control-height: 32px;
+  --zfgi-row-height: 36px;
+  --zfgi-radius-sm: 6px;
+  --zfgi-radius-md: 10px;
+  --zfgi-space-1: 4px;
+  --zfgi-space-2: 8px;
+  --zfgi-space-3: 12px;
+  --zfgi-space-4: 16px;
+  --zfgi-graph-tint: 8%;
+  --zfgi-graph-text: #343b58;
+  --zfgi-graph-muted: #5e667e;
+  --zfgi-graph-font-family: var(--zfgi-font-mono, ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", "Microsoft YaHei", monospace);
+  --zfgi-graph-font-size: 13px;
+  --zfgi-graph-node-border-width: 1.25px;
+  --zfgi-graph-group-border-width: 1.5px;
+  --zfgi-graph-edge-width: 1.5px;
+  --zfgi-graph-edge-opacity: 1;
+  --zfgi-graph-ordering-opacity: 1;
+  --zfgi-graph-group-opacity: 1;
+  --zfgi-graph-arrow-scale: 0.8;
+  --zfgi-graph-hover-width: 2.5px;
+  --zfgi-graph-selected-width: 3px;
+  --zfgi-graph-selected: var(--zfgi-accent, #2959aa);
+  --zfgi-graph-hover: #343b58;
+  --zfgi-graph-active-bg: var(--zfgi-graph-text, #343b58);
+  --zfgi-graph-active-bg-opacity: 0.08;
+  --zfgi-graph-active-bg-size: 12px;
+  --zfgi-graph-group-stroke: #606982;
+  --zfgi-graph-group-fill: #eceef5;
+  --zfgi-graph-group-alternate-fill: #e5e9f3;
+  --zfgi-graph-value: #606982;
+  --zfgi-graph-ordering: #606982;
+  --zfgi-graph-read: #236b62;
+  --zfgi-graph-write: #8f5e15;
+  --zfgi-graph-culled-stroke: #5e667e;
+  --zfgi-graph-culled-fill: #eef0f7;
+  --zfgi-graph-render-stroke: #385f0d;
+  --zfgi-graph-render-fill: color-mix(in srgb, var(--zfgi-graph-render-stroke, #385f0d) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+  --zfgi-graph-compute-stroke: #5155a6;
+  --zfgi-graph-compute-fill: color-mix(in srgb, var(--zfgi-graph-compute-stroke, #5155a6) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+  --zfgi-graph-copy-stroke: #8f5e15;
+  --zfgi-graph-copy-fill: color-mix(in srgb, var(--zfgi-graph-copy-stroke, #8f5e15) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+  --zfgi-graph-clear-stroke: #566423;
+  --zfgi-graph-clear-fill: color-mix(in srgb, var(--zfgi-graph-clear-stroke, #566423) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+  --zfgi-graph-command-stroke: #5a3e8e;
+  --zfgi-graph-command-fill: color-mix(in srgb, var(--zfgi-graph-command-stroke, #5a3e8e) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+  --zfgi-graph-external-stroke: #965027;
+  --zfgi-graph-external-fill: color-mix(in srgb, var(--zfgi-graph-external-stroke, #965027) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+  --zfgi-graph-declaration-stroke: #65553e;
+  --zfgi-graph-declaration-fill: color-mix(in srgb, var(--zfgi-graph-declaration-stroke, #65553e) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+  --zfgi-graph-output-stroke: #963c67;
+  --zfgi-graph-output-fill: color-mix(in srgb, var(--zfgi-graph-output-stroke, #963c67) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+  --zfgi-graph-texture-stroke: #963c67;
+  --zfgi-graph-texture-fill: color-mix(in srgb, var(--zfgi-graph-texture-stroke, #963c67) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+  --zfgi-graph-buffer-stroke: #236b62;
+  --zfgi-graph-buffer-fill: color-mix(in srgb, var(--zfgi-graph-buffer-stroke, #236b62) var(--zfgi-graph-tint, 8%), var(--zfgi-canvas, #f5f6fa));
+}

package/package.json

@@ -1,14 +1,33 @@
 {
   "name": "@zenfg/inspector",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0",
   "description": "Embeddable Inspector for ZenFG Snapshot files and live captures",
   "type": "module",
-  "sideEffects": false,
-  "exports": { ".": { "types": "./dist/index.d.ts", "import": "./dist/index.js" } },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "import": "./dist/theme.js"
+    },
+    "./themes.css": "./dist/themes.css"
+  },
   "types": "./dist/index.d.ts",
-  "files": ["dist", "src", "README.md", "LICENSE"],
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE",
+    "THEMING.md",
+    "GUIDE.md"
+  ],
   "dependencies": {
-    "@zenfg/snapshot": "0.1.0-beta.3",
+    "@zenfg/snapshot": "0.1.0",
     "cytoscape": "^3.34.1",
     "elkjs": "^0.12.0"
   },
@@ -20,10 +39,25 @@
     "typecheck": "tsc --noEmit -p tsconfig.json",
     "test": "node ../../scripts/run-tests.mjs packages/inspector/tests"
   },
-  "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org/" },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "license": "MIT",
-  "repository": { "type": "git", "url": "git+https://github.com/uinosoft/zenfg.git", "directory": "packages/inspector" },
-  "homepage": "https://github.com/uinosoft/zenfg/tree/main/packages/inspector",
-  "bugs": { "url": "https://github.com/uinosoft/zenfg/issues" },
-  "keywords": ["framegraph", "inspector", "webgpu", "wgpu", "diagnostics"]
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/uinosoft/zenfg.git",
+    "directory": "packages/inspector"
+  },
+  "homepage": "https://uinosoft.github.io/zenfg/docs/packages/inspector.html",
+  "bugs": {
+    "url": "https://github.com/uinosoft/zenfg/issues"
+  },
+  "keywords": [
+    "framegraph",
+    "inspector",
+    "webgpu",
+    "wgpu",
+    "diagnostics"
+  ]
 }