@script-it/json-views-react 0.1.0-beta.1

package/dist/widgets/multi-select-widget.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import yaml, { JSON_SCHEMA } from 'js-yaml';
+import { MultiSelect } from '../primitives/multi-select.js';
+import { ReadOnlyChip, ReadOnlyEmpty } from './read-only-field.js';
+function parseSelectedValues(value) {
+    try {
+        if (value.startsWith('[')) {
+            const parsed = JSON.parse(value);
+            return Array.isArray(parsed) ? parsed.map(String) : [];
+        }
+        if (value.startsWith('-')) {
+            const parsed = yaml.load(value, { schema: JSON_SCHEMA });
+            if (Array.isArray(parsed)) {
+                return parsed.map(String);
+            }
+            return value ? [value] : [];
+        }
+        if (value.includes(',')) {
+            return value.split(',').map((s) => s.trim()).filter(Boolean);
+        }
+        return value ? [value] : [];
+    }
+    catch {
+        return value ? [value] : [];
+    }
+}
+function optionValue(option) {
+    return typeof option === 'object' ? option.value : String(option);
+}
+function optionLabel(option) {
+    return typeof option === 'object' ? option.label : String(option);
+}
+export function MultiSelectWidget({ value, onChange, onDirectSave, onBlur, ariaLabel, ariaDescribedBy, invalid = false, options: optionOverrides, profile = 'plain', creatable = false, openOnMount, onDismiss, onOptionColorChange, readOnly = false, disabled = false, uiHint, }) {
+    const options = optionOverrides ?? (uiHint && 'options' in uiHint && Array.isArray(uiHint.options)
+        ? uiHint.options
+        : []);
+    const selectedValues = parseSelectedValues(value);
+    if (readOnly && profile === 'plain') {
+        return (_jsx("div", { "aria-readonly": "true", children: selectedValues.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-2", children: selectedValues.map((selected, idx) => (_jsx(ReadOnlyChip, { emphasis: true, className: "px-3 py-1.5", children: optionLabel(options.find((option) => optionValue(option) === selected) ?? selected) }, idx))) })) : (_jsx(ReadOnlyEmpty, {})) }));
+    }
+    const handleChange = (next) => {
+        onChange(JSON.stringify(next));
+        onDirectSave?.(next);
+    };
+    return (_jsx(MultiSelect, { "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, invalid: invalid, openOnMount: openOnMount, onDismiss: onDismiss, value: selectedValues, onChange: handleChange, onSelectionBlur: onBlur, options: options, disabled: disabled, readOnly: readOnly, profile: profile, creatable: creatable, onOptionColorChange: onOptionColorChange }));
+}

package/dist/widgets/number-widget.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetProps } from './types.js';
+export declare function NumberWidget({ value, onChange, onBlur, ariaLabel, ariaDescribedBy, invalid, readOnly, disabled, surface, metadata, uiHint, }: WidgetProps): import("react").JSX.Element;

package/dist/widgets/number-widget.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NumberInput } from '../primitives/number-input.js';
+import { READONLY_SURFACE_CLASSES } from './read-only-field.js';
+import { cn } from '../lib/cn.js';
+export function NumberWidget({ value, onChange, onBlur, ariaLabel, ariaDescribedBy, invalid = false, readOnly = false, disabled = false, surface = 'default', metadata, uiHint, }) {
+    const uiHintType = uiHint?.type;
+    const min = uiHint && uiHintType === 'number' && 'min' in uiHint && typeof uiHint.min === 'number'
+        ? uiHint.min
+        : undefined;
+    const max = uiHint && uiHintType === 'number' && 'max' in uiHint && typeof uiHint.max === 'number'
+        ? uiHint.max
+        : undefined;
+    const step = uiHint && uiHintType === 'number' && 'step' in uiHint && typeof uiHint.step === 'number'
+        ? uiHint.step
+        : metadata?.type === 'float'
+            ? 0.01
+            : 1;
+    return (_jsx(NumberInput, { autoFocus: !readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": invalid || undefined, value: value, onChange: onChange, onBlur: onBlur, min: min, max: max, step: step, readOnly: readOnly, disabled: disabled, placeholder: readOnly ? '—' : 'Enter a number', className: cn(surface === 'inline' && !readOnly && 'h-7 rounded-sm border-transparent bg-transparent px-1 py-0 text-xs shadow-none outline-none hover:bg-accent/40 focus:border-transparent focus:ring-1 focus:ring-inset focus:ring-ring', readOnly && READONLY_SURFACE_CLASSES, invalid && 'border-destructive focus:border-destructive focus:ring-destructive/20') }));
+}

package/dist/widgets/read-only-field.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+/**
+ * Shared read-only presentation for the input-editor widgets.
+ *
+ * Read-only is a mode of each widget, not a substitute component — these are
+ * style helpers the widgets compose in their `readOnly` branch, never entries
+ * in the widget registry. The look is built entirely from semantic tokens
+ * (`muted` / `border` / `foreground`) so it themes in light and dark.
+ */
+/**
+ * Muted, non-interactive boxed field for read-only widgets that render their
+ * own container (text, dropdown, date). Matches the editable field footprint
+ * (`w-full rounded-md px-3 py-2 text-sm`) so the layout doesn't shift.
+ */
+export declare const READONLY_FIELD_CLASSES = "w-full rounded-md border border-border bg-muted px-3 py-2 text-sm text-foreground focus:outline-none";
+/**
+ * Colour-only override appended to a primitive's `className` when the primitive
+ * keeps its own layout but must present as read-only (textarea, number). Relies
+ * on the primitives merging `className` last via `cn`, so these win over the
+ * editable `border-border bg-card focus:ring-ring` defaults.
+ */
+export declare const READONLY_SURFACE_CLASSES = "cursor-default border-border bg-muted text-foreground focus:border-border focus:ring-0";
+/** The neutral placeholder shown where a read-only value is empty. */
+export declare const READONLY_EMPTY = "\u2014";
+/** Renders `—` in muted ink for an empty read-only value. */
+export declare function ReadOnlyEmpty(): import("react").JSX.Element;
+/**
+ * Muted, non-interactive chip used by the boolean and multi-select read-only
+ * renders. `emphasis` marks a selected option (a filled-but-muted pill) versus
+ * an unselected one (quiet outline).
+ */
+export declare function ReadOnlyChip({ children, emphasis, className, }: {
+    children: ReactNode;
+    emphasis?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/widgets/read-only-field.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../lib/cn.js';
+/**
+ * Shared read-only presentation for the input-editor widgets.
+ *
+ * Read-only is a mode of each widget, not a substitute component — these are
+ * style helpers the widgets compose in their `readOnly` branch, never entries
+ * in the widget registry. The look is built entirely from semantic tokens
+ * (`muted` / `border` / `foreground`) so it themes in light and dark.
+ */
+/**
+ * Muted, non-interactive boxed field for read-only widgets that render their
+ * own container (text, dropdown, date). Matches the editable field footprint
+ * (`w-full rounded-md px-3 py-2 text-sm`) so the layout doesn't shift.
+ */
+export const READONLY_FIELD_CLASSES = 'w-full rounded-md border border-border bg-muted px-3 py-2 text-sm text-foreground focus:outline-none';
+/**
+ * Colour-only override appended to a primitive's `className` when the primitive
+ * keeps its own layout but must present as read-only (textarea, number). Relies
+ * on the primitives merging `className` last via `cn`, so these win over the
+ * editable `border-border bg-card focus:ring-ring` defaults.
+ */
+export const READONLY_SURFACE_CLASSES = 'cursor-default border-border bg-muted text-foreground focus:border-border focus:ring-0';
+/** The neutral placeholder shown where a read-only value is empty. */
+export const READONLY_EMPTY = '—';
+/** Renders `—` in muted ink for an empty read-only value. */
+export function ReadOnlyEmpty() {
+    return _jsx("span", { className: "text-muted-foreground", children: READONLY_EMPTY });
+}
+/**
+ * Muted, non-interactive chip used by the boolean and multi-select read-only
+ * renders. `emphasis` marks a selected option (a filled-but-muted pill) versus
+ * an unselected one (quiet outline).
+ */
+export function ReadOnlyChip({ children, emphasis = false, className, }) {
+    return (_jsx("span", { className: cn('inline-flex items-center rounded-md border px-2.5 py-1 text-sm', emphasis
+            ? 'border-border bg-muted text-foreground'
+            : 'border-border bg-transparent text-muted-foreground', className), children: children }));
+}

package/dist/widgets/text-widget.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetProps } from './types.js';
+export declare function TextWidget({ value, onChange, onBlur, ariaLabel, ariaDescribedBy, invalid, readOnly, disabled, surface, uiHint, }: WidgetProps): import("react").JSX.Element;

package/dist/widgets/text-widget.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { READONLY_FIELD_CLASSES } from './read-only-field.js';
+import { cn } from '../lib/cn.js';
+const EDITABLE_CLASSES = 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm transition-colors focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50';
+export function TextWidget({ value, onChange, onBlur, ariaLabel, ariaDescribedBy, invalid = false, readOnly = false, disabled = false, surface = 'default', uiHint, }) {
+    const placeholder = readOnly
+        ? '—'
+        : uiHint?.type === 'text' &&
+            'placeholder' in uiHint &&
+            typeof uiHint.placeholder === 'string' &&
+            uiHint.placeholder.length > 0
+            ? uiHint.placeholder
+            : 'Enter value';
+    return (_jsx("input", { autoFocus: !readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": invalid || undefined, type: "text", value: value, onChange: (e) => onChange(e.target.value), onBlur: onBlur, readOnly: readOnly, disabled: disabled, placeholder: placeholder, className: cn(readOnly
+            ? READONLY_FIELD_CLASSES
+            : surface === 'inline'
+                ? 'h-7 w-full rounded-sm border border-transparent bg-transparent px-1 py-0 text-xs outline-none hover:bg-accent/40 focus:border-transparent focus:ring-1 focus:ring-inset focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
+                : EDITABLE_CLASSES, invalid && 'border-destructive focus:border-destructive focus:ring-destructive/20') }));
+}

package/dist/widgets/textarea-widget.d.ts

@@ -0,0 +1,2 @@
+import type { WidgetProps } from './types.js';
+export declare function TextareaWidget({ value, onChange, onBlur, ariaLabel, ariaDescribedBy, invalid, minHeight, autoSize, readOnly, disabled, surface, metadata, uiHint, }: WidgetProps): import("react").JSX.Element;

package/dist/widgets/textarea-widget.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from 'react';
+import { Textarea } from '../primitives/textarea.js';
+import { cn } from '../lib/cn.js';
+import { READONLY_SURFACE_CLASSES } from './read-only-field.js';
+export function TextareaWidget({ value, onChange, onBlur, ariaLabel, ariaDescribedBy, invalid = false, minHeight, autoSize = false, readOnly = false, disabled = false, surface = 'default', metadata, uiHint, }) {
+    const textareaRef = useRef(null);
+    const isObjectOrArray = metadata?.type === 'array';
+    const rows = isObjectOrArray ? 8 : 4;
+    const placeholder = readOnly
+        ? '—'
+        : isObjectOrArray
+            ? 'Enter YAML'
+            : uiHint &&
+                'placeholder' in uiHint &&
+                typeof uiHint.placeholder === 'string' &&
+                uiHint.placeholder.length > 0
+                ? uiHint.placeholder
+                : 'Enter text';
+    useLayoutEffect(() => {
+        if (!autoSize || !textareaRef.current)
+            return;
+        const textarea = textareaRef.current;
+        textarea.style.height = 'auto';
+        textarea.style.height = `${Math.max(minHeight ?? 0, textarea.scrollHeight)}px`;
+        if (!readOnly)
+            textarea.focus({ preventScroll: true });
+    }, [autoSize, minHeight, readOnly, value]);
+    return (_jsx(Textarea, { ref: textareaRef, autoFocus: !readOnly && !autoSize, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": invalid || undefined, value: value, onChange: (e) => onChange(e.target.value), onBlur: onBlur, rows: rows, readOnly: readOnly, disabled: disabled, placeholder: placeholder, style: minHeight ? { minHeight } : undefined, 
+        // Soft wrapping already folds prose at spaces; `break-words` additionally
+        // folds a token too long to fit on its own — a URL, a long `${{ }}`
+        // expression — instead of letting it scroll out of the card sideways.
+        className: cn('break-words', surface === 'inline' && !readOnly && 'rounded-sm border-transparent bg-transparent px-1 py-1 text-xs shadow-none outline-none hover:bg-accent/40 focus:border-transparent focus:ring-1 focus:ring-inset focus:ring-ring', autoSize ? '[font:inherit]' : 'font-mono', readOnly && READONLY_SURFACE_CLASSES, invalid && 'border-destructive focus:border-destructive focus:ring-destructive/20') }));
+}

package/dist/widgets/types.d.ts

@@ -0,0 +1,53 @@
+export interface WidgetOption {
+    value: string;
+    label: string;
+    color?: string;
+}
+export type WidgetOptions = ReadonlyArray<string | number | WidgetOption>;
+export type UiHint = {
+    type: 'text';
+    placeholder?: string;
+    multiline?: boolean;
+} | {
+    type: 'number';
+    min?: number;
+    max?: number;
+    step?: number;
+} | {
+    type: 'select';
+    options: string[];
+} | {
+    type: 'multi-select';
+    options: string[];
+} | {
+    type: 'checkbox';
+} | {
+    type: 'date-picker';
+} | null;
+export interface InputMetadata {
+    type: 'string' | 'float' | 'boolean' | 'array';
+    title?: string;
+    description?: string;
+    required?: boolean;
+    ui_hint?: UiHint;
+}
+export interface WidgetProps {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur: () => void;
+    ariaLabel?: string;
+    ariaDescribedBy?: string;
+    invalid?: boolean;
+    options?: WidgetOptions;
+    emptyOptionLabel?: string;
+    minHeight?: number;
+    autoSize?: boolean;
+    surface?: 'default' | 'inline';
+    readOnly?: boolean;
+    disabled?: boolean;
+    metadata?: InputMetadata;
+    uiHint?: UiHint;
+}
+export interface DirectSaveWidgetProps extends WidgetProps {
+    onDirectSave: (value: unknown) => void;
+}

package/dist/widgets/types.js

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

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@script-it/json-views-react",
+  "version": "0.1.0-beta.1",
+  "description": "Extensible React viewer and editor for JSON Views",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./standalone.css": "./dist/standalone.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.txt"
+  ],
+  "scripts": {
+    "build": "node ../../scripts/clean-dist.mjs && tsc -p tsconfig.json && tailwindcss -i src/styles.css -o dist/styles.css --minify && node ../../scripts/scope-styles.mjs",
+    "check": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "prepack": "node ../../scripts/prepare-package.mjs"
+  },
+  "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/state": "^6.7.4",
+    "@codemirror/view": "^6.43.11",
+    "@lezer/highlight": "^1.2.3",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@script-it/json-views-core": "0.1.0-beta.1",
+    "@tanstack/react-virtual": "3.14.10",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "codemirror": "^6.0.2",
+    "js-yaml": "^4.1.0",
+    "lucide-react": "^0.561.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.13",
+    "@types/js-yaml": "^4.0.9",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "jsdom": "29.0.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5.9.3",
+    "vitest": "3.2.7"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/script-it/json-views.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/script-it/json-views#readme",
+  "bugs": {
+    "url": "https://github.com/script-it/json-views/issues"
+  },
+  "engines": {
+    "node": "^22.13.0 || >=24.0.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}