@ciridae/ui 0.16.1 → 1.0.1

package/dist/components/checkbox-list.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { css, cx } from "#primitives/css";
+import { Button } from "./button.js";
+import { Checkbox } from "./form-controls.js";
+import { SearchInput } from "./input.js";
+import { Toolbar } from "./layout.js";
+import { useCiridaeLocale } from "./locale.js";
+import { ScrollArea } from "./scroll-area.js";
+import { Skeleton } from "./skeleton.js";
+const listViewport = css({ maxHeight: "checklist.maximum" });
+// Every grid's one column may shrink below its content, so a long label truncates inside the list
+// rather than widening it past the area that scrolls.
+// The end padding keeps trailing details clear of the scrollbar, which sits over the content.
+const list = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    gap: "layout.tightGap",
+    paddingBottom: "layout.controlGap",
+    paddingInlineEnd: "calc(token(sizes.scroll.bar) + token(spacing.layout.tightGap))",
+});
+const itemStack = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    gap: "control.trackInset",
+});
+const row = css({ display: "flex", alignItems: "center", gap: "layout.controlGap", minWidth: "0" });
+// Every row is inset as far as a group's shaded heading pads its box, so a loose row's box, a
+// group's box, and every trailing detail share one column each.
+const itemRowEnd = css({ paddingInlineEnd: "panel.compact" });
+const flushRow = css({ paddingInlineStart: "panel.compact" });
+// Grouped rows sit under their group's label, so their boxes line up with its text.
+const groupedRow = css({
+    paddingInlineStart: "calc(token(spacing.panel.compact) + token(sizes.control.checkbox) + token(spacing.layout.controlGap))",
+});
+const groupBlock = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    gap: "layout.tightGap",
+    "&:not(:first-child)": { paddingTop: "layout.controlGap" },
+});
+// A group's heading is a shaded band, so it reads as the head of the rows under it rather than
+// as one more row.
+const groupHeading = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "layout.controlGap",
+    minWidth: "0",
+    paddingBlock: "control.compactBlock",
+    paddingInline: "panel.compact",
+    borderRadius: "keycap",
+    background: "bg.panel",
+});
+const groupLabel = css({ flex: "1", minWidth: "0", fontSize: "caption", fontWeight: "medium" });
+const label = css({ flex: "1", minWidth: "0", fontSize: "caption" });
+// A description lines up with its label's text, past the checkbox.
+const description = css({
+    paddingInlineStart: "calc(token(sizes.control.checkbox) + token(spacing.layout.controlGap))",
+    minWidth: "0",
+});
+const box = css({ flexShrink: "0" });
+const muted = css({ color: "fg.muted", fontSize: "caption" });
+const loadingLine = css({ height: "control.checkbox" });
+const withToolbar = css({
+    display: "grid",
+    gridTemplateColumns: "minmax(0, 1fr)",
+    gap: "layout.controlGap",
+});
+// The search takes its own line, and the bulk actions and the count share the next, so both
+// buttons fit beside the count at any width the list is shown in.
+const toolbarActions = css({
+    flex: "1",
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.controlGap",
+});
+const bulkActions = css({
+    display: "flex",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "layout.tightGap",
+});
+const selectedCount = css({ marginInlineStart: "auto", color: "fg.muted", fontSize: "caption" });
+/**
+ * A list ticked item by item, each with an optional trailing detail and description, that scrolls
+ * inside a bounded height and shades its edges while more rows are out of view. Items with a
+ * `group` are listed under a heading, in order of first appearance, whose checkbox ticks the whole
+ * group. A long list can take a search, and bulk actions that touch only the items it leaves shown,
+ * so nothing is ticked or cleared out of sight.
+ */
+export function CheckboxList(props) {
+    switch (props.state) {
+        case "loading":
+            return (_jsxs("div", { className: list, "aria-busy": "true", children: [_jsx(Skeleton, { className: loadingLine, width: "60%" }), _jsx(Skeleton, { className: loadingLine, width: "45%" })] }));
+        case "unavailable":
+            return _jsx("div", { className: cx(list, muted), children: props.message });
+        case "listed":
+            return _jsx(SearchableCheckboxes, { ...props });
+        default: {
+            const unhandled = props;
+            return unhandled;
+        }
+    }
+}
+/** Whether any of an item's search fields holds the search, ignoring case and outer spaces. */
+function matchesSearch(item, search) {
+    const needle = search.trim().toLocaleLowerCase();
+    if (!needle)
+        return true;
+    const fields = item.searchText ?? (typeof item.label === "string" ? [item.label] : []);
+    return fields.some((field) => field?.toLocaleLowerCase().includes(needle));
+}
+function SearchableCheckboxes({ items, emptyMessage, selectedKeys, onChange, disabled, searchFrom, bulkActions: offerBulkActions = false, labels: ownLabels, }) {
+    const labels = { ...useCiridaeLocale().labels.checklist, ...ownLabels };
+    const [search, setSearch] = useState("");
+    const searching = search.trim() !== "";
+    // A search in progress stays editable even if a refresh lists fewer items than `searchFrom`.
+    const offerSearch = searchFrom !== undefined && (items.length >= searchFrom || search !== "");
+    const shown = items.filter((item) => matchesSearch(item, search));
+    const shownKeys = shown.map((item) => item.key);
+    const setShown = (selected) => {
+        const next = new Set(selectedKeys);
+        for (const key of shownKeys) {
+            if (selected)
+                next.add(key);
+            else
+                next.delete(key);
+        }
+        onChange(next);
+    };
+    const listed = shown.length === 0 ? (_jsx("div", { className: cx(list, muted), children: searching ? labels.noMatches(search.trim()) : emptyMessage })) : (_jsx(ListedCheckboxes, { items: shown, selectedKeys: selectedKeys, onChange: onChange, disabled: disabled }));
+    if (items.length === 0 || (!offerSearch && !offerBulkActions))
+        return listed;
+    return (_jsxs("div", { className: withToolbar, "data-ciridae-ui": "", children: [_jsxs(Toolbar, { children: [offerSearch && (_jsx(SearchInput, { "aria-label": labels.search, placeholder: labels.search, value: search, onChange: (event) => setSearch(event.target.value), 
+                        // Inside a form, Enter would otherwise submit it mid-search.
+                        onKeyDown: (event) => {
+                            if (event.key === "Enter")
+                                event.preventDefault();
+                        } })), offerBulkActions && (_jsxs("div", { className: toolbarActions, children: [_jsxs("div", { className: bulkActions, role: "group", "aria-label": labels.bulkActions, children: [_jsx(Button, { variant: "secondary", size: "small", focusableWhenDisabled: true, disabled: disabled || shownKeys.every((key) => selectedKeys.has(key)), onClick: () => setShown(true), children: searching ? labels.selectMatches : labels.selectAll }), _jsx(Button, { variant: "secondary", size: "small", focusableWhenDisabled: true, disabled: disabled || !shownKeys.some((key) => selectedKeys.has(key)), onClick: () => setShown(false), children: searching ? labels.clearMatches : labels.clear })] }), _jsx("span", { className: selectedCount, "aria-live": "polite", children: labels.selectedCount(items.filter((item) => selectedKeys.has(item.key)).length, items.length) })] }))] }), listed] }));
+}
+function ListedCheckboxes({ items, selectedKeys, onChange, disabled, }) {
+    const toggle = (keys, checked) => {
+        const next = new Set(selectedKeys);
+        for (const key of keys) {
+            if (checked)
+                next.add(key);
+            else
+                next.delete(key);
+        }
+        onChange(next);
+    };
+    // A grouped row sits under its group's heading; any other row sits flush with the list.
+    const itemRow = (item, placement) => (_jsxs("div", { className: cx(itemStack, itemRowEnd, placement === "under-group" ? groupedRow : flushRow), children: [_jsxs("div", { className: row, children: [_jsx(Checkbox, { disabled: disabled, wrapperClassName: label, className: box, checked: selectedKeys.has(item.key), onCheckedChange: (checked) => toggle([item.key], checked), children: item.label }), item.detail && _jsx("span", { className: muted, children: item.detail })] }), item.description && _jsx("div", { className: description, children: item.description })] }, item.key));
+    const groups = new Map();
+    for (const item of items) {
+        if (item.group === undefined)
+            continue;
+        const members = groups.get(item.group.key)?.members ?? [];
+        groups.set(item.group.key, { label: item.group.label, members: [...members, item] });
+    }
+    return (_jsx(ScrollArea, { viewportClassName: listViewport, children: _jsxs("div", { className: list, "data-ciridae-ui": "", children: [items.filter((item) => item.group === undefined).map((item) => itemRow(item, "flush")), [...groups].map(([groupKey, { label: group, members }]) => {
+                    const keys = members.map((item) => item.key);
+                    const selectedCount = keys.filter((key) => selectedKeys.has(key)).length;
+                    return (_jsxs("div", { role: "group", "aria-label": group, className: groupBlock, children: [_jsxs("div", { className: groupHeading, children: [_jsx(Checkbox, { disabled: disabled, wrapperClassName: groupLabel, className: box, checked: selectedCount === keys.length, indeterminate: selectedCount > 0 && selectedCount < keys.length, onCheckedChange: (checked) => toggle(keys, checked), children: group }), _jsx("span", { className: muted, children: `${selectedCount}/${keys.length}` })] }), members.map((item) => itemRow(item, "under-group"))] }, groupKey));
+                })] }) }));
+}

package/dist/components/chip.d.ts

@@ -0,0 +1,17 @@
+import type { Tone } from "./badge.js";
+import type { ComponentProps, ReactNode } from "react";
+export type ChipProps = Omit<ComponentProps<"span">, "children"> & {
+    children: ReactNode;
+    /** A mark before the label. */
+    icon?: ReactNode;
+    /** What the chip's color says; `danger` also reads as invalid. */
+    tone?: Tone;
+    onRemove?: () => void;
+    /** Names what the remove button removes; the label when it is text. */
+    removeLabel?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Compact recipients and inline tags; regular preserves the standalone chip. */
+    size?: "regular" | "compact";
+};
+export declare function Chip({ children, icon, tone, onRemove, removeLabel, disabled, invalid, size, className, ...props }: ChipProps): import("@types/react").JSX.Element;

package/dist/components/chip.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { IconButton } from "./button.js";
+import { icon as iconStyle } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+const chip = css({
+    display: "inline-flex",
+    maxWidth: "100%",
+    overflowWrap: "anywhere",
+    alignItems: "center",
+    gap: "control.iconGap",
+    paddingBlock: "control.block",
+    paddingInline: "control.compactInline",
+    border: "1px solid token(colors.border.subtle)",
+    borderRadius: "round",
+    background: "bg.fill",
+    color: "fg.primary",
+    fontFamily: "sans",
+    fontSize: "body",
+    lineHeight: "tight",
+    letterSpacing: "compact",
+    "& > svg": { flexShrink: "0", fontSize: "icon.small" },
+    "&[data-size=compact]": {
+        fontSize: "caption",
+        paddingBlock: "control.trackInset",
+        paddingInline: "control.iconGap",
+        gap: "layout.tightGap",
+        "& button": {
+            width: "control.mark",
+            height: "control.mark",
+        },
+    },
+    "&[data-tone=info]": { background: "bg.infoSubtle", color: "accent.blue" },
+    "&[data-tone=success]": { background: "bg.successSubtle", color: "accent.green" },
+    "&[data-tone=warning]": { background: "bg.warningSubtle", color: "accent.yellow" },
+    "&[data-tone=danger], &[data-invalid]": { borderColor: "accent.red", color: "accent.red" },
+});
+export function Chip({ children, icon, tone = "neutral", onRemove, removeLabel, disabled = false, invalid = false, size = "regular", className, ...props }) {
+    const { labels } = useCiridaeLocale();
+    const name = removeLabel ?? (typeof children === "string" ? children : "");
+    return (_jsxs("span", { ...props, className: cx(chip, className), "data-ciridae-ui": "", "data-invalid": invalid || undefined, "data-tone": tone, "data-size": size, children: [icon, children, onRemove && (_jsx(IconButton, { disabled: disabled, "aria-label": labels.common.remove(name), onClick: onRemove, size: "compact", variant: size === "compact" ? "ghost" : "raised", children: _jsx(XIcon, { className: iconStyle({ size: "small" }) }) }))] }));
+}

package/dist/components/collapsible.d.ts

@@ -0,0 +1,8 @@
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import type { ComponentProps, ReactNode } from "react";
+export type CollapsibleProps = Omit<ComponentProps<typeof BaseCollapsible.Root>, "children" | "className"> & {
+    /** The always-visible summary; clicking it toggles the panel. */
+    label: ReactNode;
+    children: ReactNode;
+};
+export declare function Collapsible({ label, children, ...rootProps }: CollapsibleProps): import("@types/react").JSX.Element;

package/dist/components/collapsible.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
+import { CaretDownIcon } from "@phosphor-icons/react";
+import { css, cx } from "#primitives/css";
+import { icon } from "./icon.js";
+const root = css({ display: "grid", gap: "layout.controlGap" });
+const trigger = css({
+    display: "flex",
+    alignItems: "center",
+    gap: "control.iconGap",
+    padding: "none",
+    border: "none",
+    background: "none",
+    color: "fg.primary",
+    font: "inherit",
+    textAlign: "start",
+    cursor: "pointer",
+    _focusVisible: { focusRing: "outer", borderRadius: "action" },
+    _disabled: { opacity: "disabled", cursor: "not-allowed" },
+});
+const caret = css({
+    flexShrink: "0",
+    color: "fg.muted",
+    transitionProperty: "transform",
+    transitionDuration: "fast",
+    "[data-panel-open] > &": { transform: "rotate(180deg)" },
+});
+// Base UI measures the panel and publishes its height; animating to that value
+// keeps the transition working for content whose size is not known up front.
+const panel = css({
+    height: "var(--collapsible-panel-height)",
+    overflow: "hidden",
+    // Clips for the height animation, with room for the focus rings of the fields inside.
+    ringRoom: true,
+    transitionProperty: "height",
+    transitionDuration: "fast",
+    "&[data-starting-style], &[data-ending-style]": { height: "0" },
+});
+export function Collapsible({ label, children, ...rootProps }) {
+    return (_jsxs(BaseCollapsible.Root, { className: root, "data-ciridae-ui": "", ...rootProps, children: [_jsxs(BaseCollapsible.Trigger, { className: trigger, children: [_jsx(CaretDownIcon, { className: cx(caret, icon({ size: "compact" })) }), label] }), _jsx(BaseCollapsible.Panel, { className: panel, children: children })] }));
+}

package/dist/components/color-theme.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from "react";
+import type { Brand, CiridaeTheme, ColorTheme } from "../theme/options.js";
+import type { PaletteName } from "../theme/palettes.js";
+export type { Brand, ColorTheme } from "../theme/options.js";
+/** What the reader chose: a theme, or to follow the operating system's. */
+export type ColorThemePreference = ColorTheme | "system";
+type ColorThemeContextValue = {
+    /** The theme on screen, with a `system` preference resolved. */
+    theme: ColorTheme;
+    preference: ColorThemePreference;
+    setPreference: (preference: ColorThemePreference) => void;
+    setTheme: (theme: ColorTheme) => void;
+    toggleTheme: () => void;
+};
+export type ThemeProviderProps = {
+    children: ReactNode;
+    /** Used until the reader chooses, and whenever nothing readable is stored. */
+    defaultColorTheme?: ColorThemePreference;
+    storageKey?: string;
+    /** What the product calls itself, for `useBrand`. */
+    brand?: Brand;
+    /**
+     * A palette to show over the one the stylesheet was built with, switchable at runtime, such as
+     * a customer's choice or a preview. Leave it and `fonts` out to keep the built tokens.
+     */
+    palette?: PaletteName;
+    /** Faces to show over the built ones, at runtime, as `palette` does for colors. */
+    fonts?: CiridaeTheme["fonts"];
+};
+/**
+ * Owns the document's color theme. The chosen theme is written to
+ * `data-ciridae-theme` on the document element, which is what the tokens'
+ * `_light` values resolve through, so every component follows without
+ * threading a prop.
+ */
+export declare function ThemeProvider({ children, defaultColorTheme, storageKey, brand, palette, fonts, }: ThemeProviderProps): import("@types/react").JSX.Element;
+/** Throws outside a `ThemeProvider`, where there is no theme to report or change. */
+export declare function useColorTheme(): ColorThemeContextValue;
+/** Throws outside a `ThemeProvider` given a `brand`, where there is no name to show. */
+export declare function useBrand(): Brand;

package/dist/components/color-theme.js

@@ -0,0 +1,109 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { themeStylesheet } from "../theme/tokens.js";
+/** The attribute the `light` Panda condition and `ciridae.css` both select on. */
+const THEME_ATTRIBUTE = "data-ciridae-theme";
+const DEFAULT_STORAGE_KEY = "ciridae-ui-color-theme";
+/**
+ * Every `localStorage` access can raise: the API is absent during SSR, reading
+ * the property at all throws under an enterprise policy or in Safari's private
+ * mode, and `setItem` throws on quota. A failed read means "nothing stored" and
+ * a failed write costs persistence, never the interaction.
+ */
+function readStoredPreference(storageKey) {
+    try {
+        const stored = globalThis.localStorage?.getItem(storageKey);
+        return stored === "dark" || stored === "light" || stored === "system" ? stored : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeStoredPreference(storageKey, preference) {
+    try {
+        globalThis.localStorage?.setItem(storageKey, preference);
+    }
+    catch {
+        // The reader loses persistence across reloads, not the theme they chose.
+    }
+}
+const lightSchemeQuery = "(prefers-color-scheme: light)";
+function readSystemTheme() {
+    return globalThis.matchMedia?.(lightSchemeQuery).matches ? "light" : "dark";
+}
+const ColorThemeContext = createContext(null);
+const BrandContext = createContext(null);
+const RUNTIME_THEME_ELEMENT_ID = "ciridae-runtime-theme";
+/** Writes the palette's and fonts' token variables onto the document while either is set. */
+function useRuntimeTheme(palette, fonts) {
+    const display = fonts?.display;
+    const sans = fonts?.sans;
+    const mono = fonts?.mono;
+    useEffect(() => {
+        const document = globalThis.document;
+        if (!document || (palette === undefined && !display && !sans && !mono))
+            return;
+        const existing = document.getElementById(RUNTIME_THEME_ELEMENT_ID);
+        const style = existing instanceof HTMLStyleElement ? existing : document.createElement("style");
+        style.id = RUNTIME_THEME_ELEMENT_ID;
+        style.textContent = themeStylesheet({ palette, fonts: { display, sans, mono } });
+        document.head.append(style);
+        return () => style.remove();
+    }, [palette, display, sans, mono]);
+}
+/**
+ * Owns the document's color theme. The chosen theme is written to
+ * `data-ciridae-theme` on the document element, which is what the tokens'
+ * `_light` values resolve through, so every component follows without
+ * threading a prop.
+ */
+export function ThemeProvider({ children, defaultColorTheme = "dark", storageKey = DEFAULT_STORAGE_KEY, brand, palette, fonts, }) {
+    useRuntimeTheme(palette, fonts);
+    const [preference, setPreferenceState] = useState(() => readStoredPreference(storageKey) ?? defaultColorTheme);
+    const [systemTheme, setSystemTheme] = useState(readSystemTheme);
+    // Only a `system` preference follows the operating system as it changes.
+    useEffect(() => {
+        if (preference !== "system")
+            return;
+        const query = globalThis.matchMedia?.(lightSchemeQuery);
+        if (!query)
+            return;
+        const update = () => setSystemTheme(query.matches ? "light" : "dark");
+        update();
+        query.addEventListener("change", update);
+        return () => query.removeEventListener("change", update);
+    }, [preference]);
+    const theme = preference === "system" ? systemTheme : preference;
+    useEffect(() => {
+        const element = globalThis.document?.documentElement;
+        if (!element)
+            return;
+        // Dark is the stylesheet's own state, so the attribute marks only light.
+        if (theme === "light")
+            element.setAttribute(THEME_ATTRIBUTE, "light");
+        else
+            element.removeAttribute(THEME_ATTRIBUTE);
+    }, [theme]);
+    const setPreference = useCallback((next) => {
+        setPreferenceState(next);
+        writeStoredPreference(storageKey, next);
+    }, [storageKey]);
+    const setTheme = setPreference;
+    const toggleTheme = useCallback(() => setTheme(theme === "dark" ? "light" : "dark"), [setTheme, theme]);
+    const value = useMemo(() => ({ theme, preference, setPreference, setTheme, toggleTheme }), [theme, preference, setPreference, setTheme, toggleTheme]);
+    return (_jsx(ColorThemeContext.Provider, { value: value, children: _jsx(BrandContext.Provider, { value: brand ?? null, children: children }) }));
+}
+/** Throws outside a `ThemeProvider`, where there is no theme to report or change. */
+export function useColorTheme() {
+    const value = useContext(ColorThemeContext);
+    if (!value)
+        throw new Error("useColorTheme must be used within a ThemeProvider");
+    return value;
+}
+/** Throws outside a `ThemeProvider` given a `brand`, where there is no name to show. */
+export function useBrand() {
+    const brand = useContext(BrandContext);
+    if (!brand)
+        throw new Error("useBrand must be used within a ThemeProvider given a brand");
+    return brand;
+}

package/dist/components/column-settings.d.ts

@@ -0,0 +1,22 @@
+import { type ReactElement } from "react";
+import { type ColumnOrderState, type ColumnVisibilityState, type TableColumns } from "./data-grid.js";
+import { type CiridaeLabels } from "./locale.js";
+import type { RowData } from "@tanstack/react-table";
+export declare function ColumnSettings<Row extends RowData>({ columns, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, onReset, density, onDensityChange, trigger, open, onOpenChange, labels: ownLabels, }: {
+    columns: TableColumns<Row>;
+    columnVisibility: ColumnVisibilityState;
+    onColumnVisibilityChange: (columnVisibility: ColumnVisibilityState) => void;
+    /** Leave out, with `onColumnOrderChange`, for a list whose columns keep their order. */
+    columnOrder?: ColumnOrderState;
+    onColumnOrderChange?: (columnOrder: ColumnOrderState) => void;
+    /** Adds Reset to the heading. */
+    onReset?: () => void;
+    /** With `onDensityChange`, adds the density switch under the columns. */
+    density?: "default" | "compact";
+    onDensityChange?: (density: "default" | "compact") => void;
+    /** The button that opens it; a secondary "Columns" button by default. */
+    trigger?: ReactElement;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<CiridaeLabels["table"]>;
+}): import("@types/react").JSX.Element;

package/dist/components/column-settings.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Which of a list's columns show and in what order, and optionally how dense its rows are: a
+ * popover of checkbox rows that drag (or move with Alt+Arrow while one has focus) into order.
+ * Locked columns lead, always shown; hidden ones wait under a divider. It edits the same
+ * `columnVisibility` / `columnOrder` the `DataGrid` takes.
+ */
+import { ColumnsIcon } from "@phosphor-icons/react";
+import { useState } from "react";
+import { css } from "#primitives/css";
+import { Button } from "./button.js";
+import { CheckboxItem } from "./checkbox-item.js";
+import { Divider } from "./data-display.js";
+import { columnInfoOf, } from "./data-grid.js";
+import { SegmentedControl, SegmentedOption } from "./form-layout.js";
+import { icon } from "./icon.js";
+import { useCiridaeLocale } from "./locale.js";
+import { Popover } from "./overlays.js";
+const panel = css({ display: "grid", width: "260px", maxWidth: "100%" });
+const heading = css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "layout.controlGap",
+    minHeight: "control.small",
+    paddingBlock: "layout.tightGap",
+    paddingInlineStart: "menu.itemInline",
+    paddingInlineEnd: "layout.tightGap",
+    color: "fg.secondary",
+    fontSize: "code",
+    fontWeight: "medium",
+    letterSpacing: "compact",
+});
+const list = css({ display: "grid" });
+const draggable = css({ "&[data-dragging]": { opacity: "disabled" } });
+const dropSlot = css({
+    height: "control.row",
+    paddingBlock: "control.trackInset",
+    paddingInline: "layout.tightGap",
+    "& > span": {
+        display: "block",
+        height: "100%",
+        border: "1px solid token(colors.border.focus)",
+        borderRadius: "keycap",
+    },
+});
+const hint = css({
+    paddingBlockStart: "layout.tightGap",
+    paddingBlockEnd: "control.block",
+    paddingInline: "menu.itemInline",
+    color: "fg.muted",
+    fontSize: "code",
+    letterSpacing: "compact",
+});
+const densityControl = css({ display: "flex!", width: "100%", "& > *": { flex: "1" } });
+export function ColumnSettings({ columns, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, onReset, density, onDensityChange, trigger, open, onOpenChange, labels: ownLabels, }) {
+    const { labels: localeLabels } = useCiridaeLocale();
+    const labels = { ...localeLabels.table, ...ownLabels };
+    const [dragging, setDragging] = useState(null);
+    const [dropIndex, setDropIndex] = useState(null);
+    const info = columnInfoOf(columns);
+    const ordered = [
+        ...(columnOrder ?? [])
+            .map((id) => info.find((column) => column.id === id))
+            .filter((column) => column !== undefined),
+        ...info.filter((column) => !columnOrder?.includes(column.id)),
+    ];
+    const locked = ordered.filter((column) => column.locked);
+    const shown = ordered.filter((column) => !column.locked && columnVisibility[column.id] !== false);
+    const hidden = ordered.filter((column) => !column.locked && columnVisibility[column.id] === false);
+    const reorderable = onColumnOrderChange !== undefined;
+    const move = (id, toIndex) => {
+        if (!onColumnOrderChange)
+            return;
+        const without = shown.filter((column) => column.id !== id);
+        const moved = info.find((column) => column.id === id);
+        if (!moved)
+            return;
+        const bounded = Math.max(0, Math.min(without.length, toIndex));
+        onColumnOrderChange([...locked, ...without.slice(0, bounded), moved, ...without.slice(bounded), ...hidden].map((column) => column.id));
+    };
+    const finishDrag = () => {
+        if (dragging !== null && dropIndex !== null) {
+            const from = shown.findIndex((column) => column.id === dragging);
+            move(dragging, dropIndex > from ? dropIndex - 1 : dropIndex);
+        }
+        setDragging(null);
+        setDropIndex(null);
+    };
+    const dragOver = (event, index) => {
+        if (dragging === null)
+            return;
+        event.preventDefault();
+        const { top, height } = event.currentTarget.getBoundingClientRect();
+        setDropIndex(event.clientY - top < height / 2 ? index : index + 1);
+    };
+    const moveOnKey = (event, id, index) => {
+        if (!event.altKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown"))
+            return;
+        event.preventDefault();
+        move(id, event.key === "ArrowUp" ? index - 1 : index + 1);
+    };
+    const setShown = (id, visible) => onColumnVisibilityChange({ ...columnVisibility, [id]: visible });
+    const dropMarker = (_jsx("span", { className: dropSlot, "aria-hidden": "true", children: _jsx("span", {}) }));
+    return (_jsx(Popover, { open: open, onOpenChange: onOpenChange, density: "compact", trigger: trigger ?? (_jsx(Button, { variant: "secondary", size: "medium", icon: _jsx(ColumnsIcon, { className: icon({ size: "small" }) }), children: labels.columns })), children: _jsxs("div", { className: panel, children: [_jsxs("div", { className: heading, children: [labels.columns, onReset && (_jsx(Button, { variant: "ghost", onClick: onReset, children: labels.reset }))] }), _jsxs("div", { className: list, onDragEnd: finishDrag, children: [locked.map((column) => (_jsx(CheckboxItem, { checked: true, disabled: true, meta: labels.alwaysShown, children: column.label }, column.id))), shown.map((column, index) => (_jsxs("span", { className: css({ display: "contents" }), children: [dropIndex === index && dragging !== column.id && dropMarker, _jsx("span", { className: draggable, draggable: reorderable, "data-dragging": dragging === column.id || undefined, onDragStart: (event) => {
+                                        event.dataTransfer.effectAllowed = "move";
+                                        setDragging(column.id);
+                                    }, onDragOver: (event) => dragOver(event, index), onDrop: (event) => {
+                                        event.preventDefault();
+                                        finishDrag();
+                                    }, children: _jsx(CheckboxItem, { checked: true, grip: reorderable, onCheckedChange: (visible) => setShown(column.id, visible), onKeyDown: (event) => moveOnKey(event, column.id, index), children: column.label }) })] }, column.id))), dropIndex === shown.length && dragging !== shown[shown.length - 1]?.id && dropMarker] }), hidden.length > 0 && _jsx(Divider, { inset: "menu" }), _jsx("div", { className: list, children: hidden.map((column) => (_jsx(CheckboxItem, { checked: false, onCheckedChange: (visible) => setShown(column.id, visible), children: column.label }, column.id))) }), reorderable && _jsx("span", { className: hint, children: labels.reorderHint }), density && onDensityChange && (_jsxs(_Fragment, { children: [_jsx(Divider, { inset: "menu" }), _jsx("span", { className: heading, children: labels.density }), _jsxs(SegmentedControl, { className: densityControl, role: "group", "aria-label": labels.density, children: [_jsx(SegmentedOption, { selected: density === "default", onClick: () => onDensityChange("default"), children: labels.densityDefault }), _jsx(SegmentedOption, { selected: density === "compact", onClick: () => onDensityChange("compact"), children: labels.densityCompact })] })] }))] }) }));
+}

package/dist/components/command-match.d.ts

@@ -0,0 +1,7 @@
+export type CommandMatchFields = {
+    label: string;
+    detail?: string;
+    keywords?: readonly string[];
+};
+/** The row's score for the query, summed over its words; every word must match. */
+export declare function scoreCommandMatch(fields: CommandMatchFields, query: string): number;

package/dist/components/command-match.js

@@ -0,0 +1,50 @@
+/** Lowercased, accents and punctuation dropped, so "J-1190" and "j1190" compare equal. */
+function foldText(text) {
+    return text
+        .normalize("NFD")
+        .replace(/\p{M}/gu, "")
+        .toLowerCase()
+        .replace(/[^\p{L}\p{N}\s]/gu, "");
+}
+/** Whether the word's letters appear in the text in order. */
+function inOrder(word, text) {
+    let position = 0;
+    for (const letter of word) {
+        position = text.indexOf(letter, position);
+        if (position === -1)
+            return false;
+        position += 1;
+    }
+    return true;
+}
+function scoreWord(word, label, rest) {
+    if (label.startsWith(word))
+        return 8;
+    if (label.split(/\s+/).some((part) => part.startsWith(word)))
+        return 6;
+    if (label.includes(word))
+        return 4;
+    if (rest.split(/\s+/).some((part) => part.startsWith(word)))
+        return 3;
+    if (rest.includes(word))
+        return 2;
+    if (inOrder(word, label.replace(/\s+/g, "")))
+        return 1;
+    return 0;
+}
+/** The row's score for the query, summed over its words; every word must match. */
+export function scoreCommandMatch(fields, query) {
+    const words = foldText(query).split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return 1;
+    const label = foldText(fields.label);
+    const rest = foldText([fields.detail ?? "", ...(fields.keywords ?? [])].join(" "));
+    let total = 0;
+    for (const word of words) {
+        const score = scoreWord(word, label, rest);
+        if (score === 0)
+            return 0;
+        total += score;
+    }
+    return total;
+}