@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/XOS/RunOfShowLive.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { formatClock } from "../lib/format.ts";
+import { Button } from "../Button/Button.tsx";
+import { DepartmentGlyph } from "../Glyphs/Glyphs.tsx";
+import { Tag } from "../Chips/Chips.tsx";
+import { type RunOfShowLiveProps } from "./XOS.types.ts";
+
+/** Steps through cues with a countdown; Space or Go advances. Show mode enlarges cues for arm's-length reading. */
+export function RunOfShowLive({
+  cues,
+  current,
+  nextInSeconds,
+  showMode = false,
+  onGo,
+}: RunOfShowLiveProps): ReactElement {
+  const t = useT();
+  const [live, setLive] = useState(current);
+  const [left, setLeft] = useState(nextInSeconds);
+  useEffect(() => {
+    const timer = setInterval(() => setLeft((v) => v - 1), 1000);
+    return () => clearInterval(timer);
+  }, []);
+  const go = () => {
+    const next = Math.min(live + 1, cues.length - 1);
+    setLive(next);
+    setLeft(cues[next]?.durationSeconds ?? 0);
+    onGo?.(next);
+  };
+  return (
+    <section
+      aria-label={t("ros.label")}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === " " && e.target === e.currentTarget) {
+          e.preventDefault();
+          go();
+        }
+      }}
+      className="flex flex-col max-w-(--layout-peek) rounded-card border border-border-subtle bg-bg-canvas"
+    >
+      <header className="flex items-center justify-between px-16 py-12 border-b border-border-subtle">
+        <div className="flex flex-col">
+          <span className="text-text-secondary">{t("ros.nextIn")}</span>
+          <strong
+            className={cx(
+              "text-heading-32 font-semibold tabular-nums",
+              left <= 30 && "text-warning-text",
+            )}
+          >
+            {formatClock(left)}
+          </strong>
+        </div>
+        <Button variant="primary" shortcut={t("key.space")} onClick={go}>
+          {t("ros.go")}
+        </Button>
+      </header>
+      <ol className="m-0 py-4 list-none">
+        {cues.map((cue, i) => {
+          const state = i < live ? "done" : i === live ? "live" : "next";
+          return (
+            <li
+              key={cue.number}
+              aria-current={state === "live" ? "true" : undefined}
+              className={cx(
+                "grid grid-cols-[max-content_max-content_minmax(0,1fr)_auto_auto] items-center gap-x-12 gap-y-8 px-16 py-4",
+                showMode ? "min-h-(--ui-cmd-input) text-heading-20" : "min-h-(--space-40)",
+                state === "done" && "text-text-tertiary",
+                state === "live" &&
+                  "bg-bg-hover font-semibold border-s-stroke-accent border-s-accent",
+              )}
+            >
+              <span className="font-mono text-text-12">{cue.number}</span>
+              <span className="tabular-nums text-text-secondary whitespace-nowrap">{cue.time}</span>
+              <span>{cue.title}</span>
+              {cue.dept ? (
+                <DepartmentGlyph code={cue.dept} size={14} color="var(--color-text-secondary)" />
+              ) : (
+                <span />
+              )}
+              {state === "live" ? (
+                <Tag tone="accent">{t("ros.live")}</Tag>
+              ) : cue.status === "standby" ? (
+                <Tag tone="warning">{t("ros.standby")}</Tag>
+              ) : cue.status === "skipped" ? (
+                <Tag>{t("ros.skipped")}</Tag>
+              ) : (
+                <span />
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}

package/src/XOS/StalenessIndicator.tsx

@@ -0,0 +1,31 @@
+import { type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { chipClass } from "../Chips/Chips.tsx";
+import { type StalenessIndicatorProps } from "./XOS.types.ts";
+
+/** A price band's age: degraded one step at 12 months, Modeled at 24, Expired at 36. */
+export function StalenessIndicator({ months, basis }: StalenessIndicatorProps): ReactElement {
+  const t = useT();
+  const [key, tone] =
+    months >= 36
+      ? ["stale.expired", cx("text-danger")]
+      : months >= 24
+        ? ["stale.modeled", cx("text-warning")]
+        : months >= 12
+          ? ["stale.degraded", cx("text-warning")]
+          : ["stale.current", cx("text-success")];
+  return (
+    <span
+      className={chipClass}
+      title={t("stale.title", { n: months, basis: basis ?? t("stale.basis") })}
+    >
+      <span className={tone}>
+        <Icon name="Clock" size={14} />
+      </span>
+      <span>{t(key)}</span>
+      <span className="text-text-secondary tabular-nums">{t("stale.months", { n: months })}</span>
+    </span>
+  );
+}

package/src/XOS/StatusHeatmap.tsx

@@ -0,0 +1,200 @@
+import { type KeyboardEvent, type ReactElement } from "react";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { ScrollRegion } from "../Layout/Layout.tsx";
+import { StateIcon } from "../StateIcon/StateIcon.tsx";
+import { useGridFocus } from "./XOS.shared.tsx";
+import { type StatusHeatmapCell, type StatusHeatmapProps } from "./XOS.types.ts";
+
+/**
+ * Rows crossed with columns, each cell one state: who has answered which section, how ready each person on a roster
+ * is, where each party's allocations stand (R11). An ARIA grid, like CoordinateMatrix: arrows move between cells,
+ * Home and End go to the row's ends (with Ctrl or Cmd, the grid's), and Enter or Space opens a cell. Every state shows
+ * its icon and its label, never color alone, with the cell's detail under them, and the table is its own accessible
+ * alternative. Rows can be selected for a bulk action. A row and column with no cell is not asked and reads so.
+ */
+export function StatusHeatmap({
+  label,
+  corner,
+  rows,
+  cols,
+  cells,
+  legend,
+  selection,
+  onCellSelect,
+}: StatusHeatmapProps): ReactElement {
+  const t = useT();
+  const grid = useGridFocus(rows.length, cols.length);
+  const byState = new Map(legend.map((l) => [l.state, l]));
+  const selected = new Set(selection?.selected ?? []);
+
+  const open = (
+    e: KeyboardEvent<HTMLElement> | null,
+    rowId: string,
+    colId: string,
+    cell: StatusHeatmapCell | undefined,
+    target: HTMLElement,
+  ) => {
+    if (!cell || cell.readOnly) return;
+    if (onCellSelect) {
+      e?.preventDefault();
+      onCellSelect(rowId, colId, cell);
+    } else if (cell.href && e) {
+      e.preventDefault();
+      target.querySelector("a")?.click();
+    }
+  };
+
+  const toggle = (id: string) => {
+    if (!selection) return;
+    const next = new Set(selected);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    selection.onChange(rows.map((r) => r.id).filter((r) => next.has(r)));
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <ScrollRegion label={label}>
+        <table
+          role="grid"
+          aria-label={label}
+          aria-rowcount={rows.length + 1}
+          className="border-separate border-spacing-2 text-text-12"
+        >
+          <caption className="pb-8 text-start text-text-13 font-semibold">{label}</caption>
+          <thead>
+            <tr>
+              {selection ? <td aria-hidden="true" className="p-4" /> : null}
+              <th scope="col" className="p-4 text-start font-medium text-text-secondary">
+                {corner}
+              </th>
+              {cols.map((c) => (
+                <th
+                  key={c.id}
+                  scope="col"
+                  className="p-4 text-start align-bottom font-medium text-text-secondary"
+                >
+                  {c.label}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((r, ri) => (
+              <tr key={r.id} aria-selected={selection ? selected.has(r.id) : undefined}>
+                {selection ? (
+                  <td className="p-4 align-middle">
+                    <input
+                      type="checkbox"
+                      className="xos-check-input"
+                      checked={selected.has(r.id)}
+                      aria-label={t("heatmap.select", { row: r.label })}
+                      onChange={() => toggle(r.id)}
+                    />
+                  </td>
+                ) : null}
+                <th scope="row" className="pe-12 text-start font-medium">
+                  <span className="flex flex-col">
+                    <span className="whitespace-nowrap">{r.label}</span>
+                    {r.sublabel ? (
+                      <span className="text-text-12 font-regular text-text-secondary">
+                        {r.sublabel}
+                      </span>
+                    ) : null}
+                  </span>
+                </th>
+                {cols.map((c, ci) => {
+                  const cell = cells[`${r.id}:${c.id}`];
+                  const item = cell ? byState.get(cell.state) : undefined;
+                  const stateLabel = item?.label ?? cell?.state ?? "";
+                  const name = !cell
+                    ? t("heatmap.none", { row: r.label, col: c.label })
+                    : cell.detail
+                      ? t("heatmap.detail", {
+                          row: r.label,
+                          col: c.label,
+                          state: stateLabel,
+                          detail: cell.detail,
+                        })
+                      : t("heatmap.stateCell", { row: r.label, col: c.label, state: stateLabel });
+                  const actionable = Boolean(cell && !cell.readOnly && (onCellSelect || cell.href));
+                  const body = cell ? (
+                    <span className="inline-flex flex-col gap-2 whitespace-nowrap">
+                      <span className="inline-flex items-center gap-4">
+                        {item ? <StateIcon state={item.icon} /> : null}
+                        <span>{stateLabel}</span>
+                      </span>
+                      {cell.detail ? (
+                        <span className="text-text-secondary">{cell.detail}</span>
+                      ) : null}
+                    </span>
+                  ) : (
+                    <span className="text-text-secondary">{t("heatmap.noneMark")}</span>
+                  );
+                  return (
+                    <td
+                      key={c.id}
+                      ref={grid.register(ri, ci)}
+                      role="gridcell"
+                      tabIndex={grid.tabIndex(ri, ci)}
+                      aria-label={name}
+                      data-state={cell?.state}
+                      onFocus={() => grid.setActive([ri, ci])}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          open(e, r.id, c.id, cell, e.currentTarget);
+                        } else grid.onKeyDown(e, ri, ci);
+                      }}
+                      onClick={(e) => {
+                        if (cell && !cell.readOnly && onCellSelect) {
+                          e.preventDefault();
+                          onCellSelect(r.id, c.id, cell);
+                        }
+                      }}
+                      className={cx(
+                        "xos-hit h-control-md rounded-chip px-8 py-4 text-start",
+                        cell
+                          ? "bg-bg-raised ring-(length:--stroke-width-hairline) ring-inset ring-border-subtle"
+                          : "ring-(length:--stroke-width-hairline) ring-inset ring-border-subtle",
+                        actionable &&
+                          "cursor-pointer hover:outline-solid hover:outline-stroke-focus hover:outline-text-primary",
+                        "focus-visible:outline-solid focus-visible:outline-stroke-focus focus-visible:outline-focus-ring",
+                        "forced-colors:border",
+                      )}
+                    >
+                      {cell?.href && !onCellSelect ? (
+                        <a
+                          href={cell.href}
+                          tabIndex={-1}
+                          className="text-text-primary no-underline"
+                        >
+                          {body}
+                        </a>
+                      ) : (
+                        body
+                      )}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </ScrollRegion>
+      {legend.length > 0 ? (
+        <ul
+          aria-label={t("heatmap.legend")}
+          className="m-0 flex list-none flex-wrap gap-12 p-0 text-text-12 text-text-secondary"
+        >
+          {legend.map((l) => (
+            <li key={l.state} className="inline-flex items-center gap-4">
+              <StateIcon state={l.icon} />
+              <span>{l.label}</span>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+    </div>
+  );
+}

package/src/XOS/XOS.shared.tsx

@@ -0,0 +1,90 @@
+import { useRef, useState, type KeyboardEvent } from "react";
+import { Direction } from "radix-ui";
+import type { EmergencyAuthority } from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { type Translate } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { type Result } from "./XOS.types.ts";
+
+export const RESULT: Record<Result, { icon: string; className: string; key: string }> = {
+  met: { icon: "CircleCheck", className: cx("text-success"), key: "result.met" },
+  gap: { icon: "CircleX", className: cx("text-danger"), key: "result.gap" },
+  unknown: { icon: "CircleHelp", className: cx("text-warning"), key: "result.unknown" },
+};
+
+export function ResultIcon({
+  result,
+  t,
+  labeled = true,
+}: {
+  result: Result;
+  t: Translate;
+  labeled?: boolean;
+}) {
+  const r = RESULT[result];
+  return (
+    <span className={r.className}>
+      <Icon name={r.icon} size={14} {...(labeled ? { label: t(r.key) } : {})} />
+    </span>
+  );
+}
+
+export const tableClass = cx("w-full border-collapse text-text-13");
+
+export const thClass = cx(
+  "h-control-lg px-12 text-start font-medium text-text-12 text-text-secondary bg-bg-surface border-b border-border-subtle",
+);
+
+export const tdClass = cx("h-row-default px-12 border-b border-border-subtle whitespace-nowrap");
+
+export const SERVICES: EmergencyAuthority["service"][] = [
+  "fire",
+  "ems",
+  "lawEnforcement",
+  "bombSquad",
+  "federal",
+];
+
+/** Roving focus over the cells of an ARIA grid: arrows move, Home and End jump within a row, Ctrl with them jumps to the corners. */
+export function useGridFocus(rows: number, cols: number) {
+  const dir = Direction.useDirection();
+  const [active, setActive] = useState<[number, number]>([0, 0]);
+  const refs = useRef(new Map<string, HTMLElement>());
+  const register = (r: number, c: number) => (el: HTMLElement | null) => {
+    if (el) refs.current.set(`${r}:${c}`, el);
+    else refs.current.delete(`${r}:${c}`);
+  };
+  const onKeyDown = (e: KeyboardEvent<HTMLElement>, r: number, c: number) => {
+    const forward = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const back = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+    const ctrl = e.ctrlKey || e.metaKey;
+    const target: [number, number] | null =
+      e.key === "ArrowDown"
+        ? [r + 1, c]
+        : e.key === "ArrowUp"
+          ? [r - 1, c]
+          : e.key === forward
+            ? [r, c + 1]
+            : e.key === back
+              ? [r, c - 1]
+              : e.key === "Home"
+                ? ctrl
+                  ? [0, 0]
+                  : [r, 0]
+                : e.key === "End"
+                  ? ctrl
+                    ? [rows - 1, cols - 1]
+                    : [r, cols - 1]
+                  : null;
+    if (!target) return;
+    e.preventDefault();
+    const next: [number, number] = [
+      Math.max(0, Math.min(rows - 1, target[0])),
+      Math.max(0, Math.min(cols - 1, target[1])),
+    ];
+    setActive(next);
+    refs.current.get(`${next[0]}:${next[1]}`)?.focus();
+  };
+  const tabIndex = (r: number, c: number) => (active[0] === r && active[1] === c ? 0 : -1);
+  return { register, onKeyDown, tabIndex, setActive };
+}

package/src/XOS/XOS.tsx

@@ -0,0 +1,29 @@
+export {
+  type GateReadinessPanelProps,
+  type ProvenanceBadgeProps,
+  type AssertionRankBadgeProps,
+  type StalenessIndicatorProps,
+  type ReconciliationTableProps,
+  type EmergencyCodeCardProps,
+  type RadioChannelTableProps,
+  type RunOfShowLiveProps,
+  type CoordinateMatrixProps,
+  type AccessGridMatrixProps,
+  type StatusHeatmapProps,
+  type StatusHeatmapRow,
+  type StatusHeatmapCol,
+  type StatusHeatmapCell,
+  type StatusHeatmapLegendItem,
+} from "./XOS.types.ts";
+export { GateReadinessPanel } from "./GateReadinessPanel.tsx";
+export { ProvenanceBadge } from "./ProvenanceBadge.tsx";
+export { AssertionRankBadge } from "./AssertionRankBadge.tsx";
+export { StalenessIndicator } from "./StalenessIndicator.tsx";
+export { ReconciliationTable } from "./ReconciliationTable.tsx";
+export { resolveStep } from "./resolveStep.tsx";
+export { EmergencyCodeCard } from "./EmergencyCodeCard.tsx";
+export { RadioChannelTable } from "./RadioChannelTable.tsx";
+export { RunOfShowLive } from "./RunOfShowLive.tsx";
+export { CoordinateMatrix } from "./CoordinateMatrix.tsx";
+export { AccessGridMatrix } from "./AccessGridMatrix.tsx";
+export { StatusHeatmap } from "./StatusHeatmap.tsx";

package/src/XOS/XOS.types.ts

@@ -0,0 +1,99 @@
+import type {
+  AccessGridMatrixProps as ReferenceAccessGridMatrixProps,
+  AssertionRankBadgeProps as ReferenceAssertionRankBadgeProps,
+  CoordinateMatrixProps as ReferenceCoordinateMatrixProps,
+  EmergencyCodeCardProps as ReferenceEmergencyCodeCardProps,
+  GateReadinessPanelProps as ReferenceGateReadinessPanelProps,
+  ProvenanceBadgeProps as ReferenceProvenanceBadgeProps,
+  RadioChannelTableProps as ReferenceRadioChannelTableProps,
+  ReconciliationTableProps as ReferenceReconciliationTableProps,
+  RunOfShowLiveProps as ReferenceRunOfShowLiveProps,
+  StalenessIndicatorProps as ReferenceStalenessIndicatorProps,
+  RecordState,
+} from "../types/reference";
+
+export type GateReadinessPanelProps = ReferenceGateReadinessPanelProps & {
+  onAdvance?: () => void;
+  onCriterionAction?: (code: string | undefined, label: string) => void;
+};
+
+export type ProvenanceBadgeProps = ReferenceProvenanceBadgeProps;
+
+export type AssertionRankBadgeProps = ReferenceAssertionRankBadgeProps;
+
+export type StalenessIndicatorProps = ReferenceStalenessIndicatorProps;
+
+export type ReconciliationTableProps = ReferenceReconciliationTableProps;
+
+export type EmergencyCodeCardProps = ReferenceEmergencyCodeCardProps;
+
+export type RadioChannelTableProps = ReferenceRadioChannelTableProps;
+
+export type RunOfShowLiveProps = Omit<ReferenceRunOfShowLiveProps, "cues"> & {
+  /**
+   * The reference cues, each with an optional status the index alone cannot show (ADR 0131): a cue the caller
+   * jumped past is `skipped`, the cue they put on standby is `standby`.
+   */
+  cues: (ReferenceRunOfShowLiveProps["cues"][number] & { status?: "skipped" | "standby" })[];
+  /** Called with the new live cue index when Go advances. */
+  onGo?: (index: number) => void;
+};
+
+export type CoordinateMatrixProps = ReferenceCoordinateMatrixProps & {
+  onCellSelect?: (department: string, phase: string) => void;
+};
+
+export type AccessGridMatrixProps = ReferenceAccessGridMatrixProps & {
+  onChange?: (grants: string[]) => void;
+};
+
+export type Result = "met" | "gap" | "unknown";
+
+/** One row of a StatusHeatmap: a recipient, a person or a party. */
+export interface StatusHeatmapRow {
+  readonly id: string;
+  readonly label: string;
+  readonly sublabel?: string;
+}
+
+/** One column of a StatusHeatmap: a section, a category or an offering. */
+export interface StatusHeatmapCol {
+  readonly id: string;
+  readonly label: string;
+}
+
+/** A state the heatmap can show: the key cells name, the icon that carries it and its label. */
+export interface StatusHeatmapLegendItem {
+  readonly state: string;
+  readonly icon: RecordState;
+  readonly label: string;
+}
+
+/** One cell, keyed `<row id>:<col id>` in `cells`. A row and column with no cell is not asked. */
+export interface StatusHeatmapCell {
+  /** A `state` of the legend. */
+  readonly state: string;
+  /** Where Enter or a click goes. */
+  readonly href?: string;
+  /** More about the cell, shown under its state and read after it (a count, a date, who signed). */
+  readonly detail?: string;
+  /** The cell only says where something stands: Enter, Space and a click do nothing, and it looks that way. */
+  readonly readOnly?: boolean;
+}
+
+export interface StatusHeatmapProps {
+  readonly label: string;
+  /** The header of the row column. */
+  readonly corner: string;
+  readonly rows: readonly StatusHeatmapRow[];
+  readonly cols: readonly StatusHeatmapCol[];
+  readonly cells: Readonly<Record<string, StatusHeatmapCell>>;
+  readonly legend: readonly StatusHeatmapLegendItem[];
+  /** Rows that can be selected, for a bulk action: the ids selected and a change handler. */
+  readonly selection?: {
+    readonly selected: readonly string[];
+    readonly onChange: (selected: string[]) => void;
+  };
+  /** Called on Enter, Space or a click on a cell; without it, a cell with an href follows its link. */
+  readonly onCellSelect?: (rowId: string, colId: string, cell: StatusHeatmapCell) => void;
+}

package/src/XOS/resolveStep.tsx

@@ -0,0 +1,16 @@
+import type { EmergencyAuthority } from "../types/reference";
+import { type Translate } from "../lib/context.tsx";
+import { SERVICES } from "./XOS.shared.tsx";
+
+/** Resolves `{service}` tokens in a protocol step from the jurisdiction's agencies, or the generic service name. */
+export function resolveStep(
+  step: string,
+  authorities: EmergencyAuthority[] | undefined,
+  t: Translate,
+): string {
+  return step.replace(/\{(\w+)\}/g, (match, key: string) => {
+    if (!(SERVICES as string[]).includes(key)) return match;
+    const agency = authorities?.find((a) => a.service === key);
+    return agency ? agency.agency : t(`ecode.service.${key}`);
+  });
+}

package/src/brand/defaults/README.md

@@ -0,0 +1,13 @@
+# Brand
+
+White-label slots. Each file marks where a tenant's brand file goes and at what size; the platform brand marks are not set yet.
+
+| Slot          | File           | Delivery size   | Formats                | Plan                     |
+| ------------- | -------------- | --------------- | ---------------------- | ------------------------ |
+| Logo, Light   | logo-light.svg | 160 x 40        | SVG or transparent PNG | All                      |
+| Logo, Dark    | logo-dark.svg  | 160 x 40        | SVG or transparent PNG | All                      |
+| Favicon       | favicon.svg    | 32 x 32 minimum | SVG or PNG             | All                      |
+| App Icon      | app-icon.svg   | 1024 x 1024     | PNG, no transparency   | Enterprise branded build |
+| Splash Screen | splash.svg     | 1290 x 2796     | PNG                    | Enterprise branded build |
+
+Until a tenant uploads a logo, BrandMark renders a monogram tile in `accent-default` with the name in Inter. Replace these files with real marks; nothing else changes.

package/src/brand/defaults/app-icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" role="img" aria-label="App Icon slot, 1024 x 1024">
+<rect width="512" height="512" fill="#F7F7F8"></rect>
+<rect x="6" y="6" width="500" height="500" rx="12" fill="none" stroke="#D1D2D6" stroke-width="3" stroke-dasharray="12 10"></rect>
+<text x="256.0" y="245.8" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="51" font-weight="600" fill="#6B6E76">App Icon</text>
+<text x="256.0" y="312.1" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="40" fill="#6B6E76">1024 x 1024</text>
+</svg>

package/src/brand/defaults/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" role="img" aria-label="Favicon slot, 32 x 32">
+<rect width="256" height="256" fill="#FFFFFF"></rect>
+<rect x="6" y="6" width="244" height="244" rx="12" fill="none" stroke="#D1D2D6" stroke-width="3" stroke-dasharray="12 10"></rect>
+<text x="128.0" y="123.0" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="25" font-weight="600" fill="#6B6E76">Favicon</text>
+<text x="128.0" y="155.5" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="20" fill="#6B6E76">32 x 32</text>
+</svg>

package/src/brand/defaults/logo-dark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="160" viewBox="0 0 640 160" role="img" aria-label="Tenant Logo, Dark slot, 160 x 40">
+<rect width="640" height="160" fill="#0E0F11"></rect>
+<rect x="6" y="6" width="628" height="148" rx="12" fill="none" stroke="#34353B" stroke-width="3" stroke-dasharray="12 10"></rect>
+<text x="320.0" y="76.8" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="16" font-weight="600" fill="#A0A3AB">Tenant Logo, Dark</text>
+<text x="320.0" y="97.6" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="#A0A3AB">160 x 40</text>
+</svg>

package/src/brand/defaults/logo-light.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="640" height="160" viewBox="0 0 640 160" role="img" aria-label="Tenant Logo, Light slot, 160 x 40">
+<rect width="640" height="160" fill="#FFFFFF"></rect>
+<rect x="6" y="6" width="628" height="148" rx="12" fill="none" stroke="#D1D2D6" stroke-width="3" stroke-dasharray="12 10"></rect>
+<text x="320.0" y="76.8" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="16" font-weight="600" fill="#6B6E76">Tenant Logo, Light</text>
+<text x="320.0" y="97.6" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="12" fill="#6B6E76">160 x 40</text>
+</svg>

package/src/brand/defaults/splash.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="390" height="844" viewBox="0 0 390 844" role="img" aria-label="Splash Screen slot, 1290 x 2796">
+<rect width="390" height="844" fill="#0E0F11"></rect>
+<rect x="6" y="6" width="378" height="832" rx="12" fill="none" stroke="#34353B" stroke-width="3" stroke-dasharray="12 10"></rect>
+<text x="195.0" y="414.2" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="39" font-weight="600" fill="#A0A3AB">Splash Screen</text>
+<text x="195.0" y="464.9" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="31" fill="#A0A3AB">1290 x 2796</text>
+</svg>