@humanspeak/svelte-json-view-lite 0.1.0 → 0.1.2

package/README.md

@@ -5,6 +5,18 @@ Fast, tiny JSON tree viewer for Svelte 5 — a port of
 (MIT © 2024 AnyRoad) with runes, SSR, per-type snippet overrides, and zero
 runtime dependencies.
 
+[![NPM version](https://img.shields.io/npm/v/@humanspeak/svelte-json-view-lite.svg)](https://www.npmjs.com/package/@humanspeak/svelte-json-view-lite)
+[![Build Status](https://github.com/humanspeak/svelte-json-view-lite/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/humanspeak/svelte-json-view-lite/actions/workflows/npm-publish.yml)
+[![Coverage Status](https://coveralls.io/repos/github/humanspeak/svelte-json-view-lite/badge.svg?branch=main)](https://coveralls.io/github/humanspeak/svelte-json-view-lite?branch=main)
+[![License](https://img.shields.io/npm/l/@humanspeak/svelte-json-view-lite.svg)](https://github.com/humanspeak/svelte-json-view-lite/blob/main/LICENSE)
+[![Downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-json-view-lite.svg)](https://www.npmjs.com/package/@humanspeak/svelte-json-view-lite)
+[![CodeQL](https://github.com/humanspeak/svelte-json-view-lite/actions/workflows/codeql.yml/badge.svg)](https://github.com/humanspeak/svelte-json-view-lite/actions/workflows/codeql.yml)
+[![Install size](https://packagephobia.com/badge?p=@humanspeak/svelte-json-view-lite)](https://packagephobia.com/result?p=@humanspeak/svelte-json-view-lite)
+[![Code Style: Trunk](https://img.shields.io/badge/code%20style-trunk-blue.svg)](https://trunk.io)
+[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
+[![Types](https://img.shields.io/npm/types/@humanspeak/svelte-json-view-lite.svg)](https://www.npmjs.com/package/@humanspeak/svelte-json-view-lite)
+[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/humanspeak/svelte-json-view-lite/graphs/commit-activity)
+
 ## Features
 
 - Svelte 5 runes throughout (`$props`, `$state`, `$derived`, `$effect`).
@@ -83,6 +95,65 @@ Override individual slots by spreading:
 />
 ```
 
+## Retheme via CSS variables
+
+Every color in the built-in themes is declared as a CSS custom property
+on the root container, so you can tweak one or more colors without
+swapping the entire `style` prop or bringing your own classname map.
+The variables all live under the `--sjv-*` namespace:
+
+| Variable            | Default (light)    | Default (dark)       | Applies to                                 |
+| ------------------- | ------------------ | -------------------- | ------------------------------------------ |
+| `--sjv-background`  | `#eee`             | `rgb(0, 43, 54)`     | Root container background                  |
+| `--sjv-label`       | `#000000`          | `rgb(253, 246, 227)` | Field label text                           |
+| `--sjv-punctuation` | `#000000`          | `rgb(253, 246, 227)` | Brackets, colons, commas                   |
+| `--sjv-string`      | `rgb(42, 63, 60)`  | `rgb(203, 75, 22)`   | String values                              |
+| `--sjv-number`      | `#0b75f5`          | `rgb(211, 54, 130)`  | Number & BigInt values                     |
+| `--sjv-boolean`     | `rgb(70, 144, 56)` | `rgb(174, 129, 255)` | Boolean values                             |
+| `--sjv-null`        | `#df113a`          | `rgb(129, 181, 172)` | `null` literal                             |
+| `--sjv-undefined`   | `#df113a`          | `rgb(129, 181, 172)` | `undefined` literal                        |
+| `--sjv-other`       | `#43413d`          | `rgb(38, 139, 210)`  | Dates, functions, symbols, etc.            |
+| `--sjv-expander`    | `#000000`          | `rgb(253, 246, 227)` | `▸` / `▾` icons and collapsed `...` marker |
+
+**Global override** — applies to every `JsonView` on the page:
+
+```css
+:root {
+    --sjv-string: lavender;
+    --sjv-number: #ff71ce;
+}
+```
+
+**Scoped override** — target one component (or a subtree):
+
+```svelte
+<div class="vaporwave">
+    <JsonView {data} style={defaultStyles} />
+</div>
+
+<style>
+    .vaporwave :global(div[role='tree']) {
+        --sjv-background: #2b1055;
+        --sjv-string: #01cdfe;
+        --sjv-number: #05ffa1;
+        --sjv-boolean: #b967ff;
+    }
+</style>
+```
+
+**Per-instance override** — forward inline styles via the root div (ARIA
+attrs and `style` on `<JsonView>` are spread onto the wrapper):
+
+```svelte
+<JsonView {data} style={defaultStyles} style:--sjv-number="tomato" />
+```
+
+All three patterns work with either `defaultStyles` or `darkStyles` —
+the variables are defined on both container classes with theme-specific
+fallback defaults, so one override applies to whichever theme is active.
+
+See the `/test/css-variables` playground route for a live example.
+
 ## Snippet overrides
 
 Unlike the React lib, `svelte-json-view-lite` exposes typed `Snippet`
@@ -183,5 +254,9 @@ pnpm build        # vite build + svelte-package + publint
 
 ## License
 
-MIT. Copyright © 2024-2026 Humanspeak, Inc. Original
-`react-json-view-lite` © 2024 AnyRoad.
+MIT © [Humanspeak, Inc.](LICENSE) Original `react-json-view-lite`
+© 2024 AnyRoad.
+
+## Credits
+
+Made with ❤️ by [Humanspeak](https://humanspeak.com)

package/dist/DataRender.svelte

@@ -4,9 +4,8 @@
     import type { JsonRenderProps } from './types.js'
     import { isArray, isDate, isFunction, isObject } from './utils/dataTypeDetection.js'
 
-    // Declared as constants because Svelte markup parses `"{"` as an
-    // expression opener, and eslint's no-useless-mustaches objects to
-    // `{'{'}` inline.
+    // Svelte parses `"{"` as an expression opener; stashing the braces as
+    // constants avoids the parse error and the no-useless-mustaches lint.
     const OBJECT_OPEN = '{'
     const OBJECT_CLOSE = '}'
 
@@ -16,13 +15,26 @@
     // Array check first — arrays are also objects, so order matters.
     const isArr = $derived(isArray(value))
     const isObj = $derived(isObject(value) && !isDate(value) && !isFunction(value))
+
+    // Derive the children tuple array from `value` so ExpandableObject
+    // receives a stable reference while `value` is unchanged — otherwise
+    // a fresh array identity on every parent tick invalidates the
+    // {#each} key and cascades re-renders down the tree.
+    const children = $derived.by<Array<[string | undefined, unknown]>>(() => {
+        if (isArr) return (value as unknown[]).map((el) => [undefined, el])
+        if (isObj) {
+            const obj = value as Record<string, unknown>
+            return Object.keys(obj).map((k) => [k, obj[k]])
+        }
+        return []
+    })
 </script>
 
 {#if isArr}
     <ExpandableObject
         {...props}
         value={value as unknown[]}
-        data={(value as unknown[]).map((el) => [undefined, el])}
+        data={children}
         openBracket="["
         closeBracket="]"
     />
@@ -30,7 +42,7 @@
     <ExpandableObject
         {...props}
         value={value as object}
-        data={Object.keys(value as object).map((k) => [k, (value as Record<string, unknown>)[k]])}
+        data={children}
         openBracket={OBJECT_OPEN}
         closeBracket={OBJECT_CLOSE}
     />

package/dist/ExpandableObject.svelte

@@ -20,16 +20,14 @@
         snippets
     }: ExpandableRenderProps = $props()
 
-    // Lazy init — runs once on mount (react useState(() => ...) equivalent).
+    // Initial expand state captured once on mount; the effect below
+    // re-runs only when the callback identity changes so level/value/
+    // field mutations from ancestor re-renders don't collapse the node.
     // svelte-ignore state_referenced_locally
     let expanded = $state(shouldExpandNode(level, value, field))
 
-    // React's useRef<boolean>: plain mutable local.
     let shouldExpandNodeCalled = false
 
-    // Match React useEffect(fn, [shouldExpandNode]) — fire only when the
-    // callback identity changes. We intentionally avoid reading level/value/
-    // field so an ancestor re-render doesn't trigger a respectful collapse.
     $effect(() => {
         const fn = shouldExpandNode
         if (!shouldExpandNodeCalled) {
@@ -39,10 +37,9 @@
         expanded = fn(level, value, field)
     })
 
-    // SSR-stable unique id for aria-controls linkage (React.useId equivalent).
+    // SSR-stable id for aria-controls linkage.
     const contentsId = $props.id()
 
-    // bind:this target for focus management.
     let expanderButton = $state<HTMLSpanElement | null>(null)
 
     const activeAriaLabels = $derived<AriaLabels>(

package/dist/JsonPrimitiveValue.svelte

@@ -18,80 +18,131 @@
     const hasField = $derived(field !== undefined)
     const labelText = $derived(quoteString(field ?? '', style.quotesForFieldNames))
 
+    type ValueKind =
+        | 'null'
+        | 'undefined'
+        | 'string'
+        | 'boolean'
+        | 'number'
+        | 'bigint'
+        | 'date'
+        | 'function'
+        | 'other'
+
+    // A single predicate walk picks the discriminant; `rendered`, the
+    // snippet lookup, and the template all key off `kind` so the 8-way
+    // type ladder is evaluated once per render instead of three times.
+    const kind = $derived.by<ValueKind>(() => {
+        if (value === null) return 'null'
+        if (value === undefined) return 'undefined'
+        if (isString(value)) return 'string'
+        if (isBoolean(value)) return 'boolean'
+        if (isNumber(value)) return 'number'
+        if (isBigInt(value)) return 'bigint'
+        if (isDate(value)) return 'date'
+        if (isFunction(value)) return 'function'
+        return 'other'
+    })
+
     type Rendered = { text: string; valueStyle: string }
     const rendered = $derived.by<Rendered>(() => {
-        if (value === null) return { text: 'null', valueStyle: style.nullValue }
-        if (value === undefined) return { text: 'undefined', valueStyle: style.undefinedValue }
-        if (isString(value))
-            return {
-                text: quoteStringValue(
-                    value,
-                    !style.noQuotesForStringValues,
-                    style.stringifyStringValues
-                ),
-                valueStyle: style.stringValue
-            }
-        if (isBoolean(value))
-            return { text: value ? 'true' : 'false', valueStyle: style.booleanValue }
-        if (isNumber(value)) return { text: value.toString(), valueStyle: style.numberValue }
-        if (isBigInt(value)) return { text: `${value.toString()}n`, valueStyle: style.numberValue }
-        if (isDate(value)) return { text: value.toISOString(), valueStyle: style.otherValue }
-        if (isFunction(value)) return { text: 'function() { }', valueStyle: style.otherValue }
-        return { text: String(value), valueStyle: style.otherValue }
+        switch (kind) {
+            case 'null':
+                return { text: 'null', valueStyle: style.nullValue }
+            case 'undefined':
+                return { text: 'undefined', valueStyle: style.undefinedValue }
+            case 'string':
+                return {
+                    text: quoteStringValue(
+                        value as string,
+                        !style.noQuotesForStringValues,
+                        style.stringifyStringValues
+                    ),
+                    valueStyle: style.stringValue
+                }
+            case 'boolean':
+                return {
+                    text: (value as boolean) ? 'true' : 'false',
+                    valueStyle: style.booleanValue
+                }
+            case 'number':
+                return { text: String(value), valueStyle: style.numberValue }
+            case 'bigint':
+                return {
+                    text: `${(value as bigint).toString()}n`,
+                    valueStyle: style.numberValue
+                }
+            case 'date':
+                return { text: (value as Date).toISOString(), valueStyle: style.otherValue }
+            case 'function':
+                return { text: 'function() { }', valueStyle: style.otherValue }
+            default:
+                return { text: String(value), valueStyle: style.otherValue }
+        }
     })
 
-    const snippetForValue = $derived.by(() => {
-        if (value === null) return snippets.null
-        if (value === undefined) return snippets.undefined
-        if (isString(value)) return snippets.string
-        if (isBoolean(value)) return snippets.boolean
-        if (isNumber(value)) return snippets.number
-        if (isBigInt(value)) return snippets.bigint
-        if (isDate(value)) return snippets.date
-        if (isFunction(value)) return snippets.function
-        return undefined
+    const activeSnippet = $derived.by(() => {
+        switch (kind) {
+            case 'null':
+                return snippets.null
+            case 'undefined':
+                return snippets.undefined
+            case 'string':
+                return snippets.string
+            case 'boolean':
+                return snippets.boolean
+            case 'number':
+                return snippets.number
+            case 'bigint':
+                return snippets.bigint
+            case 'date':
+                return snippets.date
+            case 'function':
+                return snippets.function
+            default:
+                return undefined
+        }
     })
 </script>
 
 <!--
     The entire row body lives on a single prettier-ignored line because Svelte
-    preserves template whitespace between adjacent elements (e.g. between the
-    label span and the value span, or between the value and the trailing
-    comma). Those whitespace text nodes render as visible spaces under the
-    container's `white-space: pre-wrap`. React/JSX strips that whitespace
-    natively; we have to hand-collapse it. Every margin we need is provided
-    by the CSS module (e.g. `.label { margin-right: 5px; }`).
+    preserves template whitespace between adjacent elements as visible spaces
+    under the container's `white-space: pre-wrap`. React/JSX strips that
+    whitespace natively; we hand-collapse it. Per-type snippet branches key
+    off `kind` rather than re-running predicates.
 -->
 <div class={style.basicChildStyle} role="treeitem" aria-selected={false}>
     <!-- prettier-ignore -->
-    {#if hasField}{#if snippets.label}{@render snippets.label({ field: field ?? '', level })}{:else}<span class={style.label}>{labelText}:</span>{/if}{/if}{#if snippetForValue && value === null}{@render snippets.null?.(
+    {#if hasField}{#if snippets.label}{@render snippets.label({ field: field ?? '', level })}{:else}<span class={style.label}>{labelText}:</span>{/if}{/if}{#if activeSnippet && kind === 'null'}{@render snippets.null?.(
             { value: null, field, level }
-        )}{:else if snippetForValue && value === undefined}{@render snippets.undefined?.({
+        )}{:else if activeSnippet && kind === 'undefined'}{@render snippets.undefined?.({
             value: undefined,
             field,
             level
-        })}{:else if snippetForValue && isString(value)}{@render snippets.string?.({
-            value,
+        })}{:else if activeSnippet && kind === 'string'}{@render snippets.string?.({
+            value: value as string,
             field,
             level
-        })}{:else if snippetForValue && isBoolean(value)}{@render snippets.boolean?.({
-            value,
+        })}{:else if activeSnippet && kind === 'boolean'}{@render snippets.boolean?.({
+            value: value as boolean,
             field,
             level
-        })}{:else if snippetForValue && isNumber(value)}{@render snippets.number?.({
-            value,
+        })}{:else if activeSnippet && kind === 'number'}{@render snippets.number?.({
+            value: value as number,
             field,
             level
-        })}{:else if snippetForValue && isBigInt(value)}{@render snippets.bigint?.({
-            value,
+        })}{:else if activeSnippet && kind === 'bigint'}{@render snippets.bigint?.({
+            value: value as bigint,
             field,
             level
-        })}{:else if snippetForValue && isDate(value)}{@render snippets.date?.({
-            value,
+        })}{:else if activeSnippet && kind === 'date'}{@render snippets.date?.({
+            value: value as Date,
             field,
             level
-        })}{:else if snippetForValue && isFunction(value)}{@render snippets.function?.({
-            value,
+        })}{:else if activeSnippet && kind === 'function'}{@render snippets.function?.({
+            // trunk-ignore(eslint/@typescript-eslint/no-unsafe-function-type)
+            value: value as Function,
             field,
             level
         })}{:else}<span class={rendered.valueStyle}>{rendered.text}</span

package/dist/index.d.ts

@@ -5,9 +5,9 @@ export type { AriaLabels, BigIntSnippetProps, BooleanSnippetProps, DateSnippetPr
 export { allExpanded, collapseAllNested } from './utils/expandStrategies.js';
 export { JsonView };
 /**
- * Correctly-spelled default aria labels. Introduced in the Svelte port;
- * prefer this over the typoed `StyleProps.ariaLables` shipped by
- * `react-json-view-lite`.
+ * Correctly-spelled default aria labels (new in the Svelte port; prefer
+ * this over the typoed `StyleProps.ariaLables` shipped by
+ * `react-json-view-lite`).
  */
 export declare const defaultAriaLabels: AriaLabels;
 export declare const defaultStyles: StyleProps;

package/dist/index.js

@@ -3,16 +3,15 @@ import styles from './styles.module.css';
 export default JsonView;
 export { allExpanded, collapseAllNested } from './utils/expandStrategies.js';
 export { JsonView };
-const baseAriaLabels = {
+/**
+ * Correctly-spelled default aria labels (new in the Svelte port; prefer
+ * this over the typoed `StyleProps.ariaLables` shipped by
+ * `react-json-view-lite`).
+ */
+export const defaultAriaLabels = {
     collapseJson: 'collapse JSON',
     expandJson: 'expand JSON'
 };
-/**
- * Correctly-spelled default aria labels. Introduced in the Svelte port;
- * prefer this over the typoed `StyleProps.ariaLables` shipped by
- * `react-json-view-lite`.
- */
-export const defaultAriaLabels = baseAriaLabels;
 const buildStyles = (variant) => ({
     container: styles[`container-${variant}`],
     basicChildStyle: styles['basic-element-style'],
@@ -31,7 +30,7 @@ const buildStyles = (variant) => ({
     collapsedContent: styles[`collapsed-content-${variant}`],
     noQuotesForStringValues: false,
     quotesForFieldNames: false,
-    ariaLabels: baseAriaLabels,
+    ariaLabels: defaultAriaLabels,
     stringifyStringValues: false
 });
 export const defaultStyles = buildStyles('light');

package/dist/styles.module.css

@@ -1,4 +1,6 @@
-/* base styles */
+/*
+ * Base styles shared across themes.
+ */
 
 .container-base {
     line-height: 1.2;
@@ -47,11 +49,6 @@
     font-size: 0.8em;
 }
 
-.container-light {
-    composes: container-base;
-    background: #eee;
-}
-
 .basic-element-style {
     margin: 0;
     padding: 0 10px;
@@ -62,11 +59,35 @@
     padding: 0;
 }
 
-/* default light style */
+/*
+ * Light theme.
+ *
+ * Every color is declared as a CSS custom property (`--sjv-*`) on the
+ * container so consumers can override individual colors either globally
+ * (`:root { --sjv-string: lavender }`) or scoped to one instance
+ * (`.my-json-view { --sjv-number: #f0f }`). Descendant selectors read
+ * the vars via `var(--sjv-*)` — no fallback is needed because the
+ * container always defines the defaults.
+ */
+.container-light {
+    composes: container-base;
+    --sjv-background: #eee;
+    --sjv-label: #000000;
+    --sjv-punctuation: #000000;
+    --sjv-null: #df113a;
+    --sjv-undefined: #df113a;
+    --sjv-string: rgb(42, 63, 60);
+    --sjv-number: #0b75f5;
+    --sjv-boolean: rgb(70, 144, 56);
+    --sjv-other: #43413d;
+    --sjv-expander: #000000;
+    background: var(--sjv-background);
+}
+
 .label-light {
     font-weight: 600;
     margin-right: 5px;
-    color: #000000;
+    color: var(--sjv-label);
 }
 
 .clickable-label-light {
@@ -76,77 +97,74 @@
 
 .punctuation-light {
     composes: punctuation-base;
-    color: #000000;
+    color: var(--sjv-punctuation);
 }
 
 .value-null-light {
-    color: #df113a;
+    color: var(--sjv-null);
 }
 
 .value-undefined-light {
-    color: #df113a;
+    color: var(--sjv-undefined);
 }
 
 .value-string-light {
-    color: rgb(42, 63, 60);
+    color: var(--sjv-string);
 }
 
 .value-number-light {
-    color: #0b75f5;
+    color: var(--sjv-number);
 }
 
 .value-boolean-light {
-    color: rgb(70, 144, 56);
+    color: var(--sjv-boolean);
 }
 
 .value-other-light {
-    color: #43413d;
+    color: var(--sjv-other);
 }
 
 .collapse-icon-light {
     composes: expander-base;
     composes: collapse-icon;
-    color: #000000;
+    color: var(--sjv-expander);
 }
 
 .expand-icon-light {
     composes: expander-base;
     composes: expand-icon;
-    color: #000000;
+    color: var(--sjv-expander);
 }
 
 .collapsed-content-light {
     composes: collapsed-content-base;
-    color: #000000;
+    color: var(--sjv-expander);
 }
 
-/* default dark style */
+/*
+ * Dark theme. Same variable names, different defaults — so a consumer
+ * override like `:root { --sjv-string: lavender }` applies identically
+ * to light and dark instances.
+ */
 .container-dark {
-    background: rgb(0, 43, 54);
     composes: container-base;
-}
-
-.expand-icon-dark {
-    composes: expander-base;
-    composes: expand-icon;
-    color: rgb(253, 246, 227);
-}
-
-.collapse-icon-dark {
-    composes: expander-base;
-    composes: collapse-icon;
-    color: rgb(253, 246, 227);
-}
-
-.collapsed-content-dark {
-    composes: collapsed-content-base;
-    color: rgb(253, 246, 227);
+    --sjv-background: rgb(0, 43, 54);
+    --sjv-label: rgb(253, 246, 227);
+    --sjv-punctuation: rgb(253, 246, 227);
+    --sjv-null: rgb(129, 181, 172);
+    --sjv-undefined: rgb(129, 181, 172);
+    --sjv-string: rgb(203, 75, 22);
+    --sjv-number: rgb(211, 54, 130);
+    --sjv-boolean: rgb(174, 129, 255);
+    --sjv-other: rgb(38, 139, 210);
+    --sjv-expander: rgb(253, 246, 227);
+    background: var(--sjv-background);
 }
 
 .label-dark {
     font-weight: bolder;
     margin-right: 5px;
-    color: rgb(253, 246, 227);
+    color: var(--sjv-label);
 }
 
 .clickable-label-dark {
@@ -156,29 +174,46 @@
 
 .punctuation-dark {
     composes: punctuation-base;
-    color: rgb(253, 246, 227);
+    color: var(--sjv-punctuation);
 }
 
 .value-null-dark {
-    color: rgb(129, 181, 172);
+    color: var(--sjv-null);
 }
 
 .value-undefined-dark {
-    color: rgb(129, 181, 172);
+    color: var(--sjv-undefined);
 }
 
 .value-string-dark {
-    color: rgb(203, 75, 22);
+    color: var(--sjv-string);
 }
 
 .value-number-dark {
-    color: rgb(211, 54, 130);
+    color: var(--sjv-number);
 }
 
 .value-boolean-dark {
-    color: rgb(174, 129, 255);
+    color: var(--sjv-boolean);
 }
 
 .value-other-dark {
-    color: rgb(38, 139, 210);
+    color: var(--sjv-other);
+}
+
+.expand-icon-dark {
+    composes: expander-base;
+    composes: expand-icon;
+    color: var(--sjv-expander);
+}
+
+.collapse-icon-dark {
+    composes: expander-base;
+    composes: collapse-icon;
+    color: var(--sjv-expander);
+}
+
+.collapsed-content-dark {
+    composes: collapsed-content-base;
+    color: var(--sjv-expander);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humanspeak/svelte-json-view-lite",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Fast, tiny JSON tree viewer for Svelte 5 — port of react-json-view-lite with runes, SSR, snippet overrides, and zero runtime dependencies",
   "keywords": [
     "svelte",
@@ -55,39 +55,39 @@
     }
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.5",
+    "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.60.0",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.57.1",
+    "@sveltejs/kit": "^2.61.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/svelte": "^5.3.1",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.6.0",
-    "@typescript-eslint/eslint-plugin": "^8.58.2",
-    "@typescript-eslint/parser": "^8.58.2",
-    "@vitest/coverage-v8": "^4.1.4",
-    "eslint": "^10.2.1",
+    "@types/node": "^25.9.1",
+    "@typescript-eslint/eslint-plugin": "^8.60.0",
+    "@typescript-eslint/parser": "^8.60.0",
+    "@vitest/coverage-v8": "^4.1.7",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-svelte": "^3.17.0",
+    "eslint-plugin-svelte": "^3.18.0",
     "eslint-plugin-unused-imports": "^4.4.1",
-    "globals": "^17.5.0",
+    "globals": "^17.6.0",
     "husky": "^9.1.7",
-    "jsdom": "^29.0.2",
-    "mprocs": "^0.9.2",
+    "jsdom": "^29.1.1",
+    "mprocs": "^0.9.3",
     "prettier": "^3.8.3",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "prettier-plugin-svelte": "^3.5.1",
-    "publint": "^0.3.18",
-    "svelte": "^5.55.4",
-    "svelte-check": "^4.4.6",
+    "prettier-plugin-svelte": "^4.0.1",
+    "publint": "^0.3.21",
+    "svelte": "^5.55.9",
+    "svelte-check": "^4.4.8",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.58.2",
-    "vite": "^8.0.8",
-    "vitest": "^4.1.4"
+    "typescript-eslint": "^8.60.0",
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -105,6 +105,7 @@
   ],
   "scripts": {
     "build": "vite build && npm run package",
+    "cf-typegen": "pnpm --filter docs cf-typegen",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "dev": "vite dev",