@fgv/ts-app-shell 5.1.0-1

package/dist/packlets/cascade/model.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * 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.
+ */
+// ============================================================================
+// Cascade Entry Base
+// ============================================================================
+/**
+ * Sentinel value used as entityId when creating a new entity.
+ * @public
+ */
+export const CASCADE_NEW_ENTITY_ID = '__new__';
+//# sourceMappingURL=model.js.map

package/dist/packlets/cascade/useCascadeOps.js

@@ -0,0 +1,206 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * 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.
+ */
+/**
+ * Semantic cascade operations hook.
+ *
+ * Encodes cascade navigation rules so tabs declare intent (select, drillDown,
+ * openEditor, pop) rather than manually computing cascade stacks.
+ *
+ * The hook is generic over the entry type `TEntry extends ICascadeEntryBase`.
+ * Domain-specific applications pass their extended entry type to preserve
+ * full type information through the cascade operations.
+ *
+ * @packageDocumentation
+ */
+import { useCallback, useMemo } from 'react';
+import { fail, succeed } from '@fgv/ts-utils';
+// ============================================================================
+// Helpers
+// ============================================================================
+function isEditOrCreate(mode) {
+    return mode === 'edit' || mode === 'create';
+}
+function findEditorsAbove(stack, depth) {
+    const result = [];
+    for (let i = depth + 1; i < stack.length; i++) {
+        if (isEditOrCreate(stack[i].mode)) {
+            result.push({ depth: i, entry: stack[i] });
+        }
+    }
+    return result;
+}
+// ============================================================================
+// Hook
+// ============================================================================
+/**
+ * Hook providing semantic cascade operations.
+ *
+ * Takes the cascade stack and a squash function as parameters, making it
+ * independent of any specific state management solution. Domain-specific
+ * applications typically provide a convenience wrapper that reads these
+ * values from their own store.
+ *
+ * @typeParam TEntry - The cascade entry type. Inferred from `cascadeStack`.
+ * @public
+ */
+export function useCascadeOps(cascadeStack, squashCascade) {
+    const asTEntry = (entry) => entry;
+    const select = useCallback((entry) => {
+        var _a;
+        const created = asTEntry(Object.assign(Object.assign({}, entry), { mode: (_a = entry.mode) !== null && _a !== void 0 ? _a : 'view', origin: 'primary' }));
+        squashCascade([created]);
+        return succeed({ depth: 0, entry: created });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [squashCascade]);
+    const drillDown = useCallback((fromDepth, entry) => {
+        var _a;
+        const nextEntry = cascadeStack[fromDepth + 1];
+        if ((nextEntry === null || nextEntry === void 0 ? void 0 : nextEntry.entityType) === entry.entityType && nextEntry.entityId === entry.entityId) {
+            // Toggle: collapse if same entity is already at fromDepth + 1
+            squashCascade(cascadeStack.slice(0, fromDepth + 1));
+            return succeed({ depth: fromDepth + 1, entry: nextEntry });
+        }
+        const created = asTEntry(Object.assign(Object.assign({}, entry), { mode: (_a = entry.mode) !== null && _a !== void 0 ? _a : 'view', origin: 'nested' }));
+        squashCascade([...cascadeStack.slice(0, fromDepth + 1), created]);
+        return succeed({ depth: fromDepth + 1, entry: created });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cascadeStack, squashCascade]);
+    const editorsAbove = useCallback((depth) => {
+        return findEditorsAbove(cascadeStack, depth);
+    }, [cascadeStack]);
+    const openEditor = useCallback((depth) => {
+        const entry = cascadeStack[depth];
+        if (!entry) {
+            return fail(`depth ${depth} out of bounds for cascade stack of length ${cascadeStack.length}`);
+        }
+        // Check for editors above the target depth
+        const conflicts = findEditorsAbove(cascadeStack, depth);
+        if (conflicts.length > 0) {
+            const names = conflicts.map((c) => `${c.entry.entityType}(${c.entry.mode}) at depth ${c.depth}`);
+            return fail(`blocked by editors above: ${names.join(', ')}`);
+        }
+        // Trim everything above depth (downstream views become incoherent),
+        // switch target to edit mode, preserving origin
+        const edited = asTEntry(Object.assign(Object.assign({}, entry), { mode: 'edit' }));
+        squashCascade([...cascadeStack.slice(0, depth), edited]);
+        return succeed({ depth, entry: edited });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cascadeStack, squashCascade]);
+    const openNested = useCallback((fromDepth, entry) => {
+        const created = asTEntry(Object.assign(Object.assign({}, entry), { origin: 'nested' }));
+        const newDepth = fromDepth + 1;
+        squashCascade([...cascadeStack.slice(0, newDepth), created]);
+        return succeed({ depth: newDepth, entry: created });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cascadeStack, squashCascade]);
+    const pop = useCallback(() => {
+        if (cascadeStack.length === 0) {
+            return fail('cannot pop from empty cascade stack');
+        }
+        const removed = cascadeStack[cascadeStack.length - 1];
+        squashCascade(cascadeStack.slice(0, -1));
+        return succeed({ depth: cascadeStack.length - 1, entry: removed });
+    }, [cascadeStack, squashCascade]);
+    const popToView = useCallback((depth, refreshedEntity) => {
+        const entry = cascadeStack[depth];
+        if (!entry) {
+            return fail(`depth ${depth} out of bounds for cascade stack of length ${cascadeStack.length}`);
+        }
+        const viewed = asTEntry(Object.assign(Object.assign(Object.assign({}, entry), { mode: 'view' }), (refreshedEntity !== undefined ? { entity: refreshedEntity } : {})));
+        squashCascade([...cascadeStack.slice(0, depth), viewed]);
+        return succeed({ depth, entry: viewed });
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [cascadeStack, squashCascade]);
+    const trimTo = useCallback((depth) => {
+        const trimmed = Math.max(0, depth);
+        const newStack = cascadeStack.slice(0, trimmed);
+        squashCascade(newStack);
+        if (newStack.length === 0) {
+            return fail('cascade stack is empty after trim');
+        }
+        const lastIdx = newStack.length - 1;
+        return succeed({ depth: lastIdx, entry: newStack[lastIdx] });
+    }, [cascadeStack, squashCascade]);
+    const hasUnsavedEditors = useCallback(() => {
+        return cascadeStack.some((e) => isEditOrCreate(e.mode));
+    }, [cascadeStack]);
+    const canSaveOrCancel = useCallback((depth) => {
+        return findEditorsAbove(cascadeStack, depth).length === 0;
+    }, [cascadeStack]);
+    const clear = useCallback(() => {
+        squashCascade([]);
+    }, [squashCascade]);
+    const clearIf = useCallback((predicate) => {
+        if (cascadeStack.some(predicate)) {
+            squashCascade([]);
+        }
+    }, [cascadeStack, squashCascade]);
+    const clearById = useCallback((entityId) => {
+        clearIf((e) => e.entityId === entityId);
+    }, [clearIf]);
+    const find = useCallback((predicate) => {
+        const depth = cascadeStack.findIndex(predicate);
+        if (depth < 0) {
+            return fail('no matching entry in cascade stack');
+        }
+        return succeed({ depth, entry: cascadeStack[depth] });
+    }, [cascadeStack]);
+    return useMemo(() => ({
+        select,
+        drillDown,
+        openEditor,
+        openNested,
+        pop,
+        popToView,
+        trimTo,
+        editorsAbove,
+        hasUnsavedEditors,
+        canSaveOrCancel,
+        clear,
+        clearById,
+        clearIf,
+        find,
+        stack: cascadeStack
+    }), [
+        select,
+        drillDown,
+        openEditor,
+        openNested,
+        pop,
+        popToView,
+        trimTo,
+        editorsAbove,
+        hasUnsavedEditors,
+        canSaveOrCancel,
+        clear,
+        clearById,
+        clearIf,
+        find,
+        cascadeStack
+    ]);
+}
+//# sourceMappingURL=useCascadeOps.js.map

package/dist/packlets/cascade/useCascadeTransitions.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * 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.
+ */
+/**
+ * Shared cascade transition hooks for entity tabs.
+ *
+ * @packageDocumentation
+ */
+import { useCallback } from 'react';
+/**
+ * Returns a depth-aware squash helper used by cascade views.
+ *
+ * Keeps stack entries up to and including `depth`, then appends `entry`.
+ *
+ * @public
+ */
+export function useSquashAt(cascadeStack, squashCascade) {
+    return useCallback((depth, entry) => {
+        squashCascade([...cascadeStack.slice(0, depth + 1), entry]);
+    }, [cascadeStack, squashCascade]);
+}
+/**
+ * Returns a shared drill-down toggle helper for cascade columns.
+ *
+ * If the target entry is already immediately to the right of `depth`, it collapses
+ * back to `depth`. Otherwise, it appends a new view entry at `depth + 1`.
+ *
+ * @public
+ */
+export function useCascadeDrillDown(cascadeStack, squashCascade, squashAt) {
+    return useCallback((depth, entityType, entityId, extra) => {
+        const nextEntry = cascadeStack[depth + 1];
+        if ((nextEntry === null || nextEntry === void 0 ? void 0 : nextEntry.entityType) === entityType && nextEntry.entityId === entityId) {
+            squashCascade(cascadeStack.slice(0, depth + 1));
+            return;
+        }
+        squashAt(depth, Object.assign({ entityType, entityId, mode: 'view' }, extra));
+    }, [cascadeStack, squashAt, squashCascade]);
+}
+//# sourceMappingURL=useCascadeTransitions.js.map

package/dist/packlets/detail/DetailHelpers.js

@@ -0,0 +1,103 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * 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.
+ */
+/**
+ * Generic detail-view primitive components.
+ *
+ * Domain-agnostic building blocks for entity detail panels:
+ * - `DetailSection` — labeled section wrapper
+ * - `DetailRow` — key/value row with spread or inline layout
+ * - `TagList` — pill tag row
+ * - `StatusBadge` — colored pill badge (caller supplies color classes)
+ * - `DetailHeader` — two-line header with indicators and action slots
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+import { XMarkIcon } from '@heroicons/react/20/solid';
+/**
+ * Labeled section wrapper with uppercase tracking header.
+ * @public
+ */
+export function DetailSection({ title, children }) {
+    return (React.createElement("div", { className: "mb-4" },
+        React.createElement("h3", { className: "text-xs font-semibold text-muted uppercase tracking-wider mb-1.5" }, title),
+        children));
+}
+/**
+ * Key/value row for detail panels.
+ * Returns `null` if `value` is `null` or `undefined`.
+ * @public
+ */
+export function DetailRow({ label, value, layout = 'spread' }) {
+    if (value === null || value === undefined) {
+        return null;
+    }
+    if (layout === 'inline') {
+        return (React.createElement("div", { className: "flex items-baseline gap-2 py-0.5" },
+            React.createElement("span", { className: "text-xs text-muted w-32 shrink-0" }, label),
+            React.createElement("span", { className: "text-sm text-primary" }, value)));
+    }
+    return (React.createElement("div", { className: "flex items-baseline justify-between py-0.5 text-sm" },
+        React.createElement("span", { className: "text-muted shrink-0 mr-2" }, label),
+        React.createElement("span", { className: "text-primary text-right" }, value)));
+}
+/**
+ * Horizontal pill row for string tags. Returns `null` if tags is empty.
+ * @public
+ */
+export function TagList({ tags }) {
+    if (tags.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: "flex flex-wrap gap-1" }, tags.map((tag) => (React.createElement("span", { key: tag, className: "px-2 py-0.5 text-xs rounded-full bg-surface-raised text-secondary" }, tag)))));
+}
+/**
+ * Generic pill badge. Caller supplies the Tailwind color classes.
+ * @public
+ */
+export function StatusBadge({ label, colorClass }) {
+    return (React.createElement("span", { className: `inline-block px-2 py-0.5 text-[11px] font-medium rounded-full ${colorClass}` }, label));
+}
+/**
+ * Three-line entity detail header.
+ *
+ * Line 1: full-width `title` (bold headline)
+ * Line 2: optional `subtitle` (de-emphasized, monospace — e.g. entity ID)
+ * Line 3: `indicators` left-justified, `actions` right-justified (status bar)
+ * Below: optional `description`
+ *
+ * Both `indicators` and `actions` are `React.ReactNode` — callers own the content.
+ * @public
+ */
+export function DetailHeader({ title, subtitle, description, indicators, actions, onClose }) {
+    return (React.createElement("div", { className: "mb-4 relative" },
+        React.createElement("div", { className: "flex items-start" },
+            React.createElement("h2", { className: "text-lg font-semibold text-primary flex-1 min-w-0" }, title),
+            onClose && (React.createElement("button", { type: "button", onClick: onClose, title: "Close", className: "shrink-0 ml-2 mt-0.5 p-0.5 text-muted hover:text-secondary hover:bg-surface-raised rounded transition-colors" },
+                React.createElement(XMarkIcon, { className: "w-4 h-4" })))),
+        subtitle && React.createElement("p", { className: "text-xs text-muted font-mono mt-0.5 mb-1" }, subtitle),
+        (indicators !== undefined || actions !== undefined) && (React.createElement("div", { className: "flex items-center justify-between gap-2 mt-1" },
+            React.createElement("div", { className: "flex items-center gap-2" }, indicators),
+            actions !== undefined && React.createElement("div", { className: "flex items-center gap-1 shrink-0" }, actions))),
+        description && React.createElement("p", { className: "text-sm text-secondary mt-1" }, description)));
+}
+//# sourceMappingURL=DetailHelpers.js.map

package/dist/packlets/detail/index.js

@@ -0,0 +1,6 @@
+/**
+ * Detail packlet - generic detail-view primitive components.
+ * @packageDocumentation
+ */
+export { DetailSection, DetailRow, TagList, StatusBadge, DetailHeader } from './DetailHelpers';
+//# sourceMappingURL=index.js.map

package/dist/packlets/drop-zone/JsonDropZone.js

@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * 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.
+ */
+import React, { useCallback, useState } from 'react';
+/**
+ * Strips markdown code fences from text.
+ * AI agents often wrap JSON in code fences.
+ * @param text - Raw text that may contain code fences
+ * @returns Text with outer code fences removed
+ * @internal
+ */
+export function stripCodeFences(text) {
+    const trimmed = text.trim();
+    const fencePattern = /^```(?:\w+)?\s*\n?([\s\S]*?)\n?\s*```$/;
+    const match = fencePattern.exec(trimmed);
+    return match ? match[1].trim() : trimmed;
+}
+/**
+ * Generic JSON drop/paste target with converter-based validation.
+ * Accepts text via drag-and-drop or paste, strips markdown code fences,
+ * parses as JSON, validates through the provided converter, and calls
+ * the appropriate callback.
+ *
+ * @typeParam T - The expected validated type
+ * @public
+ */
+export function JsonDropZone(props) {
+    const { converter, onValueReceived, onError, error, hint, className } = props;
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [internalError, setInternalError] = useState(undefined);
+    const displayError = error !== null && error !== void 0 ? error : internalError;
+    const processText = useCallback((rawText) => {
+        setInternalError(undefined);
+        const stripped = stripCodeFences(rawText);
+        let parsed;
+        try {
+            parsed = JSON.parse(stripped);
+        }
+        catch (_a) {
+            const message = 'Invalid JSON: could not parse the dropped text.';
+            setInternalError(message);
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            return;
+        }
+        const result = converter.convert(parsed);
+        if (result.isSuccess()) {
+            setInternalError(undefined);
+            onValueReceived(result.value);
+        }
+        else {
+            const message = `Validation failed: ${result.message}`;
+            setInternalError(message);
+            onError === null || onError === void 0 ? void 0 : onError(message);
+        }
+    }, [converter, onValueReceived, onError]);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        const text = e.dataTransfer.getData('text/plain') || e.dataTransfer.getData('text');
+        if (text) {
+            processText(text);
+        }
+        else {
+            const message = 'No text data found in the dropped content.';
+            setInternalError(message);
+            onError === null || onError === void 0 ? void 0 : onError(message);
+        }
+    }, [processText, onError]);
+    const handlePaste = useCallback((e) => {
+        e.preventDefault();
+        const text = e.clipboardData.getData('text/plain') || e.clipboardData.getData('text');
+        if (text) {
+            processText(text);
+        }
+    }, [processText]);
+    const borderClass = displayError
+        ? 'border-status-error-border bg-status-error-bg'
+        : isDragOver
+            ? 'border-status-info-border bg-status-info-bg'
+            : 'border-border bg-surface-alt';
+    return (React.createElement("div", { className: `border-2 border-dashed rounded-md p-3 text-center text-sm transition-colors cursor-default ${borderClass} ${className !== null && className !== void 0 ? className : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onPaste: handlePaste, tabIndex: 0, role: "region", "aria-label": hint !== null && hint !== void 0 ? hint : 'Drop or paste JSON here' }, displayError ? (React.createElement("span", { className: "text-status-error-text text-xs" }, displayError)) : (React.createElement("span", { className: "text-muted" }, hint !== null && hint !== void 0 ? hint : 'Drop or paste JSON here'))));
+}
+//# sourceMappingURL=JsonDropZone.js.map

package/dist/packlets/drop-zone/index.js

@@ -0,0 +1,6 @@
+/**
+ * Drop zone packlet - generic JSON drop/paste target with converter-based validation.
+ * @packageDocumentation
+ */
+export { JsonDropZone } from './JsonDropZone';
+//# sourceMappingURL=index.js.map

package/dist/packlets/editing/EditFieldHelpers.js

@@ -0,0 +1,130 @@
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * 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.
+ */
+/**
+ * Generic edit field helper components for entity editors.
+ *
+ * Provides reusable form field primitives: text inputs, number inputs,
+ * select dropdowns, tag editors, checkboxes, and layout wrappers.
+ * These components are domain-agnostic and can be used by any entity editor.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Horizontal label + field layout for a single edit field.
+ * @public
+ */
+export function EditField({ label, children }) {
+    return (React.createElement("div", { className: "flex items-baseline gap-2 py-1" },
+        React.createElement("label", { className: "text-xs text-muted w-32 shrink-0" }, label),
+        React.createElement("div", { className: "flex-1" }, children)));
+}
+/**
+ * Titled section wrapper for grouping related edit fields.
+ * @public
+ */
+export function EditSection({ title, children }) {
+    return (React.createElement("div", { className: "mb-4" },
+        React.createElement("h4", { className: "text-xs font-medium text-muted uppercase tracking-wider mb-1.5" }, title),
+        children));
+}
+/**
+ * Single-line text input for required string fields.
+ * @public
+ */
+export function TextInput({ value, onChange, placeholder }) {
+    return (React.createElement("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "w-full px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }));
+}
+/**
+ * Single-line text input for optional string fields.
+ * Empty input produces `undefined`.
+ * @public
+ */
+export function OptionalTextInput({ value, onChange, placeholder }) {
+    return (React.createElement("input", { type: "text", value: value !== null && value !== void 0 ? value : '', onChange: (e) => onChange(e.target.value || undefined), placeholder: placeholder, className: "w-full px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }));
+}
+/**
+ * Multi-line text input for optional string fields.
+ * Empty input produces `undefined`.
+ * @public
+ */
+export function TextAreaInput({ value, onChange, placeholder }) {
+    return (React.createElement("textarea", { value: value !== null && value !== void 0 ? value : '', onChange: (e) => onChange(e.target.value || undefined), placeholder: placeholder, rows: 3, className: "w-full px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring resize-y" }));
+}
+/**
+ * Numeric input for optional number fields.
+ * Empty input produces `undefined`.
+ * @public
+ */
+export function NumberInput({ value, onChange, label, min, max, step }) {
+    return (React.createElement("input", { type: "number", value: value !== null && value !== void 0 ? value : '', onChange: (e) => {
+            const raw = e.target.value;
+            if (!raw.trim()) {
+                onChange(undefined);
+            }
+            else {
+                const num = parseFloat(raw);
+                if (!isNaN(num)) {
+                    onChange(num);
+                }
+            }
+        }, min: min, max: max, step: step !== null && step !== void 0 ? step : 0.1, className: "w-24 px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring text-right", "aria-label": label }));
+}
+/**
+ * Dropdown select for enumerated string values.
+ * @public
+ */
+export function SelectInput({ value, options, onChange }) {
+    return (React.createElement("select", { value: value, onChange: (e) => onChange(e.target.value), className: "px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }, options.map((opt) => (React.createElement("option", { key: opt, value: opt }, opt)))));
+}
+/**
+ * Comma-separated tag editor for string arrays.
+ * Empty input produces `undefined`.
+ * @public
+ */
+export function TagsInput({ value, onChange, placeholder }) {
+    var _a;
+    const text = (_a = value === null || value === void 0 ? void 0 : value.join(', ')) !== null && _a !== void 0 ? _a : '';
+    return (React.createElement("input", { type: "text", value: text, onChange: (e) => {
+            const raw = e.target.value;
+            if (!raw.trim()) {
+                onChange(undefined);
+            }
+            else {
+                onChange(raw
+                    .split(',')
+                    .map((s) => s.trim())
+                    .filter((s) => s.length > 0));
+            }
+        }, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'comma-separated values', className: "w-full px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }));
+}
+/**
+ * Checkbox input for optional boolean fields.
+ * Unchecked produces `undefined`.
+ * @public
+ */
+export function CheckboxInput({ value, onChange, label }) {
+    return (React.createElement("label", { className: "flex items-center gap-2 text-sm text-secondary cursor-pointer" },
+        React.createElement("input", { type: "checkbox", checked: value !== null && value !== void 0 ? value : false, onChange: (e) => onChange(e.target.checked || undefined), className: "rounded border-border text-brand-primary focus:ring-focus-ring" }),
+        label));
+}
+//# sourceMappingURL=EditFieldHelpers.js.map