@humanspeak/svelte-json-view-lite 0.1.0

package/LICENSE

@@ -0,0 +1,24 @@
+MIT License
+
+Copyright (c) 2024-2026 Humanspeak, Inc.
+
+Copyright (c) 2024 AnyRoad (original react-json-view-lite, https://github.com/AnyRoad/react-json-view-lite)
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,187 @@
+# @humanspeak/svelte-json-view-lite
+
+Fast, tiny JSON tree viewer for Svelte 5 — a port of
+[react-json-view-lite](https://github.com/AnyRoad/react-json-view-lite)
+(MIT © 2024 AnyRoad) with runes, SSR, per-type snippet overrides, and zero
+runtime dependencies.
+
+## Features
+
+- Svelte 5 runes throughout (`$props`, `$state`, `$derived`, `$effect`).
+- Drop-in API parity with `react-json-view-lite`: same prop names, themes,
+  and strategy helpers.
+- Per-type `Snippet` overrides for custom value rendering (strings, numbers,
+  dates, etc.) — new in the Svelte port.
+- SSR-safe: uses `$props.id()` for stable `aria-controls` linkage across
+  server/client.
+- Keyboard accessible: roving tabindex + `ArrowUp`/`ArrowDown`/`ArrowLeft`/
+  `ArrowRight` navigation, full WAI-ARIA treeview semantics.
+- Ships built-in light and dark themes via CSS Modules.
+
+## Installation
+
+```bash
+npm i -S @humanspeak/svelte-json-view-lite
+# or
+pnpm add @humanspeak/svelte-json-view-lite
+```
+
+## Basic usage
+
+```svelte
+<script lang="ts">
+    import { JsonView, defaultStyles } from '@humanspeak/svelte-json-view-lite'
+
+    const data = {
+        name: 'Ada Lovelace',
+        tags: ['admin', 'beta'],
+        active: true,
+        joined: new Date('2024-01-15')
+    }
+</script>
+
+<JsonView {data} style={defaultStyles} />
+```
+
+## Props
+
+| Prop                    | Type                                     | Default         | Description                                                                        |
+| ----------------------- | ---------------------------------------- | --------------- | ---------------------------------------------------------------------------------- |
+| `data`                  | `object \| unknown[]`                    | —               | The JSON-shaped value to render.                                                   |
+| `style`                 | `Partial<StyleProps>`                    | `defaultStyles` | Classname-map that themes every slot.                                              |
+| `shouldExpandNode`      | `(level, value, field?) => boolean`      | `allExpanded`   | Initial-expand strategy per node.                                                  |
+| `clickToExpandNode`     | `boolean`                                | `false`         | When true, clicking the field label also toggles the node.                         |
+| `beforeExpandChange`    | `(event: NodeExpandingEvent) => boolean` | —               | Return `false` to veto an expand/collapse transition.                              |
+| `compactTopLevel`       | `boolean`                                | `false`         | Spread root-object entries instead of nesting them under a single root expander.   |
+| `string`, `number`, ... | `Snippet<[{ value, field?, level }]>`    | —               | Optional per-type renderer overrides. See [Snippet overrides](#snippet-overrides). |
+
+Any additional HTML attributes (`aria-*`, `data-*`, `id`, `class`, etc.) are
+forwarded onto the root `<div role="tree">`.
+
+## Themes
+
+Two themes ship out of the box:
+
+```svelte
+<script lang="ts">
+    import { JsonView, defaultStyles, darkStyles } from '@humanspeak/svelte-json-view-lite'
+</script>
+
+<JsonView data={json} style={darkStyles} />
+```
+
+Override individual slots by spreading:
+
+```svelte
+<JsonView
+    {data}
+    style={{
+        ...defaultStyles,
+        stringValue: 'my-custom-string-class',
+        punctuation: 'my-custom-punctuation-class'
+    }}
+/>
+```
+
+## Snippet overrides
+
+Unlike the React lib, `svelte-json-view-lite` exposes typed `Snippet`
+overrides for every primitive type plus the field label. Each snippet
+receives `{ value, field?, level }`; omit the snippet to fall through to
+the default rendering.
+
+```svelte
+<script lang="ts">
+    import {
+        JsonView,
+        type DateSnippetProps,
+        type StringSnippetProps
+    } from '@humanspeak/svelte-json-view-lite'
+
+    const data = {
+        joined: new Date('2024-01-15'),
+        docs: 'https://example.com/docs'
+    }
+
+    function relative(d: Date): string {
+        const days = Math.round((d.getTime() - Date.now()) / 86_400_000)
+        return new Intl.RelativeTimeFormat('en').format(days, 'day')
+    }
+</script>
+
+<JsonView {data}>
+    {#snippet date({ value }: DateSnippetProps)}
+        <span title={value.toISOString()}>{relative(value)}</span>
+    {/snippet}
+    {#snippet string({ value }: StringSnippetProps)}
+        {#if /^https?:/.test(value)}
+            <a href={value}>{value}</a>
+        {:else}
+            "{value}"
+        {/if}
+    {/snippet}
+</JsonView>
+```
+
+Available snippets: `string`, `number`, `boolean`, `null`, `undefined`,
+`bigint`, `date`, `function`, `label`. Their typed prop interfaces
+(`StringSnippetProps`, `LabelSnippetProps`, etc.) are all exported from
+the package root.
+
+## Expand strategies
+
+```svelte
+<script lang="ts">
+    import { JsonView, collapseAllNested, allExpanded } from '@humanspeak/svelte-json-view-lite'
+</script>
+
+<!-- expand only the root, collapse every child -->
+<JsonView {data} shouldExpandNode={collapseAllNested} />
+
+<!-- expand everything (default) -->
+<JsonView {data} shouldExpandNode={allExpanded} />
+
+<!-- custom: expand up to depth 2 -->
+<JsonView {data} shouldExpandNode={(level) => level < 2} />
+```
+
+## Migrating from `react-json-view-lite`
+
+The Svelte API preserves the React prop names and theme-object shape. Only
+two differences exist:
+
+| React                       | Svelte                                                     |
+| --------------------------- | ---------------------------------------------------------- |
+| `style.ariaLables` (typoed) | `style.ariaLabels` (fixed; typo still honored with a warn) |
+| — (not supported)           | Per-type `Snippet` overrides                               |
+
+Everything else — `style`, `clickToExpandNode`, `compactTopLevel`,
+`beforeExpandChange`, `shouldExpandNode`, `defaultStyles`, `darkStyles`,
+`allExpanded`, `collapseAllNested` — works identically.
+
+## Accessibility
+
+- Root element has `role="tree"` with `aria-label="JSON view"` (overridable).
+- Every expandable node is a `role="treeitem"` with live `aria-expanded`
+  and, when open, `aria-controls` pointing at its child `<ul role="group">`.
+- Keyboard support follows the [WAI-ARIA 1.2 Treeview pattern]:
+    - `ArrowRight` expands, `ArrowLeft` collapses.
+    - `ArrowDown` / `ArrowUp` move focus between expanders (wrapping).
+    - Roving `tabindex` keeps only one expander in the tab order.
+
+[WAI-ARIA 1.2 Treeview pattern]: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+
+## Development
+
+```bash
+pnpm install
+pnpm dev          # launch SvelteKit playground on :8233
+pnpm check        # svelte-check
+pnpm test         # vitest + coverage
+pnpm build        # vite build + svelte-package + publint
+```
+
+## License
+
+MIT. Copyright © 2024-2026 Humanspeak, Inc. Original
+`react-json-view-lite` © 2024 AnyRoad.

package/dist/DataRender.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import ExpandableObject from './ExpandableObject.svelte'
+    import JsonPrimitiveValue from './JsonPrimitiveValue.svelte'
+    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.
+    const OBJECT_OPEN = '{'
+    const OBJECT_CLOSE = '}'
+
+    const props: JsonRenderProps<unknown> = $props()
+    const value = $derived(props.value)
+
+    // Array check first — arrays are also objects, so order matters.
+    const isArr = $derived(isArray(value))
+    const isObj = $derived(isObject(value) && !isDate(value) && !isFunction(value))
+</script>
+
+{#if isArr}
+    <ExpandableObject
+        {...props}
+        value={value as unknown[]}
+        data={(value as unknown[]).map((el) => [undefined, el])}
+        openBracket="["
+        closeBracket="]"
+    />
+{:else if isObj}
+    <ExpandableObject
+        {...props}
+        value={value as object}
+        data={Object.keys(value as object).map((k) => [k, (value as Record<string, unknown>)[k]])}
+        openBracket={OBJECT_OPEN}
+        closeBracket={OBJECT_CLOSE}
+    />
+{:else}
+    <JsonPrimitiveValue
+        {...props}
+        value={value as
+            | string
+            | number
+            | boolean
+            | bigint
+            | Date
+            // trunk-ignore(eslint/@typescript-eslint/no-unsafe-function-type)
+            | Function
+            | null
+            | undefined}
+    />
+{/if}

package/dist/DataRender.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { JsonRenderProps } from './types.js';
+declare const DataRender: import("svelte").Component<JsonRenderProps<unknown>, {}, "">;
+type DataRender = ReturnType<typeof DataRender>;
+export default DataRender;

package/dist/EmptyObject.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import type { EmptyRenderProps } from './types.js'
+    import { quoteString } from './utils/quoteString.js'
+
+    const { field, openBracket, closeBracket, lastElement, style }: EmptyRenderProps = $props()
+    const hasField = $derived(field !== undefined)
+    const labelText = $derived(quoteString(field ?? '', style.quotesForFieldNames))
+</script>
+
+<!--
+    Label + brackets collapsed onto one prettier-ignored line because Svelte
+    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. Brackets and trailing comma also
+    live in a single punctuation span so the `.punctuation-base + .punctuation-base`
+    adjacent-sibling margin rule isn't needed here.
+-->
+<div class={style.basicChildStyle} role="treeitem" aria-selected={false}>
+    <!-- prettier-ignore -->
+    {#if hasField}<span class={style.label}>{labelText}:</span>{/if}<span class={style.punctuation}
+        >{openBracket}{closeBracket}{lastElement ? '' : ','}</span
+    >
+</div>

package/dist/EmptyObject.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { EmptyRenderProps } from './types.js';
+declare const EmptyObject: import("svelte").Component<EmptyRenderProps, {}, "">;
+type EmptyObject = ReturnType<typeof EmptyObject>;
+export default EmptyObject;

package/dist/ExpandableObject.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+    import DataRender from './DataRender.svelte'
+    import EmptyObject from './EmptyObject.svelte'
+    import type { AriaLabels, ExpandableRenderProps } from './types.js'
+    import { quoteString } from './utils/quoteString.js'
+
+    const {
+        field,
+        value,
+        data,
+        lastElement,
+        openBracket,
+        closeBracket,
+        level,
+        style,
+        shouldExpandNode,
+        clickToExpandNode,
+        outerRef,
+        beforeExpandChange,
+        snippets
+    }: ExpandableRenderProps = $props()
+
+    // Lazy init — runs once on mount (react useState(() => ...) equivalent).
+    // 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) {
+            shouldExpandNodeCalled = true
+            return
+        }
+        expanded = fn(level, value, field)
+    })
+
+    // SSR-stable unique id for aria-controls linkage (React.useId equivalent).
+    const contentsId = $props.id()
+
+    // bind:this target for focus management.
+    let expanderButton = $state<HTMLSpanElement | null>(null)
+
+    const activeAriaLabels = $derived<AriaLabels>(
+        style.ariaLabels ??
+            style.ariaLables ?? {
+                collapseJson: 'collapse JSON',
+                expandJson: 'expand JSON'
+            }
+    )
+    const expanderIconStyle = $derived(expanded ? style.collapseIcon : style.expandIcon)
+    const ariaLabel = $derived(
+        expanded ? activeAriaLabels.collapseJson : activeAriaLabels.expandJson
+    )
+    const childLevel = $derived(level + 1)
+    const lastIndex = $derived(data.length - 1)
+    const hasField = $derived(field !== undefined)
+    const labelText = $derived(quoteString(field ?? '', style.quotesForFieldNames))
+
+    function setExpandWithCallback(newExpandValue: boolean) {
+        if (expanded === newExpandValue) return
+        if (beforeExpandChange && !beforeExpandChange({ level, value, field, newExpandValue })) {
+            return
+        }
+        expanded = newExpandValue
+    }
+
+    function onKeyDown(e: KeyboardEvent) {
+        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+            e.preventDefault()
+            setExpandWithCallback(e.key === 'ArrowRight')
+            return
+        }
+        if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return
+        e.preventDefault()
+        const direction = e.key === 'ArrowUp' ? -1 : 1
+        const outer = outerRef.current
+        if (!outer) return
+        const buttons = outer.querySelectorAll<HTMLElement>('[role=button]')
+        let currentIndex = -1
+        for (let i = 0; i < buttons.length; i++) {
+            if (buttons[i].tabIndex === 0) {
+                currentIndex = i
+                break
+            }
+        }
+        if (currentIndex < 0) return
+        const nextIndex = (currentIndex + direction + buttons.length) % buttons.length
+        buttons[currentIndex].tabIndex = -1
+        buttons[nextIndex].tabIndex = 0
+        buttons[nextIndex].focus()
+    }
+
+    function onClick() {
+        setExpandWithCallback(!expanded)
+        if (!expanderButton) return
+        const prev = outerRef.current?.querySelector<HTMLElement>('[role=button][tabindex="0"]')
+        if (prev) prev.tabIndex = -1
+        expanderButton.tabIndex = 0
+        expanderButton.focus()
+    }
+</script>
+
+{#if data.length === 0}
+    <EmptyObject {field} {openBracket} {closeBracket} {lastElement} {style} />
+{:else}
+    <div
+        class={style.basicChildStyle}
+        role="treeitem"
+        aria-expanded={expanded}
+        aria-selected={false}
+    >
+        <!--
+            The entire inline sequence inside a row lives on a single
+            prettier-ignored line because Svelte preserves template whitespace
+            between adjacent elements (expander→label→openBracket→children→
+            closeBracket) as visible spaces under the container's
+            `white-space: pre-wrap`. React/JSX strips that whitespace natively;
+            we have to hand-collapse it. The `<ul>` of children is block-level
+            so the whitespace around it is not layout-significant, but we keep
+            it tight anyway for a consistent rule.
+        -->
+        <!-- prettier-ignore -->
+        <span bind:this={expanderButton} class={expanderIconStyle} role="button" aria-label={ariaLabel} aria-expanded={expanded} aria-controls={expanded ? contentsId : undefined} tabindex={level === 0 ? 0 : -1} onclick={onClick} onkeydown={onKeyDown}></span>{#if hasField}{#if snippets.label}{@render snippets.label(
+                    { field: field ?? '', level }
+                )}{:else if clickToExpandNode}<!-- svelte-ignore a11y_no_static_element_interactions --><span
+                    class={style.clickableLabel}
+                    onclick={onClick}
+                    onkeydown={onKeyDown}>{labelText}:</span
+                >{:else}<span class={style.label}>{labelText}:</span>{/if}{/if}<span
+            class={style.punctuation}>{openBracket}</span
+        >{#if expanded}<ul id={contentsId} role="group" class={style.childFieldsContainer}>
+                {#each data as [childField, childValue], index (childField ?? index)}<DataRender
+                        field={childField}
+                        value={childValue}
+                        {style}
+                        lastElement={index === lastIndex}
+                        level={childLevel}
+                        {shouldExpandNode}
+                        {clickToExpandNode}
+                        {beforeExpandChange}
+                        {outerRef}
+                        {snippets}
+                    />{/each}
+            </ul>{:else}<!-- svelte-ignore a11y_no_static_element_interactions --><span
+                class={style.collapsedContent}
+                onclick={onClick}
+                onkeydown={onKeyDown}
+            ></span>{/if}<span class={style.punctuation}
+            >{closeBracket}{lastElement ? '' : ','}</span
+        >
+    </div>
+{/if}

package/dist/ExpandableObject.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ExpandableRenderProps } from './types.js';
+declare const ExpandableObject: import("svelte").Component<ExpandableRenderProps, {}, "">;
+type ExpandableObject = ReturnType<typeof ExpandableObject>;
+export default ExpandableObject;

package/dist/JsonPrimitiveValue.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+    import type { JsonRenderProps } from './types.js'
+    import {
+        isBigInt,
+        isBoolean,
+        isDate,
+        isFunction,
+        isNumber,
+        isString
+    } from './utils/dataTypeDetection.js'
+    import { quoteString, quoteStringValue } from './utils/quoteString.js'
+
+    // trunk-ignore(eslint/@typescript-eslint/no-unsafe-function-type)
+    type Primitive = string | number | boolean | bigint | Date | Function | null | undefined
+    const { field, value, style, lastElement, level, snippets }: JsonRenderProps<Primitive> =
+        $props()
+
+    const hasField = $derived(field !== undefined)
+    const labelText = $derived(quoteString(field ?? '', style.quotesForFieldNames))
+
+    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 }
+    })
+
+    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
+    })
+</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; }`).
+-->
+<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?.(
+            { value: null, field, level }
+        )}{:else if snippetForValue && value === undefined}{@render snippets.undefined?.({
+            value: undefined,
+            field,
+            level
+        })}{:else if snippetForValue && isString(value)}{@render snippets.string?.({
+            value,
+            field,
+            level
+        })}{:else if snippetForValue && isBoolean(value)}{@render snippets.boolean?.({
+            value,
+            field,
+            level
+        })}{:else if snippetForValue && isNumber(value)}{@render snippets.number?.({
+            value,
+            field,
+            level
+        })}{:else if snippetForValue && isBigInt(value)}{@render snippets.bigint?.({
+            value,
+            field,
+            level
+        })}{:else if snippetForValue && isDate(value)}{@render snippets.date?.({
+            value,
+            field,
+            level
+        })}{:else if snippetForValue && isFunction(value)}{@render snippets.function?.({
+            value,
+            field,
+            level
+        })}{:else}<span class={rendered.valueStyle}>{rendered.text}</span
+        >{/if}{#if !lastElement}<span class={style.punctuation}>,</span>{/if}
+</div>

package/dist/JsonPrimitiveValue.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { JsonRenderProps } from './types.js';
+declare const JsonPrimitiveValue: import("svelte").Component<JsonRenderProps<string | number | bigint | boolean | Function | Date | null | undefined>, {}, "">;
+type JsonPrimitiveValue = ReturnType<typeof JsonPrimitiveValue>;
+export default JsonPrimitiveValue;

package/dist/JsonView.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+    import DataRender from './DataRender.svelte'
+    import { defaultStyles } from './index.js'
+    import type { OuterRef, Props, StyleProps } from './types.js'
+    import { isObject } from './utils/dataTypeDetection.js'
+    import { allExpanded } from './utils/expandStrategies.js'
+
+    const {
+        data,
+        style = {},
+        shouldExpandNode = allExpanded,
+        clickToExpandNode = false,
+        beforeExpandChange,
+        compactTopLevel = false,
+        string,
+        number,
+        boolean,
+        null: nullSnippet,
+        undefined: undefinedSnippet,
+        bigint,
+        date,
+        function: functionSnippet,
+        label,
+        'aria-label': ariaLabel = 'JSON view',
+        ...rest
+    }: Props = $props()
+
+    let outerElement = $state<HTMLDivElement | null>(null)
+
+    // Merge user theme onto defaults. Also emit a deprecation warning when the
+    // legacy `ariaLables` key (typo in react-json-view-lite) is supplied
+    // without the corrected `ariaLabels`; the typoed value is still honored
+    // during 1.x so React migrators have a soft landing.
+    const mergedStyle = $derived.by<StyleProps>(() => {
+        const merged: StyleProps = { ...defaultStyles, ...style }
+        // Accept the misspelled ariaLables (from react-json-view-lite) only
+        // when the user has not provided an ariaLabels value — users who
+        // supply both should have the corrected key win.
+        if (style?.ariaLables && !style.ariaLabels) {
+            if (typeof console !== 'undefined') {
+                console.warn(
+                    '[svelte-json-view-lite] StyleProps.ariaLables is deprecated (typo preserved from react-json-view-lite); use ariaLabels.'
+                )
+            }
+            merged.ariaLabels = style.ariaLables
+        }
+        return merged
+    })
+
+    // Getter wrapper so children always see the current bind:this target
+    // rather than a frozen snapshot from the first render.
+    const outerRef: OuterRef = {
+        get current() {
+            return outerElement
+        }
+    }
+
+    const snippets = $derived({
+        string,
+        number,
+        boolean,
+        null: nullSnippet,
+        undefined: undefinedSnippet,
+        bigint,
+        date,
+        function: functionSnippet,
+        label
+    })
+</script>
+
+<div
+    bind:this={outerElement}
+    role="tree"
+    aria-label={ariaLabel}
+    {...rest}
+    class={mergedStyle.container}
+>
+    {#if compactTopLevel && isObject(data)}
+        {#each Object.entries(data) as [key, value] (key)}
+            <DataRender
+                field={key}
+                {value}
+                style={mergedStyle}
+                lastElement={true}
+                level={1}
+                {shouldExpandNode}
+                {clickToExpandNode}
+                {beforeExpandChange}
+                {outerRef}
+                {snippets}
+            />
+        {/each}
+    {:else}
+        <DataRender
+            value={data}
+            style={mergedStyle}
+            lastElement={true}
+            level={0}
+            {shouldExpandNode}
+            {clickToExpandNode}
+            {beforeExpandChange}
+            {outerRef}
+            {snippets}
+        />
+    {/if}
+</div>

package/dist/JsonView.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Props } from './types.js';
+declare const JsonView: import("svelte").Component<Props, {}, "">;
+type JsonView = ReturnType<typeof JsonView>;
+export default JsonView;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import JsonView from './JsonView.svelte';
+import type { AriaLabels, StyleProps } from './types.js';
+export default JsonView;
+export type { AriaLabels, BigIntSnippetProps, BooleanSnippetProps, DateSnippetProps, FunctionSnippetProps, LabelSnippetProps, NodeExpandingEvent, NullSnippetProps, NumberSnippetProps, Props, SnippetOverrides, StringSnippetProps, StyleProps, UndefinedSnippetProps } from './types.js';
+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`.
+ */
+export declare const defaultAriaLabels: AriaLabels;
+export declare const defaultStyles: StyleProps;
+export declare const darkStyles: StyleProps;

package/dist/index.js

@@ -0,0 +1,38 @@
+import JsonView from './JsonView.svelte';
+import styles from './styles.module.css';
+export default JsonView;
+export { allExpanded, collapseAllNested } from './utils/expandStrategies.js';
+export { JsonView };
+const baseAriaLabels = {
+    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'],
+    childFieldsContainer: styles['child-fields-container'],
+    label: styles[`label-${variant}`],
+    clickableLabel: styles[`clickable-label-${variant}`],
+    nullValue: styles[`value-null-${variant}`],
+    undefinedValue: styles[`value-undefined-${variant}`],
+    stringValue: styles[`value-string-${variant}`],
+    booleanValue: styles[`value-boolean-${variant}`],
+    numberValue: styles[`value-number-${variant}`],
+    otherValue: styles[`value-other-${variant}`],
+    punctuation: styles[`punctuation-${variant}`],
+    collapseIcon: styles[`collapse-icon-${variant}`],
+    expandIcon: styles[`expand-icon-${variant}`],
+    collapsedContent: styles[`collapsed-content-${variant}`],
+    noQuotesForStringValues: false,
+    quotesForFieldNames: false,
+    ariaLabels: baseAriaLabels,
+    stringifyStringValues: false
+});
+export const defaultStyles = buildStyles('light');
+export const darkStyles = buildStyles('dark');

package/dist/styles.module.css

@@ -0,0 +1,184 @@
+/* base styles */
+
+.container-base {
+    line-height: 1.2;
+    white-space: pre-wrap;
+    white-space: -moz-pre-wrap;
+    white-space: -pre-wrap;
+    white-space: -o-pre-wrap;
+    word-wrap: break-word;
+}
+
+.punctuation-base {
+    margin-right: 5px;
+    font-weight: bold;
+}
+
+.punctuation-base + .punctuation-base {
+    margin-left: -5px;
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+.expander-base {
+    composes: pointer;
+    font-size: 1.2em;
+    margin-right: 5px;
+    user-select: none;
+}
+
+.expand-icon::after {
+    content: '▸';
+}
+
+.collapse-icon::after {
+    content: '▾';
+}
+
+.collapsed-content-base {
+    composes: pointer;
+    margin-right: 5px;
+}
+
+.collapsed-content-base::after {
+    content: '...';
+    font-size: 0.8em;
+}
+
+.container-light {
+    composes: container-base;
+    background: #eee;
+}
+
+.basic-element-style {
+    margin: 0;
+    padding: 0 10px;
+}
+
+.child-fields-container {
+    margin: 0;
+    padding: 0;
+}
+
+/* default light style */
+.label-light {
+    font-weight: 600;
+    margin-right: 5px;
+    color: #000000;
+}
+
+.clickable-label-light {
+    composes: label-light;
+    composes: pointer;
+}
+
+.punctuation-light {
+    composes: punctuation-base;
+    color: #000000;
+}
+
+.value-null-light {
+    color: #df113a;
+}
+
+.value-undefined-light {
+    color: #df113a;
+}
+
+.value-string-light {
+    color: rgb(42, 63, 60);
+}
+
+.value-number-light {
+    color: #0b75f5;
+}
+
+.value-boolean-light {
+    color: rgb(70, 144, 56);
+}
+
+.value-other-light {
+    color: #43413d;
+}
+
+.collapse-icon-light {
+    composes: expander-base;
+    composes: collapse-icon;
+    color: #000000;
+}
+
+.expand-icon-light {
+    composes: expander-base;
+    composes: expand-icon;
+    color: #000000;
+}
+
+.collapsed-content-light {
+    composes: collapsed-content-base;
+    color: #000000;
+}
+
+/* default dark style */
+.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);
+}
+
+.label-dark {
+    font-weight: bolder;
+    margin-right: 5px;
+    color: rgb(253, 246, 227);
+}
+
+.clickable-label-dark {
+    composes: label-dark;
+    composes: pointer;
+}
+
+.punctuation-dark {
+    composes: punctuation-base;
+    color: rgb(253, 246, 227);
+}
+
+.value-null-dark {
+    color: rgb(129, 181, 172);
+}
+
+.value-undefined-dark {
+    color: rgb(129, 181, 172);
+}
+
+.value-string-dark {
+    color: rgb(203, 75, 22);
+}
+
+.value-number-dark {
+    color: rgb(211, 54, 130);
+}
+
+.value-boolean-dark {
+    color: rgb(174, 129, 255);
+}
+
+.value-other-dark {
+    color: rgb(38, 139, 210);
+}

package/dist/types.d.ts

@@ -0,0 +1,145 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/**
+ * Event payload passed to `beforeExpandChange`. Return `false` to veto the
+ * expand/collapse transition.
+ */
+export interface NodeExpandingEvent {
+    level: number;
+    value: unknown;
+    field?: string;
+    newExpandValue: boolean;
+}
+/** Screen-reader labels applied to expander buttons. */
+export interface AriaLabels {
+    collapseJson: string;
+    expandJson: string;
+}
+/**
+ * Classname-map used to theme every slot in the viewer. The `defaultStyles`
+ * and `darkStyles` exports provide ready-made instances; consumers can spread
+ * and override individual keys to customize the theme.
+ */
+export interface StyleProps {
+    container: string;
+    basicChildStyle: string;
+    label: string;
+    clickableLabel: string;
+    nullValue: string;
+    undefinedValue: string;
+    numberValue: string;
+    stringValue: string;
+    booleanValue: string;
+    otherValue: string;
+    punctuation: string;
+    expandIcon: string;
+    collapseIcon: string;
+    collapsedContent: string;
+    childFieldsContainer: string;
+    noQuotesForStringValues?: boolean;
+    quotesForFieldNames?: boolean;
+    /**
+     * Correctly-spelled aria labels. New in the Svelte port; `ariaLables`
+     * (sic) continues to be accepted at runtime for one minor version with a
+     * deprecation warning.
+     */
+    ariaLabels: AriaLabels;
+    /**
+     * @deprecated Use `ariaLabels` (correctly spelled). The typoed key is
+     * accepted at runtime for parity with `react-json-view-lite`; it will be
+     * removed in 2.0.
+     */
+    ariaLables?: AriaLabels;
+    stringifyStringValues: boolean;
+}
+/** Data passed to every per-type snippet override. */
+export interface ValueSnippetProps<T> {
+    value: T;
+    field?: string;
+    level: number;
+}
+export type StringSnippetProps = ValueSnippetProps<string>;
+export type NumberSnippetProps = ValueSnippetProps<number>;
+export type BooleanSnippetProps = ValueSnippetProps<boolean>;
+export type NullSnippetProps = ValueSnippetProps<null>;
+export type UndefinedSnippetProps = ValueSnippetProps<undefined>;
+export type BigIntSnippetProps = ValueSnippetProps<bigint>;
+export type DateSnippetProps = ValueSnippetProps<Date>;
+export type FunctionSnippetProps = ValueSnippetProps<Function>;
+/** Data passed to the `label` snippet override for field names. */
+export interface LabelSnippetProps {
+    field: string;
+    level: number;
+}
+/**
+ * Bag of optional per-type snippets that replace default value rendering.
+ * Each snippet receives the typed value, its field name (if any), and the
+ * depth of the node.
+ */
+export interface SnippetOverrides {
+    string?: Snippet<[StringSnippetProps]>;
+    number?: Snippet<[NumberSnippetProps]>;
+    boolean?: Snippet<[BooleanSnippetProps]>;
+    null?: Snippet<[NullSnippetProps]>;
+    undefined?: Snippet<[UndefinedSnippetProps]>;
+    bigint?: Snippet<[BigIntSnippetProps]>;
+    date?: Snippet<[DateSnippetProps]>;
+    function?: Snippet<[FunctionSnippetProps]>;
+    label?: Snippet<[LabelSnippetProps]>;
+}
+/** Public props accepted by `<JsonView>`. */
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'data' | 'style'> {
+    data: object | unknown[];
+    style?: Partial<StyleProps>;
+    shouldExpandNode?: (_level: number, _value: unknown, _field?: string) => boolean;
+    clickToExpandNode?: boolean;
+    beforeExpandChange?: (_event: NodeExpandingEvent) => boolean;
+    compactTopLevel?: boolean;
+    string?: Snippet<[StringSnippetProps]>;
+    number?: Snippet<[NumberSnippetProps]>;
+    boolean?: Snippet<[BooleanSnippetProps]>;
+    null?: Snippet<[NullSnippetProps]>;
+    undefined?: Snippet<[UndefinedSnippetProps]>;
+    bigint?: Snippet<[BigIntSnippetProps]>;
+    date?: Snippet<[DateSnippetProps]>;
+    function?: Snippet<[FunctionSnippetProps]>;
+    label?: Snippet<[LabelSnippetProps]>;
+}
+/**
+ * Reference wrapper passed from the root down to every expandable node so
+ * that cross-sibling keyboard navigation can query `[role=button]` elements
+ * scoped to the tree. Using a getter ensures the child always reads the
+ * current `bind:this` target rather than a frozen snapshot.
+ */
+export interface OuterRef {
+    readonly current: HTMLDivElement | null;
+}
+/** Internal shared props threaded through every renderer. Not exported. */
+export interface CommonRenderProps {
+    lastElement: boolean;
+    level: number;
+    style: StyleProps;
+    shouldExpandNode: (_level: number, _value: unknown, _field?: string) => boolean;
+    clickToExpandNode: boolean;
+    outerRef: OuterRef;
+    beforeExpandChange?: (_event: NodeExpandingEvent) => boolean;
+    snippets: SnippetOverrides;
+}
+export interface JsonRenderProps<T> extends CommonRenderProps {
+    field?: string;
+    value: T;
+}
+export interface ExpandableRenderProps extends CommonRenderProps {
+    field?: string;
+    value: object | unknown[];
+    data: Array<[string | undefined, unknown]>;
+    openBracket: string;
+    closeBracket: string;
+}
+export interface EmptyRenderProps {
+    field?: string;
+    openBracket: string;
+    closeBracket: string;
+    lastElement: boolean;
+    style: StyleProps;
+}

package/dist/types.js

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

package/dist/utils/dataTypeDetection.d.ts

@@ -0,0 +1,10 @@
+export declare const isBoolean: (data: unknown) => data is boolean;
+export declare const isNumber: (data: unknown) => data is number;
+export declare const isBigInt: (data: unknown) => data is bigint;
+export declare const isDate: (data: unknown) => data is Date;
+export declare const isString: (data: unknown) => data is string;
+export declare const isArray: (data: unknown) => data is unknown[];
+export declare const isObject: (data: unknown) => data is object;
+export declare const isNull: (data: unknown) => data is null;
+export declare const isUndefined: (data: unknown) => data is undefined;
+export declare const isFunction: (data: unknown) => data is Function;

package/dist/utils/dataTypeDetection.js

@@ -0,0 +1,31 @@
+export const isBoolean = (data) => {
+    return typeof data === 'boolean' || data instanceof Boolean;
+};
+export const isNumber = (data) => {
+    return typeof data === 'number' || data instanceof Number;
+};
+export const isBigInt = (data) => {
+    return typeof data === 'bigint' || data instanceof BigInt;
+};
+export const isDate = (data) => {
+    return !!data && data instanceof Date;
+};
+export const isString = (data) => {
+    return typeof data === 'string' || data instanceof String;
+};
+export const isArray = (data) => {
+    return Array.isArray(data);
+};
+export const isObject = (data) => {
+    return typeof data === 'object' && data !== null;
+};
+export const isNull = (data) => {
+    return data === null;
+};
+export const isUndefined = (data) => {
+    return data === undefined;
+};
+// trunk-ignore(eslint/@typescript-eslint/no-unsafe-function-type)
+export const isFunction = (data) => {
+    return !!data && data instanceof Object && typeof data === 'function';
+};

package/dist/utils/expandStrategies.d.ts

@@ -0,0 +1,4 @@
+/** `shouldExpandNode` strategy that auto-expands every node. */
+export declare const allExpanded: () => boolean;
+/** `shouldExpandNode` strategy that auto-expands only the root node. */
+export declare const collapseAllNested: (level: number) => boolean;

package/dist/utils/expandStrategies.js

@@ -0,0 +1,4 @@
+/** `shouldExpandNode` strategy that auto-expands every node. */
+export const allExpanded = () => true;
+/** `shouldExpandNode` strategy that auto-expands only the root node. */
+export const collapseAllNested = (level) => level < 1;

package/dist/utils/quoteString.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Formats a field label. Empty labels always appear quoted so the colon is
+ * still rendered; non-empty labels are quoted only when the theme sets
+ * `quotesForFieldNames`. Matches `react-json-view-lite` exactly.
+ */
+export declare function quoteString(value: string, quoted?: boolean): string;
+/**
+ * Formats a string value for display. When `stringify` is true, `JSON.stringify`
+ * is used to escape special characters; otherwise `quoted` simply toggles
+ * surrounding quotes. Empty strings intentionally render without quotes to
+ * avoid stacking quotes on inline CSS snippets.
+ */
+export declare function quoteStringValue(value: string, quoted: boolean, stringify: boolean): string;

package/dist/utils/quoteString.js

@@ -0,0 +1,20 @@
+/**
+ * Formats a field label. Empty labels always appear quoted so the colon is
+ * still rendered; non-empty labels are quoted only when the theme sets
+ * `quotesForFieldNames`. Matches `react-json-view-lite` exactly.
+ */
+export function quoteString(value, quoted = false) {
+    return !value || quoted ? `"${value}"` : value;
+}
+/**
+ * Formats a string value for display. When `stringify` is true, `JSON.stringify`
+ * is used to escape special characters; otherwise `quoted` simply toggles
+ * surrounding quotes. Empty strings intentionally render without quotes to
+ * avoid stacking quotes on inline CSS snippets.
+ */
+export function quoteStringValue(value, quoted, stringify) {
+    if (stringify) {
+        return JSON.stringify(value);
+    }
+    return quoted ? `"${value}"` : value;
+}

package/package.json

@@ -0,0 +1,127 @@
+{
+  "name": "@humanspeak/svelte-json-view-lite",
+  "version": "0.1.0",
+  "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",
+    "svelte5",
+    "sveltekit",
+    "json",
+    "json-view",
+    "json-tree",
+    "viewer",
+    "tree",
+    "typescript",
+    "runes",
+    "lite",
+    "renderer",
+    "component"
+  ],
+  "homepage": "https://github.com/humanspeak/svelte-json-view-lite",
+  "bugs": {
+    "url": "https://github.com/humanspeak/svelte-json-view-lite/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/humanspeak/svelte-json-view-lite.git"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/humanspeak"
+  },
+  "license": "MIT",
+  "author": "Humanspeak, Inc.",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "!dist/test/**/*"
+  ],
+  "overrides": {
+    "@sveltejs/kit": {
+      "cookie": "^0.7.0"
+    }
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.0.5",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.59.1",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.57.1",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@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",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-svelte": "^3.17.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
+    "globals": "^17.5.0",
+    "husky": "^9.1.7",
+    "jsdom": "^29.0.2",
+    "mprocs": "^0.9.2",
+    "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",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.58.2",
+    "vite": "^8.0.8",
+    "vitest": "^4.1.4"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "volta": {
+    "node": "24.15.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "tags": [
+    "svelte",
+    "json",
+    "viewer"
+  ],
+  "scripts": {
+    "build": "vite build && npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "dev": "vite dev",
+    "dev:all": "mprocs",
+    "dev:pkg": "svelte-kit sync && svelte-package --watch",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "lint:fix": "npm run format && eslint . --fix",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "preview": "vite preview",
+    "test": "vitest run --coverage",
+    "test:all": "npm run test && npm run test:e2e",
+    "test:e2e": "playwright test",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:report": "playwright show-report",
+    "test:e2e:ui": "playwright test --ui",
+    "test:only": "vitest run",
+    "test:watch": "vitest"
+  }
+}