@coffer-org/web-ui 4.0.0

package/dist/components/visually-hidden-input.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+type InputValue = string[] | string;
+interface VisuallyHiddenInputProps<T = InputValue> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'checked' | 'onReset'> {
+    value?: T;
+    checked?: boolean;
+    control: HTMLElement | null;
+    bubbles?: boolean;
+}
+declare function VisuallyHiddenInput<T = InputValue>(props: VisuallyHiddenInputProps<T>): React.JSX.Element;
+export { VisuallyHiddenInput };

package/dist/components/visually-hidden-input.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+function VisuallyHiddenInput(props) {
+    const { control, value, checked, bubbles = true, type = 'hidden', style, ...inputProps } = props;
+    const isCheckInput = React.useMemo(() => type === 'checkbox' || type === 'radio' || type === 'switch', [type]);
+    const inputRef = React.useRef(null);
+    const prevValueRef = React.useRef({
+        value: isCheckInput ? checked : value,
+        previous: isCheckInput ? checked : value,
+    });
+    const prevValue = React.useMemo(() => {
+        const currentValue = isCheckInput ? checked : value;
+        if (prevValueRef.current.value !== currentValue) {
+            prevValueRef.current.previous = prevValueRef.current.value;
+            prevValueRef.current.value = currentValue;
+        }
+        return prevValueRef.current.previous;
+    }, [isCheckInput, value, checked]);
+    const [controlSize, setControlSize] = React.useState({});
+    React.useLayoutEffect(() => {
+        if (!control) {
+            setControlSize({});
+            return;
+        }
+        setControlSize({
+            width: control.offsetWidth,
+            height: control.offsetHeight,
+        });
+        if (typeof window === 'undefined')
+            return;
+        const resizeObserver = new ResizeObserver((entries) => {
+            if (!Array.isArray(entries) || !entries.length)
+                return;
+            const entry = entries[0];
+            if (!entry)
+                return;
+            let width;
+            let height;
+            if ('borderBoxSize' in entry) {
+                const borderSizeEntry = entry.borderBoxSize;
+                const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+                width = borderSize.inlineSize;
+                height = borderSize.blockSize;
+            }
+            else {
+                width = control.offsetWidth;
+                height = control.offsetHeight;
+            }
+            setControlSize({ width, height });
+        });
+        resizeObserver.observe(control, { box: 'border-box' });
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [control]);
+    React.useEffect(() => {
+        const input = inputRef.current;
+        if (!input)
+            return;
+        const inputProto = window.HTMLInputElement.prototype;
+        const propertyKey = isCheckInput ? 'checked' : 'value';
+        const eventType = isCheckInput ? 'click' : 'input';
+        const currentValue = isCheckInput ? checked : value;
+        const serializedCurrentValue = isCheckInput
+            ? checked
+            : typeof value === 'object' && value !== null
+                ? JSON.stringify(value)
+                : value;
+        const descriptor = Object.getOwnPropertyDescriptor(inputProto, propertyKey);
+        const setter = descriptor?.set;
+        if (prevValue !== currentValue && setter) {
+            const event = new Event(eventType, { bubbles });
+            setter.call(input, serializedCurrentValue);
+            input.dispatchEvent(event);
+        }
+    }, [prevValue, value, checked, bubbles, isCheckInput]);
+    const composedStyle = React.useMemo(() => {
+        return {
+            ...style,
+            ...(controlSize.width !== undefined && controlSize.height !== undefined ? controlSize : {}),
+            border: 0,
+            clip: 'rect(0 0 0 0)',
+            clipPath: 'inset(50%)',
+            height: '1px',
+            margin: '-1px',
+            overflow: 'hidden',
+            padding: 0,
+            position: 'absolute',
+            whiteSpace: 'nowrap',
+            width: '1px',
+        };
+    }, [style, controlSize]);
+    return (_jsx("input", { type: type, ...inputProps, ref: inputRef, "aria-hidden": isCheckInput, tabIndex: -1, defaultChecked: isCheckInput ? checked : undefined, style: composedStyle }));
+}
+export { VisuallyHiddenInput };

package/dist/hooks/use-as-ref.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function useAsRef<T>(props: T): React.RefObject<T>;
+export { useAsRef };

package/dist/hooks/use-as-ref.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.js";
+function useAsRef(props) {
+    const ref = React.useRef(props);
+    useIsomorphicLayoutEffect(() => {
+        ref.current = props;
+    });
+    return ref;
+}
+export { useAsRef };

package/dist/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export { useIsomorphicLayoutEffect };

package/dist/hooks/use-isomorphic-layout-effect.js

@@ -0,0 +1,3 @@
+import * as React from 'react';
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+export { useIsomorphicLayoutEffect };

package/dist/hooks/use-lazy-ref.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function useLazyRef<T>(fn: () => T): React.RefObject<T>;
+export { useLazyRef };

package/dist/hooks/use-lazy-ref.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+function useLazyRef(fn) {
+    const ref = React.useRef(null);
+    if (ref.current === null) {
+        ref.current = fn();
+    }
+    return ref;
+}
+export { useLazyRef };

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,3 @@
+export declare function useMediaQuery(query: string, fallback?: boolean): boolean;
+export declare function breakpointPx(name: string, fallback: number): number;
+export declare function useMinWidth(name: string, fallback: number): boolean;

package/dist/hooks/use-media-query.js

@@ -0,0 +1,26 @@
+import { useCallback, useSyncExternalStore } from 'react';
+export function useMediaQuery(query, fallback = true) {
+    const subscribe = useCallback((onChange) => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return () => { };
+        const mql = window.matchMedia(query);
+        mql.addEventListener('change', onChange);
+        return () => mql.removeEventListener('change', onChange);
+    }, [query]);
+    const snapshot = useCallback(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return fallback;
+        return window.matchMedia(query).matches;
+    }, [query, fallback]);
+    return useSyncExternalStore(subscribe, snapshot, () => fallback);
+}
+export function breakpointPx(name, fallback) {
+    if (typeof window === 'undefined' || typeof getComputedStyle !== 'function')
+        return fallback;
+    const raw = getComputedStyle(document.documentElement).getPropertyValue(`--breakpoint-${name}`);
+    const n = Number.parseInt(raw.trim(), 10);
+    return Number.isFinite(n) && n > 0 ? n : fallback;
+}
+export function useMinWidth(name, fallback) {
+    return useMediaQuery(`(min-width: ${breakpointPx(name, fallback)}px)`, true);
+}

package/dist/host-services.d.ts

@@ -0,0 +1,47 @@
+export interface ServerIssue {
+    field: string;
+    code: string;
+    params?: Record<string, unknown>;
+    path: (string | number)[];
+}
+export interface UploadedFile {
+    name: string;
+    mime?: string;
+    size?: number;
+}
+export interface EmbedRec {
+    url: string;
+    title?: string;
+    description?: string;
+    thumbnail?: string;
+    provider?: string;
+    type?: 'video' | 'rich' | 'photo' | 'link';
+    html?: string;
+    width?: number;
+    height?: number;
+}
+export interface FsEntry {
+    name: string;
+    isDir: boolean;
+}
+export declare const HOST_URL_SHAPES: {
+    readonly mediaUrl: (name: string) => string;
+    readonly uploadFile: "/api/upload";
+    readonly resolveEmbed: "/api/embed";
+    readonly listRecords: (library: string, shelf: string) => string;
+    readonly listDir: "/api/fs/list";
+};
+export interface HostServices {
+    mediaUrl(name: string): string;
+    uploadFile(file: File, onProgress?: (percent: number) => void): Promise<UploadedFile | null>;
+    resolveEmbed(url: string): Promise<EmbedRec | null>;
+    listRecords(library: string, shelf: string, filter?: Record<string, string>): Promise<Record<string, unknown>[]>;
+    listDir(path: string, exts?: string[]): Promise<FsEntry[]>;
+}
+export declare function registerHostServices(services: HostServices): void;
+export declare function resetHostServices(): void;
+export declare const mediaUrl: HostServices['mediaUrl'];
+export declare const uploadFile: HostServices['uploadFile'];
+export declare const resolveEmbed: HostServices['resolveEmbed'];
+export declare const listRecords: HostServices['listRecords'];
+export declare const listDir: HostServices['listDir'];

package/dist/host-services.js

@@ -0,0 +1,35 @@
+export const HOST_URL_SHAPES = {
+    mediaUrl: (name) => `/uploads/${name}`,
+    uploadFile: '/api/upload',
+    resolveEmbed: '/api/embed',
+    listRecords: (library, shelf) => `/api/${library}/${shelf}`,
+    listDir: '/api/fs/list',
+};
+const MEMBERS = ['mediaUrl', 'uploadFile', 'resolveEmbed', 'listRecords', 'listDir'];
+let host = null;
+export function registerHostServices(services) {
+    if (!services || typeof services !== 'object') {
+        throw new Error('[web-ui] registerHostServices() needs an object of host services');
+    }
+    const missing = MEMBERS.filter((name) => typeof services[name] !== 'function');
+    if (missing.length) {
+        throw new Error(`[web-ui] registerHostServices() is missing ${missing.join(', ')} — ` +
+            `the host must supply every service the kit calls, not only the ones its own pages use`);
+    }
+    host = services;
+}
+export function resetHostServices() {
+    host = null;
+}
+function must() {
+    if (!host) {
+        throw new Error('[web-ui] host services are not registered — the application must call ' +
+            'registerHostServices() before the first render');
+    }
+    return host;
+}
+export const mediaUrl = (name) => must().mediaUrl(name);
+export const uploadFile = (file, onProgress) => must().uploadFile(file, onProgress);
+export const resolveEmbed = (url) => must().resolveEmbed(url);
+export const listRecords = (library, shelf, filter) => must().listRecords(library, shelf, filter);
+export const listDir = (path, exts) => must().listDir(path, exts);

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+export * from './types.ts';
+export * from './registry.ts';
+export * from './schema-registry.ts';
+export * from './host-services.ts';
+export * from './list-view.ts';
+export * from './plugin-ui.ts';
+export * from './site-links.ts';
+export * from './lib/utils.ts';
+export * from './lib/date-format.ts';
+export * from './hooks/use-as-ref.ts';
+export * from './hooks/use-isomorphic-layout-effect.ts';
+export * from './hooks/use-lazy-ref.ts';
+export * from './components/Icon.tsx';
+export * from './components/PageBody.tsx';
+export * from './components/SaveStatus.tsx';
+export * from './components/Toolbar.tsx';
+export * from './components/FavoriteButton.tsx';
+export * from './components/ExtendReasonInfo.tsx';
+export * from './components/visually-hidden-input.tsx';
+export * from './components/RecordInline.tsx';
+export * from './components/ui/badge.tsx';
+export * from './components/ui/button.tsx';
+export * from './components/ui/calendar.tsx';
+export * from './components/ui/card.tsx';
+export * from './components/ui/checkbox.tsx';
+export * from './components/ui/chip-cls.ts';
+export * from './components/ui/confirm.tsx';
+export * from './components/ui/date-picker.tsx';
+export * from './components/ui/dialog.tsx';
+export * from './components/ui/dropdown-menu.tsx';
+export * from './components/ui/FieldLabel.tsx';
+export * from './components/ui/input-group.tsx';
+export * from './components/ui/input.tsx';
+export * from './components/ui/label.tsx';
+export * from './components/ui/mask-input.tsx';
+export * from './components/ui/month-year-picker.tsx';
+export * from './components/ui/option-icon.tsx';
+export * from './components/ui/phone-input.tsx';
+export * from './components/ui/popover.tsx';
+export * from './components/ui/rating.tsx';
+export * from './components/ui/scroll-area.tsx';
+export * from './components/ui/select-combobox.tsx';
+export * from './components/ui/select.tsx';
+export * from './components/ui/separator.tsx';
+export * from './components/ui/switch.tsx';
+export * from './components/ui/textarea.tsx';
+export * from './components/ui/time-picker.tsx';
+export * from './render/option-list.tsx';
+export * from './render/multiple-chips.tsx';
+export * from './render/record-save-ctx.tsx';
+export * from './layout.tsx';
+export * from './lib/json.ts';
+export * from './lib/multi-value.ts';
+export * from './lib/use-record-labels.ts';
+export * from './hooks/use-media-query.ts';
+export * from './render/dispatch.tsx';
+export { type Commit } from './render/write.ts';
+export { type SlotHandle, useSlot, useSlotOptional, useSlotRender, useSlots, SlotProvider, SlotScope, Slot, SlotEditor, SlotValue, } from './render/slot.tsx';
+export { DEFAULT_SECTION_ICON, PAGE_STACK, FieldLabel as RenderFieldLabel, FieldError } from './render/chrome.tsx';
+export * from './render/field-errors.tsx';
+export * from './render/field-frame.tsx';
+export * from './render/form-types.ts';
+export * from './render/hybrid-scope.tsx';
+export * from './render/image.tsx';
+export * from './render/picker-scrim.tsx';
+export { hasValue, firstCoverKey, useTranslation, MultiTagInput } from './render/shared.tsx';
+export * from './render/sort-rows.ts';
+export * from './render/use-form-bridge.ts';
+export * from './render/widgets/display.tsx';
+export * from './actions/registry.ts';

package/dist/index.js

@@ -0,0 +1,69 @@
+export * from "./types.js";
+export * from "./registry.js";
+export * from "./schema-registry.js";
+export * from "./host-services.js";
+export * from "./list-view.js";
+export * from "./plugin-ui.js";
+export * from "./site-links.js";
+export * from "./lib/utils.js";
+export * from "./lib/date-format.js";
+export * from "./hooks/use-as-ref.js";
+export * from "./hooks/use-isomorphic-layout-effect.js";
+export * from "./hooks/use-lazy-ref.js";
+export * from "./components/Icon.js";
+export * from "./components/PageBody.js";
+export * from "./components/SaveStatus.js";
+export * from "./components/Toolbar.js";
+export * from "./components/FavoriteButton.js";
+export * from "./components/ExtendReasonInfo.js";
+export * from "./components/visually-hidden-input.js";
+export * from "./components/RecordInline.js";
+export * from "./components/ui/badge.js";
+export * from "./components/ui/button.js";
+export * from "./components/ui/calendar.js";
+export * from "./components/ui/card.js";
+export * from "./components/ui/checkbox.js";
+export * from "./components/ui/chip-cls.js";
+export * from "./components/ui/confirm.js";
+export * from "./components/ui/date-picker.js";
+export * from "./components/ui/dialog.js";
+export * from "./components/ui/dropdown-menu.js";
+export * from "./components/ui/FieldLabel.js";
+export * from "./components/ui/input-group.js";
+export * from "./components/ui/input.js";
+export * from "./components/ui/label.js";
+export * from "./components/ui/mask-input.js";
+export * from "./components/ui/month-year-picker.js";
+export * from "./components/ui/option-icon.js";
+export * from "./components/ui/phone-input.js";
+export * from "./components/ui/popover.js";
+export * from "./components/ui/rating.js";
+export * from "./components/ui/scroll-area.js";
+export * from "./components/ui/select-combobox.js";
+export * from "./components/ui/select.js";
+export * from "./components/ui/separator.js";
+export * from "./components/ui/switch.js";
+export * from "./components/ui/textarea.js";
+export * from "./components/ui/time-picker.js";
+export * from "./render/option-list.js";
+export * from "./render/multiple-chips.js";
+export * from "./render/record-save-ctx.js";
+export * from "./layout.js";
+export * from "./lib/json.js";
+export * from "./lib/multi-value.js";
+export * from "./lib/use-record-labels.js";
+export * from "./hooks/use-media-query.js";
+export * from "./render/dispatch.js";
+export { useSlot, useSlotOptional, useSlotRender, useSlots, SlotProvider, SlotScope, Slot, SlotEditor, SlotValue, } from "./render/slot.js";
+export { DEFAULT_SECTION_ICON, PAGE_STACK, FieldLabel as RenderFieldLabel, FieldError } from "./render/chrome.js";
+export * from "./render/field-errors.js";
+export * from "./render/field-frame.js";
+export * from "./render/form-types.js";
+export * from "./render/hybrid-scope.js";
+export * from "./render/image.js";
+export * from "./render/picker-scrim.js";
+export { hasValue, firstCoverKey, useTranslation, MultiTagInput } from "./render/shared.js";
+export * from "./render/sort-rows.js";
+export * from "./render/use-form-bridge.js";
+export * from "./render/widgets/display.js";
+export * from "./actions/registry.js";

package/dist/layout.d.ts

@@ -0,0 +1,29 @@
+import React, { type ReactNode } from 'react';
+import type { FieldMeta, LayoutEl, ContainerNode } from '@coffer-org/sdk/fields';
+import { type GroupTone } from './render/chrome.tsx';
+import type { FormBridge } from './render/form-types.ts';
+import type { FieldMode } from './types.ts';
+export interface LayoutRenderCtx {
+    bridge?: FormBridge;
+    renderField?: (key: string, field: FieldMeta) => ReactNode | null;
+    renderGroup?: (key: string, group: ContainerNode) => ReactNode | null;
+    values?: Record<string, unknown>;
+    setValue?: (key: string, v: unknown) => void | Promise<string | undefined>;
+    isHidden?: (key: string) => boolean;
+    mode?: FieldMode;
+}
+export declare function SectionShell({ label, icon, labelAfter, children, rail, tone, }: {
+    label?: string;
+    icon?: string;
+    labelAfter?: ReactNode;
+    children: ReactNode;
+    rail?: boolean;
+    tone?: GroupTone;
+}): React.JSX.Element;
+export declare function LabelledDivider({ label }: {
+    label: string;
+}): React.JSX.Element;
+export declare function LayoutRenderer({ items, ctx }: {
+    items: LayoutEl[];
+    ctx: LayoutRenderCtx;
+}): React.JSX.Element | null;