@lar-works/design-system 0.2.0 → 0.3.0

package/src/layout/toolbar/CommandPaletteTrigger.tsx

@@ -1,53 +1,209 @@
 import { SearchIcon } from 'lucide-react';
-import { useEffect, useEffectEvent, useRef } from 'react';
+import {
+    type CSSProperties,
+    forwardRef,
+    type ReactNode,
+    type Ref,
+    useEffect,
+    useEffectEvent,
+    useImperativeHandle,
+    useRef,
+} from 'react';
 
 import { Kbd } from '../../display/Kbd';
 import { tabbable } from '../../foundations/KeyboardFocus';
 import { applePlatform, isShortcut } from '../../foundations/KeyboardShortcut';
+import { fitTrigger, useTriggerRoom } from './TriggerFit';
+
+/** What narrows the palette, shown in the trigger as a small chip. */
+export interface CommandPaletteTriggerToken {
+    id: string;
+    label: string;
+    /** An icon or colour mark before the label. */
+    leading?: ReactNode;
+    /** A lar-brand app hue that colours the chip, as a kind's badge. */
+    hue?: number;
+}
 
 interface CommandPaletteTriggerProps {
     label: string;
     onOpen: () => void;
     /** Key that opens the palette from anywhere, pressed with ⌘ on Apple devices and Ctrl elsewhere. */
     shortcut: string;
+    /** What narrows the palette now, such as filters. With tokens, the trigger measures its own room: the chips go
+     *  into a count from the last, then it folds to its icon. */
+    tokens?: readonly CommandPaletteTriggerToken[];
+    /** The accessible name's addition while tokens show, such as "filtered by bug, docs". */
+    filterLabel?: (labels: readonly string[]) => string;
+}
+
+const chip =
+    'inline-flex h-5 shrink-0 items-center gap-1 rounded-sm bg-base-200 px-1 text-2xs font-medium text-base-800 dark:bg-base-300 dark:text-base-content [&_svg]:size-3';
+
+function TokenChip({ token }: { token: CommandPaletteTriggerToken }) {
+    const hued = token.hue !== undefined;
+
+    return (
+        <span
+            title={token.label}
+            className={`${chip} ${hued ? 'kind-badge!' : ''}`}
+            style={hued ? ({ '--lar-kind-hue': token.hue } as CSSProperties) : undefined}
+        >
+            {token.leading}
+            <span className="max-w-32 min-w-0 truncate">{token.label}</span>
+        </span>
+    );
 }
 
 /** The title bar's way into the command palette: a quiet field-like button with its shortcut, folding to its
- *  icon when the title bar is narrow. */
-export function CommandPaletteTrigger({ label, onOpen, shortcut }: CommandPaletteTriggerProps) {
-    const button = useRef<HTMLButtonElement>(null);
-    const openFromShortcut = useEffectEvent((event: KeyboardEvent) => {
-        // An open dialog hides the page behind it, the trigger included.
-        if (!isShortcut(event, shortcut) || button.current?.closest('[aria-hidden="true"]')) return;
+ *  icon when the title bar is narrow. With tokens, it also says what narrows the palette. */
+export const CommandPaletteTrigger = forwardRef<HTMLButtonElement, CommandPaletteTriggerProps>(
+    ({ label, onOpen, shortcut, tokens, filterLabel }, ref) => {
+        const button = useRef<HTMLButtonElement>(null);
+        const openFromShortcut = useEffectEvent((event: KeyboardEvent) => {
+            // An open dialog hides the page behind it, the trigger included.
+            if (!isShortcut(event, shortcut) || button.current?.closest('[aria-hidden="true"]')) return;
+
+            event.preventDefault();
+            onOpen();
+        });
+
+        useImperativeHandle(ref, () => button.current!);
+        useEffect(() => {
+            const listener = (event: KeyboardEvent) => openFromShortcut(event);
+
+            document.addEventListener('keydown', listener);
+
+            return () => document.removeEventListener('keydown', listener);
+        }, []);
 
-        event.preventDefault();
-        onOpen();
-    });
+        const keys = `${applePlatform ? 'Meta' : 'Control'}+${shortcut.toUpperCase()}`;
+        const hint = applePlatform ? `⌘${shortcut.toUpperCase()}` : `Ctrl ${shortcut.toUpperCase()}`;
 
-    useEffect(() => {
-        const listener = (event: KeyboardEvent) => openFromShortcut(event);
+        if (tokens)
+            return (
+                <FittedTrigger
+                    button={button}
+                    label={label}
+                    onOpen={onOpen}
+                    tokens={tokens}
+                    filterLabel={filterLabel}
+                    keys={keys}
+                    hint={hint}
+                />
+            );
 
-        document.addEventListener('keydown', listener);
+        return (
+            <button
+                {...tabbable}
+                ref={button}
+                type="button"
+                aria-label={label}
+                aria-haspopup="dialog"
+                aria-keyshortcuts={keys}
+                onClick={onOpen}
+                className="text-base-600 hover:bg-base-200 hover:text-base-content focus-visible:outline-primary @2xl:border-base-300 @2xl:bg-base-100 @2xl:hover:border-base-400 @2xl:hover:bg-base-100 dark:@2xl:bg-base-200 flex size-7 items-center justify-center gap-2 rounded-lg text-sm transition-colors focus-visible:outline-2 @2xl:w-56 @2xl:justify-start @2xl:border @2xl:px-2.5 [&>svg]:size-4 [&>svg]:shrink-0"
+            >
+                <SearchIcon />
+                <span className="hidden flex-1 text-left @2xl:inline">{label}</span>
+                <span className="hidden pointer-fine:@2xl:inline">
+                    <Kbd>{hint}</Kbd>
+                </span>
+            </button>
+        );
+    },
+);
 
-        return () => document.removeEventListener('keydown', listener);
-    }, []);
+CommandPaletteTrigger.displayName = 'CommandPaletteTrigger';
+
+/** The trigger with tokens, up to 26rem wide: it measures its room and the chips in a hidden copy, then shows what
+ *  fits (TriggerFit.ts). */
+function FittedTrigger({
+    button,
+    label,
+    onOpen,
+    tokens,
+    filterLabel,
+    keys,
+    hint,
+}: {
+    button: Ref<HTMLButtonElement>;
+    label: string;
+    onOpen: () => void;
+    tokens: readonly CommandPaletteTriggerToken[];
+    filterLabel?: (labels: readonly string[]) => string;
+    keys: string;
+    hint: string;
+}) {
+    const wrapper = useRef<HTMLDivElement>(null);
+    const ghost = useRef<HTMLDivElement>(null);
+    const { room, widths } = useTriggerRoom(wrapper, ghost, tokens.map(({ id }) => id).join());
+    const { shown, keyHint, folded, width } = fitTrigger(room, widths);
+    const hidden = tokens.slice(shown);
+    const labels = tokens.map((token) => token.label);
 
     return (
-        <button
-            {...tabbable}
-            ref={button}
-            type="button"
-            aria-label={label}
-            aria-haspopup="dialog"
-            aria-keyshortcuts={`${applePlatform ? 'Meta' : 'Control'}+${shortcut.toUpperCase()}`}
-            onClick={onOpen}
-            className="text-base-600 hover:bg-base-200 hover:text-base-content focus-visible:outline-primary @2xl:border-base-300 @2xl:bg-base-100 @2xl:hover:border-base-400 @2xl:hover:bg-base-100 dark:@2xl:bg-base-200 flex size-7 items-center justify-center gap-2 rounded-lg text-sm transition-colors focus-visible:outline-2 @2xl:w-56 @2xl:justify-start @2xl:border @2xl:px-2.5 [&>svg]:size-4 [&>svg]:shrink-0"
-        >
-            <SearchIcon />
-            <span className="hidden flex-1 text-left @2xl:inline">{label}</span>
-            <span className="hidden pointer-fine:@2xl:inline">
-                <Kbd>{applePlatform ? `⌘${shortcut.toUpperCase()}` : `Ctrl ${shortcut.toUpperCase()}`}</Kbd>
-            </span>
-        </button>
+        <div ref={wrapper} className="relative ml-auto flex max-w-[26rem] min-w-0 flex-1 justify-end">
+            <div
+                ref={ghost}
+                aria-hidden="true"
+                className="invisible absolute right-0 flex h-0 w-max gap-1 overflow-hidden"
+            >
+                {tokens.map((token) => (
+                    <TokenChip key={token.id} token={token} />
+                ))}
+            </div>
+            <button
+                {...tabbable}
+                ref={button}
+                type="button"
+                data-search-field
+                data-folded={folded || undefined}
+                aria-haspopup="dialog"
+                aria-keyshortcuts={keys}
+                aria-label={tokens.length && filterLabel ? `${label}, ${filterLabel(labels)}` : label}
+                onClick={onOpen}
+                style={folded ? undefined : { width }}
+                className={`text-base-700 focus-visible:outline-primary relative flex h-7 shrink-0 cursor-pointer items-center rounded-lg text-xs transition-colors focus-visible:outline-2 ${
+                    folded
+                        ? 'hover:bg-base-200 hover:text-base-content dark:hover:bg-base-300 w-7 justify-center'
+                        : 'border-base-300 bg-base-100 hover:border-base-400 dark:bg-base-200 gap-1 border pr-2 pl-1.5'
+                }`}
+            >
+                <SearchIcon aria-hidden="true" className={`shrink-0 ${folded ? 'size-4' : 'mr-0.5 size-3.5'}`} />
+                {folded ? (
+                    tokens.length > 0 && (
+                        <span
+                            data-search-count
+                            className="bg-primary text-2xs text-primary-content absolute -top-0.5 -right-0.5 grid h-3.5 min-w-3.5 place-items-center rounded-full px-0.5 leading-none font-semibold tabular-nums"
+                        >
+                            {tokens.length}
+                        </span>
+                    )
+                ) : (
+                    <>
+                        {tokens.slice(0, shown).map((token) => (
+                            <TokenChip key={token.id} token={token} />
+                        ))}
+                        {hidden.length > 0 && (
+                            <span
+                                data-search-count
+                                title={hidden.map((token) => token.label).join(', ')}
+                                className={`${chip} tabular-nums`}
+                            >
+                                {shown > 0 ? '+' : ''}
+                                {hidden.length}
+                            </span>
+                        )}
+                        <span className="ml-0.5 min-w-0 flex-1 truncate text-left">{label}</span>
+                        {keyHint && (
+                            <span className="shrink-0 pointer-coarse:hidden">
+                                <Kbd>{hint}</Kbd>
+                            </span>
+                        )}
+                    </>
+                )}
+            </button>
+        </div>
     );
 }

package/src/layout/toolbar/TriggerFit.ts

@@ -0,0 +1,84 @@
+// What the command palette trigger shows, with tokens, in the room it has. Tokens go from the last, into a count,
+// while the word Search and the count still fit; the key hint shows only with every token and room to spare; below the
+// word's room, or on the narrowest title bar, the field folds to its magnifier with a count. Widths are in pixels, in
+// the field's `text-xs`.
+import { type RefObject, useLayoutEffect, useState } from 'react';
+
+/** The field's left padding, magnifier, gap and right padding. */
+const CHROME = 34;
+const SEARCH_WORD = 42;
+const COUNT = 24;
+const KEY_HINT = 34;
+const GAP = 4;
+/** lar-server's trigger width, which the field keeps until its tokens ask for more. */
+const MIN_WIDTH = 224;
+/** Up to this title bar width, the smallest phones', the field folds. Its row there still has room for the word, as the
+ *  bar gives its actions their own row, so the room alone would never fold it. */
+const NARROWEST_BAR = 340;
+
+interface FieldRoom {
+    /** What the field may fill. */
+    field: number;
+    /** The title bar's width. */
+    bar: number;
+}
+
+export interface TriggerFit {
+    /** How many tokens show; the rest are in the count. */
+    shown: number;
+    keyHint: boolean;
+    folded: boolean;
+    width: number;
+}
+
+export function fitTrigger({ field: room, bar }: FieldRoom, tokenWidths: readonly number[]): TriggerFit {
+    const tokens = (count: number) => tokenWidths.slice(0, count).reduce((sum, width) => sum + width + GAP, 0);
+    const used = (count: number) =>
+        CHROME + SEARCH_WORD + tokens(count) + (count < tokenWidths.length ? COUNT + GAP : 0);
+    let shown = tokenWidths.length;
+
+    while (shown > 0 && used(shown) > room) shown--;
+
+    return {
+        shown,
+        keyHint: shown === tokenWidths.length && used(shown) + KEY_HINT + GAP <= room,
+        folded: bar <= NARROWEST_BAR || used(shown) > room,
+        width: Math.min(room, Math.max(MIN_WIDTH, used(tokenWidths.length) + KEY_HINT + GAP)),
+    };
+}
+
+/** The room in `wrapper` and the title bar holding it, and each child's width in `ghost`, which draws every token out of
+ *  sight to be measured. */
+export function useTriggerRoom(
+    wrapper: RefObject<HTMLElement | null>,
+    ghost: RefObject<HTMLElement | null>,
+    tokens: string,
+) {
+    const [room, setRoom] = useState({ field: 0, bar: 0 });
+    const [widths, setWidths] = useState<number[]>([]);
+
+    useLayoutEffect(() => {
+        const measure = () => {
+            setRoom({
+                field: wrapper.current!.getBoundingClientRect().width,
+                bar: (wrapper.current!.closest('header') ?? wrapper.current!).getBoundingClientRect().width,
+            });
+
+            const next = [...ghost.current!.children].map((child) => (child as HTMLElement).offsetWidth);
+
+            setWidths((now) => (now.join() === next.join() ? now : next));
+        };
+
+        measure();
+
+        // The ghost resizes too when a late web font changes the tokens' widths.
+        const observer = new ResizeObserver(measure);
+
+        observer.observe(wrapper.current!);
+        observer.observe(ghost.current!);
+
+        return () => observer.disconnect();
+    }, [wrapper, ghost, tokens]);
+
+    return { room, widths };
+}

package/src/navigation/CollectionViewToggle.tsx

@@ -1,9 +1,82 @@
 import { LayoutGridIcon, TableIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
 
 import { IconButton } from '../actions/IconButton';
+import { tabbable } from '../foundations/KeyboardFocus';
 
 export type CollectionView = 'grid' | 'table';
 
+/** One way of drawing a view, as ViewToggle offers it: its icon, named by its label (or, as `text`, its label alone).
+ *  `attributes` are `data-*` markers for its button, such as the pane it shows. */
+export interface ViewToggleOption<V extends string> {
+    value: V;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    attributes?: { [name: `data-${string}`]: string };
+}
+
+/**
+ * A group of icon buttons that picks one way of drawing a view, the picked one raised. `compact` draws 24px buttons with
+ * 14px icons, for a row's line. As `text`, each button is its label in small type, such as a dialog's panes in its
+ * header.
+ */
+export function ViewToggle<V extends string>({
+    label,
+    options,
+    value,
+    onChange,
+    compact = false,
+    presentation = 'icons',
+}: {
+    /** Names the group; with none, the group is named by its options alone. */
+    label?: string;
+    options: readonly ViewToggleOption<V>[];
+    value: V;
+    onChange: (view: V) => void;
+    compact?: boolean;
+    presentation?: 'icons' | 'text';
+}) {
+    if (presentation === 'text')
+        return (
+            <div role="group" aria-label={label} className="bg-base-200 flex gap-0.5 rounded-lg p-0.5">
+                {options.map((option) => (
+                    <button
+                        key={option.value}
+                        {...tabbable}
+                        {...option.attributes}
+                        type="button"
+                        aria-pressed={value === option.value}
+                        disabled={option.disabled}
+                        onClick={() => onChange(option.value)}
+                        className={`focus-visible:ring-primary h-7 rounded-md px-2.5 text-xs font-medium outline-none focus-visible:ring-2 ${value === option.value ? 'bg-base-100 text-base-content shadow-sm' : 'hover:text-base-content text-(--muted-foreground)'}`}
+                    >
+                        {option.label}
+                    </button>
+                ))}
+            </div>
+        );
+
+    return (
+        <div role="group" aria-label={label} className="bg-base-200/70 flex gap-0.5 rounded-lg p-0.5">
+            {options.map((option) => (
+                <IconButton
+                    key={option.value}
+                    {...option.attributes}
+                    aria-label={option.label}
+                    aria-pressed={value === option.value}
+                    disabled={option.disabled}
+                    icon={option.icon}
+                    title={option.label}
+                    className={buttonClasses(value === option.value, compact)}
+                    onClick={() => onChange(option.value)}
+                    tone="neutral"
+                />
+            ))}
+        </div>
+    );
+}
+
 interface CollectionViewToggleProps {
     disabledViews?: readonly CollectionView[];
     gridLabel: string;
@@ -22,31 +95,28 @@ export function CollectionViewToggle({
     value,
 }: CollectionViewToggleProps) {
     return (
-        <div role="group" aria-label={label} className="bg-base-200/70 flex gap-0.5 rounded-lg p-0.5">
-            <IconButton
-                aria-label={gridLabel}
-                aria-pressed={value === 'grid'}
-                disabled={disabledViews.includes('grid')}
-                icon={<LayoutGridIcon />}
-                title={gridLabel}
-                className={buttonClasses(value === 'grid')}
-                onClick={() => onChange('grid')}
-                tone="neutral"
-            />
-            <IconButton
-                aria-label={tableLabel}
-                aria-pressed={value === 'table'}
-                disabled={disabledViews.includes('table')}
-                icon={<TableIcon />}
-                title={tableLabel}
-                className={buttonClasses(value === 'table')}
-                onClick={() => onChange('table')}
-                tone="neutral"
-            />
-        </div>
+        <ViewToggle
+            label={label}
+            value={value}
+            onChange={onChange}
+            options={[
+                {
+                    value: 'grid',
+                    label: gridLabel,
+                    icon: <LayoutGridIcon />,
+                    disabled: disabledViews.includes('grid'),
+                },
+                {
+                    value: 'table',
+                    label: tableLabel,
+                    icon: <TableIcon />,
+                    disabled: disabledViews.includes('table'),
+                },
+            ]}
+        />
     );
 }
 
-function buttonClasses(active: boolean): string {
-    return `size-8 p-0 ${active ? 'bg-base-100 text-base-content shadow-sm' : 'text-base-600'}`;
+function buttonClasses(active: boolean, compact: boolean): string {
+    return `${compact ? 'size-6 **:data-[slot=icon]:size-3.5' : 'size-8'} p-0 ${active ? 'bg-base-100 text-base-content shadow-sm' : 'text-base-600'}`;
 }

package/src/navigation/SortMenu.tsx

@@ -0,0 +1,41 @@
+import { ChevronDownIcon } from 'lucide-react';
+
+import { Button } from '../actions/Button';
+import { DropdownMenu } from '../overlays/DropdownMenu';
+
+/** A menu of the ways a list sorts, its button naming the current one. */
+export function SortMenu<Value extends string>({
+    value,
+    options,
+    onChange,
+}: {
+    value: Value;
+    options: readonly { value: Value; label: string }[];
+    onChange: (value: Value) => void;
+}) {
+    return (
+        <DropdownMenu>
+            <DropdownMenu.Trigger asChild>
+                <Button variant="secondary" compact rightIcon={<ChevronDownIcon />}>
+                    {options.find((option) => option.value === value)?.label}
+                </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end">
+                <DropdownMenu.RadioGroup
+                    value={value}
+                    onValueChange={(next) => {
+                        const picked = options.find((option) => option.value === next);
+
+                        if (picked) onChange(picked.value);
+                    }}
+                >
+                    {options.map((option) => (
+                        <DropdownMenu.RadioItem key={option.value} value={option.value}>
+                            {option.label}
+                        </DropdownMenu.RadioItem>
+                    ))}
+                </DropdownMenu.RadioGroup>
+            </DropdownMenu.Content>
+        </DropdownMenu>
+    );
+}

package/src/navigation/index.ts

@@ -5,11 +5,12 @@ export {
     CollectionBrowseSelector,
     CollectionBrowseTrigger,
 } from './CollectionBrowseSelector';
-export { type CollectionView, CollectionViewToggle } from './CollectionViewToggle';
+export { type CollectionView, CollectionViewToggle, ViewToggle, type ViewToggleOption } from './CollectionViewToggle';
 export {
     type DrilldownBrowseGroup,
     type DrilldownBrowseItem,
     DrilldownBrowseSelector,
 } from './DrilldownBrowseSelector';
 export { FolderSelector, type FolderSelectorOption, type FolderSelectorProps } from './FolderSelector';
+export { SortMenu } from './SortMenu';
 export { ViewTabs, type ViewTabsItem } from './ViewTabs';