@minlang/design-system 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Codeshift AI Solutions
+
+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/dist/a11y/FieldError.d.ts

@@ -0,0 +1,4 @@
+export declare const FieldError: import("react").ForwardRefExoticComponent<Readonly<{
+    id: string;
+    message: string | null;
+}> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/a11y/FieldError.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Error text linked to a control via aria-describedby (the id contract).
+// Focusable (tabIndex -1) so forms can move focus to the rejection.
+import { forwardRef } from "react";
+export const FieldError = forwardRef(({ id, message }, ref) => message === null ? null : (_jsx("p", { ref: ref, id: id, role: "alert", tabIndex: -1, className: "mt-ml-xs text-sm text-danger", children: message })));
+FieldError.displayName = "FieldError";

package/dist/a11y/Label.d.ts

@@ -0,0 +1,5 @@
+import type { ReactElement, ReactNode } from "react";
+export declare const Label: ({ htmlFor, children, }: Readonly<{
+    htmlFor: string;
+    children: ReactNode;
+}>) => ReactElement;

package/dist/a11y/Label.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Label = ({ htmlFor, children, }) => (_jsx("label", { htmlFor: htmlFor, className: "block text-sm font-medium text-ink", children: children }));

package/dist/a11y/LiveRegion.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+export declare const LiveRegion: ({ message }: Readonly<{
+    message: string | null;
+}>) => ReactElement;

package/dist/a11y/LiveRegion.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Polite live region: announces async outcomes to screen readers.
+export const LiveRegion = ({ message }) => (_jsx("div", { "aria-live": "polite", className: "sr-only", children: message ?? "" }));

package/dist/a11y/SkipLink.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement } from "react";
+export declare const SkipLink: ({ targetId }: Readonly<{
+    targetId: string;
+}>) => ReactElement;

package/dist/a11y/SkipLink.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Keyboard skip-to-content link; visible on focus.
+export const SkipLink = ({ targetId }) => (_jsx("a", { href: `#${targetId}`, className: "sr-only focus:not-sr-only focus:absolute focus:left-ml-sm focus:top-ml-sm focus:rounded-ml-sm focus:bg-surface-raised focus:p-ml-sm focus:text-ink", children: "Skip to content" }));

package/dist/a11y/VisuallyHidden.d.ts

@@ -0,0 +1,4 @@
+import type { ReactElement, ReactNode } from "react";
+export declare const VisuallyHidden: ({ children }: Readonly<{
+    children: ReactNode;
+}>) => ReactElement;

package/dist/a11y/VisuallyHidden.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const VisuallyHidden = ({ children }) => (_jsx("span", { className: "sr-only", children: children }));

package/dist/a11y/useFocusAlert.d.ts

@@ -0,0 +1 @@
+export declare const useFocusAlert: (message: string | null) => React.RefObject<HTMLParagraphElement | null>;

package/dist/a11y/useFocusAlert.js

@@ -0,0 +1,13 @@
+"use client";
+// Moves focus to the (first) error alert when a rejection lands, so keyboard
+// and screen-reader users hear the constraint message immediately.
+import { useEffect, useRef } from "react";
+export const useFocusAlert = (message) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (message !== null) {
+            ref.current?.focus();
+        }
+    }, [message]);
+    return ref;
+};

package/dist/components/ActionButton.d.ts

@@ -0,0 +1,8 @@
+import type { DispatchBinding, RenderDeps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const ActionButton: ({ label, dispatch, deps, variant, }: Readonly<{
+    label: string;
+    dispatch: DispatchBinding;
+    deps: RenderDeps;
+    variant: "primary" | "secondary";
+}>) => ReactElement;

package/dist/components/ActionButton.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionButtonClient } from "./ActionButtonClient.js";
+export const ActionButton = ({ label, dispatch, deps, variant, }) => {
+    const names = dispatch.kind === "action" ? [dispatch.action] : dispatch.actions;
+    const handlers = [];
+    let missing = null;
+    for (const name of names) {
+        const handler = deps.actions[name];
+        if (handler === undefined) {
+            missing = missing ?? name;
+        }
+        else {
+            handlers.push(handler);
+        }
+    }
+    return (_jsx(ActionButtonClient, { label: label, variant: variant, handlers: handlers, missingHandler: missing }));
+};

package/dist/components/ActionButtonClient.d.ts

@@ -0,0 +1,9 @@
+import type { ServerActionHandler } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export type ActionButtonClientProps = Readonly<{
+    label: string;
+    variant: "primary" | "secondary";
+    handlers: ReadonlyArray<ServerActionHandler>;
+    missingHandler: string | null;
+}>;
+export declare const ActionButtonClient: (props: ActionButtonClientProps) => ReactElement;

package/dist/components/ActionButtonClient.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Client action button: runs its server-action handlers in order, stopping
+// at the first rejection; announces errors and moves focus to them.
+import { useState } from "react";
+import { FieldError } from "../a11y/FieldError.js";
+import { LiveRegion } from "../a11y/LiveRegion.js";
+import { useFocusAlert } from "../a11y/useFocusAlert.js";
+const runHandlers = async (handlers) => {
+    for (const handler of handlers) {
+        const outcome = await handler(new FormData());
+        if (!outcome.ok) {
+            return outcome.error.message;
+        }
+    }
+    return null;
+};
+export const ActionButtonClient = (props) => {
+    const [error, setError] = useState(null);
+    const [pending, setPending] = useState(false);
+    const alertRef = useFocusAlert(error);
+    const styles = props.variant === "primary"
+        ? "bg-primary text-primary-ink hover:opacity-90"
+        : "border border-edge bg-surface-raised text-ink hover:bg-surface";
+    const onClick = () => {
+        if (props.missingHandler !== null) {
+            setError(`No handler bound for action ${props.missingHandler}.`);
+            return;
+        }
+        setPending(true);
+        void runHandlers(props.handlers).then((outcome) => {
+            setPending(false);
+            setError(outcome);
+        });
+    };
+    return (_jsxs("span", { className: "inline-flex flex-col gap-ml-xs", children: [_jsx("button", { type: "button", disabled: pending, onClick: onClick, className: `rounded-ml-md px-ml-md py-ml-sm font-medium transition-colors duration-ml-fast focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:opacity-60 ${styles}`, children: props.label }), _jsx(FieldError, { ref: alertRef, id: `action-error-${props.label}`, message: error }), _jsx(LiveRegion, { message: error })] }));
+};

package/dist/components/ActionForm.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const ActionForm: ({ node, deps }: WidgetProps<"form">) => ReactElement;

package/dist/components/ActionForm.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionFormClient } from "./ActionFormClient.js";
+import { fieldOptions } from "./fieldOptions.js";
+export const ActionForm = ({ node, deps }) => (_jsx(ActionFormClient, { label: node.a11y.label, submitLabel: node.submitLabel, errorId: `form-error-${node.action}`, fields: node.fields.map((field) => ({
+        field,
+        options: fieldOptions(field, deps.state),
+    })), handler: deps.actions[node.action] ?? null }));

package/dist/components/ActionFormClient.d.ts

@@ -0,0 +1,14 @@
+import type { ReactElement } from "react";
+import type { FieldSpec, ServerActionHandler } from "@minlang/runtime-web";
+import type { SelectOption } from "./FormField.js";
+export type ActionFormClientProps = Readonly<{
+    label: string;
+    submitLabel: string;
+    errorId: string;
+    fields: ReadonlyArray<Readonly<{
+        field: FieldSpec;
+        options: ReadonlyArray<SelectOption>;
+    }>>;
+    handler: ServerActionHandler | null;
+}>;
+export declare const ActionFormClient: (props: ActionFormClientProps) => ReactElement;

package/dist/components/ActionFormClient.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Client half of the schema form: submits FormData to the bound server
+// action, announces rejections (exact constraint message), moves focus.
+import { useState } from "react";
+import { FieldError } from "../a11y/FieldError.js";
+import { LiveRegion } from "../a11y/LiveRegion.js";
+import { useFocusAlert } from "../a11y/useFocusAlert.js";
+import { FormField } from "./FormField.js";
+export const ActionFormClient = (props) => {
+    const [error, setError] = useState(null);
+    const [pending, setPending] = useState(false);
+    const alertRef = useFocusAlert(error);
+    const onSubmit = (event) => {
+        event.preventDefault();
+        const form = event.currentTarget;
+        if (props.handler === null) {
+            setError("This action is not available.");
+            return;
+        }
+        const handler = props.handler;
+        setPending(true);
+        void handler(new FormData(form)).then((outcome) => {
+            setPending(false);
+            setError(outcome.ok ? null : outcome.error.message);
+            if (outcome.ok) {
+                form.reset();
+            }
+        });
+    };
+    return (_jsxs("form", { onSubmit: onSubmit, "aria-label": props.label, "aria-describedby": error === null ? undefined : props.errorId, className: "flex w-full max-w-md flex-col gap-ml-sm rounded-ml-md border border-edge bg-surface-raised p-ml-md", children: [props.fields.map(({ field, options }) => (_jsx(FormField, { idPrefix: props.label, field: field, options: options }, field.name))), _jsx(FieldError, { ref: alertRef, id: props.errorId, message: error }), _jsx("button", { type: "submit", disabled: pending, className: "rounded-ml-md bg-primary px-ml-md py-ml-sm font-medium text-primary-ink transition-colors duration-ml-fast hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring disabled:opacity-60", children: props.submitLabel }), _jsx(LiveRegion, { message: error })] }));
+};

package/dist/components/CardGrid.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const CardGrid: ({ node, deps }: WidgetProps<"card_grid">) => ReactElement;

package/dist/components/CardGrid.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cellText, rowsFromViewModel } from "./cellText.js";
+export const CardGrid = ({ node, deps }) => {
+    const rows = rowsFromViewModel(deps.viewModels[node.query]);
+    if (rows.length === 0) {
+        return _jsx("p", { role: "note", className: "text-ink-muted", children: node.emptyState.text });
+    }
+    return (_jsx("ul", { "aria-label": node.a11y.label, className: "grid gap-ml-sm", style: { gridTemplateColumns: `repeat(${node.columnsPerRow}, minmax(0, 1fr))` }, children: rows.map((row) => (_jsx("li", { className: "rounded-ml-md border border-edge bg-surface-raised p-ml-sm text-sm text-ink", children: node.columns.map((column) => (_jsxs("p", { children: [_jsxs("span", { className: "text-ink-muted", children: [column.label, ": "] }), cellText(row, column)] }, column.field))) }, String(row[node.rowKey])))) }));
+};

package/dist/components/DataTable.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const DataTable: ({ node, deps }: WidgetProps<"table">) => ReactElement;

package/dist/components/DataTable.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cellText, rowsFromViewModel } from "./cellText.js";
+export const DataTable = ({ node, deps }) => {
+    const rows = rowsFromViewModel(deps.viewModels[node.query]);
+    if (rows.length === 0) {
+        return (_jsx("p", { role: "note", className: "rounded-ml-md border border-dashed border-edge p-ml-lg text-center text-ink-muted", children: node.emptyState.text }));
+    }
+    return (_jsx("div", { className: "overflow-x-auto rounded-ml-md border border-edge bg-surface-raised", children: _jsxs("table", { "aria-label": node.a11y.label, className: "w-full border-collapse text-left text-sm", children: [_jsx("thead", { children: _jsx("tr", { className: "border-b border-edge", children: node.columns.map((column) => (_jsx("th", { scope: "col", className: "px-ml-md py-ml-sm font-semibold text-ink", children: column.label }, column.field))) }) }), _jsx("tbody", { children: rows.map((row) => (_jsx("tr", { className: "border-b border-edge last:border-b-0", children: node.columns.map((column) => (_jsx("td", { className: "px-ml-md py-ml-sm text-ink", children: cellText(row, column) }, column.field))) }, String(row[node.rowKey])))) })] }) }));
+};

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const EmptyState: ({ node }: WidgetProps<"empty_state">) => ReactElement;

package/dist/components/EmptyState.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const EmptyState = ({ node }) => (_jsx("p", { role: "note", className: "rounded-ml-md border border-dashed border-edge p-ml-lg text-center text-ink-muted", children: node.text }));

package/dist/components/FormField.d.ts

@@ -0,0 +1,11 @@
+import type { FieldSpec } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export type SelectOption = Readonly<{
+    value: string;
+    label: string;
+}>;
+export declare const FormField: ({ idPrefix, field, options, }: Readonly<{
+    idPrefix: string;
+    field: FieldSpec;
+    options: ReadonlyArray<SelectOption>;
+}>) => ReactElement;

package/dist/components/FormField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from "../a11y/Label.js";
+const inputClass = "w-full rounded-ml-sm border border-edge bg-surface-raised px-ml-sm py-ml-xs text-ink focus-visible:outline focus-visible:outline-2 focus-visible:outline-focus-ring";
+const Control = ({ id, field, options, }) => {
+    if (field.control === "select") {
+        return (_jsx("select", { id: id, name: field.name, className: inputClass, children: options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value))) }));
+    }
+    if (field.control === "checkbox") {
+        return _jsx("input", { id: id, name: field.name, type: "checkbox", className: "h-4 w-4 accent-primary" });
+    }
+    const type = field.control === "number" ? "number" : field.control === "datetime" ? "datetime-local" : "text";
+    return _jsx("input", { id: id, name: field.name, type: type, className: inputClass });
+};
+export const FormField = ({ idPrefix, field, options, }) => {
+    const id = `field-${idPrefix}-${field.name}`;
+    return (_jsxs("div", { className: "flex flex-col gap-ml-xs", children: [_jsx(Label, { htmlFor: id, children: field.label }), _jsx(Control, { id: id, field: field, options: options })] }));
+};

package/dist/components/Heading.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const Heading: ({ node }: WidgetProps<"heading">) => ReactElement;

package/dist/components/Heading.js

@@ -0,0 +1,3 @@
+// Screen heading (h1/h2 by schema level).
+import { createElement } from "react";
+export const Heading = ({ node }) => createElement(node.level <= 1 ? "h1" : "h2", { className: "font-ml text-2xl font-bold text-ink" }, node.text);

package/dist/components/HeadlineBanner.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const HeadlineBanner: ({ node, deps }: WidgetProps<"headline">) => ReactElement | null;

package/dist/components/HeadlineBanner.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Outcome headline (e.g. round results); copy from the schema binding.
+import { resolveCopy } from "@minlang/runtime-web";
+export const HeadlineBanner = ({ node, deps }) => {
+    const copy = resolveCopy(node.copy, deps.state);
+    if (copy === "") {
+        return null;
+    }
+    return (_jsx("p", { role: "status", className: "rounded-ml-md bg-surface-raised px-ml-md py-ml-sm text-xl font-bold text-ink", children: copy }));
+};

package/dist/components/HintText.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const HintText: ({ node }: WidgetProps<"hint">) => ReactElement;

package/dist/components/HintText.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HintText = ({ node }) => (_jsx("p", { className: "text-sm text-ink-muted", children: node.text }));

package/dist/components/PrimaryActionButton.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const PrimaryActionButton: ({ node, deps }: WidgetProps<"primary_action">) => ReactElement;

package/dist/components/PrimaryActionButton.js

@@ -0,0 +1,4 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionButton } from "./ActionButton.js";
+export const PrimaryActionButton = ({ node, deps }) => (_jsx(ActionButton, { label: node.label, dispatch: node.dispatch, deps: deps, variant: "primary" }));

package/dist/components/SecondaryActionButton.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const SecondaryActionButton: ({ node, deps, }: WidgetProps<"secondary_action">) => ReactElement;

package/dist/components/SecondaryActionButton.js

@@ -0,0 +1,4 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionButton } from "./ActionButton.js";
+export const SecondaryActionButton = ({ node, deps, }) => (_jsx(ActionButton, { label: node.label, dispatch: node.dispatch, deps: deps, variant: "secondary" }));

package/dist/components/StatusBadge.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const StatusBadge: ({ node, deps }: WidgetProps<"status_badge">) => ReactElement | null;

package/dist/components/StatusBadge.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Enum-driven status badge; copy resolved from the screen schema binding.
+import { resolveCopy } from "@minlang/runtime-web";
+export const StatusBadge = ({ node, deps }) => {
+    const copy = resolveCopy(node.copy, deps.state);
+    if (copy === "") {
+        return null;
+    }
+    return (_jsx("span", { role: "status", className: "inline-block w-fit rounded-ml-pill border border-edge bg-surface-raised px-ml-sm py-ml-xs text-sm font-medium text-ink", children: copy }));
+};

package/dist/components/TapTargetButton.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const TapTargetButton: ({ node, deps }: WidgetProps<"tap_target">) => ReactElement;

package/dist/components/TapTargetButton.js

@@ -0,0 +1,4 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ActionButton } from "./ActionButton.js";
+export const TapTargetButton = ({ node, deps }) => (_jsx(ActionButton, { label: `Tap ${node.target}`, dispatch: node.dispatch, deps: deps, variant: "secondary" }));

package/dist/components/TextBlock.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const TextBlock: ({ node }: WidgetProps<"text">) => ReactElement;

package/dist/components/TextBlock.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TextBlock = ({ node }) => (_jsx("p", { className: "max-w-prose text-base text-ink", children: node.text }));

package/dist/components/UnknownWidget.d.ts

@@ -0,0 +1,3 @@
+import type { WidgetProps } from "@minlang/runtime-web";
+import type { ReactElement } from "react";
+export declare const UnknownWidget: ({ node }: WidgetProps<"unknown">) => ReactElement;

package/dist/components/UnknownWidget.js

@@ -0,0 +1,2 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export const UnknownWidget = ({ node }) => (_jsxs("p", { role: "note", className: "rounded-ml-md border border-warning p-ml-sm text-sm text-ink", children: ["Unknown widget: ", node.key] }));

package/dist/components/cellText.d.ts

@@ -0,0 +1,3 @@
+import type { ColumnSpec, GenericRow } from "@minlang/runtime-web";
+export declare const cellText: (row: GenericRow, column: ColumnSpec) => string;
+export declare const rowsFromViewModel: (value: unknown) => ReadonlyArray<GenericRow>;

package/dist/components/cellText.js

@@ -0,0 +1,14 @@
+// Cell formatting for collection widgets: plain, deterministic text.
+export const cellText = (row, column) => {
+    const value = row[column.field];
+    if (typeof value === "boolean") {
+        return value ? "Yes" : "No";
+    }
+    if (value === undefined || value === null) {
+        return "";
+    }
+    return String(value);
+};
+export const rowsFromViewModel = (value) => Array.isArray(value)
+    ? value.filter((row) => typeof row === "object" && row !== null)
+    : [];

package/dist/components/fieldOptions.d.ts

@@ -0,0 +1,3 @@
+import type { FieldSpec, GenericState } from "@minlang/runtime-web";
+import type { SelectOption } from "./FormField.js";
+export declare const fieldOptions: (field: FieldSpec, state: GenericState) => ReadonlyArray<SelectOption>;

package/dist/components/fieldOptions.js

@@ -0,0 +1,15 @@
+// Server-side option resolution for select fields: ref fields offer state
+// rows (id + human label); enum fields offer their members. Serializable.
+import { rowLabel, rowsOf } from "@minlang/runtime-web";
+export const fieldOptions = (field, state) => {
+    if (field.control !== "select") {
+        return [];
+    }
+    if (field.refEntity !== null) {
+        return rowsOf(state, field.refEntity).map((row) => ({
+            value: String(row["id"] ?? ""),
+            label: rowLabel(row),
+        }));
+    }
+    return (field.enumMembers ?? []).map((member) => ({ value: member, label: member }));
+};

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+export { FieldError } from "./a11y/FieldError.js";
+export { Label } from "./a11y/Label.js";
+export { LiveRegion } from "./a11y/LiveRegion.js";
+export { SkipLink } from "./a11y/SkipLink.js";
+export { useFocusAlert } from "./a11y/useFocusAlert.js";
+export { VisuallyHidden } from "./a11y/VisuallyHidden.js";
+export { ActionButton } from "./components/ActionButton.js";
+export { ActionButtonClient } from "./components/ActionButtonClient.js";
+export { ActionForm } from "./components/ActionForm.js";
+export { ActionFormClient } from "./components/ActionFormClient.js";
+export { CardGrid } from "./components/CardGrid.js";
+export { DataTable } from "./components/DataTable.js";
+export { EmptyState } from "./components/EmptyState.js";
+export { FormField } from "./components/FormField.js";
+export { Heading } from "./components/Heading.js";
+export { HeadlineBanner } from "./components/HeadlineBanner.js";
+export { HintText } from "./components/HintText.js";
+export { PrimaryActionButton } from "./components/PrimaryActionButton.js";
+export { SecondaryActionButton } from "./components/SecondaryActionButton.js";
+export { StatusBadge } from "./components/StatusBadge.js";
+export { TapTargetButton } from "./components/TapTargetButton.js";
+export { TextBlock } from "./components/TextBlock.js";
+export { UnknownWidget } from "./components/UnknownWidget.js";
+export { defaultRegistry } from "./registry.js";

package/dist/index.js

@@ -0,0 +1,26 @@
+// @minlang/design-system public surface: the default registry, components,
+// and a11y primitives. Named exports only; no domain logic.
+export { FieldError } from "./a11y/FieldError.js";
+export { Label } from "./a11y/Label.js";
+export { LiveRegion } from "./a11y/LiveRegion.js";
+export { SkipLink } from "./a11y/SkipLink.js";
+export { useFocusAlert } from "./a11y/useFocusAlert.js";
+export { VisuallyHidden } from "./a11y/VisuallyHidden.js";
+export { ActionButton } from "./components/ActionButton.js";
+export { ActionButtonClient } from "./components/ActionButtonClient.js";
+export { ActionForm } from "./components/ActionForm.js";
+export { ActionFormClient } from "./components/ActionFormClient.js";
+export { CardGrid } from "./components/CardGrid.js";
+export { DataTable } from "./components/DataTable.js";
+export { EmptyState } from "./components/EmptyState.js";
+export { FormField } from "./components/FormField.js";
+export { Heading } from "./components/Heading.js";
+export { HeadlineBanner } from "./components/HeadlineBanner.js";
+export { HintText } from "./components/HintText.js";
+export { PrimaryActionButton } from "./components/PrimaryActionButton.js";
+export { SecondaryActionButton } from "./components/SecondaryActionButton.js";
+export { StatusBadge } from "./components/StatusBadge.js";
+export { TapTargetButton } from "./components/TapTargetButton.js";
+export { TextBlock } from "./components/TextBlock.js";
+export { UnknownWidget } from "./components/UnknownWidget.js";
+export { defaultRegistry } from "./registry.js";

package/dist/registry.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRegistry } from "@minlang/runtime-web";
+export declare const defaultRegistry: ComponentRegistry;

package/dist/registry.js

@@ -0,0 +1,32 @@
+// The default component registry: every widget key resolves to a curated,
+// token-styled, accessible component. Compile-time exhaustive — adding a
+// widget key in the runtime contract without a component here is a type
+// error. No domain logic in any component.
+import { ActionForm } from "./components/ActionForm.js";
+import { CardGrid } from "./components/CardGrid.js";
+import { DataTable } from "./components/DataTable.js";
+import { EmptyState } from "./components/EmptyState.js";
+import { Heading } from "./components/Heading.js";
+import { HeadlineBanner } from "./components/HeadlineBanner.js";
+import { HintText } from "./components/HintText.js";
+import { PrimaryActionButton } from "./components/PrimaryActionButton.js";
+import { SecondaryActionButton } from "./components/SecondaryActionButton.js";
+import { StatusBadge } from "./components/StatusBadge.js";
+import { TapTargetButton } from "./components/TapTargetButton.js";
+import { TextBlock } from "./components/TextBlock.js";
+import { UnknownWidget } from "./components/UnknownWidget.js";
+export const defaultRegistry = {
+    heading: Heading,
+    text: TextBlock,
+    hint: HintText,
+    status_badge: StatusBadge,
+    headline: HeadlineBanner,
+    table: DataTable,
+    card_grid: CardGrid,
+    form: ActionForm,
+    primary_action: PrimaryActionButton,
+    secondary_action: SecondaryActionButton,
+    tap_target: TapTargetButton,
+    empty_state: EmptyState,
+    unknown: UnknownWidget,
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@minlang/design-system",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "dependencies": {
+    "@minlang/runtime-web": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "19.2.7"
+  },
+  "devDependencies": {
+    "@testing-library/react": "16.3.2",
+    "@testing-library/user-event": "14.6.1",
+    "@types/node": "22.19.21",
+    "@types/react": "19.2.17",
+    "@vitejs/plugin-react": "4.7.0",
+    "@vitest/coverage-v8": "3.2.6",
+    "jsdom": "25.0.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "typescript": "5.6.3",
+    "vitest": "3.2.6"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/codeshift-ai-solutions/minlang-core.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "build": "tsc -p tsconfig.build.json"
+  }
+}