@ultimat3/ui 29.4.0 → 30.0.0

package/src/components/CodeBlock.tsx

@@ -0,0 +1,76 @@
+// A block of code: `<pre><code>` of classed runs, a named scroll region that stays left-to-right
+// under `dir="rtl"`, and — with script — a wrap toggle and a copy button. The runs are text nodes,
+// so code can never become markup. Languages are passed in, never imported here (axiom 6).
+
+import type { JSX } from 'solid-js';
+import { findLanguage, highlight, type Language } from '../content/highlight';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import styles from './CodeBlock.module.scss';
+import { CopyButton } from './CopyButton';
+
+export interface CodeBlockProps {
+  code: string;
+  /** The language's name or alias — a fence's info string. Unknown or absent: plain text. */
+  language?: string | undefined;
+  /** The languages this block may highlight with: `[tsLanguage]`, or `allLanguages` on a server page. */
+  languages?: readonly Language[] | undefined;
+  /** Already-translated name of the scroll region; defaults to `ui.code.region`. */
+  label?: string | undefined;
+  /** Start wrapped. The reader can toggle it once script runs. */
+  wrap?: boolean | undefined;
+  /** `false` hides the copy button. */
+  copy?: boolean | undefined;
+  class?: string | undefined;
+}
+
+export function CodeBlock(props: CodeBlockProps): JSX.Element {
+  const ui = useUi();
+  const rt = solid();
+  const [enhanced, setEnhanced] = rt.createSignal(false);
+  rt.createEffect(() => setEnhanced(true));
+  const [wrapped, setWrapped] = rt.createSignal(props.wrap === true);
+  const tokens = rt.createMemo(() =>
+    highlight(props.code, findLanguage(props.language, props.languages)),
+  );
+
+  return (
+    <div
+      class={cx(styles['block'], props.class)}
+      data-enhanced={enhanced() ? 'true' : undefined}
+      data-wrap={wrapped() ? 'true' : undefined}
+    >
+      <div class={styles['bar']}>
+        <button
+          type="button"
+          class={styles['toggle']}
+          aria-pressed={wrapped() ? 'true' : 'false'}
+          onClick={() => setWrapped(!wrapped())}
+        >
+          {ui.t(UI_KEYS.codeWrap)}
+        </button>
+        {props.copy === false ? null : <CopyButton value={props.code} size="sm" />}
+      </div>
+      {/* biome-ignore lint/a11y/useSemanticElements: the <pre> IS the scroll box; a <section> around it would scroll nothing */}
+      <pre
+        class={styles['pre']}
+        dir="ltr"
+        tabindex="0"
+        role="region"
+        aria-label={props.label ?? ui.t(UI_KEYS.codeRegion)}
+      >
+        <code>
+          {tokens().map((token) =>
+            token.kind === 'plain' ? (
+              token.text
+            ) : (
+              <span class={styles[`tok-${token.kind}`]}>{token.text}</span>
+            ),
+          )}
+        </code>
+      </pre>
+    </div>
+  );
+}

package/src/components/CommandPalette.module.scss

@@ -111,3 +111,28 @@
   font-size: t.text(xs);
   color: t.role('fg-muted');
 }
+
+.run {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.groupLabel {
+  padding-block: t.space(2) t.space(1);
+  padding-inline: t.space(3);
+  color: t.role('fg-muted');
+  font-size: t.text(xs);
+  font-weight: t.weight(semibold);
+}
+
+// On a phone the palette is full width and anchored to the top, so the on-screen keyboard rising
+// from the bottom never covers the filter or the first rows.
+@include t.respond-down(sm) {
+  .palette {
+    inset-block-start: 0;
+    inline-size: 100%;
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+}

package/src/components/CommandPalette.tsx

@@ -4,13 +4,17 @@
 // presentational: the open flag, the query and the active item all live in the caller, and the
 // rules (`filterItems`, `stepActive`, `keyAction`) live in `command-palette-view.ts` so the caller
 // does not rewrite them. Renders closed on the server unless told otherwise; with scripting off
-// it is inert markup.
+// it is inert markup. Items carrying a `group` render under one `role="group"` heading per run;
+// `useCommandPalette` is the shell that owns the open flag, the query, `⌘K` and focus.
 
 import type { JSX } from 'solid-js';
+import { useId } from '../a11y';
 import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
 import { solid } from '../theme/solid-adapter';
 import styles from './CommandPalette.module.scss';
-import type { CommandPaletteItem } from './command-palette-view';
+import { type CommandPaletteItem, groupItems } from './command-palette-view';
 import { Kbd } from './Kbd';
 
 /** Every string the palette renders, already translated. */
@@ -39,6 +43,8 @@ export interface CommandPaletteProps {
   onHoverItem: (id: string) => void;
   onRunItem: (id: string) => void;
   onClose: () => void;
+  /** Items are being fetched for the query (`onQuery`): says so where the list goes. */
+  loading?: boolean | undefined;
   /** The element's id, so a trigger can name it with `aria-controls`. */
   id?: string | undefined;
   /** Refs out, so a caller can read focus or the attribute behind its own capability guard. */
@@ -49,6 +55,8 @@ export interface CommandPaletteProps {
 
 export function CommandPalette(props: CommandPaletteProps): JSX.Element {
   const rt = solid();
+  const ui = useUi();
+  const groupBase = useId('palette-group');
   let dialogEl: HTMLDialogElement | undefined;
   let filterEl: HTMLInputElement | undefined;
 
@@ -66,6 +74,24 @@ export function CommandPalette(props: CommandPaletteProps): JSX.Element {
     }
   });
 
+  const row = (item: CommandPaletteItem): JSX.Element => (
+    <li>
+      {/* A native button, never a row with a handler; roving TABINDEX, not roving focus. */}
+      <button
+        type="button"
+        class={styles['item']}
+        data-active={item.id === props.activeId ? 'true' : undefined}
+        tabIndex={item.id === props.activeId ? 0 : -1}
+        onClick={() => props.onRunItem(item.id)}
+        onMouseEnter={() => props.onHoverItem(item.id)}
+        onKeyDown={props.onFilterKeyDown}
+      >
+        <span class={styles['label']}>{item.label}</span>
+        {item.hint === '' ? null : <span class={styles['hint']}>{item.hint}</span>}
+      </button>
+    </li>
+  );
+
   return (
     <dialog
       ref={(el: HTMLDialogElement) => {
@@ -98,28 +124,30 @@ export function CommandPalette(props: CommandPaletteProps): JSX.Element {
           />
           <Kbd>{props.labels.escHint}</Kbd>
         </div>
-        {props.items.length === 0 ? (
+        {props.loading === true ? (
+          <p class={styles['empty']} role="status">
+            {ui.t(UI_KEYS.loading)}
+          </p>
+        ) : props.items.length === 0 ? (
           <p class={styles['empty']}>{props.labels.emptyText}</p>
+        ) : props.items.every((item) => item.group === undefined) ? (
+          <ul class={styles['list']}>{props.items.map(row)}</ul>
         ) : (
-          <ul class={styles['list']}>
-            {props.items.map((item) => (
-              <li>
-                {/* A native button, never a row with a handler; roving TABINDEX, not roving focus. */}
-                <button
-                  type="button"
-                  class={styles['item']}
-                  data-active={item.id === props.activeId ? 'true' : undefined}
-                  tabIndex={item.id === props.activeId ? 0 : -1}
-                  onClick={() => props.onRunItem(item.id)}
-                  onMouseEnter={() => props.onHoverItem(item.id)}
-                  onKeyDown={props.onFilterKeyDown}
-                >
-                  <span class={styles['label']}>{item.label}</span>
-                  {item.hint === '' ? null : <span class={styles['hint']}>{item.hint}</span>}
-                </button>
-              </li>
-            ))}
-          </ul>
+          <div class={styles['list']}>
+            {groupItems(props.items).map((run, index) =>
+              run.group === undefined ? (
+                <ul class={styles['run']}>{run.items.map(row)}</ul>
+              ) : (
+                // biome-ignore lint/a11y/useSemanticElements: commands, not form controls; a fieldset is a form's group
+                <div role="group" aria-labelledby={`${groupBase}-${index}`}>
+                  <p class={styles['groupLabel']} id={`${groupBase}-${index}`}>
+                    {run.group}
+                  </p>
+                  <ul class={styles['run']}>{run.items.map(row)}</ul>
+                </div>
+              ),
+            )}
+          </div>
         )}
       </div>
     </dialog>

package/src/components/ConfirmDialog.module.scss

@@ -0,0 +1,36 @@
+@use '../tokens' as t;
+
+// The trigger flows where the caller put it; the dialog sits in the top layer once open.
+.root {
+  display: contents;
+}
+
+.dialog {
+  // Full width on a phone, flush to the bottom edge where the thumb is.
+  @include t.respond-down(sm) {
+    inline-size: 100%;
+    max-inline-size: 100%;
+    margin-block-end: 0;
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    padding-block-end: t.safe-area-inset(block-end);
+  }
+}
+
+.consequence {
+  color: t.role('fg');
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: t.space(3);
+  justify-content: flex-end;
+
+  // Stacked below `sm`, primary LAST — the bottom row is the one in thumb reach.
+  @include t.respond-down(sm) {
+    flex-direction: column;
+    align-items: stretch;
+    inline-size: 100%;
+  }
+}

package/src/components/ConfirmDialog.tsx

@@ -0,0 +1,188 @@
+// A destructive confirmation, the one way: a trigger that opens a modal `<dialog>` by invoker
+// command (`commandfor` + `show-modal`, no script), a real `<form method="post">` inside it, Cancel
+// holding `autofocus` so a stray Enter destroys nothing, Esc closing and the backdrop never.
+//
+// With `onConfirm` instead of `action` an island runs the act: busy refuses a second submit, a
+// refusal keeps the dialog open with the reason in the form summary, focused. The native
+// `<dialog>` and `Dialog`'s sheet, not `Dialog` itself: that one opens from an effect and closes
+// from a script button, and this one must open, cancel and post with scripting off.
+
+import type { JSX } from 'solid-js';
+import { useId } from '../a11y';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import buttonStyles from './Button.module.scss';
+import { buttonClassKeys } from './button-classes';
+import styles from './ConfirmDialog.module.scss';
+import {
+  CONFIRM_IDLE,
+  type ConfirmEvent,
+  type ConfirmState,
+  confirmLabelOf,
+  confirmStep,
+} from './confirm-dialog-view';
+import dialogStyles from './Dialog.module.scss';
+import { Form } from './Form';
+import type { Tone } from './variants';
+
+interface ConfirmDialogBase {
+  /** Already translated. The dialog's accessible name: the question, "Withdraw this post?". */
+  title: string;
+  /** What happens, in one sentence, read before the act: "Readers lose the page at once." */
+  consequence: string;
+  /** The verb — "Withdraw post", never "OK". No default; an empty one is `X_UI_INVALID_VALUE`. */
+  confirmLabel: string;
+  /** The trigger button's label. */
+  trigger: string;
+  /** The confirm button's tone; `danger` when omitted. */
+  tone?: Tone | undefined;
+  /** Defaults to the translated `ui.cancel`. */
+  cancelLabel?: string | undefined;
+  /** A refusal to show on open — the server's, after a native post came back refused. */
+  error?: string | undefined;
+  /** Hidden inputs, and any gate on the act — a typed name, a reason — with native constraints. */
+  children?: JSX.Element | undefined;
+  id?: string | undefined;
+  class?: string | undefined;
+}
+
+/** Without script: the form posts natively to the action's route. */
+export interface ConfirmDialogPostProps extends ConfirmDialogBase {
+  action: string;
+  onConfirm?: undefined;
+}
+
+/**
+ * In an island: the act runs here. Resolve `undefined` when done (the dialog closes), or an
+ * already-translated refusal (it stays open, saying so); a rejection reads as `ui.error.title`.
+ */
+export interface ConfirmDialogIslandProps extends ConfirmDialogBase {
+  onConfirm: (data: FormData) => Promise<string | undefined>;
+  action?: undefined;
+}
+
+export type ConfirmDialogProps = ConfirmDialogPostProps | ConfirmDialogIslandProps;
+
+/** Chrome ≥ 135, Safari ≥ 26.2, Firefox ≥ 144: the trigger opens the dialog with no script. */
+const invokersNative = (): boolean =>
+  typeof HTMLButtonElement !== 'undefined' && 'commandForElement' in HTMLButtonElement.prototype;
+
+export function ConfirmDialog(props: ConfirmDialogProps): JSX.Element {
+  const ui = useUi();
+  const rt = solid();
+  const id = props.id ?? useId('confirm');
+  const titleId = `${id}-title`;
+  const confirmLabel = confirmLabelOf(props.confirmLabel);
+  const [state, setState] = rt.createSignal<ConfirmState>(CONFIRM_IDLE);
+  let dialog: HTMLDialogElement | undefined;
+
+  const step = (event: ConfirmEvent): boolean => {
+    const next = confirmStep(state(), event);
+    if (next === null) return false;
+    setState(next);
+    return true;
+  };
+  const message = (): string | undefined => {
+    const now = state();
+    return now.kind === 'refused' ? now.message : props.error;
+  };
+
+  const onSubmit = (event: SubmitEvent): void => {
+    const onConfirm = props.onConfirm;
+    // Cancel is `formmethod="dialog"`: the platform closes the dialog, nothing is confirmed.
+    const submitter = event.submitter as HTMLButtonElement | null;
+    if (onConfirm === undefined || submitter?.getAttribute('formmethod') === 'dialog') return;
+    event.preventDefault();
+    if (!step({ type: 'submit' })) return;
+    const form = event.currentTarget as HTMLFormElement;
+    onConfirm(new FormData(form)).then(
+      (refusal) => {
+        step({ type: 'settled', refusal });
+        if (refusal === undefined) dialog?.close();
+      },
+      () => step({ type: 'settled', refusal: ui.t(UI_KEYS.error) }),
+    );
+  };
+
+  return (
+    <div class={cx(styles['root'], props.class)}>
+      <button
+        type="button"
+        class={cx(
+          ...buttonClassKeys({ variant: 'secondary', tone: props.tone ?? 'danger' }).map(
+            (key) => buttonStyles[key],
+          ),
+        )}
+        commandfor={id}
+        command="show-modal"
+        onClick={() => {
+          // The gap an engine without invoker commands leaves, filled where there is a script.
+          if (!invokersNative() && dialog !== undefined && !dialog.open) dialog.showModal();
+        }}
+      >
+        <span class={buttonStyles['label']}>{props.trigger}</span>
+      </button>
+      {/* No backdrop handler at all: a confirmation is never dismissed by a stray click. */}
+      <dialog
+        ref={(el: HTMLDialogElement) => {
+          dialog = el;
+        }}
+        id={id}
+        class={cx(dialogStyles['dialog'], dialogStyles['size-sm'], styles['dialog'])}
+        aria-labelledby={titleId}
+        onClose={() => step({ type: 'closed' })}
+      >
+        <div class={dialogStyles['panel']}>
+          <header class={dialogStyles['header']}>
+            <h2 class={dialogStyles['title']} id={titleId}>
+              {props.title}
+            </h2>
+          </header>
+          <div class={dialogStyles['body']}>
+            <Form
+              method="post"
+              action={props.action}
+              error={message()}
+              busy={state().kind === 'busy'}
+              onSubmit={onSubmit}
+              actions={
+                <div class={styles['actions']}>
+                  {/* `autofocus`: showModal() lands here, so Enter straight after open cancels. */}
+                  <button
+                    type="submit"
+                    formmethod="dialog"
+                    formnovalidate
+                    autofocus
+                    class={cx(
+                      ...buttonClassKeys({ variant: 'secondary' }).map((key) => buttonStyles[key]),
+                    )}
+                  >
+                    <span class={buttonStyles['label']}>
+                      {props.cancelLabel ?? ui.t(UI_KEYS.cancel)}
+                    </span>
+                  </button>
+                  <button
+                    type="submit"
+                    class={cx(
+                      ...buttonClassKeys({ tone: props.tone ?? 'danger' }).map(
+                        (key) => buttonStyles[key],
+                      ),
+                    )}
+                    aria-busy={state().kind === 'busy' ? 'true' : undefined}
+                  >
+                    <span class={buttonStyles['label']}>{confirmLabel}</span>
+                  </button>
+                </div>
+              }
+            >
+              <p class={styles['consequence']}>{props.consequence}</p>
+              {props.children}
+            </Form>
+          </div>
+        </div>
+      </dialog>
+    </div>
+  );
+}