@hjmds/react 1.1.1 → 1.3.4

package/dist/calendar.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { calendarRecipe as recipe, assertIsoCalendarMonth, validateCalendarDescriptor, resolveCalendarGridDescriptor, getCalendarNavigationIntent, getCalendarNavigationTarget, } from "@hjmds/design-contracts/components/calendar";
+import { classNames, useControllableState } from "./internal.js";
+import { useOptionalHjmTheme } from "./provider.js";
+/** Inline single-date grid shared with DatePicker; month data remains product-owned. */
+export function Calendar({ descriptor, composeAccessibleName, previousMonth, nextMonth, onNavigateBeyondGrid, renderCellContent, size = "medium", autoFocus = false, className, ref }) {
+    validateCalendarDescriptor(descriptor);
+    for (const action of [previousMonth, nextMonth]) {
+        if (!action)
+            continue;
+        assertIsoCalendarMonth(action.month, "month action");
+        if (!action.label.trim())
+            throw new TypeError("Calendar month action label must not be empty");
+    }
+    const theme = useOptionalHjmTheme();
+    const [selected, setSelected] = useControllableState({
+        ...(descriptor.selectedDate === undefined ? {} : { value: descriptor.selectedDate }),
+        defaultValue: descriptor.defaultSelectedDate ?? null,
+        ...(descriptor.onSelectionChange ? { onChange: descriptor.onSelectionChange } : {}),
+    });
+    const cells = resolveCalendarGridDescriptor(descriptor.grid, selected, { composeAccessibleName });
+    const dates = cells.filter((cell) => !("filler" in cell));
+    const initial = dates.find((cell) => cell.isSelected) ?? dates.find((cell) => cell.isToday) ?? dates[0];
+    const [focused, setFocused] = useState(initial?.date);
+    const active = dates.some((cell) => cell.date === focused) ? focused : initial?.date;
+    const root = useRef(null);
+    const pending = useRef(undefined);
+    const [request, setRequest] = useState(0);
+    const focusDate = (date) => { pending.current = date; setFocused(date); setRequest((value) => value + 1); };
+    useImperativeHandle(ref, () => ({ focusDate }), []);
+    const gridKey = dates.map((cell) => cell.date).join(",");
+    const mountedFocus = useRef(false);
+    useEffect(() => {
+        if (autoFocus && !mountedFocus.current && active)
+            pending.current = active;
+        mountedFocus.current = true;
+        const date = pending.current;
+        if (!date)
+            return;
+        // A requested adjacent date may arrive in a later render; retain it until that page exists.
+        const button = Array.from(root.current?.querySelectorAll("[data-date]") ?? []).find((node) => node.dataset.date === date);
+        if (button) {
+            button.focus();
+            setFocused(date);
+            pending.current = undefined;
+        }
+    }, [gridKey, request, autoFocus, active]);
+    const titleId = `hjm-calendar-${useId()}`;
+    return _jsxs("div", { ref: root, className: classNames("hjm-calendar", className), "data-size": size, style: { "--hjm-calendar-cell-size": `${recipe.sizes[size].cellDiameter}px`,
+            "--hjm-calendar-disabled-opacity": recipe.day.disabledOpacity,
+            "--hjm-calendar-outside-opacity": recipe.day.outsideFocusedMonthOpacity }, children: [_jsxs("div", { className: "hjm-calendar__header", children: [previousMonth ? _jsx("button", { type: "button", "aria-label": previousMonth.label, disabled: !descriptor.onFocusedMonthChange, onClick: () => descriptor.onFocusedMonthChange?.(previousMonth.month, "previous"), children: _jsx("span", { "aria-hidden": "true", children: theme?.environment.direction === "rtl" ? "›" : "‹" }) }) : _jsx("span", {}), _jsx("strong", { id: titleId, "aria-live": "polite", "aria-atomic": "true", children: descriptor.monthLabel }), nextMonth ? _jsx("button", { type: "button", "aria-label": nextMonth.label, disabled: !descriptor.onFocusedMonthChange, onClick: () => descriptor.onFocusedMonthChange?.(nextMonth.month, "next"), children: _jsx("span", { "aria-hidden": "true", children: theme?.environment.direction === "rtl" ? "‹" : "›" }) }) : _jsx("span", {})] }), _jsx("div", { className: "hjm-calendar__viewport", children: _jsxs("div", { role: "grid", "aria-labelledby": titleId, className: "hjm-calendar__grid", children: [_jsx("div", { role: "row", className: "hjm-calendar__week", children: descriptor.grid.weekdayLabels.map((label, index) => _jsx("span", { role: "columnheader", className: "hjm-calendar__weekday", children: label }, index)) }), Array.from({ length: cells.length / 7 }, (_, row) => _jsx("div", { role: "row", className: "hjm-calendar__week", children: cells.slice(row * 7, row * 7 + 7).map((cell, column) => "filler" in cell
+                                ? _jsx("span", { role: "gridcell", "aria-hidden": "true" }, `filler-${column}`)
+                                : _jsxs("button", { type: "button", role: "gridcell", className: "hjm-calendar__day", "data-date": cell.date, "data-focus-date": cell.date === active || undefined, "data-today": cell.isToday || undefined, "data-selected": cell.isSelected || undefined, "data-disabled": !cell.selectable || undefined, "data-outside": cell.outsideFocusedMonth || undefined, "aria-label": cell.accessibleName, "aria-selected": cell.isSelected, "aria-disabled": !cell.selectable || undefined, "aria-current": cell.isToday ? "date" : undefined, tabIndex: cell.date === active ? 0 : -1, onFocus: () => setFocused(cell.date), onClick: () => { if (cell.selectable)
+                                        setSelected(cell.date); }, onKeyDown: (event) => {
+                                        if (event.altKey || event.ctrlKey || event.metaKey)
+                                            return;
+                                        const intent = getCalendarNavigationIntent(event.key, theme?.environment.direction ?? "ltr");
+                                        if (!intent)
+                                            return;
+                                        event.preventDefault();
+                                        const target = getCalendarNavigationTarget(descriptor.grid, cell.date, intent);
+                                        if (target.date)
+                                            focusDate(target.date);
+                                        else if (target.overflow)
+                                            onNavigateBeyondGrid?.({ date: cell.date, intent, overflow: target.overflow }, focusDate);
+                                    }, children: [_jsx("span", { "aria-hidden": "true", className: "hjm-calendar__day-label", children: Number(cell.date.slice(-2)) }), renderCellContent ? _jsx("span", { "aria-hidden": "true", className: "hjm-calendar__content", children: renderCellContent(cell) }) : null] }, cell.date)) }, row))] }) })] });
+}
+//# sourceMappingURL=calendar.js.map

package/dist/calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.js","sourceRoot":"","sources":["../src/calendar.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAgD,MAAM,OAAO,CAAC;AAC9H,OAAO,EACL,cAAc,IAAI,MAAM,EAAE,sBAAsB,EAAE,0BAA0B,EAAE,6BAA6B,EAC3G,2BAA2B,EAAE,2BAA2B,GAGzD,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAmBpD,wFAAwF;AACxF,MAAM,UAAU,QAAQ,CAAU,EAAE,UAAU,EAAE,qBAAqB,EAAE,aAAa,EAAE,SAAS,EAC7F,oBAAoB,EAAE,iBAAiB,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,EAA0B;IACrH,0BAA0B,CAAC,UAAU,CAAC,CAAC;IACvC,KAAK,MAAM,MAAM,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,EAAE,CAAC;QAChD,IAAI,CAAC,MAAM;YAAE,SAAS;QACtB,sBAAsB,CAAC,MAAM,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;QACrD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE;YAAE,MAAM,IAAI,SAAS,CAAC,+CAA+C,CAAC,CAAC;IACjG,CAAC;IACD,MAAM,KAAK,GAAG,mBAAmB,EAAE,CAAC;IACpC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,oBAAoB,CAAgB;QAClE,GAAG,CAAC,UAAU,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,YAAY,EAAE,CAAC;QACpF,YAAY,EAAE,UAAU,CAAC,mBAAmB,IAAI,IAAI;QACpD,GAAG,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KACpF,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,6BAA6B,CAAC,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,qBAAqB,EAAE,CAAC,CAAC;IAClG,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAA6C,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC;IACrG,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC;IACxG,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IACtD,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,CAAC;IACrF,MAAM,IAAI,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,CAAC,IAAY,EAAE,EAAE,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpH,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACpD,MAAM,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,MAAM;YAAE,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC;QAC3E,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;QAC5B,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,4FAA4F;QAC5F,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,gBAAgB,CAAoB,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,CAAC;QAC7I,IAAI,MAAM,EAAE,CAAC;YAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAAC,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;QAAC,CAAC;IAChF,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,MAAM,OAAO,GAAG,gBAAgB,KAAK,EAAE,EAAE,CAAC;IAC1C,OAAO,eAAK,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,eAAa,IAAI,EACtF,KAAK,EAAE,EAAE,0BAA0B,EAAE,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,YAAY,IAAI;YACzE,iCAAiC,EAAE,MAAM,CAAC,GAAG,CAAC,eAAe;YAC7D,gCAAgC,EAAE,MAAM,CAAC,GAAG,CAAC,0BAA0B,EAAmB,aAC5F,eAAK,SAAS,EAAC,sBAAsB,aAClC,aAAa,CAAC,CAAC,CAAC,iBAAQ,IAAI,EAAC,QAAQ,gBAAa,aAAa,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,UAAU,CAAC,oBAAoB,EAChH,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,oBAAoB,EAAE,CAAC,aAAa,CAAC,KAAK,EAAE,UAAU,CAAC,YAAE,8BAAkB,MAAM,YAAE,KAAK,EAAE,WAAW,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAQ,GAAS,CAAC,CAAC,CAAC,gBAAQ,EAC7L,iBAAQ,EAAE,EAAE,OAAO,eAAY,QAAQ,iBAAa,MAAM,YAAE,UAAU,CAAC,UAAU,GAAU,EAC1F,SAAS,CAAC,CAAC,CAAC,iBAAQ,IAAI,EAAC,QAAQ,gBAAa,SAAS,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,UAAU,CAAC,oBAAoB,EACxG,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,oBAAoB,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE,MAAM,CAAC,YAAE,8BAAkB,MAAM,YAAE,KAAK,EAAE,WAAW,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAQ,GAAS,CAAC,CAAC,CAAC,gBAAQ,IACjL,EACN,cAAK,SAAS,EAAC,wBAAwB,YACrC,eAAK,IAAI,EAAC,MAAM,qBAAkB,OAAO,EAAE,SAAS,EAAC,oBAAoB,aACvE,cAAK,IAAI,EAAC,KAAK,EAAC,SAAS,EAAC,oBAAoB,YAC3C,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,eAAM,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,uBAAuB,YAAc,KAAK,IAAb,KAAK,CAAgB,CAAC,GACxI,EACL,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,cAAK,IAAI,EAAC,KAAK,EAAC,SAAS,EAAC,oBAAoB,YACjG,KAAK,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,QAAQ,IAAI,IAAI;gCACvE,CAAC,CAAC,eAAM,IAAI,EAAC,UAAU,iBAAa,MAAM,IAAM,UAAU,MAAM,EAAE,CAAI;gCACtE,CAAC,CAAC,kBAAQ,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAiB,SAAS,EAAC,mBAAmB,eACxE,IAAI,CAAC,IAAI,qBAAmB,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,SAAS,gBAC5D,IAAI,CAAC,OAAO,IAAI,SAAS,mBAAiB,IAAI,CAAC,UAAU,IAAI,SAAS,mBACnE,CAAC,IAAI,CAAC,UAAU,IAAI,SAAS,kBAAgB,IAAI,CAAC,mBAAmB,IAAI,SAAS,gBACrF,IAAI,CAAC,cAAc,mBAAiB,IAAI,CAAC,UAAU,mBAAiB,CAAC,IAAI,CAAC,UAAU,IAAI,SAAS,kBAC/F,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACxF,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,UAAU;wCAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EACrG,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;wCACnB,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO;4CAAE,OAAO;wCAC3D,MAAM,MAAM,GAAG,2BAA2B,CAAC,KAAK,CAAC,GAAwD,EAAE,KAAK,EAAE,WAAW,CAAC,SAAS,IAAI,KAAK,CAAC,CAAC;wCAClJ,IAAI,CAAC,MAAM;4CAAE,OAAO;wCACpB,KAAK,CAAC,cAAc,EAAE,CAAC;wCACvB,MAAM,MAAM,GAAG,2BAA2B,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;wCAC/E,IAAI,MAAM,CAAC,IAAI;4CAAE,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;6CACnC,IAAI,MAAM,CAAC,QAAQ;4CAAE,oBAAoB,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,EAAE,SAAS,CAAC,CAAC;oCACtH,CAAC,aACD,8BAAkB,MAAM,EAAC,SAAS,EAAC,yBAAyB,YAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAQ,EAChG,iBAAiB,CAAC,CAAC,CAAC,8BAAkB,MAAM,EAAC,SAAS,EAAC,uBAAuB,YAAE,iBAAiB,CAAC,IAAI,CAAC,GAAQ,CAAC,CAAC,CAAC,IAAI,KAjB5E,IAAI,CAAC,IAAI,CAkB7C,CAAC,IArB4F,GAAG,CAsBvG,CAAC,IACH,GACF,IACF,CAAC;AACT,CAAC","sourcesContent":["import { useEffect, useId, useImperativeHandle, useRef, useState, type CSSProperties, type ReactNode, type Ref } from \"react\";\nimport {\n  calendarRecipe as recipe, assertIsoCalendarMonth, validateCalendarDescriptor, resolveCalendarGridDescriptor,\n  getCalendarNavigationIntent, getCalendarNavigationTarget,\n  type CalendarDescriptor, type CalendarSize, type CalendarNavigationIntent,\n  type ComposeCalendarAccessibleName, type ResolvedCalendarDateCell,\n} from \"@hjmds/design-contracts/components/calendar\";\nimport { classNames, useControllableState } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\n\nexport type CalendarMonthAction = Readonly<{ month: string; label: string }>;\nexport type CalendarHandle = Readonly<{ focusDate(date: string): void }>;\nexport type CalendarOverflow = Readonly<{ date: string; intent: CalendarNavigationIntent; overflow: \"before\" | \"after\" }>;\nexport type CalendarProps<Content = unknown> = Readonly<{\n  descriptor: CalendarDescriptor<Content>;\n  composeAccessibleName: ComposeCalendarAccessibleName<Content>;\n  previousMonth?: CalendarMonthAction;\n  nextMonth?: CalendarMonthAction;\n  /** The product owns adjacent month/date arithmetic. Call focusDate after requesting its page. */\n  onNavigateBeyondGrid?: (detail: CalendarOverflow, focusDate: CalendarHandle[\"focusDate\"]) => void;\n  renderCellContent?: (cell: ResolvedCalendarDateCell<Content>) => ReactNode;\n  size?: CalendarSize;\n  autoFocus?: boolean;\n  className?: string;\n  ref?: Ref<CalendarHandle>;\n}>;\n\n/** Inline single-date grid shared with DatePicker; month data remains product-owned. */\nexport function Calendar<Content>({ descriptor, composeAccessibleName, previousMonth, nextMonth,\n  onNavigateBeyondGrid, renderCellContent, size = \"medium\", autoFocus = false, className, ref }: CalendarProps<Content>) {\n  validateCalendarDescriptor(descriptor);\n  for (const action of [previousMonth, nextMonth]) {\n    if (!action) continue;\n    assertIsoCalendarMonth(action.month, \"month action\");\n    if (!action.label.trim()) throw new TypeError(\"Calendar month action label must not be empty\");\n  }\n  const theme = useOptionalHjmTheme();\n  const [selected, setSelected] = useControllableState<string | null>({\n    ...(descriptor.selectedDate === undefined ? {} : { value: descriptor.selectedDate }),\n    defaultValue: descriptor.defaultSelectedDate ?? null,\n    ...(descriptor.onSelectionChange ? { onChange: descriptor.onSelectionChange } : {}),\n  });\n  const cells = resolveCalendarGridDescriptor(descriptor.grid, selected, { composeAccessibleName });\n  const dates = cells.filter((cell): cell is ResolvedCalendarDateCell<Content> => !(\"filler\" in cell));\n  const initial = dates.find((cell) => cell.isSelected) ?? dates.find((cell) => cell.isToday) ?? dates[0];\n  const [focused, setFocused] = useState(initial?.date);\n  const active = dates.some((cell) => cell.date === focused) ? focused : initial?.date;\n  const root = useRef<HTMLDivElement>(null);\n  const pending = useRef<string | undefined>(undefined);\n  const [request, setRequest] = useState(0);\n  const focusDate = (date: string) => { pending.current = date; setFocused(date); setRequest((value) => value + 1); };\n  useImperativeHandle(ref, () => ({ focusDate }), []);\n  const gridKey = dates.map((cell) => cell.date).join(\",\");\n  const mountedFocus = useRef(false);\n  useEffect(() => {\n    if (autoFocus && !mountedFocus.current && active) pending.current = active;\n    mountedFocus.current = true;\n    const date = pending.current;\n    if (!date) return;\n    // A requested adjacent date may arrive in a later render; retain it until that page exists.\n    const button = Array.from(root.current?.querySelectorAll<HTMLButtonElement>(\"[data-date]\") ?? []).find((node) => node.dataset.date === date);\n    if (button) { button.focus(); setFocused(date); pending.current = undefined; }\n  }, [gridKey, request, autoFocus, active]);\n  const titleId = `hjm-calendar-${useId()}`;\n  return <div ref={root} className={classNames(\"hjm-calendar\", className)} data-size={size}\n    style={{ \"--hjm-calendar-cell-size\": `${recipe.sizes[size].cellDiameter}px`,\n      \"--hjm-calendar-disabled-opacity\": recipe.day.disabledOpacity,\n      \"--hjm-calendar-outside-opacity\": recipe.day.outsideFocusedMonthOpacity } as CSSProperties}>\n    <div className=\"hjm-calendar__header\">\n      {previousMonth ? <button type=\"button\" aria-label={previousMonth.label} disabled={!descriptor.onFocusedMonthChange}\n        onClick={() => descriptor.onFocusedMonthChange?.(previousMonth.month, \"previous\")}><span aria-hidden=\"true\">{theme?.environment.direction === \"rtl\" ? \"›\" : \"‹\"}</span></button> : <span />}\n      <strong id={titleId} aria-live=\"polite\" aria-atomic=\"true\">{descriptor.monthLabel}</strong>\n      {nextMonth ? <button type=\"button\" aria-label={nextMonth.label} disabled={!descriptor.onFocusedMonthChange}\n        onClick={() => descriptor.onFocusedMonthChange?.(nextMonth.month, \"next\")}><span aria-hidden=\"true\">{theme?.environment.direction === \"rtl\" ? \"‹\" : \"›\"}</span></button> : <span />}\n    </div>\n    <div className=\"hjm-calendar__viewport\">\n      <div role=\"grid\" aria-labelledby={titleId} className=\"hjm-calendar__grid\">\n        <div role=\"row\" className=\"hjm-calendar__week\">\n          {descriptor.grid.weekdayLabels.map((label, index) => <span role=\"columnheader\" className=\"hjm-calendar__weekday\" key={index}>{label}</span>)}\n        </div>\n        {Array.from({ length: cells.length / 7 }, (_, row) => <div role=\"row\" className=\"hjm-calendar__week\" key={row}>\n          {cells.slice(row * 7, row * 7 + 7).map((cell, column) => \"filler\" in cell\n            ? <span role=\"gridcell\" aria-hidden=\"true\" key={`filler-${column}`} />\n            : <button type=\"button\" role=\"gridcell\" key={cell.date} className=\"hjm-calendar__day\"\n              data-date={cell.date} data-focus-date={cell.date === active || undefined}\n              data-today={cell.isToday || undefined} data-selected={cell.isSelected || undefined}\n              data-disabled={!cell.selectable || undefined} data-outside={cell.outsideFocusedMonth || undefined}\n              aria-label={cell.accessibleName} aria-selected={cell.isSelected} aria-disabled={!cell.selectable || undefined}\n              aria-current={cell.isToday ? \"date\" : undefined} tabIndex={cell.date === active ? 0 : -1}\n              onFocus={() => setFocused(cell.date)} onClick={() => { if (cell.selectable) setSelected(cell.date); }}\n              onKeyDown={(event) => {\n                if (event.altKey || event.ctrlKey || event.metaKey) return;\n                const intent = getCalendarNavigationIntent(event.key as Parameters<typeof getCalendarNavigationIntent>[0], theme?.environment.direction ?? \"ltr\");\n                if (!intent) return;\n                event.preventDefault();\n                const target = getCalendarNavigationTarget(descriptor.grid, cell.date, intent);\n                if (target.date) focusDate(target.date);\n                else if (target.overflow) onNavigateBeyondGrid?.({ date: cell.date, intent, overflow: target.overflow }, focusDate);\n              }}>\n              <span aria-hidden=\"true\" className=\"hjm-calendar__day-label\">{Number(cell.date.slice(-2))}</span>\n              {renderCellContent ? <span aria-hidden=\"true\" className=\"hjm-calendar__content\">{renderCellContent(cell)}</span> : null}\n            </button>)}\n        </div>)}\n      </div>\n    </div>\n  </div>;\n}\n"]}

package/dist/carousel.d.ts

@@ -0,0 +1,20 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type CarouselSlideDescriptor, type CarouselSelection, type CarouselAutoplayConfig, type ComposeCarouselAccessibleName } from "@hjmds/design-contracts/components/carousel";
+export type CarouselLabels = Readonly<{
+    previous: string;
+    next: string;
+    pause: string;
+    resume: string;
+    navigation: string;
+}>;
+export type CarouselProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & CarouselSelection & Readonly<{
+    label: string;
+    slides: readonly CarouselSlideDescriptor[];
+    renderSlide: (slide: CarouselSlideDescriptor) => ReactNode;
+    composeAccessibleName: ComposeCarouselAccessibleName;
+    labels: CarouselLabels;
+    autoplay?: CarouselAutoplayConfig;
+}>;
+/** Finite keyed cards. Hidden slides stay mounted but cannot receive focus. */
+export declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=carousel.d.ts.map

package/dist/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../src/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA2C,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACrG,OAAO,EAEL,KAAK,uBAAuB,EAAE,KAAK,iBAAiB,EAAE,KAAK,sBAAsB,EACjF,KAAK,6BAA6B,EACnC,MAAM,6CAA6C,CAAC;AAMrD,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAC7H,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG,iBAAiB,GAAG,QAAQ,CAAC;IACvH,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,uBAAuB,EAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAC3D,qBAAqB,EAAE,6BAA6B,CAAC;IACrD,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,CAAC,EAAE,sBAAsB,CAAC;CACnC,CAAC,CAAC;AAEH,+EAA+E;AAC/E,eAAO,MAAM,QAAQ,0GAgFnB,CAAC"}

package/dist/carousel.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState, forwardRef } from "react";
+import { resolveCarouselDescriptor, getCarouselNavigationTarget, isCarouselAutoplayActive, } from "@hjmds/design-contracts/components/carousel";
+import { Button } from "./actions.js";
+import { isLargeTextScale } from "@hjmds/design-contracts/components/design-system-provider";
+import { classNames, useControllableState } from "./internal.js";
+import { useOptionalHjmTheme } from "./provider.js";
+/** Finite keyed cards. Hidden slides stay mounted but cannot receive focus. */
+export const Carousel = forwardRef(function Carousel({ label, slides, renderSlide, composeAccessibleName, labels, autoplay, currentKey, defaultCurrentKey, onCurrentKeyChange, className, onFocusCapture, onMouseEnter, onMouseLeave, onKeyDown, ...props }, ref) {
+    const theme = useOptionalHjmTheme();
+    const [current, setCurrent] = useControllableState({
+        ...(currentKey === undefined ? {} : { value: currentKey }),
+        defaultValue: defaultCurrentKey ?? slides[0]?.id ?? "",
+        ...(onCurrentKeyChange === undefined ? {} : { onChange: onCurrentKeyChange }),
+    });
+    const descriptor = { slides, currentKey: current, ...(autoplay ? { autoplay } : {}) };
+    const resolved = resolveCarouselDescriptor(descriptor, { composeAccessibleName });
+    if (!label.trim() || Object.values(labels).some((value) => !value.trim()))
+        throw new TypeError("Carousel labels must not be empty");
+    const [rotating, setRotating] = useState(autoplay !== undefined);
+    const [hovered, setHovered] = useState(false);
+    const [hidden, setHidden] = useState(false);
+    const pointerRotation = useRef(null);
+    const last = current === slides.at(-1).id;
+    const playing = isCarouselAutoplayActive(autoplay, {
+        reducedMotion: theme?.environment.reducedMotion ?? false,
+        paused: !rotating || hovered || hidden || last,
+    });
+    useEffect(() => {
+        const update = () => setHidden(document.hidden);
+        update();
+        document.addEventListener("visibilitychange", update);
+        return () => document.removeEventListener("visibilitychange", update);
+    }, []);
+    useEffect(() => {
+        if (!playing || !autoplay)
+            return;
+        const timer = setTimeout(() => setCurrent(getCarouselNavigationTarget(descriptor, "next")), autoplay.intervalMs);
+        return () => clearTimeout(timer);
+    }, [playing, autoplay?.intervalMs, current, slides, setCurrent]);
+    function select(key) { setRotating(false); if (key !== current)
+        setCurrent(key); }
+    function move(intent) { select(getCarouselNavigationTarget(descriptor, intent)); }
+    const rotationRequested = rotating && !last && !theme?.environment.reducedMotion;
+    return _jsxs("div", { ...props, ref: ref, role: "region", "aria-label": label, "aria-roledescription": "carousel", className: classNames("hjm-carousel", className), "data-large-text": isLargeTextScale(theme?.environment.textScale ?? 1), onFocusCapture: (event) => {
+            // APG: leaving focus must not silently restart rotation. Explicit resume is required.
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setRotating(false);
+            onFocusCapture?.(event);
+        }, onMouseEnter: (event) => { setHovered(true); onMouseEnter?.(event); }, onMouseLeave: (event) => { setHovered(false); onMouseLeave?.(event); }, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            // Do not steal editing/navigation keys from links, inputs or widgets inside a card.
+            if (!(event.target instanceof Element) || !event.target.closest("[data-carousel-controls]"))
+                return;
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            event.preventDefault();
+            move((event.key === "ArrowRight") !== (theme?.environment.direction === "rtl") ? "next" : "previous");
+        }, children: [autoplay ? _jsx(Button, { tone: "ghost", className: "hjm-carousel__rotation", disabled: theme?.environment.reducedMotion, onPointerDown: () => { pointerRotation.current = !rotationRequested; }, onPointerCancel: () => { pointerRotation.current = null; }, onClick: (event) => {
+                    // An abandoned pointer gesture must not override a later keyboard activation.
+                    const next = event.detail > 0 ? pointerRotation.current ?? !rotationRequested : !rotationRequested;
+                    pointerRotation.current = null;
+                    if (next && last)
+                        setCurrent(slides[0].id);
+                    setRotating(next);
+                }, children: rotationRequested ? labels.pause : labels.resume }) : null, _jsx("div", { className: "hjm-carousel__track", "aria-live": playing ? "off" : "polite", "aria-atomic": false, children: resolved.map((slide) => _jsx("div", { className: "hjm-carousel__slide", role: "group", "aria-roledescription": "slide", "aria-label": slide.accessibleName, hidden: slide.inert, inert: slide.inert, children: renderSlide(slide) }, slide.id)) }), _jsxs("div", { className: "hjm-carousel__controls", "data-carousel-controls": true, role: "group", "aria-label": labels.navigation, children: [_jsx(Button, { tone: "ghost", "aria-disabled": current === slides[0].id, onClick: () => move("previous"), children: labels.previous }), _jsx("div", { className: "hjm-carousel__dots", children: resolved.map((slide) => _jsx("button", { type: "button", "aria-label": slide.accessibleName, "aria-disabled": slide.current, "data-current": slide.current, className: "hjm-carousel__dot", onClick: () => select(slide.id), children: _jsx("span", { "aria-hidden": "true" }) }, slide.id)) }), _jsx(Button, { tone: "ghost", "aria-disabled": last, onClick: () => move("next"), children: labels.next })] })] });
+});
+//# sourceMappingURL=carousel.js.map

package/dist/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../src/carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useRef, useState, forwardRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport {\n  resolveCarouselDescriptor, getCarouselNavigationTarget, isCarouselAutoplayActive,\n  type CarouselSlideDescriptor, type CarouselSelection, type CarouselAutoplayConfig,\n  type ComposeCarouselAccessibleName,\n} from \"@hjmds/design-contracts/components/carousel\";\nimport { Button } from \"./actions.js\";\nimport { isLargeTextScale } from \"@hjmds/design-contracts/components/design-system-provider\";\nimport { classNames, useControllableState } from \"./internal.js\";\nimport { useOptionalHjmTheme } from \"./provider.js\";\n\nexport type CarouselLabels = Readonly<{ previous: string; next: string; pause: string; resume: string; navigation: string }>;\nexport type CarouselProps = Omit<HTMLAttributes<HTMLDivElement>, \"children\" | \"onChange\"> & CarouselSelection & Readonly<{\n  label: string;\n  slides: readonly CarouselSlideDescriptor[];\n  renderSlide: (slide: CarouselSlideDescriptor) => ReactNode;\n  composeAccessibleName: ComposeCarouselAccessibleName;\n  labels: CarouselLabels;\n  autoplay?: CarouselAutoplayConfig;\n}>;\n\n/** Finite keyed cards. Hidden slides stay mounted but cannot receive focus. */\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(function Carousel({\n  label, slides, renderSlide, composeAccessibleName, labels, autoplay,\n  currentKey, defaultCurrentKey, onCurrentKeyChange, className,\n  onFocusCapture, onMouseEnter, onMouseLeave, onKeyDown, ...props\n}, ref) {\n  const theme = useOptionalHjmTheme();\n  const [current, setCurrent] = useControllableState({\n    ...(currentKey === undefined ? {} : { value: currentKey }),\n    defaultValue: defaultCurrentKey ?? slides[0]?.id ?? \"\",\n    ...(onCurrentKeyChange === undefined ? {} : { onChange: onCurrentKeyChange }),\n  });\n  const descriptor = { slides, currentKey: current, ...(autoplay ? { autoplay } : {}) };\n  const resolved = resolveCarouselDescriptor(descriptor, { composeAccessibleName });\n  if (!label.trim() || Object.values(labels).some((value) => !value.trim())) throw new TypeError(\"Carousel labels must not be empty\");\n  const [rotating, setRotating] = useState(autoplay !== undefined);\n  const [hovered, setHovered] = useState(false);\n  const [hidden, setHidden] = useState(false);\n  const pointerRotation = useRef<boolean | null>(null);\n  const last = current === slides.at(-1)!.id;\n  const playing = isCarouselAutoplayActive(autoplay, {\n    reducedMotion: theme?.environment.reducedMotion ?? false,\n    paused: !rotating || hovered || hidden || last,\n  });\n  useEffect(() => {\n    const update = () => setHidden(document.hidden);\n    update(); document.addEventListener(\"visibilitychange\", update);\n    return () => document.removeEventListener(\"visibilitychange\", update);\n  }, []);\n  useEffect(() => {\n    if (!playing || !autoplay) return;\n    const timer = setTimeout(() => setCurrent(getCarouselNavigationTarget(descriptor, \"next\")), autoplay.intervalMs);\n    return () => clearTimeout(timer);\n  }, [playing, autoplay?.intervalMs, current, slides, setCurrent]);\n  function select(key: string) { setRotating(false); if (key !== current) setCurrent(key); }\n  function move(intent: \"next\" | \"previous\") { select(getCarouselNavigationTarget(descriptor, intent)); }\n  const rotationRequested = rotating && !last && !theme?.environment.reducedMotion;\n  return <div {...props} ref={ref} role=\"region\" aria-label={label} aria-roledescription=\"carousel\"\n    className={classNames(\"hjm-carousel\", className)} data-large-text={isLargeTextScale(theme?.environment.textScale ?? 1)}\n    onFocusCapture={(event) => {\n      // APG: leaving focus must not silently restart rotation. Explicit resume is required.\n      if (!event.currentTarget.contains(event.relatedTarget)) setRotating(false);\n      onFocusCapture?.(event);\n    }}\n    onMouseEnter={(event) => { setHovered(true); onMouseEnter?.(event); }}\n    onMouseLeave={(event) => { setHovered(false); onMouseLeave?.(event); }}\n    onKeyDown={(event) => {\n      onKeyDown?.(event);\n      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n      // Do not steal editing/navigation keys from links, inputs or widgets inside a card.\n      if (!(event.target instanceof Element) || !event.target.closest(\"[data-carousel-controls]\")) return;\n      if (event.key !== \"ArrowLeft\" && event.key !== \"ArrowRight\") return;\n      event.preventDefault();\n      move((event.key === \"ArrowRight\") !== (theme?.environment.direction === \"rtl\") ? \"next\" : \"previous\");\n    }}>\n    {autoplay ? <Button tone=\"ghost\" className=\"hjm-carousel__rotation\" disabled={theme?.environment.reducedMotion}\n      onPointerDown={() => { pointerRotation.current = !rotationRequested; }}\n      onPointerCancel={() => { pointerRotation.current = null; }}\n      onClick={(event) => {\n        // An abandoned pointer gesture must not override a later keyboard activation.\n        const next = event.detail > 0 ? pointerRotation.current ?? !rotationRequested : !rotationRequested;\n        pointerRotation.current = null;\n        if (next && last) setCurrent(slides[0]!.id);\n        setRotating(next);\n      }}>{rotationRequested ? labels.pause : labels.resume}</Button> : null}\n    <div className=\"hjm-carousel__track\" aria-live={playing ? \"off\" : \"polite\"} aria-atomic={false}>\n      {resolved.map((slide) => <div key={slide.id} className=\"hjm-carousel__slide\" role=\"group\"\n        aria-roledescription=\"slide\" aria-label={slide.accessibleName} hidden={slide.inert} inert={slide.inert}>\n        {renderSlide(slide)}\n      </div>)}\n    </div>\n    <div className=\"hjm-carousel__controls\" data-carousel-controls role=\"group\" aria-label={labels.navigation}>\n      <Button tone=\"ghost\" aria-disabled={current === slides[0]!.id} onClick={() => move(\"previous\")}>{labels.previous}</Button>\n      <div className=\"hjm-carousel__dots\">\n        {resolved.map((slide) => <button key={slide.id} type=\"button\" aria-label={slide.accessibleName}\n          aria-disabled={slide.current} data-current={slide.current} className=\"hjm-carousel__dot\"\n          onClick={() => select(slide.id)}><span aria-hidden=\"true\" /></button>)}\n      </div>\n      <Button tone=\"ghost\" aria-disabled={last} onClick={() => move(\"next\")}>{labels.next}</Button>\n    </div>\n  </div>;\n});\n"]}

package/dist/clipboard.d.ts

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+import { type ButtonProps } from "./actions.js";
+export type ClipboardButtonProps = Omit<ButtonProps, "children" | "onClick"> & Readonly<{
+    value: string;
+    /** Localized copy for both states; the renderer invents neither. */
+    labels: Readonly<{
+        idle: ReactNode;
+        copied: ReactNode;
+    }>;
+    /** How long the copied state stays, in ms. */
+    feedbackDuration?: number;
+    onCopy?: (value: string) => void;
+    onCopyError?: (error: unknown) => void;
+}>;
+/**
+ * Copying is three things products kept re-deriving: the async clipboard call,
+ * the temporary "copied" state, and announcing that state to a screen reader.
+ * The last one is the part that was always missing — a label that only changes
+ * visually tells a non-sighted user nothing happened.
+ */
+export declare const ClipboardButton: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "children" | "onClick"> & Readonly<{
+    value: string;
+    /** Localized copy for both states; the renderer invents neither. */
+    labels: Readonly<{
+        idle: ReactNode;
+        copied: ReactNode;
+    }>;
+    /** How long the copied state stays, in ms. */
+    feedbackDuration?: number;
+    onCopy?: (value: string) => void;
+    onCopyError?: (error: unknown) => void;
+}> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=clipboard.d.ts.map

package/dist/clipboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../src/clipboard.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAExD,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,SAAS,CAAC,GAC1E,QAAQ,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd,oEAAoE;IACpE,MAAM,EAAE,QAAQ,CAAC;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,SAAS,CAAA;KAAE,CAAC,CAAC;IACzD,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,CAAC,CAAC;AAIL;;;;;GAKG;AACH,eAAO,MAAM,eAAe;WAjBjB,MAAM;IACb,oEAAoE;YAC5D,QAAQ,CAAC;QAAE,IAAI,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,SAAS,CAAA;KAAE,CAAC;IACxD,8CAA8C;uBAC3B,MAAM;aAChB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;kBAClB,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI;sDAkDzC,CAAC"}

package/dist/clipboard.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "./actions.js";
+const defaultFeedbackDuration = 2000;
+/**
+ * Copying is three things products kept re-deriving: the async clipboard call,
+ * the temporary "copied" state, and announcing that state to a screen reader.
+ * The last one is the part that was always missing — a label that only changes
+ * visually tells a non-sighted user nothing happened.
+ */
+export const ClipboardButton = forwardRef(function ClipboardButton({ value, labels, feedbackDuration = defaultFeedbackDuration, onCopy, onCopyError, ...props }, forwardedRef) {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => { if (timer.current !== undefined)
+        clearTimeout(timer.current); }, []);
+    useEffect(() => {
+        // A new value makes the previous "copied" claim false: it referred to the
+        // old string, and leaving it up tells the user something untrue.
+        setCopied(false);
+        if (timer.current !== undefined)
+            clearTimeout(timer.current);
+    }, [value]);
+    const copy = useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(value);
+            setCopied(true);
+            onCopy?.(value);
+            if (timer.current !== undefined)
+                clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), feedbackDuration);
+        }
+        catch (error) {
+            // Clipboard access can be denied; swallowing that would leave the user
+            // believing the value was copied.
+            onCopyError?.(error);
+        }
+    }, [value, feedbackDuration, onCopy, onCopyError]);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ...props, ref: forwardedRef, onClick: () => { void copy(); }, children: copied ? labels.copied : labels.idle }), _jsx("span", { role: "status", className: "hjm-visually-hidden", children: copied ? labels.copied : "" })] }));
+});
+//# sourceMappingURL=clipboard.js.map

package/dist/clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.js","sourceRoot":"","sources":["../src/clipboard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC7F,OAAO,EAAE,MAAM,EAAoB,MAAM,cAAc,CAAC;AAaxD,MAAM,uBAAuB,GAAG,IAAI,CAAC;AAErC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CACvC,SAAS,eAAe,CACtB,EAAE,KAAK,EAAE,MAAM,EAAE,gBAAgB,GAAG,uBAAuB,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAC5F,YAAY;IAEZ,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,KAAK,GAAG,MAAM,CAA4C,SAAS,CAAC,CAAC;IAC3E,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS;QAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC7F,SAAS,CAAC,GAAG,EAAE;QACb,0EAA0E;QAC1E,iEAAiE;QACjE,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS;YAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC/D,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAClC,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YAC3C,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,MAAM,EAAE,CAAC,KAAK,CAAC,CAAC;YAChB,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS;gBAAE,YAAY,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC7D,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC,CAAC;QACvE,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,uEAAuE;YACvE,kCAAkC;YAClC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,8BACE,KAAC,MAAM,OAAK,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,YAClE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,GAC9B,EAET,eAAM,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,qBAAqB,YAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAQ,IACvF,CACJ,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Button, type ButtonProps } from \"./actions.js\";\n\nexport type ClipboardButtonProps = Omit<ButtonProps, \"children\" | \"onClick\"> &\n  Readonly<{\n    value: string;\n    /** Localized copy for both states; the renderer invents neither. */\n    labels: Readonly<{ idle: ReactNode; copied: ReactNode }>;\n    /** How long the copied state stays, in ms. */\n    feedbackDuration?: number;\n    onCopy?: (value: string) => void;\n    onCopyError?: (error: unknown) => void;\n  }>;\n\nconst defaultFeedbackDuration = 2000;\n\n/**\n * Copying is three things products kept re-deriving: the async clipboard call,\n * the temporary \"copied\" state, and announcing that state to a screen reader.\n * The last one is the part that was always missing — a label that only changes\n * visually tells a non-sighted user nothing happened.\n */\nexport const ClipboardButton = forwardRef<HTMLButtonElement, ClipboardButtonProps>(\n  function ClipboardButton(\n    { value, labels, feedbackDuration = defaultFeedbackDuration, onCopy, onCopyError, ...props },\n    forwardedRef,\n  ) {\n    const [copied, setCopied] = useState(false);\n    const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n    useEffect(() => () => { if (timer.current !== undefined) clearTimeout(timer.current); }, []);\n    useEffect(() => {\n      // A new value makes the previous \"copied\" claim false: it referred to the\n      // old string, and leaving it up tells the user something untrue.\n      setCopied(false);\n      if (timer.current !== undefined) clearTimeout(timer.current);\n    }, [value]);\n\n    const copy = useCallback(async () => {\n      try {\n        await navigator.clipboard.writeText(value);\n        setCopied(true);\n        onCopy?.(value);\n        if (timer.current !== undefined) clearTimeout(timer.current);\n        timer.current = setTimeout(() => setCopied(false), feedbackDuration);\n      } catch (error) {\n        // Clipboard access can be denied; swallowing that would leave the user\n        // believing the value was copied.\n        onCopyError?.(error);\n      }\n    }, [value, feedbackDuration, onCopy, onCopyError]);\n\n    return (\n      <>\n        <Button {...props} ref={forwardedRef} onClick={() => { void copy(); }}>\n          {copied ? labels.copied : labels.idle}\n        </Button>\n        {/* The state change is announced, not only painted. */}\n        <span role=\"status\" className=\"hjm-visually-hidden\">{copied ? labels.copied : \"\"}</span>\n      </>\n    );\n  },\n);\n"]}

package/dist/collapsible.d.ts

@@ -0,0 +1,11 @@
+import { type CollapsibleOpenState } from "@hjmds/design-contracts/components/collapsible";
+import { type ReactNode } from "react";
+export type CollapsibleProps = CollapsibleOpenState & Readonly<{
+    /** The control's label; it also tells the user what will appear. */
+    trigger: ReactNode;
+    children: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}>;
+export declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../src/collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAmD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxF,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GACjD,QAAQ,CAAC;IACP,oEAAoE;IACpE,OAAO,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW,6GAyCtB,CAAC"}

package/dist/collapsible.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { collapsibleRecipe, validateCollapsibleOpenState, } from "@hjmds/design-contracts/components/collapsible";
+import { forwardRef, useId, useState } from "react";
+import { classNames } from "./internal.js";
+export const Collapsible = forwardRef(function Collapsible({ trigger, children, disabled = false, className, ...openState }, forwardedRef) {
+    validateCollapsibleOpenState(openState);
+    const controlled = openState.open !== undefined;
+    const [internalOpen, setInternalOpen] = useState(openState.defaultOpen ?? false);
+    const open = openState.open ?? internalOpen;
+    const id = `${useId().replaceAll(":", "")}-collapsible`;
+    return (_jsxs("div", { ref: forwardedRef, className: classNames("hjm-collapsible", className), "data-state": open ? "open" : "closed", style: { "--hjm-collapsible-gap": `${collapsibleRecipe.gap}px` }, children: [_jsxs("button", { type: "button", className: "hjm-collapsible__trigger", "aria-expanded": open, "aria-controls": `${id}-content`, disabled: disabled, onClick: () => {
+                    const next = !open;
+                    if (!controlled)
+                        setInternalOpen(next);
+                    openState.onOpenChange?.(next);
+                }, children: [trigger, _jsx("span", { "aria-hidden": "true", className: "hjm-collapsible__marker", children: open ? "▾" : "▸" })] }), open ? (_jsx("div", { id: `${id}-content`, role: "region", className: "hjm-collapsible__content", children: children })) : null] }));
+});
+//# sourceMappingURL=collapsible.js.map

package/dist/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","sourceRoot":"","sources":["../src/collapsible.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,iBAAiB,EACjB,4BAA4B,GAE7B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAsC,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAW3C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAmC,SAAS,WAAW,CAC1F,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,EAChE,YAAY;IAEZ,4BAA4B,CAAC,SAAiC,CAAC,CAAC;IAChE,MAAM,UAAU,GAAG,SAAS,CAAC,IAAI,KAAK,SAAS,CAAC;IAChD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC;IACjF,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,IAAI,YAAY,CAAC;IAC5C,MAAM,EAAE,GAAG,GAAG,KAAK,EAAE,CAAC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,cAAc,CAAC;IACxD,OAAO,CACL,eACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,gBACvC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACpC,KAAK,EAAE,EAAE,uBAAuB,EAAE,GAAG,iBAAiB,CAAC,GAAG,IAAI,EAAmB,aAEjF,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,0BAA0B,mBACrB,IAAI,mBACJ,GAAG,EAAE,UAAU,EAC9B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC;oBACnB,IAAI,CAAC,UAAU;wBAAE,eAAe,CAAC,IAAI,CAAC,CAAC;oBACvC,SAAS,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;gBACjC,CAAC,aAEA,OAAO,EACR,8BAAkB,MAAM,EAAC,SAAS,EAAC,yBAAyB,YAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,GAAQ,IAC/E,EAMR,IAAI,CAAC,CAAC,CAAC,CACN,cAAK,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,0BAA0B,YAAE,QAAQ,GAAO,CAC9F,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import {\n  collapsibleRecipe,\n  validateCollapsibleOpenState,\n  type CollapsibleOpenState,\n} from \"@hjmds/design-contracts/components/collapsible\";\nimport { forwardRef, useId, useState, type CSSProperties, type ReactNode } from \"react\";\nimport { classNames } from \"./internal.js\";\n\nexport type CollapsibleProps = CollapsibleOpenState &\n  Readonly<{\n    /** The control's label; it also tells the user what will appear. */\n    trigger: ReactNode;\n    children: ReactNode;\n    disabled?: boolean;\n    className?: string;\n  }>;\n\nexport const Collapsible = forwardRef<HTMLDivElement, CollapsibleProps>(function Collapsible(\n  { trigger, children, disabled = false, className, ...openState },\n  forwardedRef,\n) {\n  validateCollapsibleOpenState(openState as CollapsibleOpenState);\n  const controlled = openState.open !== undefined;\n  const [internalOpen, setInternalOpen] = useState(openState.defaultOpen ?? false);\n  const open = openState.open ?? internalOpen;\n  const id = `${useId().replaceAll(\":\", \"\")}-collapsible`;\n  return (\n    <div\n      ref={forwardedRef}\n      className={classNames(\"hjm-collapsible\", className)}\n      data-state={open ? \"open\" : \"closed\"}\n      style={{ \"--hjm-collapsible-gap\": `${collapsibleRecipe.gap}px` } as CSSProperties}\n    >\n      <button\n        type=\"button\"\n        className=\"hjm-collapsible__trigger\"\n        aria-expanded={open}\n        aria-controls={`${id}-content`}\n        disabled={disabled}\n        onClick={() => {\n          const next = !open;\n          if (!controlled) setInternalOpen(next);\n          openState.onOpenChange?.(next);\n        }}\n      >\n        {trigger}\n        <span aria-hidden=\"true\" className=\"hjm-collapsible__marker\">{open ? \"▾\" : \"▸\"}</span>\n      </button>\n      {/*\n        Unmounted when closed rather than visually hidden: content left in the\n        tree stays reachable by search and by a screen reader, which contradicts\n        what the collapsed state says.\n      */}\n      {open ? (\n        <div id={`${id}-content`} role=\"region\" className=\"hjm-collapsible__content\">{children}</div>\n      ) : null}\n    </div>\n  );\n});\n"]}

package/dist/command-palette.d.ts

@@ -0,0 +1,25 @@
+import { type CommandPaletteActivateHandler, type CommandPaletteDescriptor, type CommandPaletteDismissPolicy, type CommandPaletteOpenChangeDetails, type CommandPaletteQueryState, type CommandPaletteSource } from "@hjmds/design-contracts/components/command-palette";
+import { type ReactNode } from "react";
+import { type OverlayTrigger } from "./modal.js";
+export type CommandPaletteProps<Key extends string = string> = Readonly<{
+    descriptor: CommandPaletteDescriptor;
+    source: CommandPaletteSource<Key, string>;
+    query: string;
+    onQueryChange: (query: string) => void;
+    onActivate: CommandPaletteActivateHandler<Key>;
+    /** Runs after the palette is gone, for a command that opens the next surface. */
+    onActivateAfterDismiss?: CommandPaletteActivateHandler<Key>;
+    queryState?: CommandPaletteQueryState;
+    dismissPolicy?: Partial<CommandPaletteDismissPolicy>;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean, details: CommandPaletteOpenChangeDetails) => void;
+    trigger?: OverlayTrigger;
+    renderLeading?: (itemId: Key) => ReactNode;
+    portalContainer?: HTMLElement;
+    className?: string;
+}>;
+export declare const CommandPalette: <Key extends string = string>(props: CommandPaletteProps<Key> & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.ReactElement | null;
+//# sourceMappingURL=command-palette.d.ts.map

package/dist/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../src/command-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,6BAA6B,EAElC,KAAK,wBAAwB,EAC7B,KAAK,2BAA2B,EAEhC,KAAK,+BAA+B,EACpC,KAAK,wBAAwB,EAC7B,KAAK,oBAAoB,EAC1B,MAAM,oDAAoD,CAAC;AAM5D,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAA0D,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAEzG,MAAM,MAAM,mBAAmB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IACtE,UAAU,EAAE,wBAAwB,CAAC;IACrC,MAAM,EAAE,oBAAoB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,EAAE,6BAA6B,CAAC,GAAG,CAAC,CAAC;IAC/C,iFAAiF;IACjF,sBAAsB,CAAC,EAAE,6BAA6B,CAAC,GAAG,CAAC,CAAC;IAC5D,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC,2BAA2B,CAAC,CAAC;IACrD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,+BAA+B,KAAK,IAAI,CAAC;IACjF,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,SAAS,CAAC;IAC3C,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,cAAc,EAiKrB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAChC,KAAK,EAAE,mBAAmB,CAAC,GAAG,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAClE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC"}

package/dist/command-palette.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { canDismissCommandPalette, commandPaletteBehaviorDefaults, commandPaletteRecipe, validateCommandPaletteDescriptor, } from "@hjmds/design-contracts/components/command-palette";
+import { flattenCollectionItems, getCollectionNavigationIntent, getCollectionNavigationTarget, } from "@hjmds/design-contracts/components/collection";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState, } from "react";
+import { classNames, composeRefs } from "./internal.js";
+import { getModalLayer, HjmPortal, renderTrigger, useModalFocus } from "./modal.js";
+export const CommandPalette = forwardRef(function CommandPalette({ descriptor, source, query, onQueryChange, onActivate, onActivateAfterDismiss, queryState, dismissPolicy, open: openProp, defaultOpen, onOpenChange, trigger, renderLeading, portalContainer, className, }, forwardedRef) {
+    validateCommandPaletteDescriptor(descriptor);
+    const policy = { ...commandPaletteBehaviorDefaults, ...dismissPolicy };
+    const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+    const open = openProp ?? internalOpen;
+    const items = useMemo(() => flattenCollectionItems(source), [source]);
+    const enabled = items.filter((item) => !item.disabled);
+    // The query state is Combobox's, so the message to show is its async slice —
+    // the palette adds no second loading vocabulary of its own.
+    const asyncState = queryState?.asyncState ?? { status: "idle" };
+    const [activeId, setActiveId] = useState(null);
+    const contentRef = useRef(null);
+    const triggerRef = useRef(null);
+    const inputRef = useRef(null);
+    const id = `${useId().replaceAll(":", "")}-command-palette`;
+    const active = enabled.find((item) => item.id === activeId) ?? enabled[0] ?? null;
+    useEffect(() => {
+        // A new query builds a new result list; the first enabled row becomes active
+        // so Enter always has an unambiguous target.
+        setActiveId(null);
+    }, [query, source]);
+    const change = (next, reason) => {
+        if (openProp === undefined)
+            setInternalOpen(next);
+        onOpenChange?.(next, { reason });
+    };
+    const requestClose = (reason) => {
+        if (!canDismissCommandPalette(reason, policy))
+            return;
+        change(false, reason);
+    };
+    const activate = (itemId, reason) => {
+        onActivate(itemId, reason);
+        // Running a command always closes the palette — `activation` is a dismiss
+        // reason no policy can veto — and the follow-up surface opens after that.
+        change(false, "activation");
+        if (onActivateAfterDismiss)
+            queueMicrotask(() => onActivateAfterDismiss(itemId, reason));
+    };
+    useModalFocus({
+        active: open,
+        contentRef,
+        initialFocusRef: inputRef,
+        ...(trigger === undefined ? {} : { fallbackReturnRef: triggerRef }),
+        onEscape: () => requestClose("escape"),
+    });
+    const onKeyDown = (event) => {
+        const intent = getCollectionNavigationIntent(event.key);
+        if (intent) {
+            const target = getCollectionNavigationTarget({ items: enabled }, active?.id ?? null, intent, true);
+            if (target === undefined)
+                return;
+            event.preventDefault();
+            setActiveId(target);
+            return;
+        }
+        if (event.key === "Enter" && active) {
+            event.preventDefault();
+            activate(active.id, "keyboard");
+        }
+    };
+    const renderedTrigger = trigger === undefined
+        ? null
+        : renderTrigger(trigger, triggerRef, open, id, "dialog", () => change(true, "trigger"));
+    if (!open)
+        return renderedTrigger;
+    const rows = (source.sections ?? [{ id: "__all", label: undefined, items: source.items ?? [] }]);
+    return (_jsxs(_Fragment, { children: [renderedTrigger, _jsx(HjmPortal, { ...(portalContainer === undefined ? {} : { container: portalContainer }), children: _jsx("div", { className: "hjm-overlay hjm-command-palette-positioner", "data-kind": "command-palette", style: { zIndex: getModalLayer(0) }, onMouseDown: (event) => { if (event.target === event.currentTarget)
+                        requestClose("outside"); }, children: _jsxs("div", { ref: composeRefs(contentRef, forwardedRef), id: id, role: "dialog", "aria-modal": "true", "aria-label": descriptor.accessibilityLabel, "data-hjm-modal-content": "", className: classNames("hjm-command-palette", className), style: { maxInlineSize: commandPaletteRecipe.content.maxWidth, maxBlockSize: commandPaletteRecipe.content.maxHeight }, children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-expanded": true, "aria-controls": `${id}-results`, "aria-activedescendant": active ? `${id}-${active.id}` : undefined, "aria-label": descriptor.accessibilityLabel, placeholder: descriptor.searchPlaceholder, className: "hjm-command-palette__search", value: query, onChange: (event) => onQueryChange(event.target.value), onKeyDown: onKeyDown }), _jsxs("div", { id: `${id}-results`, role: "listbox", "aria-label": descriptor.accessibilityLabel, className: "hjm-command-palette__viewport", children: [asyncState.status === "idle" ? null : (_jsx("p", { className: "hjm-command-palette__state", role: asyncState.status === "error" ? "alert" : "status", children: asyncState.message })), rows.map((section) => (_jsxs("div", { className: "hjm-command-palette__section", role: "group", "aria-label": section.label, children: [section.label ? _jsx("p", { className: "hjm-command-palette__section-label", children: section.label }) : null, section.items.map((item) => (_jsxs("div", { id: `${id}-${item.id}`, role: "option", "aria-selected": item.id === active?.id, "aria-disabled": item.disabled || undefined, className: "hjm-command-palette__item", "data-tone": item.tone, onMouseDown: (event) => {
+                                                    event.preventDefault();
+                                                    if (!item.disabled)
+                                                        activate(item.id, "pointer");
+                                                }, onMouseEnter: () => { if (!item.disabled)
+                                                    setActiveId(item.id); }, children: [renderLeading?.(item.id), _jsxs("span", { className: "hjm-command-palette__copy", children: [_jsx("span", { children: item.label }), item.description ? _jsx("span", { className: "hjm-command-palette__description", children: item.description }) : null] }), item.shortcut ? _jsx("kbd", { className: "hjm-command-palette__shortcut", children: item.shortcut }) : null] }, item.id)))] }, section.id)))] })] }) }) })] }));
+});
+//# sourceMappingURL=command-palette.js.map

package/dist/command-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.js","sourceRoot":"","sources":["../src/command-palette.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  canDismissCommandPalette,\n  commandPaletteBehaviorDefaults,\n  commandPaletteRecipe,\n  validateCommandPaletteDescriptor,\n  type CommandPaletteActivateHandler,\n  type CommandPaletteActivateReason,\n  type CommandPaletteDescriptor,\n  type CommandPaletteDismissPolicy,\n  type CommandPaletteDismissReason,\n  type CommandPaletteOpenChangeDetails,\n  type CommandPaletteQueryState,\n  type CommandPaletteSource,\n} from \"@hjmds/design-contracts/components/command-palette\";\nimport {\n  flattenCollectionItems,\n  getCollectionNavigationIntent,\n  getCollectionNavigationTarget,\n} from \"@hjmds/design-contracts/components/collection\";\nimport {\n  forwardRef,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { classNames, composeRefs } from \"./internal.js\";\nimport { getModalLayer, HjmPortal, renderTrigger, useModalFocus, type OverlayTrigger } from \"./modal.js\";\n\nexport type CommandPaletteProps<Key extends string = string> = Readonly<{\n  descriptor: CommandPaletteDescriptor;\n  source: CommandPaletteSource<Key, string>;\n  query: string;\n  onQueryChange: (query: string) => void;\n  onActivate: CommandPaletteActivateHandler<Key>;\n  /** Runs after the palette is gone, for a command that opens the next surface. */\n  onActivateAfterDismiss?: CommandPaletteActivateHandler<Key>;\n  queryState?: CommandPaletteQueryState;\n  dismissPolicy?: Partial<CommandPaletteDismissPolicy>;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean, details: CommandPaletteOpenChangeDetails) => void;\n  trigger?: OverlayTrigger;\n  renderLeading?: (itemId: Key) => ReactNode;\n  portalContainer?: HTMLElement;\n  className?: string;\n}>;\n\nexport const CommandPalette = forwardRef(function CommandPalette<Key extends string = string>(\n  {\n    descriptor,\n    source,\n    query,\n    onQueryChange,\n    onActivate,\n    onActivateAfterDismiss,\n    queryState,\n    dismissPolicy,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    trigger,\n    renderLeading,\n    portalContainer,\n    className,\n  }: CommandPaletteProps<Key>,\n  forwardedRef: React.Ref<HTMLDivElement>,\n) {\n  validateCommandPaletteDescriptor(descriptor);\n  const policy: CommandPaletteDismissPolicy = { ...commandPaletteBehaviorDefaults, ...dismissPolicy };\n  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);\n  const open = openProp ?? internalOpen;\n  const items = useMemo(() => flattenCollectionItems<Key, string>(source), [source]);\n  const enabled = items.filter((item) => !item.disabled);\n  // The query state is Combobox's, so the message to show is its async slice —\n  // the palette adds no second loading vocabulary of its own.\n  const asyncState = queryState?.asyncState ?? { status: \"idle\" as const };\n  const [activeId, setActiveId] = useState<Key | null>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const id = `${useId().replaceAll(\":\", \"\")}-command-palette`;\n  const active = enabled.find((item) => item.id === activeId) ?? enabled[0] ?? null;\n\n  useEffect(() => {\n    // A new query builds a new result list; the first enabled row becomes active\n    // so Enter always has an unambiguous target.\n    setActiveId(null);\n  }, [query, source]);\n\n  const change = (next: boolean, reason: CommandPaletteOpenChangeDetails[\"reason\"]) => {\n    if (openProp === undefined) setInternalOpen(next);\n    onOpenChange?.(next, { reason });\n  };\n  const requestClose = (reason: CommandPaletteDismissReason) => {\n    if (!canDismissCommandPalette(reason, policy)) return;\n    change(false, reason);\n  };\n  const activate = (itemId: Key, reason: CommandPaletteActivateReason) => {\n    onActivate(itemId, reason);\n    // Running a command always closes the palette — `activation` is a dismiss\n    // reason no policy can veto — and the follow-up surface opens after that.\n    change(false, \"activation\");\n    if (onActivateAfterDismiss) queueMicrotask(() => onActivateAfterDismiss(itemId, reason));\n  };\n\n  useModalFocus({\n    active: open,\n    contentRef,\n    initialFocusRef: inputRef,\n    ...(trigger === undefined ? {} : { fallbackReturnRef: triggerRef }),\n    onEscape: () => requestClose(\"escape\"),\n  });\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const intent = getCollectionNavigationIntent(event.key as never);\n    if (intent) {\n      const target = getCollectionNavigationTarget({ items: enabled }, active?.id ?? null, intent, true);\n      if (target === undefined) return;\n      event.preventDefault();\n      setActiveId(target as Key);\n      return;\n    }\n    if (event.key === \"Enter\" && active) {\n      event.preventDefault();\n      activate(active.id as Key, \"keyboard\");\n    }\n  };\n\n  const renderedTrigger = trigger === undefined\n    ? null\n    : renderTrigger(trigger, triggerRef, open, id, \"dialog\", () => change(true, \"trigger\"));\n  if (!open) return renderedTrigger;\n\n  const rows = (source.sections ?? [{ id: \"__all\", label: undefined, items: source.items ?? [] }]) as readonly {\n    id: string; label?: string; items: readonly (typeof items)[number][];\n  }[];\n  return (\n    <>\n      {renderedTrigger}\n      <HjmPortal {...(portalContainer === undefined ? {} : { container: portalContainer })}>\n        <div\n          className=\"hjm-overlay hjm-command-palette-positioner\"\n          data-kind=\"command-palette\"\n          style={{ zIndex: getModalLayer(0) }}\n          onMouseDown={(event) => { if (event.target === event.currentTarget) requestClose(\"outside\"); }}\n        >\n          <div\n            ref={composeRefs(contentRef, forwardedRef)}\n            id={id}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label={descriptor.accessibilityLabel}\n            data-hjm-modal-content=\"\"\n            className={classNames(\"hjm-command-palette\", className)}\n            style={{ maxInlineSize: commandPaletteRecipe.content.maxWidth, maxBlockSize: commandPaletteRecipe.content.maxHeight } as CSSProperties}\n          >\n            <input\n              ref={inputRef}\n              type=\"text\"\n              role=\"combobox\"\n              aria-expanded\n              aria-controls={`${id}-results`}\n              aria-activedescendant={active ? `${id}-${active.id}` : undefined}\n              aria-label={descriptor.accessibilityLabel}\n              placeholder={descriptor.searchPlaceholder}\n              className=\"hjm-command-palette__search\"\n              value={query}\n              onChange={(event) => onQueryChange(event.target.value)}\n              onKeyDown={onKeyDown}\n            />\n            <div id={`${id}-results`} role=\"listbox\" aria-label={descriptor.accessibilityLabel} className=\"hjm-command-palette__viewport\">\n              {asyncState.status === \"idle\" ? null : (\n                <p className=\"hjm-command-palette__state\" role={asyncState.status === \"error\" ? \"alert\" : \"status\"}>{asyncState.message}</p>\n              )}\n              {rows.map((section) => (\n                <div key={section.id} className=\"hjm-command-palette__section\" role=\"group\" aria-label={section.label}>\n                  {section.label ? <p className=\"hjm-command-palette__section-label\">{section.label}</p> : null}\n                  {section.items.map((item) => (\n                    <div\n                      key={item.id}\n                      id={`${id}-${item.id}`}\n                      role=\"option\"\n                      aria-selected={item.id === active?.id}\n                      aria-disabled={item.disabled || undefined}\n                      className=\"hjm-command-palette__item\"\n                      data-tone={item.tone}\n                      onMouseDown={(event) => {\n                        event.preventDefault();\n                        if (!item.disabled) activate(item.id as Key, \"pointer\");\n                      }}\n                      onMouseEnter={() => { if (!item.disabled) setActiveId(item.id as Key); }}\n                    >\n                      {renderLeading?.(item.id as Key)}\n                      <span className=\"hjm-command-palette__copy\">\n                        <span>{item.label}</span>\n                        {item.description ? <span className=\"hjm-command-palette__description\">{item.description}</span> : null}\n                      </span>\n                      {item.shortcut ? <kbd className=\"hjm-command-palette__shortcut\">{item.shortcut}</kbd> : null}\n                    </div>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </HjmPortal>\n    </>\n  );\n}) as <Key extends string = string>(\n  props: CommandPaletteProps<Key> & { ref?: React.Ref<HTMLDivElement> },\n) => React.ReactElement | null;\n"]}

package/dist/context-menu.d.ts

@@ -0,0 +1,12 @@
+import { type ContextMenuItemDescriptor } from "@hjmds/design-contracts/components/context-menu";
+import { type ReactNode } from "react";
+export type ContextMenuProps<Key extends string = string> = Readonly<{
+    /** The region the menu belongs to; right-click and long-press are bound here. */
+    children: ReactNode;
+    items: readonly ContextMenuItemDescriptor<Key>[];
+    accessibilityLabel: string;
+    onAction: (id: Key) => void;
+    className?: string;
+}>;
+export declare function ContextMenu<Key extends string = string>({ children, items, accessibilityLabel, onAction, className, }: ContextMenuProps<Key>): import("react").JSX.Element;
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../src/context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,yBAAyB,EAE/B,MAAM,iDAAiD,CAAC;AAEzD,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,MAAM,MAAM,gBAAgB,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CAAC;IACnE,iFAAiF;IACjF,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,SAAS,yBAAyB,CAAC,GAAG,CAAC,EAAE,CAAC;IACjD,kBAAkB,EAAE,MAAM,CAAC;IAC3B,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAIH,wBAAgB,WAAW,CAAC,GAAG,SAAS,MAAM,GAAG,MAAM,EAAE,EACvD,QAAQ,EACR,KAAK,EACL,kBAAkB,EAClB,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,CAAC,GAAG,CAAC,+BAyIvB"}