@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Grids/glForCode.tsx

@@ -0,0 +1,11 @@
+import type { GLAccount } from "../types/reference";
+
+/** The account a role code or URID posts to: its class's one account of the requested type, or null. */
+export function glForCode(
+  code: string,
+  accounts: GLAccount[],
+  type: GLAccount["type"] = "Expense",
+): GLAccount | null {
+  const cls = code.split(".")[0];
+  return accounts.find((a) => a.classCode === cls && a.type === type) ?? null;
+}

package/src/Grids/parseCell.tsx

@@ -0,0 +1,16 @@
+import type { GridColumn } from "../types/reference";
+import { isNumeric } from "./Grids.shared.tsx";
+import { type Cell } from "./Grids.types.ts";
+
+/**
+ * A typed cell value: a column's own parse decides first; otherwise blank is null, numbers parse (a trailing x on
+ * multipliers is dropped) and text stays text.
+ */
+export function parseCell(c: GridColumn, text: string): Cell {
+  if (c.parse) return c.parse(text);
+  const trimmed = text.trim();
+  if (trimmed === "") return null;
+  if (!isNumeric(c)) return trimmed;
+  const n = Number(trimmed.replace(/x$/i, "").replace(/[$,\s]/g, ""));
+  return Number.isFinite(n) ? n : null;
+}

package/src/Help/FeedbackWidget.tsx

@@ -0,0 +1,89 @@
+import { useState, type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Card } from "../Surface/Surface.tsx";
+import { Checkbox, Textarea } from "../Forms/Forms.tsx";
+import { type FeedbackWidgetProps } from "./Help.types.ts";
+
+/** Feedback with a privacy note; only what the person chooses is sent. */
+export function FeedbackWidget({
+  onSend,
+  onCancel,
+  screenshotField,
+  context,
+  thanks,
+}: FeedbackWidgetProps): ReactElement {
+  const t = useT();
+  const [sent, setSent] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [text, setText] = useState("");
+  const [screenshot, setScreenshot] = useState(false);
+  const send = () => {
+    const result = onSend?.({ text, screenshot });
+    if (!(result instanceof Promise)) {
+      setSent(true);
+      return;
+    }
+    setSending(true);
+    setFailed(false);
+    void result.then(
+      (ok) => {
+        setSending(false);
+        setSent(ok);
+        setFailed(!ok);
+      },
+      () => {
+        setSending(false);
+        setFailed(true);
+      },
+    );
+  };
+  return (
+    <Card
+      title={t("feedback.title")}
+      footer={
+        sent ? (
+          <span role="status" className="flex items-center gap-6">
+            <span className="text-success">
+              <Icon name="CircleCheck" />
+            </span>
+            {thanks ?? t("feedback.thanks")}
+          </span>
+        ) : (
+          <>
+            <Button variant="ghost" onClick={onCancel}>
+              {t("action.cancel")}
+            </Button>
+            <Button variant="primary" disabled={!text.trim() || sending} onClick={send}>
+              {t("action.send")}
+            </Button>
+          </>
+        )
+      }
+    >
+      <Textarea
+        label={t("feedback.question")}
+        placeholder={t("feedback.hint")}
+        width="100%"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      {screenshotField ?? (
+        <Checkbox
+          label={t("feedback.screenshot")}
+          checked={screenshot}
+          onChange={(e) => setScreenshot(e.target.checked)}
+        />
+      )}
+      <span className="text-text-12 text-text-secondary">{t("feedback.privacy")}</span>
+      {context ? <div className="text-text-12 text-text-secondary">{context}</div> : null}
+      {failed ? (
+        <span role="alert" className="text-text-12 text-danger-text">
+          {t("feedback.failed")}
+        </span>
+      ) : null}
+    </Card>
+  );
+}

package/src/Help/Help.tsx

@@ -0,0 +1,14 @@
+export {
+  type NotificationCenterProps,
+  type OnboardingChecklistProps,
+  type WhatsNewProps,
+  type FeedbackWidgetProps,
+  type ShortcutEditorProps,
+  type HelpPanelProps,
+} from "./Help.types.ts";
+export { NotificationCenter } from "./NotificationCenter.tsx";
+export { OnboardingChecklist } from "./OnboardingChecklist.tsx";
+export { WhatsNew } from "./WhatsNew.tsx";
+export { FeedbackWidget } from "./FeedbackWidget.tsx";
+export { ShortcutEditor } from "./ShortcutEditor.tsx";
+export { HelpPanel } from "./HelpPanel.tsx";

package/src/Help/Help.types.ts

@@ -0,0 +1,51 @@
+import type { ReactNode } from "react";
+import type {
+  FeedbackWidgetProps as ReferenceFeedbackWidgetProps,
+  HelpPanelProps as ReferenceHelpPanelProps,
+  NotificationCenterProps as ReferenceNotificationCenterProps,
+  NotificationItem,
+  OnboardingChecklistProps as ReferenceOnboardingChecklistProps,
+  ShortcutEditorProps as ReferenceShortcutEditorProps,
+  WhatsNewProps as ReferenceWhatsNewProps,
+} from "../types/reference";
+
+export type NotificationCenterProps = ReferenceNotificationCenterProps & {
+  onAction?: (item: NotificationItem) => void;
+  onDone?: (item: NotificationItem) => void;
+  onSnooze?: (item: NotificationItem) => void;
+};
+
+export type OnboardingChecklistProps = ReferenceOnboardingChecklistProps & {
+  onAction?: (label: string) => void;
+};
+
+export type WhatsNewProps = ReferenceWhatsNewProps;
+
+export type FeedbackWidgetProps = ReferenceFeedbackWidgetProps & {
+  /**
+   * Sends the feedback. A promise holds the widget in its sending state; false keeps the text and says it did not
+   * send, so the person can try again.
+   */
+  onSend?: (feedback: { text: string; screenshot: boolean }) => Promise<boolean> | undefined;
+  onCancel?: () => void;
+  /** Replaces the screenshot checkbox, for an app that attaches a file the person chooses (A96). */
+  screenshotField?: ReactNode;
+  /** What goes with the message, shown under the privacy note so nothing is sent unseen (Section 11.7). */
+  context?: ReactNode;
+  /** The thanks once sent, for example with the reference the platform team quotes. */
+  thanks?: string;
+};
+
+export type ShortcutEditorProps = ReferenceShortcutEditorProps & {
+  onChange?: (action: string) => void;
+  onReset?: (action: string) => void;
+};
+
+export type HelpPanelProps = ReferenceHelpPanelProps & {
+  onSearch?: (query: string) => void;
+  onArticle?: (title: string) => void;
+  onAsk?: (question: string) => void;
+  onWhatsNew?: () => void;
+  onContact?: () => void;
+  onClose?: () => void;
+};

package/src/Help/HelpPanel.tsx

@@ -0,0 +1,116 @@
+import { useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button, IconButton } from "../Button/Button.tsx";
+import { Keys } from "../Kbd/Kbd.tsx";
+import { linkClass } from "../Link/Link.tsx";
+import { type HelpPanelProps } from "./Help.types.ts";
+
+const searchFieldClass = cx(
+  "flex items-center gap-8 h-row-default ps-12 pe-8 rounded-control border border-border-control bg-bg-surface",
+  "focus-within:outline-solid focus-within:outline-stroke-focus focus-within:outline-focus-ring",
+);
+
+const searchInputClass = cx(
+  "flex-1 min-w-0 border-0 bg-transparent outline-none text-text-primary placeholder:text-text-tertiary pointer-coarse:min-h-target-coarse",
+);
+
+/** Help for this page: search, articles, its shortcuts, the assistant, What's New and support. */
+export function HelpPanel({
+  articles,
+  shortcuts,
+  assistant = false,
+  onSearch,
+  onArticle,
+  onAsk,
+  onWhatsNew,
+  onContact,
+  onClose,
+}: HelpPanelProps): ReactElement {
+  const t = useT();
+  const [question, setQuestion] = useState("");
+  return (
+    <aside
+      aria-label={t("help.title")}
+      className="flex flex-col w-(--layout-sidebar-max) max-w-full max-md:w-full rounded-card bg-bg-raised shadow-dialog"
+    >
+      <header className="flex items-center justify-between py-8 ps-20 pe-12 border-b border-border-subtle">
+        <h2 className="m-0 text-text-13 font-semibold">{t("help.title")}</h2>
+        <IconButton icon="X" label={t("action.close")} shortcut={t("key.esc")} onClick={onClose} />
+      </header>
+      <div className="flex flex-col gap-16 px-20 pt-16 pb-20">
+        <label className={searchFieldClass}>
+          <Icon name="Search" color="var(--color-text-secondary)" />
+          <input
+            type="search"
+            aria-label={t("help.search")}
+            placeholder={t("help.search")}
+            onChange={(e) => onSearch?.(e.target.value)}
+            className={searchInputClass}
+          />
+        </label>
+        <section>
+          <h3 className="m-0 mb-6 text-text-12 font-medium text-text-secondary">
+            {t("help.forThisPage")}
+          </h3>
+          <ul className="flex flex-col gap-6 m-0 p-0 list-none">
+            {articles.map((a) => (
+              <li key={a}>
+                <button
+                  type="button"
+                  onClick={() => onArticle?.(a)}
+                  className={cx(linkClass, "p-0 border-0 bg-transparent cursor-pointer text-start")}
+                >
+                  {a}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </section>
+        <section>
+          <h3 className="m-0 mb-6 text-text-12 font-medium text-text-secondary">
+            {t("help.shortcuts")}
+          </h3>
+          {shortcuts.map((s) => (
+            <div key={s.label} className="flex items-center justify-between min-h-control-md">
+              <span>{s.label}</span>
+              <Keys keys={s.keys} />
+            </div>
+          ))}
+        </section>
+        {assistant ? (
+          <section>
+            <h3 className="m-0 mb-6 text-text-12 font-medium text-text-secondary">
+              {t("help.assistant")}
+            </h3>
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (question.trim()) onAsk?.(question.trim());
+              }}
+              className={searchFieldClass}
+            >
+              <Icon name="Sparkles" color="var(--color-text-secondary)" />
+              <input
+                aria-label={t("help.ask")}
+                placeholder={t("help.ask")}
+                value={question}
+                onChange={(e) => setQuestion(e.target.value)}
+                className={searchInputClass}
+              />
+            </form>
+          </section>
+        ) : null}
+        <div className="flex flex-wrap gap-8">
+          <Button icon="Megaphone" onClick={onWhatsNew}>
+            {t("help.whatsNew")}
+          </Button>
+          <Button icon="LifeBuoy" onClick={onContact}>
+            {t("help.contact")}
+          </Button>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/src/Help/NotificationCenter.tsx

@@ -0,0 +1,100 @@
+import { type KeyboardEvent, type ReactElement } from "react";
+import type { NotificationItem } from "../types/reference";
+import { useT } from "../lib/context.tsx";
+import { singleKeyShortcutsEnabled } from "../lib/preferences.ts";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button, IconButton } from "../Button/Button.tsx";
+import { RecordKindGlyph } from "../Glyphs/Glyphs.tsx";
+import { Tabs } from "../Navigation/Navigation.tsx";
+import { type NotificationCenterProps } from "./Help.types.ts";
+
+function NotificationList({
+  items,
+  onAction,
+  onDone,
+  onSnooze,
+}: { items: NotificationItem[] } & Omit<NotificationCenterProps, "needsYou" | "fyi">) {
+  const t = useT();
+  const onKey = (e: KeyboardEvent<HTMLLIElement>, item: NotificationItem) => {
+    if (e.target !== e.currentTarget) return;
+    const key = singleKeyShortcutsEnabled() ? e.key.toLowerCase() : "";
+    if (key === "e") onDone?.(item);
+    else if (key === "h") onSnooze?.(item);
+    else if (e.key === "Enter") onAction?.(item);
+    else return;
+    e.preventDefault();
+  };
+  return (
+    <ul className="m-0 p-0 list-none">
+      {items.map((item, i) => (
+        <li
+          key={`${item.title}-${i}`}
+          tabIndex={0}
+          onKeyDown={(e) => onKey(e, item)}
+          className="xos-notif-item flex items-center gap-8 py-8 ps-16 pe-8 border-t border-border-subtle first:border-t-0 focus-visible:outline-offset-[calc(var(--stroke-width-focus)*-1)]"
+        >
+          {item.kind ? (
+            <RecordKindGlyph kind={item.kind} color="var(--color-text-secondary)" />
+          ) : (
+            <Icon name="Bell" />
+          )}
+          <div className="xos-notif-text flex flex-1 flex-col min-w-0">
+            <span className="truncate">{item.title}</span>
+            <span className="text-text-secondary">{item.meta}</span>
+          </div>
+          {item.action ? (
+            <Button
+              size="sm"
+              onClick={() => onAction?.(item)}
+              {...(item.actionKey ? { shortcut: item.actionKey } : {})}
+            >
+              {item.action}
+            </Button>
+          ) : null}
+          <IconButton
+            icon="Check"
+            label={t("action.done")}
+            shortcut="E"
+            onClick={() => onDone?.(item)}
+          />
+          <IconButton
+            icon="AlarmClock"
+            label={t("action.snooze")}
+            shortcut="H"
+            onClick={() => onSnooze?.(item)}
+          />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+/** Needs You and For Your Information. On a focused item E marks it done, H snoozes it and Enter runs its action. */
+export function NotificationCenter({
+  needsYou,
+  fyi,
+  ...handlers
+}: NotificationCenterProps): ReactElement {
+  const t = useT();
+  return (
+    <section
+      aria-label={t("inbox.label")}
+      className="xos-notif w-(--ui-empty) max-w-full box-border rounded-card border border-border-subtle bg-bg-raised"
+    >
+      <div className="px-16">
+        <Tabs
+          label={t("inbox.label")}
+          value="needs"
+          tabs={[
+            { value: "needs", label: t("inbox.needsYou"), count: needsYou.length },
+            { value: "fyi", label: t("inbox.fyi"), count: fyi.length },
+          ]}
+          panels={{
+            needs: <NotificationList items={needsYou} {...handlers} />,
+            fyi: <NotificationList items={fyi} {...handlers} />,
+          }}
+        />
+      </div>
+    </section>
+  );
+}

package/src/Help/OnboardingChecklist.tsx

@@ -0,0 +1,57 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Card } from "../Surface/Surface.tsx";
+import { type OnboardingChecklistProps } from "./Help.types.ts";
+
+/** First-run steps with progress; done steps are struck through. */
+export function OnboardingChecklist({
+  title,
+  steps,
+  onAction,
+}: OnboardingChecklistProps): ReactElement {
+  const t = useT();
+  const done = steps.filter((s) => s.done).length;
+  return (
+    <Card title={title} meta={t("count.of", { n: done, total: steps.length })}>
+      <div
+        role="progressbar"
+        aria-label={title}
+        aria-valuenow={done}
+        aria-valuemin={0}
+        aria-valuemax={steps.length}
+        className="h-(--space-4) rounded-pill bg-bg-hover overflow-hidden"
+      >
+        <div
+          className="h-full rounded-pill bg-accent"
+          style={{ inlineSize: `${steps.length ? (done / steps.length) * 100 : 0}%` }}
+        />
+      </div>
+      <ol className="flex flex-col m-0 p-0 list-none">
+        {steps.map((s) => (
+          <li
+            key={s.label}
+            className="flex items-center gap-8 min-h-(--space-40) border-b border-border-subtle last:border-b-0"
+          >
+            <span className={s.done ? "text-success" : "text-text-tertiary"}>
+              <Icon
+                name={s.done ? "CircleCheck" : "Circle"}
+                {...(s.done ? { label: t("action.done") } : {})}
+              />
+            </span>
+            <span className={cx("flex-1", s.done && "text-text-secondary line-through")}>
+              {s.label}
+            </span>
+            {!s.done && s.action ? (
+              <Button size="sm" onClick={() => onAction?.(s.label)}>
+                {s.action}
+              </Button>
+            ) : null}
+          </li>
+        ))}
+      </ol>
+    </Card>
+  );
+}

package/src/Help/ShortcutEditor.tsx

@@ -0,0 +1,81 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { Button } from "../Button/Button.tsx";
+import { Keys } from "../Kbd/Kbd.tsx";
+import { ScrollRegion } from "../Layout/Layout.tsx";
+import { type ShortcutEditorProps } from "./Help.types.ts";
+
+/**
+ * Every action's shortcut with conflicts named in place; Change records new keys, Reset restores a
+ * custom one. An action without keys reads Not set.
+ */
+export function ShortcutEditor({
+  label,
+  rows,
+  onChange,
+  onReset,
+}: ShortcutEditorProps): ReactElement {
+  const t = useT();
+  const th = cx(
+    "h-control-lg px-12 text-start font-medium text-text-12 text-text-secondary bg-bg-surface border-b border-border-subtle",
+  );
+  const td = cx("h-row-default px-12 border-b border-border-subtle");
+  return (
+    <ScrollRegion label={label ?? t("shortcuts.title")}>
+      <table className="w-full border-collapse text-text-13">
+        <thead>
+          <tr>
+            <th scope="col" className={th}>
+              {t("shortcutEditor.action")}
+            </th>
+            <th scope="col" className={th}>
+              {t("shortcutEditor.shortcut")}
+            </th>
+            <th scope="col" className={th}>
+              <span className="sr-only">{t("shortcutEditor.edit")}</span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <tr key={r.action}>
+              <td className={td}>{r.action}</td>
+              <td className={td}>
+                <span className="inline-flex flex-wrap items-center gap-8">
+                  {r.keys.trim() === "" ? (
+                    <span className="text-text-secondary">{t("shortcutEditor.none")}</span>
+                  ) : (
+                    <Keys keys={r.keys} />
+                  )}
+                  {r.conflict ? (
+                    <span className="inline-flex items-center gap-4 text-text-12 text-danger-text">
+                      <Icon name="alert" size={12} />
+                      {r.conflict}
+                    </span>
+                  ) : null}
+                </span>
+              </td>
+              <td className={cx(td, "text-end whitespace-nowrap")}>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  aria-pressed={r.recording ?? false}
+                  onClick={() => onChange?.(r.action)}
+                >
+                  {r.recording ? t("shortcutEditor.press") : t("shortcutEditor.change")}
+                </Button>
+                {r.custom ? (
+                  <Button size="sm" variant="ghost" onClick={() => onReset?.(r.action)}>
+                    {t("action.reset")}
+                  </Button>
+                ) : null}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </ScrollRegion>
+  );
+}

package/src/Help/WhatsNew.tsx

@@ -0,0 +1,33 @@
+import { type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { Tag } from "../Chips/Chips.tsx";
+import { cardBodyClass, cardClass, cardHeadClass } from "../Surface/Surface.tsx";
+import { linkClass } from "../Link/Link.tsx";
+import { type WhatsNewProps } from "./Help.types.ts";
+
+/** Recent changes with a link to the full changelog. */
+export function WhatsNew({ changelogHref, entries }: WhatsNewProps): ReactElement {
+  const t = useT();
+  return (
+    <section aria-label={t("whatsNew.title")} className={cardClass}>
+      <header className={cardHeadClass}>
+        <h2 className="m-0 text-text-13 font-semibold">{t("whatsNew.title")}</h2>
+        <a href={changelogHref} className={linkClass}>
+          {t("whatsNew.changelog")}
+        </a>
+      </header>
+      <div className={cardBodyClass}>
+        {entries.map((e) => (
+          <article key={e.title} className="flex flex-col gap-4">
+            <div className="flex items-center gap-6">
+              <Tag tone={e.tone ?? "accent"}>{e.label}</Tag>
+              <span className="text-text-secondary">{e.date}</span>
+            </div>
+            <h3 className="m-0 text-text-13 font-semibold">{e.title}</h3>
+            <p className="m-0 text-text-secondary">{e.body}</p>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/HelpPanel/README.md

@@ -0,0 +1,5 @@
+# HelpPanel
+
+HelpPanel opens with the Help button or `?` in every shell: articles for the current page, shortcuts, the assistant (when the org turns it on), What's New and Contact Support.
+
+- Articles are mapped by route in the help content; canon terms open their Bible definition in a hover card.

package/src/HoverCard/README.md

@@ -0,0 +1,3 @@
+# HoverCard
+
+HoverCard previews a record after 400 ms on its key: title, state, owner and next date.

package/src/Icon/Icon.tsx

@@ -0,0 +1,47 @@
+import type { ReactElement } from "react";
+import type { IconProps as ReferenceIconProps } from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { iconSpriteUrl, iconSymbol, isMirrored } from "../lib/icons.ts";
+
+export type IconProps = ReferenceIconProps;
+
+/**
+ * Draws a registered lucide icon at 1.5 stroke, sized from the icon tokens (16 by default), from the
+ * cached icon sprite (`<use href>`, ADR 0027), so no icon geometry ships in page JavaScript.
+ * Decorative unless `label` says the icon carries meaning alone; a labelled icon is an image named
+ * by its title.
+ */
+export function Icon({
+  name,
+  size = 16,
+  label,
+  color,
+  className,
+  strokeWidth = 1.5,
+}: IconProps): ReactElement {
+  const a11y = label ? { role: "img", "aria-label": label } : { "aria-hidden": true as const };
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      focusable="false"
+      {...a11y}
+      className={cx(
+        "inline-block flex-none align-middle",
+        isMirrored(name) && "xos-flip-rtl",
+        className,
+      )}
+      style={color === undefined ? undefined : { color }}
+    >
+      {label ? <title>{label}</title> : null}
+      <use href={`${iconSpriteUrl}#${iconSymbol(name)}`} />
+    </svg>
+  );
+}

package/src/Icon/README.md

@@ -0,0 +1,9 @@
+# Icon
+
+Icon draws a registered lucide icon at 1.5 stroke, sized from the `icon-*` tokens.
+
+- `name` takes PascalCase (`Hammer`) or kebab-case (`chevron-right`); a few short aliases are kept: `more`, `alert`, `check-circle`, `pin`, `home`, `undo`.
+- Icons inherit `currentColor`. Pass `label` only when the icon carries meaning alone: the icon is then an image named by its label and a `<title>`. Otherwise it is hidden from screen readers.
+- Icons draw from one SVG sprite (`@xos/icons/sprite.svg`) with `<use href>`, so no icon geometry ships in page JavaScript (ADR 0027). The bundler emits the sprite with a content hash under `/_next/static/media`, and browsers cache it as a static asset.
+- Names come from the `@xos/icons` registry, the closed set the sprite is built from (RRR-70). To draw a new icon by name, add it to `packages/icons/registry/<owner>.txt` and run `pnpm --filter @xos/icons generate:registry`, which rewrites the sprite too. A name outside the registry renders an empty square of the same size and, in development, logs one console warning.
+- For canon objects use DepartmentGlyph, PhaseGlyph and RecordKindGlyph so the assignment stays in one place.

package/src/IconButton/README.md

@@ -0,0 +1,6 @@
+# IconButton
+
+IconButton is a square 28 px control with a single 16 px icon and a required accessible label.
+
+- `label` becomes `aria-label` and the tooltip text; `shortcut` is appended to the tooltip.
+- Use only for well-known actions (close, more, search, add). Anything else gets a text Button.

package/src/Identity/BrandSlot.tsx

@@ -0,0 +1,20 @@
+import { type ReactElement } from "react";
+import { useT } from "../lib/context.tsx";
+import { BrandSlotFrame } from "./BrandSlotFrame.tsx";
+import { type BrandSlotProps } from "./Identity.types.ts";
+
+/**
+ * Marks where a tenant uploads a brand file, drawn in proportion (at most 160 by 148) with its
+ * delivery size and formats.
+ */
+export function BrandSlot({ width, height, ...slot }: BrandSlotProps): ReactElement {
+  const t = useT();
+  return (
+    <BrandSlotFrame
+      {...slot}
+      width={width}
+      height={height}
+      sizeLabel={t("brand.size", { width, height })}
+    />
+  );
+}