@lar-works/design-system 0.2.1 → 0.3.0

package/src/overlays/CommandPalette.tsx

@@ -1,7 +1,7 @@
 /* oxlint-disable react/only-export-components -- The option hook belongs to the palette. */
 
 import { Modal as NinnaModal } from '@ninna-ui/overlays';
-import { SearchIcon, XIcon } from 'lucide-react';
+import { CheckIcon, SearchIcon, XIcon } from 'lucide-react';
 import { createContext, type ReactNode, useContext, useEffect, useId, useRef, useState } from 'react';
 
 import { IconButton } from '../actions/IconButton';
@@ -11,6 +11,16 @@ import { Text } from '../typography/Typography';
 import { useModalAutoFocus } from './useModalAutoFocus';
 import { useScrollFade } from './useScrollFade';
 
+/** A chip before the field for something that narrows the list, such as a filter. */
+export interface CommandPaletteToken {
+    id: string;
+    label: string;
+    /** An icon or colour mark before the label. */
+    leading?: ReactNode;
+    /** A button on the chip that takes it away; the focus stays in the field. */
+    remove?: { label: string; onRemove: () => void };
+}
+
 interface CommandPaletteProps {
     /** The dialog's accessible title and description; the field says the rest. */
     label: string;
@@ -20,13 +30,23 @@ interface CommandPaletteProps {
     onQueryChange: (query: string) => void;
     /** Narrows the list to one level, shown as a chip before the field; Backspace in an empty field leaves it. */
     scope?: { label: string; leaveLabel: string; onLeave: () => void };
+    /** Chips before the field, such as active filters, which wrap and scroll on their own when there are many. A
+     *  palette given tokens, even none, is a filtering search, as wide as its chips need. */
+    tokens?: readonly CommandPaletteToken[];
+    /** Backspace in an empty field, such as to take the last token away. */
+    onBackspaceEmpty?: () => void;
+    /** A control after the field, such as Clear. A press on it leaves the focus in the field. */
+    trailing?: ReactNode;
     /** The options' values in list order, for the arrow keys and Enter. */
     options: readonly string[];
-    onSelect: (value: string) => void;
+    /** May return the option the highlight moves to, when choosing changes the list. */
+    onSelect: (value: string) => string | void;
     onClose: () => void;
     listLabel: string;
+    /** Marks the list busy while more may arrive; `busyLabel` shows under it meanwhile. */
     busy?: boolean;
-    /** Shown when nothing is listed. */
+    busyLabel?: ReactNode;
+    /** Shown when nothing is listed and nothing is pending. */
     empty?: ReactNode;
     /** Quiet key hints under the list, on screens with a keyboard. */
     footer?: ReactNode;
@@ -37,10 +57,12 @@ const OptionContext = createContext<{
     listId: string;
     activeValue: string | undefined;
     setActiveValue: (value: string) => void;
+    select: (value: string) => void;
 } | null>(null);
 
 /** T3 Code's command palette: a field over one keyboard list of grouped options, as a dialog over the page
- *  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. */
+ *  or, on phones, the whole screen. The arrow keys move through `options`, Enter selects, Escape closes. Tokens
+ *  before the field say what narrows the list. */
 export function CommandPalette({
     label,
     description,
@@ -48,11 +70,15 @@ export function CommandPalette({
     query,
     onQueryChange,
     scope,
+    tokens: givenTokens,
+    onBackspaceEmpty,
+    trailing,
     options,
     onSelect,
     onClose,
     listLabel,
     busy = false,
+    busyLabel,
     empty,
     footer,
     children,
@@ -65,6 +91,19 @@ export function CommandPalette({
     const [chosen, setActiveValue] = useState<string>();
     // The highlight follows the list: when the chosen option leaves it, the first option takes over.
     const activeValue = chosen !== undefined && options.includes(chosen) ? chosen : options[0];
+    const select = (value: string) => {
+        const next = onSelect(value);
+
+        if (next) setActiveValue(next);
+    };
+    // A scope is the one token of a palette that narrows by levels.
+    const tokens: readonly CommandPaletteToken[] = scope
+        ? [{ id: 'scope', label: scope.label, remove: { label: scope.leaveLabel, onRemove: scope.onLeave } }]
+        : (givenTokens ?? []);
+    const leaveLast = scope ? scope.onLeave : onBackspaceEmpty;
+    // A palette that takes tokens, or a trailing control, is a filtering search: wide, with its field wrapping onto
+    // rows under the tokens, from the top.
+    const rows = givenTokens !== undefined || Boolean(trailing);
 
     useEffect(() => {
         if (activeValue) document.getElementById(optionId(listId, activeValue))?.scrollIntoView({ block: 'nearest' });
@@ -77,75 +116,115 @@ export function CommandPalette({
                 description={description}
                 centered={false}
                 {...focusProps}
-                className="flex max-h-[min(36rem,calc(100dvh-6rem))] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden p-0 shadow-(--lar-shadow-dialog) max-sm:top-0 max-sm:left-0 max-sm:h-dvh max-sm:max-h-none max-sm:w-full max-sm:max-w-none max-sm:translate-x-0 max-sm:rounded-none! max-sm:border-0 max-sm:pt-[env(safe-area-inset-top)]"
+                data-command-palette
+                // The dialog listens for Escape on the document, past the field's own keys; an input method's Escape
+                // only ends its composition.
+                onEscapeKeyDown={(event) => {
+                    if (event.isComposing) event.preventDefault();
+                }}
+                className={`flex max-h-[min(36rem,calc(100dvh-6rem))] w-[calc(100vw-2rem)] max-w-2xl flex-col overflow-hidden p-0 shadow-(--lar-shadow-dialog) max-sm:top-0 max-sm:left-0 max-sm:h-dvh max-sm:max-h-none max-sm:w-full max-sm:max-w-none max-sm:translate-x-0 max-sm:rounded-none! max-sm:border-0 max-sm:pt-[env(safe-area-inset-top)] ${rows ? 'max-sm:pb-[env(safe-area-inset-bottom)] sm:w-[calc(100vw-2rem)] sm:max-w-2xl' : ''}`}
             >
-                <div className="border-base-300 [&>svg]:text-base-600 flex shrink-0 items-center gap-2 border-b px-4 py-3 [&>svg]:size-4 [&>svg]:shrink-0">
+                <div
+                    className={`border-base-300 [&>svg]:text-base-600 flex shrink-0 gap-2 border-b px-4 [&>svg]:size-4 [&>svg]:shrink-0 ${rows ? 'items-start py-2 [&>svg]:mt-2' : 'items-center py-3'}`}
+                >
                     <SearchIcon />
-                    {scope ? (
-                        <span className="bg-primary/12 text-primary flex shrink-0 items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs font-medium">
-                            {scope.label}
-                            <button
-                                type="button"
-                                tabIndex={-1}
-                                aria-label={scope.leaveLabel}
-                                className="hover:bg-primary/15 rounded-sm p-0.5 [&>svg]:size-3"
-                                onClick={() => {
-                                    scope.onLeave();
-                                    input.current?.focus();
-                                }}
+                    <div className={`flex min-w-0 flex-1 items-center gap-x-2 ${rows ? 'flex-wrap gap-y-1' : ''}`}>
+                        {tokens.length > 0 ? (
+                            // Many tokens scroll on their own, so the field stays in view however many there are. Under
+                            // a coarse pointer each remove button is 44 px, reaching into the gap between rows.
+                            <ul
+                                className={`flex max-w-full min-w-0 shrink-0 items-center gap-1 ${rows ? 'max-h-19 flex-wrap overflow-y-auto overscroll-contain py-1 pointer-coarse:max-h-22 pointer-coarse:gap-y-3 pointer-coarse:py-1.5' : ''}`}
                             >
-                                <XIcon />
-                            </button>
-                        </span>
+                                {tokens.map((token) => (
+                                    <li
+                                        key={token.id}
+                                        className={`bg-primary/12 text-primary flex max-w-full min-w-0 shrink-0 items-center gap-1 rounded-md py-0.5 pr-1 pl-2 text-xs font-medium ${rows ? 'dark:text-base-content pointer-coarse:min-h-8 pointer-coarse:py-0 pointer-coarse:pr-0' : ''}`}
+                                    >
+                                        {token.leading ? (
+                                            <span className="flex shrink-0 items-center [&>svg]:size-3.5">
+                                                {token.leading}
+                                            </span>
+                                        ) : null}
+                                        <span className="min-w-0 truncate">{token.label}</span>
+                                        {token.remove ? (
+                                            <button
+                                                type="button"
+                                                // A scope's chip leaves with Backspace alone; several tokens' buttons are tab stops.
+                                                tabIndex={scope ? -1 : undefined}
+                                                aria-label={token.remove.label}
+                                                className={`hover:bg-primary/15 grid shrink-0 place-items-center rounded-sm p-0.5 [&>svg]:size-3 ${rows ? 'pointer-coarse:-my-1.5 pointer-coarse:size-11 pointer-coarse:p-0' : ''}`}
+                                                onClick={() => {
+                                                    token.remove?.onRemove();
+                                                    input.current?.focus();
+                                                }}
+                                            >
+                                                <XIcon />
+                                            </button>
+                                        ) : null}
+                                    </li>
+                                ))}
+                            </ul>
+                        ) : null}
+                        <input
+                            ref={input}
+                            role="combobox"
+                            aria-label={label}
+                            aria-expanded
+                            aria-controls={listId}
+                            aria-autocomplete="list"
+                            aria-activedescendant={activeValue ? optionId(listId, activeValue) : undefined}
+                            aria-busy={busy}
+                            placeholder={placeholder}
+                            value={query}
+                            className={`text-base-content placeholder:text-base-600 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm ${rows ? 'h-8 min-w-32' : ''}`}
+                            onChange={(event) => onQueryChange(event.target.value)}
+                            onKeyDown={(event) => {
+                                if (event.nativeEvent.isComposing) return;
+
+                                if (event.key === 'Backspace' && !query && leaveLast) {
+                                    event.preventDefault();
+                                    leaveLast();
+                                } else if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && options.length) {
+                                    event.preventDefault();
+
+                                    const index = activeValue ? options.indexOf(activeValue) : -1;
+                                    const step = event.key === 'ArrowDown' ? 1 : -1;
+
+                                    setActiveValue(options[(index + step + options.length) % options.length]!);
+                                } else if (event.key === 'Enter' && activeValue) {
+                                    event.preventDefault();
+                                    select(activeValue);
+                                }
+                            }}
+                        />
+                    </div>
+                    {trailing ? (
+                        // Under a coarse pointer the control is 44 px, as a token's remove button is.
+                        <div
+                            className="flex min-h-8 shrink-0 items-center pointer-coarse:[&_[data-slot=button]]:h-11!"
+                            onClick={() => input.current?.focus()}
+                        >
+                            {trailing}
+                        </div>
                     ) : null}
-                    <input
-                        ref={input}
-                        role="combobox"
-                        aria-label={label}
-                        aria-expanded
-                        aria-controls={listId}
-                        aria-autocomplete="list"
-                        aria-activedescendant={activeValue ? optionId(listId, activeValue) : undefined}
-                        aria-busy={busy}
-                        placeholder={placeholder}
-                        value={query}
-                        className="text-base-content placeholder:text-base-600 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm"
-                        onChange={(event) => onQueryChange(event.target.value)}
-                        onKeyDown={(event) => {
-                            if (event.nativeEvent.isComposing) return;
-
-                            if (event.key === 'Backspace' && !query && scope) {
-                                event.preventDefault();
-                                scope.onLeave();
-                            } else if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && options.length) {
-                                event.preventDefault();
-
-                                const index = activeValue ? options.indexOf(activeValue) : -1;
-                                const step = event.key === 'ArrowDown' ? 1 : -1;
-
-                                setActiveValue(options[(index + step + options.length) % options.length]!);
-                            } else if (event.key === 'Enter' && activeValue) {
-                                event.preventDefault();
-                                onSelect(activeValue);
-                            }
-                        }}
-                    />
                     <span className="flex sm:hidden">
                         <IconButton aria-label={labels.close} icon={<XIcon />} onClick={onClose} variant="header" />
                     </span>
                 </div>
                 <div ref={setViewport} className={`min-h-0 flex-1 overflow-y-auto overscroll-contain p-2 ${className}`}>
                     <div ref={setContent} className="flow-root">
-                        <OptionContext.Provider value={{ listId, activeValue, setActiveValue }}>
+                        <OptionContext.Provider value={{ listId, activeValue, setActiveValue, select }}>
                             <ResultList id={listId} label={listLabel} density="compact" aria-busy={busy}>
                                 {children}
                             </ResultList>
                         </OptionContext.Provider>
-                        {options.length === 0 && empty ? (
-                            <Text tone="muted" className="px-3 py-8 text-center">
-                                {empty}
-                            </Text>
-                        ) : null}
+                        <div role="status">
+                            {(busy && busyLabel) || (options.length === 0 && empty) ? (
+                                <Text as="div" tone="muted" className="px-3 py-8 text-center">
+                                    {busy && busyLabel ? busyLabel : empty}
+                                </Text>
+                            ) : null}
+                        </div>
                     </div>
                 </div>
                 {footer ? (
@@ -178,6 +257,57 @@ export function CommandPaletteGroup({ label, children }: { label: string; childr
     );
 }
 
+/** One line of the palette's list: an icon, the name, an optional hint (searched with the name) and meta (on wider
+ *  screens), and a tick while `checked`, as a filter that is on. Choosing it keeps the focus in the field. */
+export function CommandPaletteOption({
+    value,
+    icon,
+    name,
+    hint,
+    meta,
+    checked,
+}: {
+    value: string;
+    icon: ReactNode;
+    name: string;
+    hint?: string;
+    meta?: string;
+    /** Whether a filter's option is on; other options leave it out. */
+    checked?: boolean;
+}) {
+    const context = useContext(OptionContext);
+
+    if (!context) throw new Error('CommandPaletteOption must be used inside CommandPalette');
+
+    return (
+        <div
+            id={optionId(context.listId, value)}
+            role="option"
+            aria-selected={context.activeValue === value}
+            aria-checked={checked}
+            tabIndex={-1}
+            onPointerMove={() => {
+                if (context.activeValue !== value) context.setActiveValue(value);
+            }}
+            onMouseDown={(event) => event.preventDefault()}
+            onClick={() => context.select(value)}
+            className="text-base-800 aria-selected:bg-primary/10 aria-selected:ring-primary/30 dark:text-base-content flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-sm aria-selected:ring-1 aria-selected:ring-inset pointer-coarse:h-11"
+        >
+            <span className="text-base-700 grid size-4 shrink-0 place-items-center [&>svg]:size-3.5">{icon}</span>
+            <span title={name} className="min-w-0 flex-1 truncate">
+                {name}
+            </span>
+            {hint ? (
+                <span className="text-base-700 max-w-40 shrink-0 truncate text-xs tabular-nums">{hint}</span>
+            ) : null}
+            {meta ? (
+                <span className="text-base-700 max-w-56 shrink-0 truncate text-xs max-sm:hidden">{meta}</span>
+            ) : null}
+            {checked ? <CheckIcon aria-hidden="true" className="text-primary size-3.5 shrink-0" /> : null}
+        </div>
+    );
+}
+
 /** Props for a palette option, such as a `ResultRow`: its id, highlight and pointer tracking. */
 export function useCommandPaletteOption(value: string) {
     const context = useContext(OptionContext);
@@ -195,5 +325,5 @@ export function useCommandPaletteOption(value: string) {
 }
 
 function optionId(listId: string, value: string) {
-    return `${listId}-${value.replace(/[^\w-]/g, '_')}`;
+    return `${listId}-${encodeURIComponent(value)}`;
 }

package/src/overlays/DropdownMenu.tsx

@@ -8,7 +8,7 @@ import {
     type DropdownMenuRadioGroupProps,
     type DropdownMenuRadioItemProps,
 } from '@ninna-ui/overlays';
-import { type ComponentProps, forwardRef } from 'react';
+import { type ComponentProps, forwardRef, type ReactNode } from 'react';
 
 interface DropdownMenuContentPolicyProps extends Omit<DropdownMenuContentProps, 'className'> {
     width?: 'sm' | 'md';
@@ -109,6 +109,16 @@ const DropdownMenuRadioItem = forwardRef<HTMLDivElement, DropdownMenuRadioItemPo
 
 DropdownMenuRadioItem.displayName = 'DropdownMenu.RadioItem';
 
+/** An entry's label, truncating to the menu's width, with an optional smaller `detail` line under it. */
+function DropdownMenuItemText({ children, detail }: { children: ReactNode; detail?: ReactNode }) {
+    return (
+        <span className="min-w-0 flex-1 truncate">
+            {children}
+            {detail && <span className="block truncate text-xs">{detail}</span>}
+        </span>
+    );
+}
+
 function DropdownMenuRoot(props: ComponentProps<typeof NinnaDropdownMenu>) {
     return <NinnaDropdownMenu {...props} />;
 }
@@ -119,4 +129,5 @@ export const DropdownMenu = Object.assign(DropdownMenuRoot, NinnaDropdownMenu, {
     Label: DropdownMenuLabel,
     RadioGroup: DropdownMenuRadioGroup,
     RadioItem: DropdownMenuRadioItem,
+    ItemText: DropdownMenuItemText,
 });

package/src/overlays/HelpTip.tsx

@@ -0,0 +1,29 @@
+import { CircleHelpIcon } from 'lucide-react';
+import type { ReactNode } from 'react';
+
+import { tabbable } from '../foundations/KeyboardFocus';
+import { Popover } from './Popover';
+
+/** A small help button after a setting's name that opens what the setting does in a popover. `label` is what it
+ *  explains; the button reads "About {label}". */
+export function HelpTip({ label, children }: { label: string; children: ReactNode }) {
+    return (
+        <Popover>
+            <Popover.Trigger asChild>
+                <button
+                    {...tabbable}
+                    type="button"
+                    aria-label={`About ${label}`}
+                    className="text-base-700 hover:text-base-content inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-full"
+                >
+                    <CircleHelpIcon className="size-3.5" />
+                </button>
+            </Popover.Trigger>
+            <Popover.Content width="sm">
+                <div className="max-w-full text-xs leading-5 wrap-anywhere" data-help-text>
+                    {children}
+                </div>
+            </Popover.Content>
+        </Popover>
+    );
+}

package/src/overlays/Modal.tsx

@@ -33,9 +33,27 @@ interface ModalContentPolicyProps extends Omit<ModalContentProps, 'className' |
     sidebar?: ReactNode;
     /** The dialog's size; a dialog with a sidebar is `paned` unless it says otherwise. */
     presentation?: 'default' | 'paned' | 'workspace';
+    /** Grows the dialog to the window, less a small margin, under a 52px title bar; see ModalExpandButton. */
+    expanded?: boolean;
+    /** A paned dialog that keeps its width but takes its content's height, such as a short pane; a long list in it
+     *  scrolls inside. Expanding wins. */
+    fitsContent?: boolean;
     title: string;
 }
 
+/** The expanded dialog's size, inline so it wins over every presentation's size classes. */
+const expandedStyle = {
+    width: 'calc(100vw - 2rem)',
+    maxWidth: 'none',
+    height: 'calc(100dvh - (52px + 1rem))',
+    maxHeight: 'none',
+    top: '52px',
+    translate: '-50% 0',
+} as const;
+
+/** A dialog that takes its content's height, inline so it wins over the paned size classes. */
+const fitsContentStyle = { height: 'auto' } as const;
+
 const ModalContent = forwardRef<HTMLDivElement, ModalContentPolicyProps>(
     (
         {
@@ -49,6 +67,8 @@ const ModalContent = forwardRef<HTMLDivElement, ModalContentPolicyProps>(
             onPointerDownOutside,
             sidebar,
             presentation = sidebar ? 'paned' : 'default',
+            expanded = false,
+            fitsContent = false,
             title,
             ...props
         },
@@ -62,6 +82,9 @@ const ModalContent = forwardRef<HTMLDivElement, ModalContentPolicyProps>(
                 ref={ref}
                 {...props}
                 {...focusProps}
+                {...(expanded
+                    ? { 'data-expanded': true, style: expandedStyle }
+                    : fitsContent && { style: fitsContentStyle })}
                 title={accessibleTitle ?? title}
                 description={description}
                 closeOnEscape={loading ? false : closeOnEscape}

package/src/overlays/ModalExpandButton.tsx

@@ -0,0 +1,48 @@
+import { Maximize2Icon, Minimize2Icon } from 'lucide-react';
+import { useState } from 'react';
+
+import { IconButton } from '../actions/IconButton';
+import { useDesignSystemLabels } from '../foundations/DesignSystemProvider';
+import { Tooltip, TooltipPopup, TooltipTrigger } from './Tooltip';
+
+interface ModalExpandButtonProps {
+    expanded: boolean;
+    onToggle: () => void;
+    /** The shortcut that toggles it too, as shown (⌘⇧E) and as `aria-keyshortcuts` reads it (Meta+Shift+E). */
+    shortcut?: { label: string; keys: string };
+}
+
+/**
+ * The control a dialog's header shows (in Modal.Content's `headerActions`) to grow the dialog to the window and back,
+ * with its shortcut in a tooltip. The tooltip opens on hover only: a dialog that opens with no field focuses this
+ * button, and a tooltip opened by that focus would take the dialog's first Escape. `aria-keyshortcuts` still tells
+ * assistive tech the shortcut.
+ */
+export function ModalExpandButton({ expanded, onToggle, shortcut }: ModalExpandButtonProps) {
+    const labels = useDesignSystemLabels().dialog;
+    const label = expanded ? labels.restoreSize : labels.expand;
+    const [hint, setHint] = useState(false);
+
+    return (
+        <Tooltip
+            open={hint}
+            onOpenChange={(open) => setHint(open && document.querySelector('button[data-expand]:hover') !== null)}
+        >
+            <TooltipTrigger asChild>
+                <IconButton
+                    data-expand
+                    variant="header"
+                    aria-label={label}
+                    aria-pressed={expanded}
+                    aria-keyshortcuts={shortcut?.keys}
+                    icon={expanded ? <Minimize2Icon /> : <Maximize2Icon />}
+                    onClick={onToggle}
+                />
+            </TooltipTrigger>
+            <TooltipPopup side="bottom">
+                {label}
+                {shortcut ? <span className="text-base-500 ms-2">{shortcut.label}</span> : null}
+            </TooltipPopup>
+        </Tooltip>
+    );
+}

package/src/overlays/Popover.tsx

@@ -8,12 +8,14 @@ interface PopoverContentPolicyProps extends Omit<PopoverContentProps, 'className
     onOpenAutoFocus?: (event: Event) => void;
     onCloseAutoFocus?: (event: Event) => void;
     presentation?: 'default' | 'menu';
-    width?: 'content' | 'sm' | 'trigger';
+    /** `sm` is 16rem and `md` 22rem, such as a chooser with a list; either stays inside the window. */
+    width?: 'content' | 'sm' | 'md' | 'trigger';
 }
 
 const popoverWidthClasses: Record<NonNullable<PopoverContentPolicyProps['width']>, string | undefined> = {
     content: undefined,
     sm: 'w-64',
+    md: 'w-88',
     trigger: 'w-(--radix-popover-trigger-width)',
 };
 

package/src/overlays/index.ts

@@ -1,8 +1,16 @@
 export { ActionModal } from './ActionModal';
-export { CommandPalette, CommandPaletteGroup, useCommandPaletteOption } from './CommandPalette';
+export {
+    CommandPalette,
+    CommandPaletteGroup,
+    CommandPaletteOption,
+    type CommandPaletteToken,
+    useCommandPaletteOption,
+} from './CommandPalette';
 export { Drawer } from './Drawer';
 export { DropdownMenu } from './DropdownMenu';
+export { HelpTip } from './HelpTip';
 export { ImageViewer } from './ImageViewer';
 export { Modal } from './Modal';
+export { ModalExpandButton } from './ModalExpandButton';
 export { Popover } from './Popover';
 export { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from './Tooltip';

package/src/styles.css

@@ -1,10 +1,12 @@
 /* Everything an app needs from the design system in one import: Tailwind, ninna-ui's preset, Lar's tokens and
    base styles, and the components' utilities, which Tailwind finds by scanning this package's sources. The
-   marketing showcase is left out; a site that uses it imports showcase.css instead. */
+   marketing showcase and Lar Factory's board are left out; a site that uses the showcase imports showcase.css, and
+   the board imports board.css, instead. */
 @import './foundations/theme.css';
 
 @source './';
 @source not './showcase';
+@source not './board';
 
 /* ninna-ui's own @source paths assume npm's flat node_modules and find nothing under pnpm, so its components'
    classes are scanned from here: next to this package once installed (pnpm's store or npm's tree), and in this

package/src/typography/Code.tsx

@@ -0,0 +1,24 @@
+import { Code as NinnaCode, type CodeProps as NinnaCodeProps } from '@ninna-ui/primitives';
+import { forwardRef } from 'react';
+
+const wrapping = { anywhere: 'break-all', never: 'whitespace-nowrap' } as const;
+
+export type CodeProps = NinnaCodeProps & {
+    /** A path or command inside a sentence, in the page's plain inline code with no chip: a path may break `anywhere`,
+     *  a command `never`. Without it, the code chip. */
+    wrap?: keyof typeof wrapping;
+};
+
+/** Inline code: ninna-ui's code chip, or with `wrap`, plain inline code that breaks anywhere or never. */
+export const Code = forwardRef<HTMLElement, CodeProps>(({ wrap, ...props }, ref) => {
+    if (wrap)
+        return (
+            <code ref={ref} className={wrapping[wrap]}>
+                {props.children}
+            </code>
+        );
+
+    return <NinnaCode ref={ref} {...props} />;
+});
+
+Code.displayName = 'Code';

package/src/typography/Link.tsx

@@ -89,17 +89,26 @@ function navigationClick({
     };
 }
 
-/** A link inside running text or a note: the surrounding size and colour, underlined. */
-export function InlineLink({ href, children }: { href: string; children?: ReactNode }) {
+const inline =
+    'focus-visible:outline-primary text-inherit underline decoration-current/40 underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-2';
+
+/** A link inside running text or a note: the surrounding size and colour, underlined. With `onClick` in place of
+ *  `href` it is a button with the same look, such as "Change" after what was kept, and can be `disabled`. */
+export function InlineLink(
+    props:
+        | { href: string; children?: ReactNode }
+        | { onClick: () => void; disabled?: boolean | undefined; children?: ReactNode },
+) {
+    if ('onClick' in props)
+        return (
+            <button {...tabbable} type="button" disabled={props.disabled} onClick={props.onClick} className={inline}>
+                {props.children}
+            </button>
+        );
+
     return (
-        <a
-            {...tabbable}
-            href={href}
-            target="_blank"
-            rel="noreferrer"
-            className="focus-visible:outline-primary text-inherit underline decoration-current/40 underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-2"
-        >
-            {children}
+        <a {...tabbable} href={props.href} target="_blank" rel="noreferrer" className={inline}>
+            {props.children}
         </a>
     );
 }