@ghxstship/xos-ui 0.0.0-stage → 4.16.0

package/src/Overlays/Drawer.tsx

@@ -0,0 +1,62 @@
+import { type ReactElement } from "react";
+import { Dialog as RDialog } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { useReturnFocus } from "../lib/hooks.ts";
+import { IconButton } from "../Button/Button.tsx";
+import { scrimClass, useOverlayOpen } from "./Overlays.shared.tsx";
+import { type DrawerProps } from "./Overlays.types.ts";
+import { panelClass } from "./panelClass.tsx";
+
+/** Slides in from an edge for secondary tasks; full screen below md. */
+export function Drawer({
+  title,
+  side = "right",
+  children,
+  footer,
+  onClose,
+  shortcutScope,
+  wide = false,
+  ...control
+}: DrawerProps): ReactElement {
+  const t = useT();
+  const [isOpen, setOpen] = useOverlayOpen(control);
+  const returnFocus = useReturnFocus(isOpen);
+  const change = (next: boolean) => {
+    setOpen(next);
+    if (!next) onClose?.();
+  };
+  return (
+    <RDialog.Root open={isOpen} onOpenChange={change}>
+      {control.trigger ? <RDialog.Trigger asChild>{control.trigger}</RDialog.Trigger> : null}
+      <RDialog.Portal>
+        <RDialog.Overlay className={scrimClass} />
+        <RDialog.Content
+          onCloseAutoFocus={returnFocus}
+          aria-describedby={undefined}
+          data-shortcut-scope={shortcutScope}
+          className={cx(
+            panelClass,
+            "xos-anim-peek fixed inset-y-0 z-dialog flex flex-col rounded-none",
+            wide ? "w-(--layout-peek-max) max-w-full" : "w-(--ui-drawer)",
+            "max-md:w-full",
+            side === "left" ? "start-0" : "end-0",
+          )}
+        >
+          <header className="flex items-center justify-between py-8 ps-20 pe-12 border-b border-border-subtle">
+            <RDialog.Title className="m-0 text-text-13 font-semibold">{title}</RDialog.Title>
+            <RDialog.Close asChild>
+              <IconButton icon="X" label={t("action.close")} shortcut={t("key.esc")} />
+            </RDialog.Close>
+          </header>
+          <div className="flex flex-1 flex-col gap-16 p-20 overflow-y-auto">{children}</div>
+          {footer ? (
+            <footer className="flex justify-end gap-8 px-20 py-12 border-t border-border-subtle">
+              {footer}
+            </footer>
+          ) : null}
+        </RDialog.Content>
+      </RDialog.Portal>
+    </RDialog.Root>
+  );
+}

package/src/Overlays/HoverCard.tsx

@@ -0,0 +1,59 @@
+import { type ReactElement } from "react";
+import { HoverCard as RHoverCard } from "radix-ui";
+import type { HoverCardProps as ReferenceHoverCardProps } from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { RecordKindGlyph } from "../Glyphs/Glyphs.tsx";
+import { PropertyChip, StateChip } from "../Chips/Chips.tsx";
+import { type HoverCardProps } from "./Overlays.types.ts";
+import { popoverPanelClass } from "./popoverPanelClass.tsx";
+
+function HoverCardBody({
+  recordKey,
+  kind,
+  title,
+  state,
+  stateLabel,
+  owner,
+  next,
+}: ReferenceHoverCardProps) {
+  return (
+    <>
+      <div className="flex items-center gap-6 text-text-secondary">
+        <RecordKindGlyph kind={kind} size={14} />
+        <span className="font-mono text-text-12">{recordKey}</span>
+      </div>
+      <strong className="font-semibold">{title}</strong>
+      <div className="flex flex-wrap items-center gap-8">
+        <StateChip state={state} label={stateLabel} />
+        <PropertyChip icon="User" value={owner} />
+        <PropertyChip icon="Calendar" value={next} />
+      </div>
+    </>
+  );
+}
+
+const hoverCardClass = cx(
+  popoverPanelClass,
+  "flex flex-col gap-8 p-12 w-(--ui-hovercard) z-popover",
+);
+
+/** Previews a record after 400 ms on its key: title, state, owner and next date. */
+export function HoverCard({ children, openDelay = 400, ...record }: HoverCardProps): ReactElement {
+  if (children === undefined) {
+    return (
+      <div className={hoverCardClass}>
+        <HoverCardBody {...record} />
+      </div>
+    );
+  }
+  return (
+    <RHoverCard.Root openDelay={openDelay} closeDelay={100}>
+      <RHoverCard.Trigger asChild>{children}</RHoverCard.Trigger>
+      <RHoverCard.Portal>
+        <RHoverCard.Content sideOffset={4} collisionPadding={16} className={hoverCardClass}>
+          <HoverCardBody {...record} />
+        </RHoverCard.Content>
+      </RHoverCard.Portal>
+    </RHoverCard.Root>
+  );
+}

package/src/Overlays/Overlays.shared.tsx

@@ -0,0 +1,12 @@
+import { cx } from "../lib/cx.ts";
+import { useControllable } from "../lib/hooks.ts";
+import { type OverlayControl } from "./Overlays.types.ts";
+
+export const scrimClass = cx(
+  "xos-anim-fade fixed inset-0 z-dialog bg-scrim opacity-scrim-dark",
+  "in-data-[theme=light]:opacity-scrim-light in-data-[theme=sunlight]:opacity-scrim-light",
+);
+
+export function useOverlayOpen({ open, defaultOpen, onOpenChange, trigger }: OverlayControl) {
+  return useControllable(open, defaultOpen ?? trigger === undefined, onOpenChange);
+}

package/src/Overlays/Overlays.tsx

@@ -0,0 +1,20 @@
+export {
+  type OverlayControl,
+  type DialogProps,
+  type DrawerProps,
+  type SidePeekProps,
+  type ShortcutSheetProps,
+  type PopoverProps,
+  type HoverCardProps,
+  type TooltipProps,
+} from "./Overlays.types.ts";
+export { panelClass } from "./panelClass.tsx";
+export { popoverPanelClass } from "./popoverPanelClass.tsx";
+export { Dialog } from "./Dialog.tsx";
+export { Drawer } from "./Drawer.tsx";
+export { PropertyList } from "./PropertyList.tsx";
+export { SidePeek } from "./SidePeek.tsx";
+export { ShortcutSheet } from "./ShortcutSheet.tsx";
+export { Popover } from "./Popover.tsx";
+export { HoverCard } from "./HoverCard.tsx";
+export { Tooltip } from "./Tooltip.tsx";

package/src/Overlays/Overlays.types.ts

@@ -0,0 +1,66 @@
+import { type ReactElement, type ReactNode } from "react";
+import type {
+  DialogProps as ReferenceDialogProps,
+  DrawerProps as ReferenceDrawerProps,
+  HoverCardProps as ReferenceHoverCardProps,
+  PopoverProps as ReferencePopoverProps,
+  ShortcutSheetProps as ReferenceShortcutSheetProps,
+  SidePeekProps as ReferenceSidePeekProps,
+  TooltipProps as ReferenceTooltipProps,
+} from "../types/reference";
+
+/** Open state shared by every overlay: controlled with `open`, or mounted open unless a `trigger` opens it. */
+export interface OverlayControl {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** The element that opens the overlay. Without one, the overlay renders open while mounted. */
+  trigger?: ReactElement;
+}
+
+export type DialogProps = ReferenceDialogProps &
+  OverlayControl & {
+    /** One sentence under the title, announced with it. */
+    description?: ReactNode;
+  };
+
+export type DrawerProps = ReferenceDrawerProps &
+  OverlayControl & {
+    /**
+     * Makes the drawer a region for the shell's shortcuts of that scope (data-shortcut-scope,
+     * lib/shortcut-targets.ts), as a record's side peek is for `record`.
+     */
+    shortcutScope?: "record" | "view";
+    /**
+     * Opens at the side peek's maximum width, within the viewport, for a body that holds two columns from lg up.
+     * A default drawer's 400 px holds one.
+     */
+    wide?: boolean;
+  };
+
+export type SidePeekProps = ReferenceSidePeekProps &
+  OverlayControl & {
+    onOpenFull?: () => void;
+    onCopyLink?: () => void;
+    /** Opens the state menu from the state chip. */
+    onStateClick?: () => void;
+  };
+
+export type ShortcutSheetProps = ReferenceShortcutSheetProps & OverlayControl;
+
+export type PopoverProps = ReferencePopoverProps &
+  Omit<OverlayControl, "defaultOpen"> & { defaultOpen?: boolean };
+
+export type HoverCardProps = ReferenceHoverCardProps & {
+  /** The record key or link the card previews; without it the card renders on its own. */
+  children?: ReactElement;
+  openDelay?: number;
+};
+
+export type TooltipProps = ReferenceTooltipProps & {
+  /** The control the tooltip describes; without it the bubble renders on its own. */
+  children?: ReactElement;
+  side?: "top" | "right" | "bottom" | "left";
+  /** Hover delay in milliseconds; 500 by default. */
+  delay?: number;
+};

package/src/Overlays/Popover.tsx

@@ -0,0 +1,70 @@
+import { type ReactElement } from "react";
+import { Popover as RPopover } from "radix-ui";
+import type { PopoverProps as ReferencePopoverProps } from "../types/reference";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Icon } from "../Icon/Icon.tsx";
+import { linkClass } from "../Link/Link.tsx";
+import { type PopoverProps } from "./Overlays.types.ts";
+import { popoverPanelClass } from "./popoverPanelClass.tsx";
+
+function PopoverBody({ title, children, learnMore }: ReferencePopoverProps) {
+  const t = useT();
+  return (
+    <>
+      {title ? <strong className="font-semibold">{title}</strong> : null}
+      <div className="text-text-secondary">{children}</div>
+      {learnMore ? (
+        <a className={linkClass} href={learnMore}>
+          {t("help.learnMore")}
+          <Icon name="ArrowUpRight" size={12} />
+        </a>
+      ) : null}
+    </>
+  );
+}
+
+const popoverClass = cx(popoverPanelClass, "flex flex-col gap-8 p-12 w-(--ui-popover) z-popover");
+
+/** More than one sentence of help, with a Learn more link. Esc and outside clicks close it. */
+export function Popover({
+  title,
+  children,
+  learnMore,
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+}: PopoverProps): ReactElement {
+  const body = (
+    <PopoverBody {...(title ? { title } : {})} {...(learnMore ? { learnMore } : {})}>
+      {children}
+    </PopoverBody>
+  );
+  if (trigger === undefined) {
+    return (
+      <div role="group" aria-label={title} className={popoverClass}>
+        {body}
+      </div>
+    );
+  }
+  return (
+    <RPopover.Root
+      {...(open === undefined ? {} : { open })}
+      {...(defaultOpen === undefined ? {} : { defaultOpen })}
+      {...(onOpenChange ? { onOpenChange } : {})}
+    >
+      <RPopover.Trigger asChild>{trigger}</RPopover.Trigger>
+      <RPopover.Portal>
+        <RPopover.Content
+          sideOffset={4}
+          collisionPadding={16}
+          aria-label={title}
+          className={popoverClass}
+        >
+          {body}
+        </RPopover.Content>
+      </RPopover.Portal>
+    </RPopover.Root>
+  );
+}

package/src/Overlays/PropertyList.tsx

@@ -0,0 +1,19 @@
+import { type ReactElement, type ReactNode } from "react";
+
+/** Label and value pairs in the record property column. */
+export function PropertyList({
+  items,
+}: {
+  items: { label: string; value: ReactNode }[];
+}): ReactElement {
+  return (
+    <dl className="grid grid-cols-[var(--ui-props-label)_1fr] max-sm:grid-cols-1 items-center gap-x-16 gap-y-8 m-0">
+      {items.map((p) => (
+        <div key={p.label} className="contents">
+          <dt className="text-text-12 text-text-secondary">{p.label}</dt>
+          <dd className="m-0">{p.value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

package/src/Overlays/ShortcutSheet.tsx

@@ -0,0 +1,62 @@
+import { type ReactElement } from "react";
+import { Dialog as RDialog } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { useReturnFocus } from "../lib/hooks.ts";
+import { IconButton } from "../Button/Button.tsx";
+import { Keys } from "../Kbd/Kbd.tsx";
+import { scrimClass, useOverlayOpen } from "./Overlays.shared.tsx";
+import { type ShortcutSheetProps } from "./Overlays.types.ts";
+import { panelClass } from "./panelClass.tsx";
+
+/** Every shortcut by group; `?` opens it (bind with useHotkey). */
+export function ShortcutSheet({ title, groups, ...control }: ShortcutSheetProps): ReactElement {
+  const t = useT();
+  const [isOpen, setOpen] = useOverlayOpen(control);
+  const returnFocus = useReturnFocus(isOpen);
+  return (
+    <RDialog.Root open={isOpen} onOpenChange={setOpen}>
+      {control.trigger ? <RDialog.Trigger asChild>{control.trigger}</RDialog.Trigger> : null}
+      <RDialog.Portal>
+        <RDialog.Overlay className={scrimClass} />
+        <div className="pointer-events-none fixed inset-0 z-dialog grid grid-rows-1 place-items-center p-16">
+          <RDialog.Content
+            onCloseAutoFocus={returnFocus}
+            aria-describedby={undefined}
+            className={cx(
+              panelClass,
+              "xos-anim-dialog pointer-events-auto w-(--ui-sheet) max-h-full overflow-y-auto",
+            )}
+          >
+            <header className="flex items-center justify-between px-20 pt-20">
+              <RDialog.Title className="m-0 text-heading-16 font-semibold">
+                {title ?? t("shortcuts.title")}
+              </RDialog.Title>
+              <RDialog.Close asChild>
+                <IconButton icon="X" label={t("action.close")} shortcut={t("key.esc")} />
+              </RDialog.Close>
+            </header>
+            <div className="grid grid-cols-2 max-md:grid-cols-1 gap-x-32 gap-y-16 px-20 pt-8 pb-20">
+              {groups.map((g) => (
+                <section key={g.label}>
+                  <h3 className="m-0 mb-6 text-text-11 font-medium text-text-secondary">
+                    {g.label}
+                  </h3>
+                  {g.items.map((item) => (
+                    <div
+                      key={item.label}
+                      className="flex items-center justify-between min-h-control-md"
+                    >
+                      <span>{item.label}</span>
+                      <Keys keys={item.keys} />
+                    </div>
+                  ))}
+                </section>
+              ))}
+            </div>
+          </RDialog.Content>
+        </div>
+      </RDialog.Portal>
+    </RDialog.Root>
+  );
+}

package/src/Overlays/SidePeek.tsx

@@ -0,0 +1,117 @@
+import { useState, type CSSProperties, type KeyboardEvent, type ReactElement } from "react";
+import { Dialog as RDialog } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { useReturnFocus } from "../lib/hooks.ts";
+import { IconButton } from "../Button/Button.tsx";
+import { RecordKindGlyph } from "../Glyphs/Glyphs.tsx";
+import { StateChip } from "../Chips/Chips.tsx";
+import { useOverlayOpen } from "./Overlays.shared.tsx";
+import { type SidePeekProps } from "./Overlays.types.ts";
+import { PropertyList } from "./PropertyList.tsx";
+import { panelClass } from "./panelClass.tsx";
+
+/**
+ * Opens a record beside the list with the one record anatomy. Non-modal: the list stays usable, Esc
+ * closes and the width resizes from 440 to 960 px with the handle or arrow keys. The panel is a record
+ * region for the shell's record shortcuts (data-shortcut-scope, lib/shortcut-targets.ts): Open full,
+ * Copy link and a clickable state carry their shortcut ids, and so can controls in `children`.
+ */
+export function SidePeek({
+  recordKey,
+  kind,
+  title,
+  state,
+  stateLabel,
+  chips,
+  properties,
+  children,
+  onOpenFull,
+  onCopyLink,
+  onStateClick,
+  ...control
+}: SidePeekProps): ReactElement {
+  const t = useT();
+  const [isOpen, setOpen] = useOverlayOpen(control);
+  const returnFocus = useReturnFocus(isOpen);
+  const [width, setWidth] = useState(560);
+  const resize = (e: KeyboardEvent<HTMLDivElement>) => {
+    const step = e.key === "ArrowLeft" ? 16 : e.key === "ArrowRight" ? -16 : 0;
+    if (step !== 0) {
+      e.preventDefault();
+      setWidth((w) => Math.min(960, Math.max(440, w + step)));
+    }
+  };
+  return (
+    <RDialog.Root open={isOpen} onOpenChange={setOpen} modal={false}>
+      {control.trigger ? <RDialog.Trigger asChild>{control.trigger}</RDialog.Trigger> : null}
+      <RDialog.Portal>
+        <RDialog.Content
+          aria-describedby={undefined}
+          data-shortcut-scope="record"
+          onInteractOutside={(e) => e.preventDefault()}
+          onCloseAutoFocus={returnFocus}
+          className={cx(
+            panelClass,
+            "xos-anim-peek fixed inset-y-0 end-0 z-peek flex flex-col rounded-none overflow-y-auto",
+            "w-(--xos-peek-width) max-w-full max-md:w-full",
+          )}
+          style={
+            { "--xos-peek-width": `calc(var(--layout-peek) * ${width / 560})` } as CSSProperties
+          }
+        >
+          <div
+            role="separator"
+            aria-orientation="vertical"
+            aria-label={t("panel.resize")}
+            aria-valuenow={width}
+            aria-valuemin={440}
+            aria-valuemax={960}
+            tabIndex={0}
+            onKeyDown={resize}
+            className="absolute inset-y-0 start-0 w-(--ui-handle) cursor-col-resize hover:bg-accent focus-visible:bg-accent max-md:hidden"
+          />
+          <header className="flex items-center justify-between py-8 ps-20 pe-12 border-b border-border-subtle">
+            <span className="flex items-center gap-6 text-text-secondary">
+              <RecordKindGlyph kind={kind} size={14} />
+              <span>{kind}</span>
+              <span className="font-mono text-text-12">{recordKey}</span>
+            </span>
+            <span className="flex items-center gap-2">
+              <IconButton
+                icon="Maximize2"
+                label={t("peek.openFull")}
+                onClick={onOpenFull}
+                data-shortcut="record.open"
+              />
+              <IconButton
+                icon="Link2"
+                label={t("action.copyLink")}
+                onClick={onCopyLink}
+                data-shortcut="record.copy-link"
+              />
+              <RDialog.Close asChild>
+                <IconButton icon="X" label={t("action.close")} shortcut={t("key.esc")} />
+              </RDialog.Close>
+            </span>
+          </header>
+          <div className="flex flex-col gap-16 p-20">
+            <RDialog.Title className="m-0 text-heading-20 font-semibold">{title}</RDialog.Title>
+            <div className="flex flex-wrap items-center gap-8">
+              <span data-shortcut={onStateClick ? "record.state" : undefined} className="contents">
+                <StateChip
+                  state={state}
+                  label={stateLabel}
+                  {...(onStateClick ? { onClick: onStateClick } : {})}
+                />
+              </span>
+              {chips}
+            </div>
+            {properties ? <PropertyList items={properties} /> : null}
+            {children}
+          </div>
+        </RDialog.Content>
+      </RDialog.Portal>
+    </RDialog.Root>
+  );
+}

package/src/Overlays/Tooltip.tsx

@@ -0,0 +1,73 @@
+import { useRef, useState, type ReactElement } from "react";
+import { Tooltip as RTooltip } from "radix-ui";
+import { cx } from "../lib/cx.ts";
+import { useT } from "../lib/context.tsx";
+import { Keys } from "../Kbd/Kbd.tsx";
+import { type TooltipProps } from "./Overlays.types.ts";
+
+const tooltipClass = cx(
+  "xos-anim-pop inline-flex items-center gap-6 px-8 py-4 rounded-control bg-bg-raised text-text-primary",
+  "text-text-12 shadow-menu z-tooltip forced-colors:border",
+);
+
+/**
+ * A control's label and shortcut after 500 ms of hover, on focus, or on a 500 ms long press. Never
+ * holds interactive content.
+ */
+export function Tooltip({
+  label,
+  shortcut,
+  children,
+  side = "top",
+  delay = 500,
+}: TooltipProps): ReactElement {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const press = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const content = (
+    <>
+      <span>{label}</span>
+      {shortcut ? <Keys keys={shortcut} /> : null}
+    </>
+  );
+  if (children === undefined) {
+    return (
+      <span role="tooltip" className={tooltipClass}>
+        {content}
+      </span>
+    );
+  }
+  const endPress = () => {
+    if (press.current !== null) clearTimeout(press.current);
+    press.current = null;
+  };
+  return (
+    <RTooltip.Provider delayDuration={delay}>
+      <RTooltip.Root open={open} onOpenChange={setOpen}>
+        <RTooltip.Trigger
+          asChild
+          onPointerDown={(e) => {
+            if (e.pointerType !== "touch") return;
+            endPress();
+            press.current = setTimeout(() => setOpen(true), delay);
+          }}
+          onPointerUp={endPress}
+          onPointerCancel={endPress}
+        >
+          {children}
+        </RTooltip.Trigger>
+        <RTooltip.Portal>
+          <RTooltip.Content
+            side={side}
+            sideOffset={6}
+            collisionPadding={16}
+            className={tooltipClass}
+            aria-label={shortcut ? t("tooltip.withShortcut", { label, shortcut }) : label}
+          >
+            {content}
+          </RTooltip.Content>
+        </RTooltip.Portal>
+      </RTooltip.Root>
+    </RTooltip.Provider>
+  );
+}

package/src/Overlays/panelClass.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../lib/cx.ts";
+
+export const panelClass = cx(
+  "bg-bg-raised text-text-primary shadow-dialog rounded-dialog box-border max-w-full",
+  "forced-colors:border-[CanvasText] forced-colors:border print:shadow-none",
+);

package/src/Overlays/popoverPanelClass.tsx

@@ -0,0 +1,6 @@
+import { cx } from "../lib/cx.ts";
+
+export const popoverPanelClass = cx(
+  "xos-anim-pop bg-bg-raised text-text-primary shadow-menu rounded-card box-border",
+  "max-w-[calc(100vw-var(--space-32))] forced-colors:border",
+);

package/src/PageHeader/README.md

@@ -0,0 +1,3 @@
+# PageHeader
+
+PageHeader carries title, count, view switcher and the one primary action of the Collection template.

package/src/Pagination/README.md

@@ -0,0 +1,3 @@
+# Pagination
+
+Pagination moves through cursor-paged results; it never shows page numbers it cannot jump to.

package/src/PaymentTracker/README.md

@@ -0,0 +1,3 @@
+# PaymentTracker
+
+PaymentTracker follows a payment like a package: Submitted, Approved, Scheduled, Paid, with dates and the expected next date.

package/src/PayoutDetailsForm/README.md

@@ -0,0 +1,3 @@
+# PayoutDetailsForm
+
+PayoutDetailsForm collects bank details in a secure form; after saving only the last four digits are ever shown.

package/src/PersonaSwitcher/README.md

@@ -0,0 +1,7 @@
+# PersonaSwitcher
+
+PersonaSwitcher routes each audience to its own proof with a tab per role.
+
+Every panel is rendered, so each audience's copy is in the document for search and answer engines; only the selected panel is shown. Left, Right, Home and End move between tabs, and the direction follows `dir`. The selected tab is kept in the URL hash (`#for-finance`), which makes each audience linkable from an ad or an email. Tabs scroll sideways below bp-sm.
+
+The consumer provides the personas: a label, a headline, one paragraph, up to four points and one primary and one secondary call to action. Set `hash={false}` inside a sandboxed frame.

package/src/PhaseChip/README.md

@@ -0,0 +1,5 @@
+# PhaseChip
+
+PhaseChip reads Gate N followed by the phase name, never the bare code.
+
+- The phase code is available in the tooltip and hover card.

package/src/PhaseGlyph/README.md

@@ -0,0 +1,17 @@
+# PhaseGlyph
+
+PhaseGlyph draws the Lucide icon assigned to each of the nine gated phases.
+
+| Gate | Code | Phase   | Lucide icon    |
+| ---- | ---- | ------- | -------------- |
+| 1    | SCP  | Scope   | Crosshair      |
+| 2    | ENG  | Engage  | Handshake      |
+| 3    | ADV  | Advance | ClipboardCheck |
+| 4    | PRC  | Procure | ShoppingCart   |
+| 5    | BLD  | Build   | Hammer         |
+| 6    | INS  | Install | Wrench         |
+| 7    | OPR  | Operate | Play           |
+| 8    | AMP  | Amplify | Share2         |
+| 9    | CLS  | Close   | Archive        |
+
+Exported as `XOS.glyphs.phases`.

package/src/PhotoCapture/README.md

@@ -0,0 +1,3 @@
+# PhotoCapture
+
+PhotoCapture takes photos with annotation and low-bandwidth compression for tasks, incidents and inspections.