@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/ToggleMatrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleMatrix.js","sources":["../../src/components/ToggleMatrix.tsx"],"sourcesContent":["import { Fragment, useMemo, type ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { groupInOrder } from \"../lib/group-in-order\";\nimport { Badge } from \"./Badge\";\nimport { Checkbox } from \"./Choice\";\nimport { Icon } from \"./Icon\";\nimport { Tooltip } from \"./Popover\";\nimport { Spinner } from \"./Spinner\";\n\n/* ============================================================================\n   TOGGLE MATRIX (DX-4963) - rows down the side, columns across the top, one on/off cell where they cross.\n\n   THE ONE GRID BEHIND `RolePermissionMatrix` (permissions x roles) AND ANY \"what applies to what\" screen, such as a connection's\n   \"What syncs\" (card fields x the two directions). It knows rows, columns and cells - nothing about what they are. `RolePermissionMatrix`\n   is an adapter that maps roles and permissions onto it, so both screens share one implementation and the roles screen reads as it\n   always did.\n\n   A CELL IS ONE OF THREE THINGS, supplied by the `cell` function (the matrix holds no state: it draws what it is given and reports\n   what the person asks for, the way `RolePermissionMatrix` always has):\n     - `on` / `off`: a check or a dash. Editable, it is a real checkbox button; read-only, a sentence for a screen reader plus the glyph.\n       `busy` shows a spinner and refuses the press while that one cell is being saved.\n     - `unavailable` with a `reason`: this pair cannot be switched at all. The reason is printed IN the cell, under a muted badge, so it is\n       read on a phone and by a keyboard without a hover; nothing hides it in a tooltip.\n\n   A WHOLE COLUMN can be set from its header (`onColumnChange`): a tri-state checkbox above the label, checked when every switchable\n   cell is on, mixed when some are. It hands the consumer the rows that must change, so the consumer saves exactly those.\n\n   READ-ONLY (`readOnly`) draws no controls anywhere. A column with a `lockedReason` is read-only on its own even in an editable matrix, and\n   its header carries a lock named by that reason. DXUI-29: so is a ROW with a `lockedReason` (its label carries the lock), and a column's\n   header checkbox never sets a locked row. A cell is editable only when the matrix is, and neither its row nor its column is locked.\n\n   HAND-BUILT TABLE, NOT `DataTable`, for the reason the roles matrix always was: a group-header row spanning every column mid-body is not a\n   shape `ColumnDef` expresses, and sorting makes no sense over a fixed grid. The visual language (sticky opaque header, hairlines only) is\n   `Table.tsx`'s own.\n   ========================================================================= */\n\nexport interface ToggleMatrixRow {\n  id: string;\n  label: string;\n  /** More about the row. Printed under the label by default, or in a tooltip on it with `rowDescription=\"tooltip\"`. */\n  description?: string;\n  /** A heading the row sits under. Headings appear only when at least one row names one; rows with none then sit under \"Other\". */\n  group?: string;\n  /** DXUI-29 - present: the row cannot be edited (a lock appears beside its label in an editable matrix, named by this text). */\n  lockedReason?: string;\n}\n\nexport interface ToggleMatrixColumn {\n  id: string;\n  label: string;\n  /** Present: the column cannot be edited (a lock appears in the header of an editable matrix, named by this text). */\n  lockedReason?: string;\n}\n\nexport type ToggleMatrixCell =\n  | { state: \"on\" | \"off\"; /** This one cell is being saved: a spinner, and the press is refused. */ busy?: boolean }\n  | { state: \"unavailable\"; /** Why this pair cannot be switched. Printed in the cell. */ reason: string };\n\nexport interface ToggleMatrixProps {\n  /** Screen-reader caption: what the grid is. */\n  caption: string;\n  /** Header of the row-label column. */\n  rowHeader: string;\n  rows: readonly ToggleMatrixRow[];\n  columns: readonly ToggleMatrixColumn[];\n  /** The state of the cell where a row and a column cross. */\n  cell: (rowId: string, columnId: string) => ToggleMatrixCell;\n  /** Draws no control anywhere. Default `false`. */\n  readOnly?: boolean;\n  /** A cell was pressed; `next` is the NEW value to save. */\n  onChange?: (rowId: string, columnId: string, next: boolean) => void;\n  /** Turns on the header checkbox that sets a whole column. `rowIds` are the switchable rows whose value differs from `next`. */\n  onColumnChange?: (columnId: string, next: boolean, rowIds: string[]) => void;\n  /** `inline` (default) prints a row's description under its label; `tooltip` keeps the label alone and shows it on hover or focus. */\n  rowDescription?: \"inline\" | \"tooltip\";\n  /** Tighter cell padding and wrapping column headers, for a phone or a grid of few columns. Default `false`. */\n  dense?: boolean;\n  /** The sentence a screen reader gets for a cell. Default: \"<column>: <row> on|off\". */\n  cellLabel?: (row: ToggleMatrixRow, column: ToggleMatrixColumn, on: boolean) => string;\n  /** Heading for rows with no `group` when others have one. Default: the catalog's \"Other\". */\n  otherGroupLabel?: string;\n  /** Names the header checkbox of a column. Default: the catalog's \"Set every switch in <column>\". */\n  columnSetLabel?: (column: ToggleMatrixColumn) => string;\n  className?: string;\n}\n\nexport function ToggleMatrix({\n  caption,\n  rowHeader,\n  rows,\n  columns,\n  cell,\n  readOnly = false,\n  onChange,\n  onColumnChange,\n  // I18N-ALLOW: a prop value naming a layout, never user text\n  rowDescription = \"inline\",\n  dense = false,\n  cellLabel,\n  otherGroupLabel,\n  columnSetLabel,\n  className,\n}: ToggleMatrixProps) {\n  const strings = useUiStrings().toggleMatrix;\n  const sections = useMemo(() => groupInOrder(rows, (row) => row.group, otherGroupLabel ?? strings.otherGroup), [rows, otherGroupLabel, strings.otherGroup]);\n  const columnCount = columns.length + 1;\n  const pad = dense ? \"px-2 sm:px-4\" : \"px-5\";\n  const sentence = cellLabel ?? ((row: ToggleMatrixRow, column: ToggleMatrixColumn, on: boolean) => strings.cell(column.label, row.label, on));\n\n  /* `relative` ON THE SCROLLER is the clipping, not decoration: an absolutely positioned `sr-only` span is clipped against the nearest\n     POSITIONED ancestor, so an unpositioned scroller lets every cell's sentence reach the document and widen the page on a phone.\n     `scripts/probe-containment.mjs` measures the class. */\n  return (\n    <div className={cn(\"relative w-full min-w-0 overflow-auto overscroll-x-contain rounded-xl border border-border bg-surface shadow-sm\", className)}>\n      <table className=\"w-full border-collapse text-left\">\n        <caption className=\"sr-only\">{caption}</caption>\n        <thead className=\"sticky top-0 z-10\">\n          <tr>\n            <th\n              scope=\"col\"\n              className={cn(\"h-12 border-b border-border bg-surface-raised text-2xs font-semibold tracking-widest text-tertiary uppercase\", dense ? \"px-3 sm:px-5\" : \"px-5 whitespace-nowrap\")}\n            >\n              {rowHeader}\n            </th>\n            {columns.map((column) => {\n              const locked = column.lockedReason !== undefined;\n              // DXUI-29: a locked row is not the column checkbox's to set.\n              const switchable = rows.filter((row) => row.lockedReason === undefined && cell(row.id, column.id).state !== \"unavailable\");\n              const onRows = switchable.filter((row) => cell(row.id, column.id).state === \"on\");\n              const anyBusy = switchable.some((row) => {\n                const c = cell(row.id, column.id);\n                return c.state !== \"unavailable\" && c.busy === true;\n              });\n              const setting = onColumnChange !== undefined && !readOnly && !locked;\n              return (\n                <th\n                  key={column.id}\n                  scope=\"col\"\n                  className={cn(\n                    \"border-b border-border bg-surface-raised text-center align-middle text-2xs font-semibold tracking-widest text-tertiary uppercase\",\n                    dense ? \"min-w-20 px-2 py-2 sm:px-4\" : \"h-12 min-w-24 px-5 whitespace-nowrap\",\n                  )}\n                >\n                  <span className=\"inline-flex flex-col items-center gap-1\">\n                    {setting && (\n                      /* Above its label, so a column stays narrow and the box and the words stay centred on the cells below them. */\n                      <Checkbox\n                        data-testid={`toggle-matrix-column-${column.id}`}\n                        aria-label={(columnSetLabel ?? ((c) => strings.setColumn(c.label)))(column)}\n                        checked={switchable.length > 0 && onRows.length === switchable.length}\n                        indeterminate={onRows.length > 0 && onRows.length < switchable.length}\n                        disabled={switchable.length === 0 || anyBusy}\n                        onCheckedChange={(next) =>\n                          onColumnChange(\n                            column.id,\n                            next === true,\n                            switchable.filter((row) => (cell(row.id, column.id).state === \"on\") !== (next === true)).map((row) => row.id),\n                          )\n                        }\n                      />\n                    )}\n                    <span className={cn(\"inline-flex items-center gap-1\", dense && \"whitespace-normal break-words\")}>\n                      {column.label}\n                      {/* The lock is shown only in an EDITABLE matrix: in a read-only one every column is equally inert, so a padlock\n                          would say nothing a viewer does not already know. Editable, it explains why this column does not respond. */}\n                      {!readOnly && locked && <Icon name=\"lock\" size=\"xs\" className=\"text-tertiary\" label={column.lockedReason} />}\n                    </span>\n                  </span>\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {sections.map((section, sectionIndex) => (\n            <Fragment key={section.label ?? `__section-${sectionIndex}`}>\n              {section.label && (\n                <tr>\n                  {/* `scope=\"colgroup\"` with `colSpan` announces this row as a heading for every column it spans. */}\n                  <th\n                    scope=\"colgroup\"\n                    colSpan={columnCount}\n                    className={cn(\"border-b border-border-subtle bg-surface-sunken py-2 text-left text-2xs font-semibold tracking-widest text-tertiary uppercase\", dense ? \"px-3 sm:px-5\" : \"px-5\")}\n                  >\n                    {section.label}\n                  </th>\n                </tr>\n              )}\n              {section.items.map((row) => (\n                <tr key={row.id} className=\"border-b border-border-subtle last:border-b-0\">\n                  <th scope=\"row\" className={cn(\"py-3 text-left align-middle text-sm font-normal text-primary\", dense ? \"px-3 sm:px-5\" : \"px-5\")}>\n                    <span className=\"inline-flex items-center gap-1\">\n                      <RowLabel row={row} description={rowDescription} />\n                      {/* DXUI-29: like a column's lock, shown only in an editable matrix, where it explains why this row does not respond. */}\n                      {!readOnly && row.lockedReason !== undefined && <Icon name=\"lock\" size=\"xs\" className=\"text-tertiary\" label={row.lockedReason} />}\n                    </span>\n                  </th>\n                  {columns.map((column) => (\n                    <td key={column.id} className={cn(\"py-3 text-center align-middle\", pad)}>\n                      <MatrixCell\n                        row={row}\n                        column={column}\n                        state={cell(row.id, column.id)}\n                        editable={!readOnly && column.lockedReason === undefined && row.lockedReason === undefined}\n                        sentence={sentence}\n                        onChange={onChange}\n                      />\n                    </td>\n                  ))}\n                </tr>\n              ))}\n            </Fragment>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction RowLabel({ row, description }: { row: ToggleMatrixRow; description: \"inline\" | \"tooltip\" }): ReactNode {\n  if (row.description === undefined || row.description === \"\") return row.label;\n  if (description === \"tooltip\") {\n    return (\n      <Tooltip content={row.description}>\n        <span tabIndex={0} className=\"cursor-help underline decoration-dotted decoration-border-strong underline-offset-4 outline-none\">\n          {row.label}\n        </span>\n      </Tooltip>\n    );\n  }\n  return (\n    <span className=\"flex flex-col gap-0.5\">\n      <span>{row.label}</span>\n      <span className=\"text-xs font-normal text-tertiary\">{row.description}</span>\n    </span>\n  );\n}\n\nfunction MatrixCell({\n  row,\n  column,\n  state,\n  editable,\n  sentence,\n  onChange,\n}: {\n  row: ToggleMatrixRow;\n  column: ToggleMatrixColumn;\n  state: ToggleMatrixCell;\n  editable: boolean;\n  sentence: (row: ToggleMatrixRow, column: ToggleMatrixColumn, on: boolean) => string;\n  onChange?: (rowId: string, columnId: string, next: boolean) => void;\n}) {\n  const strings = useUiStrings().toggleMatrix;\n  const testId = `toggle-matrix-${row.id}-${column.id}`;\n\n  if (state.state === \"unavailable\") {\n    /* The reason is TEXT IN THE CELL, never a tooltip alone: a phone has no hover and a keyboard user would have to find the badge first. */\n    return (\n      <div data-testid={testId} data-state=\"unavailable\" className=\"mx-auto flex max-w-40 flex-col items-center gap-1\">\n        <Badge size=\"sm\" tone=\"muted\">\n          {strings.unavailable}\n        </Badge>\n        <span className=\"text-2xs leading-snug font-normal tracking-normal text-tertiary normal-case\">{state.reason}</span>\n      </div>\n    );\n  }\n\n  const on = state.state === \"on\";\n  const label = sentence(row, column, on);\n  const glyph = on ? (\n    <Icon name=\"check\" size=\"sm\" className=\"mx-auto text-control\" />\n  ) : (\n    <span aria-hidden className=\"mx-auto block text-tertiary\">\n      —\n    </span>\n  );\n\n  if (!editable) {\n    return (\n      <span data-testid={testId} data-state={state.state}>\n        {/* The glyph is decorative; this sentence names both the column and the row, so the cell means something read on its own. */}\n        <span className=\"sr-only\">{label}</span>\n        {glyph}\n      </span>\n    );\n  }\n\n  const busy = state.busy === true;\n  return (\n    <button\n      type=\"button\"\n      role=\"checkbox\"\n      aria-checked={on}\n      aria-label={label}\n      aria-busy={busy || undefined}\n      disabled={busy}\n      data-testid={testId}\n      data-state={state.state}\n      onClick={() => onChange?.(row.id, column.id, !on)}\n      className=\"dx-tap mx-auto flex size-7 items-center justify-center rounded-md transition-[var(--tx-colors)] duration-(--dur-fast) hover:bg-surface-hover focus-visible:shadow-[0_0_0_3px_var(--control-focus-halo)] disabled:cursor-progress\"\n    >\n      {busy ? <Spinner size=\"xs\" label={strings.busy} /> : on ? <Icon name=\"check\" size=\"sm\" className=\"text-control\" /> : (\n        <span aria-hidden className=\"block text-tertiary\">\n          —\n        </span>\n      )}\n    </button>\n  );\n}\n"],"names":["ToggleMatrix","caption","rowHeader","rows","columns","cell","readOnly","onChange","onColumnChange","rowDescription","dense","cellLabel","otherGroupLabel","columnSetLabel","className","strings","useUiStrings","sections","useMemo","groupInOrder","row","columnCount","pad","sentence","column","on","jsx","cn","jsxs","locked","switchable","onRows","anyBusy","c","setting","Checkbox","next","Icon","section","sectionIndex","Fragment","RowLabel","MatrixCell","description","Tooltip","state","editable","testId","Badge","label","glyph","busy","Spinner"],"mappings":";;;;;;;;;;AAuFO,SAASA,EAAa;AAAA,EAC3B,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,gBAAAC;AAAA;AAAA,EAEA,gBAAAC,IAAiB;AAAA,EACjB,OAAAC,IAAQ;AAAA,EACR,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AACF,GAAsB;AACpB,QAAMC,IAAUC,IAAe,cACzBC,IAAWC,EAAQ,MAAMC,EAAahB,GAAM,CAACiB,MAAQA,EAAI,OAAOR,KAAmBG,EAAQ,UAAU,GAAG,CAACZ,GAAMS,GAAiBG,EAAQ,UAAU,CAAC,GACnJM,IAAcjB,EAAQ,SAAS,GAC/BkB,IAAMZ,IAAQ,iBAAiB,QAC/Ba,IAAWZ,MAAc,CAACS,GAAsBI,GAA4BC,MAAgBV,EAAQ,KAAKS,EAAO,OAAOJ,EAAI,OAAOK,CAAE;AAK1I,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAG,mHAAmHb,CAAS,GAC7I,UAAA,gBAAAc,EAAC,SAAA,EAAM,WAAU,oCACf,UAAA;AAAA,IAAA,gBAAAF,EAAC,WAAA,EAAQ,WAAU,WAAW,UAAAzB,GAAQ;AAAA,IACtC,gBAAAyB,EAAC,SAAA,EAAM,WAAU,qBACf,4BAAC,MAAA,EACC,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,WAAWC,EAAG,gHAAgHjB,IAAQ,iBAAiB,wBAAwB;AAAA,UAE9K,UAAAR;AAAA,QAAA;AAAA,MAAA;AAAA,MAEFE,EAAQ,IAAI,CAACoB,MAAW;AACvB,cAAMK,IAASL,EAAO,iBAAiB,QAEjCM,IAAa3B,EAAK,OAAO,CAACiB,MAAQA,EAAI,iBAAiB,UAAaf,EAAKe,EAAI,IAAII,EAAO,EAAE,EAAE,UAAU,aAAa,GACnHO,IAASD,EAAW,OAAO,CAACV,MAAQf,EAAKe,EAAI,IAAII,EAAO,EAAE,EAAE,UAAU,IAAI,GAC1EQ,IAAUF,EAAW,KAAK,CAACV,MAAQ;AACvC,gBAAMa,IAAI5B,EAAKe,EAAI,IAAII,EAAO,EAAE;AAChC,iBAAOS,EAAE,UAAU,iBAAiBA,EAAE,SAAS;AAAA,QACjD,CAAC,GACKC,IAAU1B,MAAmB,UAAa,CAACF,KAAY,CAACuB;AAC9D,eACE,gBAAAH;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAM;AAAA,YACN,WAAWC;AAAA,cACT;AAAA,cACAjB,IAAQ,+BAA+B;AAAA,YAAA;AAAA,YAGzC,UAAA,gBAAAkB,EAAC,QAAA,EAAK,WAAU,2CACb,UAAA;AAAA,cAAAM;AAAA,cAEC,gBAAAR;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBACC,eAAa,wBAAwBX,EAAO,EAAE;AAAA,kBAC9C,eAAaX,MAAmB,CAACoB,MAAMlB,EAAQ,UAAUkB,EAAE,KAAK,IAAIT,CAAM;AAAA,kBAC1E,SAASM,EAAW,SAAS,KAAKC,EAAO,WAAWD,EAAW;AAAA,kBAC/D,eAAeC,EAAO,SAAS,KAAKA,EAAO,SAASD,EAAW;AAAA,kBAC/D,UAAUA,EAAW,WAAW,KAAKE;AAAA,kBACrC,iBAAiB,CAACI,MAChB5B;AAAA,oBACEgB,EAAO;AAAA,oBACPY,MAAS;AAAA,oBACTN,EAAW,OAAO,CAACV,MAASf,EAAKe,EAAI,IAAII,EAAO,EAAE,EAAE,UAAU,SAAWY,MAAS,GAAK,EAAE,IAAI,CAAChB,MAAQA,EAAI,EAAE;AAAA,kBAAA;AAAA,gBAC9G;AAAA,cAAA;AAAA,gCAIL,QAAA,EAAK,WAAWO,EAAG,kCAAkCjB,KAAS,+BAA+B,GAC3F,UAAA;AAAA,gBAAAc,EAAO;AAAA,gBAGP,CAAClB,KAAYuB,KAAU,gBAAAH,EAACW,GAAA,EAAK,MAAK,QAAO,MAAK,MAAK,WAAU,iBAAgB,OAAOb,EAAO,aAAA,CAAc;AAAA,cAAA,EAAA,CAC5G;AAAA,YAAA,EAAA,CACF;AAAA,UAAA;AAAA,UA/BKA,EAAO;AAAA,QAAA;AAAA,MAkClB,CAAC;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAE,EAAC,WACE,UAAAT,EAAS,IAAI,CAACqB,GAASC,wBACrBC,GAAA,EACE,UAAA;AAAA,MAAAF,EAAQ,2BACN,MAAA,EAEC,UAAA,gBAAAZ;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,SAASL;AAAA,UACT,WAAWM,EAAG,iIAAiIjB,IAAQ,iBAAiB,MAAM;AAAA,UAE7K,UAAA4B,EAAQ;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,MAEDA,EAAQ,MAAM,IAAI,CAAClB,MAClB,gBAAAQ,EAAC,MAAA,EAAgB,WAAU,iDACzB,UAAA;AAAA,QAAA,gBAAAF,EAAC,MAAA,EAAG,OAAM,OAAM,WAAWC,EAAG,gEAAgEjB,IAAQ,iBAAiB,MAAM,GAC3H,UAAA,gBAAAkB,EAAC,QAAA,EAAK,WAAU,kCACd,UAAA;AAAA,UAAA,gBAAAF,EAACe,GAAA,EAAS,KAAArB,GAAU,aAAaX,EAAA,CAAgB;AAAA,UAEhD,CAACH,KAAYc,EAAI,iBAAiB,UAAa,gBAAAM,EAACW,GAAA,EAAK,MAAK,QAAO,MAAK,MAAK,WAAU,iBAAgB,OAAOjB,EAAI,aAAA,CAAc;AAAA,QAAA,EAAA,CACjI,EAAA,CACF;AAAA,QACChB,EAAQ,IAAI,CAACoB,MACZ,gBAAAE,EAAC,QAAmB,WAAWC,EAAG,iCAAiCL,CAAG,GACpE,UAAA,gBAAAI;AAAA,UAACgB;AAAA,UAAA;AAAA,YACC,KAAAtB;AAAA,YACA,QAAAI;AAAA,YACA,OAAOnB,EAAKe,EAAI,IAAII,EAAO,EAAE;AAAA,YAC7B,UAAU,CAAClB,KAAYkB,EAAO,iBAAiB,UAAaJ,EAAI,iBAAiB;AAAA,YACjF,UAAAG;AAAA,YACA,UAAAhB;AAAA,UAAA;AAAA,QAAA,EACF,GAROiB,EAAO,EAShB,CACD;AAAA,MAAA,EAAA,GAnBMJ,EAAI,EAoBb,CACD;AAAA,IAAA,EAAA,GAnCYkB,EAAQ,SAAS,aAAaC,CAAY,EAoCzD,CACD,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,SAASE,EAAS,EAAE,KAAArB,GAAK,aAAAuB,KAAuF;AAC9G,SAAIvB,EAAI,gBAAgB,UAAaA,EAAI,gBAAgB,KAAWA,EAAI,QACpEuB,MAAgB,YAEhB,gBAAAjB,EAACkB,GAAA,EAAQ,SAASxB,EAAI,aACpB,UAAA,gBAAAM,EAAC,QAAA,EAAK,UAAU,GAAG,WAAU,oGAC1B,UAAAN,EAAI,OACP,GACF,IAIF,gBAAAQ,EAAC,QAAA,EAAK,WAAU,yBACd,UAAA;AAAA,IAAA,gBAAAF,EAAC,QAAA,EAAM,YAAI,MAAA,CAAM;AAAA,IACjB,gBAAAA,EAAC,QAAA,EAAK,WAAU,qCAAqC,YAAI,YAAA,CAAY;AAAA,EAAA,GACvE;AAEJ;AAEA,SAASgB,EAAW;AAAA,EAClB,KAAAtB;AAAA,EACA,QAAAI;AAAA,EACA,OAAAqB;AAAA,EACA,UAAAC;AAAA,EACA,UAAAvB;AAAA,EACA,UAAAhB;AACF,GAOG;AACD,QAAMQ,IAAUC,IAAe,cACzB+B,IAAS,iBAAiB3B,EAAI,EAAE,IAAII,EAAO,EAAE;AAEnD,MAAIqB,EAAM,UAAU;AAElB,6BACG,OAAA,EAAI,eAAaE,GAAQ,cAAW,eAAc,WAAU,qDAC3D,UAAA;AAAA,MAAA,gBAAArB,EAACsB,KAAM,MAAK,MAAK,MAAK,SACnB,YAAQ,aACX;AAAA,MACA,gBAAAtB,EAAC,QAAA,EAAK,WAAU,+EAA+E,YAAM,OAAA,CAAO;AAAA,IAAA,GAC9G;AAIJ,QAAMD,IAAKoB,EAAM,UAAU,MACrBI,IAAQ1B,EAASH,GAAKI,GAAQC,CAAE,GAChCyB,IAAQzB,IACZ,gBAAAC,EAACW,GAAA,EAAK,MAAK,SAAQ,MAAK,MAAK,WAAU,uBAAA,CAAuB,IAE9D,gBAAAX,EAAC,QAAA,EAAK,eAAW,IAAC,WAAU,+BAA8B,UAAA,KAE1D;AAGF,MAAI,CAACoB;AACH,6BACG,QAAA,EAAK,eAAaC,GAAQ,cAAYF,EAAM,OAE3C,UAAA;AAAA,MAAA,gBAAAnB,EAAC,QAAA,EAAK,WAAU,WAAW,UAAAuB,GAAM;AAAA,MAChCC;AAAA,IAAA,GACH;AAIJ,QAAMC,IAAON,EAAM,SAAS;AAC5B,SACE,gBAAAnB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,gBAAcD;AAAA,MACd,cAAYwB;AAAA,MACZ,aAAWE,KAAQ;AAAA,MACnB,UAAUA;AAAA,MACV,eAAaJ;AAAA,MACb,cAAYF,EAAM;AAAA,MAClB,SAAS,MAAMtC,IAAWa,EAAI,IAAII,EAAO,IAAI,CAACC,CAAE;AAAA,MAChD,WAAU;AAAA,MAET,UAAA0B,IAAO,gBAAAzB,EAAC0B,GAAA,EAAQ,MAAK,MAAK,OAAOrC,EAAQ,KAAA,CAAM,IAAKU,IAAK,gBAAAC,EAACW,GAAA,EAAK,MAAK,SAAQ,MAAK,MAAK,WAAU,eAAA,CAAe,IAC9G,gBAAAX,EAAC,QAAA,EAAK,eAAW,IAAC,WAAU,uBAAsB,UAAA,IAAA,CAElD;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/Tree.js

@@ -0,0 +1,125 @@
+import { jsx as c, jsxs as D } from "react/jsx-runtime";
+import { useState as N } from "react";
+import { cn as p } from "../lib/cn.js";
+import { Icon as b } from "./Icon.js";
+import { useUiStrings as S } from "../lib/i18n/provider.js";
+function q({ nodes: g, defaultExpanded: v = [], selectedId: h, onSelect: u, className: k }) {
+  const f = S().tree, [m, w] = N(new Set(v)), i = [], x = (e, r) => {
+    for (const t of e)
+      i.push({ node: t, depth: r }), t.children?.length && m.has(t.id) && x(t.children, r + 1);
+  };
+  x(g, 0);
+  function l(e) {
+    w((r) => {
+      const t = new Set(r);
+      return t.has(e) ? t.delete(e) : t.add(e), t;
+    });
+  }
+  function d(e) {
+    const r = Math.max(0, Math.min(i.length - 1, e)), t = i[r]?.node.id;
+    t && queueMicrotask(
+      () => document.querySelector(`[data-tree-node="${CSS.escape(t)}"]`)?.focus()
+    );
+  }
+  function y(e, r, t) {
+    const s = !!t.children?.length, n = m.has(t.id);
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), d(r + 1);
+        break;
+      case "ArrowUp":
+        e.preventDefault(), d(r - 1);
+        break;
+      case "ArrowRight":
+        e.preventDefault(), s && !n ? l(t.id) : s && d(r + 1);
+        break;
+      case "ArrowLeft":
+        if (e.preventDefault(), s && n) l(t.id);
+        else {
+          const o = i[r].depth;
+          for (let a = r - 1; a >= 0; a--)
+            if (i[a].depth < o) {
+              d(a);
+              break;
+            }
+        }
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), s && l(t.id), u?.(t);
+        break;
+    }
+  }
+  return /* @__PURE__ */ c("div", { role: "tree", className: p("flex min-w-0 flex-col", k), children: i.map(({ node: e, depth: r }, t) => {
+    const s = !!e.children?.length, n = m.has(e.id), o = e.id === h;
+    return /* @__PURE__ */ D(
+      "div",
+      {
+        role: "treeitem",
+        "aria-expanded": s ? n : void 0,
+        "aria-selected": o,
+        "aria-level": r + 1,
+        "aria-disabled": e.disabled || void 0,
+        "data-tree-node": e.id,
+        tabIndex: o || !h && t === 0 ? 0 : -1,
+        onKeyDown: (a) => y(a, t, e),
+        onClick: () => !e.disabled && u?.(e),
+        className: p(
+          "flex h-control-sm cursor-pointer items-center gap-1.5 rounded-md pr-2 outline-none",
+          "text-sm transition-colors duration-(--dur-instant)",
+          /* The selected row keeps a hover of its OWN. Written as a single
+             branch because the alternative — a shared `hover:bg-surface-hover`
+             plus a selected fill — makes the chosen row revert to the
+             unselected hover colour under the pointer. */
+          o ? "bg-surface-selected text-accent-text hover:bg-surface-selected-hover" : "text-secondary hover:bg-surface-hover hover:text-primary",
+          e.disabled && "pointer-events-none opacity-45"
+        ),
+        style: { paddingLeft: `${r * 1.125 + 0.375}rem` },
+        children: [
+          s ? /* @__PURE__ */ c(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              "aria-label": n ? f.collapse : f.expand,
+              onClick: (a) => {
+                a.stopPropagation(), l(e.id);
+              },
+              className: "grid size-5 shrink-0 cursor-pointer place-items-center rounded-sm text-tertiary transition-colors duration-(--dur-fast) hover:text-primary",
+              children: /* @__PURE__ */ c(
+                b,
+                {
+                  name: "chevron-right",
+                  size: "xs",
+                  className: p(
+                    "transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy",
+                    n && "rotate-90"
+                  )
+                }
+              )
+            }
+          ) : (
+            /* An empty spacer of the same width, so leaves line up with the
+               folders above them instead of shifting left. */
+            /* @__PURE__ */ c("span", { className: "size-5 shrink-0" })
+          ),
+          e.icon && /* @__PURE__ */ c(
+            b,
+            {
+              name: e.icon,
+              size: "sm",
+              className: p("shrink-0", o ? "text-accent-text" : "text-tertiary")
+            }
+          ),
+          /* @__PURE__ */ c("span", { className: "min-w-0 flex-1 truncate", children: e.label }),
+          e.meta
+        ]
+      },
+      e.id
+    );
+  }) });
+}
+export {
+  q as Tree
+};
+//# sourceMappingURL=Tree.js.map

package/dist/components/Tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","sources":["../../src/components/Tree.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Icon, type IconName } from \"./Icon\";\n\n/* ----------------------------------------------------------------------------\n   TREE\n\n   INDENTATION IS PADDING ON THE ROW, NOT A MARGIN ON THE CONTENT. The whole\n   row has to stay clickable and highlightable at every depth — indent the\n   content instead and the highlight starts partway across, leaving a stripe of\n   dead space that looks like a rendering fault.\n\n   ONE TAB STOP, like a toolbar. Arrows move through the tree, right expands or\n   descends, left collapses or ascends. A tree where Tab visits all 200 nodes is\n   a tree nobody navigates twice.\n\n   The chevron is a SEPARATE hit target from the row. Expanding a folder and\n   selecting it are different intentions, and merging them means you cannot\n   look inside a folder without also opening it.\n   -------------------------------------------------------------------------- */\n\nexport type TreeNode = {\n  id: string;\n  label: ReactNode;\n  icon?: IconName;\n  /** Trailing content — a count, a status dot, a menu. */\n  meta?: ReactNode;\n  children?: TreeNode[];\n  disabled?: boolean;\n};\n\nexport interface TreeProps {\n  nodes: TreeNode[];\n  /** Ids expanded on first render. */\n  defaultExpanded?: string[];\n  selectedId?: string;\n  onSelect?: (node: TreeNode) => void;\n  className?: string;\n}\n\nexport function Tree({ nodes, defaultExpanded = [], selectedId, onSelect, className }: TreeProps) {\n  const strings = useUiStrings().tree;\n  const [expanded, setExpanded] = useState<Set<string>>(new Set(defaultExpanded));\n\n  /* Flattened to what is VISIBLE, which is what arrow keys move through — a\n     collapsed branch's children are not on screen and must not be reachable. */\n  const visible: { node: TreeNode; depth: number }[] = [];\n  const walk = (list: TreeNode[], depth: number) => {\n    for (const node of list) {\n      visible.push({ node, depth });\n      if (node.children?.length && expanded.has(node.id)) walk(node.children, depth + 1);\n    }\n  };\n  walk(nodes, 0);\n\n  function toggle(id: string) {\n    setExpanded((current) => {\n      const next = new Set(current);\n      next.has(id) ? next.delete(id) : next.add(id);\n      return next;\n    });\n  }\n\n  function focusAt(index: number) {\n    const clamped = Math.max(0, Math.min(visible.length - 1, index));\n    const id = visible[clamped]?.node.id;\n    if (id) {\n      queueMicrotask(() =>\n        document.querySelector<HTMLElement>(`[data-tree-node=\"${CSS.escape(id)}\"]`)?.focus(),\n      );\n    }\n  }\n\n  function onKeyDown(event: React.KeyboardEvent, index: number, node: TreeNode) {\n    const hasChildren = Boolean(node.children?.length);\n    const isOpen = expanded.has(node.id);\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        focusAt(index + 1);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        focusAt(index - 1);\n        break;\n      case \"ArrowRight\":\n        event.preventDefault();\n        /* Right on an open folder DESCENDS rather than doing nothing — the\n           behaviour every file manager has, and the one people expect. */\n        if (hasChildren && !isOpen) toggle(node.id);\n        else if (hasChildren) focusAt(index + 1);\n        break;\n      case \"ArrowLeft\":\n        event.preventDefault();\n        if (hasChildren && isOpen) toggle(node.id);\n        else {\n          /* Ascend to the parent, which is the nearest previous row at a\n             shallower depth. */\n          const depth = visible[index].depth;\n          for (let i = index - 1; i >= 0; i--) {\n            if (visible[i].depth < depth) {\n              focusAt(i);\n              break;\n            }\n          }\n        }\n        break;\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        if (hasChildren) toggle(node.id);\n        onSelect?.(node);\n        break;\n    }\n  }\n\n  return (\n    <div role=\"tree\" className={cn(\"flex min-w-0 flex-col\", className)}>\n      {visible.map(({ node, depth }, index) => {\n        const hasChildren = Boolean(node.children?.length);\n        const isOpen = expanded.has(node.id);\n        const isSelected = node.id === selectedId;\n\n        return (\n          <div\n            key={node.id}\n            role=\"treeitem\"\n            aria-expanded={hasChildren ? isOpen : undefined}\n            aria-selected={isSelected}\n            aria-level={depth + 1}\n            aria-disabled={node.disabled || undefined}\n            data-tree-node={node.id}\n            /* Exactly one row is in the tab order — the selected one, or the\n               first. Arrows do the rest. */\n            tabIndex={isSelected || (!selectedId && index === 0) ? 0 : -1}\n            onKeyDown={(e) => onKeyDown(e, index, node)}\n            onClick={() => !node.disabled && onSelect?.(node)}\n            className={cn(\n              \"flex h-control-sm cursor-pointer items-center gap-1.5 rounded-md pr-2 outline-none\",\n              \"text-sm transition-colors duration-(--dur-instant)\",\n              /* The selected row keeps a hover of its OWN. Written as a single\n                 branch because the alternative — a shared `hover:bg-surface-hover`\n                 plus a selected fill — makes the chosen row revert to the\n                 unselected hover colour under the pointer. */\n              isSelected\n                ? \"bg-surface-selected text-accent-text hover:bg-surface-selected-hover\"\n                : \"text-secondary hover:bg-surface-hover hover:text-primary\",\n              node.disabled && \"pointer-events-none opacity-45\",\n            )}\n            /* Padding on the ROW — see the note at the top. */\n            style={{ paddingLeft: `${depth * 1.125 + 0.375}rem` }}\n          >\n            {hasChildren ? (\n              <button\n                type=\"button\"\n                tabIndex={-1}\n                aria-label={isOpen ? strings.collapse : strings.expand}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  toggle(node.id);\n                }}\n                className=\"grid size-5 shrink-0 cursor-pointer place-items-center rounded-sm text-tertiary transition-colors duration-(--dur-fast) hover:text-primary\"\n              >\n                <Icon\n                  name=\"chevron-right\"\n                  size=\"xs\"\n                  className={cn(\n                    \"transition-[var(--tx-colors),transform,translate,scale,rotate] duration-(--dur-base) ease-snappy\",\n                    isOpen && \"rotate-90\",\n                  )}\n                />\n              </button>\n            ) : (\n              /* An empty spacer of the same width, so leaves line up with the\n                 folders above them instead of shifting left. */\n              <span className=\"size-5 shrink-0\" />\n            )}\n\n            {node.icon && (\n              <Icon\n                name={node.icon}\n                size=\"sm\"\n                className={cn(\"shrink-0\", isSelected ? \"text-accent-text\" : \"text-tertiary\")}\n              />\n            )}\n            <span className=\"min-w-0 flex-1 truncate\">{node.label}</span>\n            {node.meta}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["Tree","nodes","defaultExpanded","selectedId","onSelect","className","strings","useUiStrings","expanded","setExpanded","useState","visible","walk","list","depth","node","toggle","id","current","next","focusAt","index","clamped","onKeyDown","event","hasChildren","isOpen","i","cn","isSelected","jsxs","e","jsx","Icon"],"mappings":"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"}

package/dist/components/TriStateSwitch.js

@@ -0,0 +1,111 @@
+import { jsxs as y, jsx as n } from "react/jsx-runtime";
+import { useRef as w } from "react";
+import { tv as v } from "tailwind-variants";
+import { cn as l } from "../lib/cn.js";
+import { useUiStrings as x } from "../lib/i18n/provider.js";
+const g = v({
+  base: [
+    "relative inline-flex shrink-0 rounded-full border",
+    "transition-[var(--tx-colors)] duration-(--dur-base) ease-standard"
+  ],
+  variants: {
+    /* The two dimensions are the ONLY numbers; the thumb and its travel are
+       derived from them below. Width is two and a half heights, so the middle
+       stop sits exactly between the ends. */
+    size: {
+      sm: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.25rem*var(--ui-scale))] [--tri-w:calc(3.125rem*var(--ui-scale))]",
+      md: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.5rem*var(--ui-scale))] [--tri-w:calc(3.75rem*var(--ui-scale))]",
+      lg: "h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.75rem*var(--ui-scale))] [--tri-w:calc(4.375rem*var(--ui-scale))]"
+    },
+    state: {
+      no: "border-border bg-switch-track-off",
+      unset: "border-dashed border-border-strong bg-transparent",
+      yes: "border-control bg-control"
+    },
+    disabled: {
+      true: "cursor-not-allowed opacity-45",
+      false: ""
+    }
+  },
+  defaultVariants: { size: "md", state: "unset", disabled: !1 }
+}), S = [
+  "pointer-events-none absolute top-[3px] left-[3px] block rounded-full shadow-sm",
+  "size-[calc(var(--tri-h)-8px)]",
+  "translate-x-[calc((var(--tri-w)-var(--tri-h))*var(--tri-pos))]",
+  "transition-[var(--tx-colors),translate] duration-(--dur-base) ease-snappy"
+].join(" "), e = [
+  { key: "no", value: !1, pos: 0 },
+  { key: "unset", value: null, pos: 0.5 },
+  { key: "yes", value: !0, pos: 1 }
+], A = (o) => e.find((s) => s.value === o) ?? e[1];
+function R({
+  value: o,
+  onValueChange: s,
+  "aria-label": f,
+  showCaption: h = !0,
+  disabled: a = !1,
+  size: k,
+  className: p
+}) {
+  const c = x().triStateSwitch, t = A(o), u = w(null), d = (r) => {
+    a || r.value === o || s(r.value);
+  }, b = (r) => {
+    const m = e.indexOf(t), i = r.key === "ArrowRight" || r.key === "ArrowUp" ? e[Math.min(e.length - 1, m + 1)] : r.key === "ArrowLeft" || r.key === "ArrowDown" ? e[Math.max(0, m - 1)] : r.key === "Home" ? e[0] : r.key === "End" ? e[e.length - 1] : void 0;
+    i && (r.preventDefault(), d(i), requestAnimationFrame(() => {
+      u.current?.querySelector(`[data-stop="${i.key}"]`)?.focus();
+    }));
+  };
+  return /* @__PURE__ */ y("div", { className: l("inline-flex items-center gap-2", p), children: [
+    /* @__PURE__ */ y(
+      "div",
+      {
+        ref: u,
+        role: "radiogroup",
+        "aria-label": f,
+        "aria-disabled": a || void 0,
+        "data-state": t.key,
+        className: g({ size: k, state: t.key, disabled: a }),
+        children: [
+          e.map((r) => /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "data-stop": r.key,
+              "aria-checked": r.key === t.key,
+              "aria-label": c[r.key],
+              tabIndex: r.key === t.key ? 0 : -1,
+              disabled: a,
+              onClick: () => {
+                d(r);
+              },
+              onKeyDown: b,
+              className: l(
+                "relative z-10 h-full flex-1 rounded-full",
+                a ? "cursor-not-allowed" : "cursor-pointer"
+              )
+            },
+            r.key
+          )),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              "aria-hidden": "true",
+              style: { "--tri-pos": String(t.pos) },
+              className: l(
+                S,
+                t.key === "yes" ? "bg-control-knob-on" : "bg-control-knob",
+                t.key === "unset" && "opacity-70"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    h ? /* @__PURE__ */ n("span", { "aria-hidden": "true", className: "text-sm text-secondary", children: c[t.key] }) : null
+  ] });
+}
+export {
+  R as TriStateSwitch
+};
+//# sourceMappingURL=TriStateSwitch.js.map

package/dist/components/TriStateSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TriStateSwitch.js","sources":["../../src/components/TriStateSwitch.tsx"],"sourcesContent":["import { useRef, type KeyboardEvent } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\n\n/* ============================================================================\n   TRI-STATE SWITCH — a yes/no switch that can also be UNANSWERED (SG-908).\n\n   A two-state switch has no way to say \"nobody has answered this\". It starts\n   off, so every unanswered question renders as \"No\" — a wrong answer invented by\n   the control. Anywhere an unset boolean is a real and common state (a record\n   field nobody has filled in yet), that is the switch lying.\n\n   So this has three stops on one track: No at the left, NOT ANSWERED in the\n   middle, Yes at the right, and the thumb travels between them. The unanswered\n   track is DASHED — the vocabulary this library's consumers already use for\n   \"nobody has answered\" — and neither filled nor green, so it reads as neither\n   answer.\n\n   IT IS A RADIO GROUP UNDERNEATH, because three named options is exactly what\n   `radiogroup` describes: each stop is a real `role=\"radio\"` with its own name,\n   so a screen reader announces \"Not answered, selected, 2 of 3\" rather than a\n   switch's bare on/off. Keyboard is the standard roving contract: one tab stop,\n   arrows move between stops (and select, as radio groups do), Home/End jump to\n   the ends. Clicking a stop selects it.\n\n   The track matches `Switch` token for token — the off track, the control on\n   track, the knob that swaps colour with the state — and its geometry is\n   derived from its own two dimensions the same way, so the thumb lands with the\n   identical inset at all three stops.\n   ========================================================================= */\n\nconst track = tv({\n  base: [\n    \"relative inline-flex shrink-0 rounded-full border\",\n    \"transition-[var(--tx-colors)] duration-(--dur-base) ease-standard\",\n  ],\n  variants: {\n    /* The two dimensions are the ONLY numbers; the thumb and its travel are\n       derived from them below. Width is two and a half heights, so the middle\n       stop sits exactly between the ends. */\n    size: {\n      sm: \"h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.25rem*var(--ui-scale))] [--tri-w:calc(3.125rem*var(--ui-scale))]\",\n      md: \"h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.5rem*var(--ui-scale))] [--tri-w:calc(3.75rem*var(--ui-scale))]\",\n      lg: \"h-(--tri-h) w-(--tri-w) [--tri-h:calc(1.75rem*var(--ui-scale))] [--tri-w:calc(4.375rem*var(--ui-scale))]\",\n    },\n    state: {\n      no: \"border-border bg-switch-track-off\",\n      unset: \"border-dashed border-border-strong bg-transparent\",\n      yes: \"border-control bg-control\",\n    },\n    disabled: {\n      true: \"cursor-not-allowed opacity-45\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { size: \"md\", state: \"unset\", disabled: false },\n});\n\n/* inset = 1px border + 3px, so the thumb is the track height less 8px, and its\n   travel from one end to the other is (width - height) — the insets cancel, as\n   in `Switch`. `--tri-pos` is 0 / 0.5 / 1 for No / unanswered / Yes. */\nconst thumb = [\n  \"pointer-events-none absolute top-[3px] left-[3px] block rounded-full shadow-sm\",\n  \"size-[calc(var(--tri-h)-8px)]\",\n  \"translate-x-[calc((var(--tri-w)-var(--tri-h))*var(--tri-pos))]\",\n  \"transition-[var(--tx-colors),translate] duration-(--dur-base) ease-snappy\",\n].join(\" \");\n\nexport type TriStateSwitchSize = NonNullable<VariantProps<typeof track>[\"size\"]>;\n\nexport interface TriStateSwitchProps {\n  /** `true` Yes, `false` No, `null` not answered. */\n  value: boolean | null;\n  onValueChange: (value: boolean | null) => void;\n  /** The question being answered — the group's accessible name. Required. */\n  \"aria-label\": string;\n  /** Shows the current state's word beside the track. @default true */\n  showCaption?: boolean;\n  disabled?: boolean;\n  /** @default \"md\" */\n  size?: TriStateSwitchSize;\n  className?: string;\n}\n\ntype Stop = { key: \"no\" | \"unset\" | \"yes\"; value: boolean | null; pos: number };\n\n/** Left to right, the order the thumb travels in. */\nconst STOPS: readonly Stop[] = [\n  { key: \"no\", value: false, pos: 0 },\n  { key: \"unset\", value: null, pos: 0.5 },\n  { key: \"yes\", value: true, pos: 1 },\n];\n\nconst stopOf = (value: boolean | null): Stop => STOPS.find((s) => s.value === value) ?? STOPS[1]!;\n\nexport function TriStateSwitch({\n  value,\n  onValueChange,\n  \"aria-label\": ariaLabel,\n  showCaption = true,\n  disabled = false,\n  size,\n  className,\n}: TriStateSwitchProps) {\n  const words = useUiStrings().triStateSwitch;\n  const current = stopOf(value);\n  const groupRef = useRef<HTMLDivElement | null>(null);\n\n  const select = (stop: Stop) => {\n    if (disabled || stop.value === value) return;\n    onValueChange(stop.value);\n  };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const index = STOPS.indexOf(current);\n    const target =\n      event.key === \"ArrowRight\" || event.key === \"ArrowUp\"\n        ? STOPS[Math.min(STOPS.length - 1, index + 1)]\n        : event.key === \"ArrowLeft\" || event.key === \"ArrowDown\"\n          ? STOPS[Math.max(0, index - 1)]\n          : event.key === \"Home\"\n            ? STOPS[0]\n            : event.key === \"End\"\n              ? STOPS[STOPS.length - 1]\n              : undefined;\n    if (!target) return;\n    event.preventDefault();\n    select(target);\n    // Focus follows the selection, as in every roving radio group.\n    requestAnimationFrame(() => {\n      groupRef.current?.querySelector<HTMLButtonElement>(`[data-stop=\"${target.key}\"]`)?.focus();\n    });\n  };\n\n  return (\n    <div className={cn(\"inline-flex items-center gap-2\", className)}>\n      <div\n        ref={groupRef}\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-disabled={disabled || undefined}\n        data-state={current.key}\n        className={track({ size, state: current.key, disabled })}\n      >\n        {STOPS.map((stop) => (\n          <button\n            key={stop.key}\n            type=\"button\"\n            role=\"radio\"\n            data-stop={stop.key}\n            aria-checked={stop.key === current.key}\n            aria-label={words[stop.key]}\n            tabIndex={stop.key === current.key ? 0 : -1}\n            disabled={disabled}\n            onClick={() => {\n              select(stop);\n            }}\n            onKeyDown={onKeyDown}\n            className={cn(\n              \"relative z-10 h-full flex-1 rounded-full\",\n              disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n            )}\n          />\n        ))}\n        <span\n          aria-hidden=\"true\"\n          style={{ [\"--tri-pos\" as string]: String(current.pos) }}\n          className={cn(\n            thumb,\n            current.key === \"yes\" ? \"bg-control-knob-on\" : \"bg-control-knob\",\n            current.key === \"unset\" && \"opacity-70\",\n          )}\n        />\n      </div>\n      {showCaption ? (\n        <span aria-hidden=\"true\" className=\"text-sm text-secondary\">\n          {words[current.key]}\n        </span>\n      ) : null}\n    </div>\n  );\n}\n"],"names":["track","tv","thumb","STOPS","stopOf","value","TriStateSwitch","onValueChange","ariaLabel","showCaption","disabled","size","className","words","useUiStrings","current","groupRef","useRef","select","stop","onKeyDown","event","index","target","cn","jsxs","jsx"],"mappings":"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"}

package/dist/components/VideoPlayer.js

@@ -0,0 +1,64 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { cn as x } from "../lib/cn.js";
+import { Button as b } from "./Button.js";
+import { Icon as a } from "./Icon.js";
+import { fileKindIcon as v } from "./chat/file-icon.js";
+import { reportCommittedError as y } from "./media-error.js";
+import { useUiStrings as N } from "../lib/i18n/provider.js";
+function E({
+  src: i,
+  title: s,
+  poster: m,
+  muted: c,
+  tracks: d,
+  onDownload: t,
+  className: f,
+  ref: p
+}) {
+  const n = N().videoPlayer, [u, o] = h(null), g = u === i;
+  return /* @__PURE__ */ r("div", { ref: p, className: x("@container overflow-hidden rounded-lg", f), children: g ? /* @__PURE__ */ l(
+    "div",
+    {
+      role: "status",
+      className: "flex size-full flex-col items-center justify-center gap-1.5 bg-surface-inset p-2 text-center @min-[16rem]:min-h-32 @min-[16rem]:gap-3 @min-[16rem]:p-4",
+      children: [
+        /* @__PURE__ */ r(a, { name: v("video"), size: "lg", className: "text-tertiary" }),
+        /* @__PURE__ */ r("p", { className: "text-sm text-secondary", children: n.cannotPlay }),
+        t && /* @__PURE__ */ l(b, { variant: "outline", size: "sm", onClick: t, children: [
+          /* @__PURE__ */ r(a, { name: "download", size: "sm" }),
+          n.download
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ r(
+    "video",
+    {
+      src: i,
+      poster: m,
+      muted: c,
+      controls: !0,
+      preload: "metadata",
+      playsInline: !0,
+      "aria-label": s,
+      onError: () => o(i),
+      ref: y(() => o(i)),
+      className: "block h-full max-h-[inherit] w-full bg-black object-contain",
+      children: d?.map((e) => /* @__PURE__ */ r(
+        "track",
+        {
+          kind: "captions",
+          src: e.src,
+          srcLang: e.srcLang,
+          label: e.label,
+          default: e.default
+        },
+        `${e.srcLang}-${e.src}`
+      ))
+    }
+  ) });
+}
+export {
+  E as VideoPlayer
+};
+//# sourceMappingURL=VideoPlayer.js.map

package/dist/components/VideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.js","sources":["../../src/components/VideoPlayer.tsx"],"sourcesContent":["import { useState, type Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useUiStrings } from \"../lib/i18n\";\nimport { Button } from \"./Button\";\nimport { Icon } from \"./Icon\";\nimport { fileKindIcon } from \"./chat/file-icon\";\nimport { reportCommittedError } from \"./media-error\";\n\n/* ============================================================================\n   VIDEO PLAYER\n   A native <video> with the browser's own controls, and an honest fallback.\n\n   NATIVE CONTROLS ONLY. The browser's controls are keyboard-operable,\n   screen-reader-labelled and localised, and a custom set would have to\n   reproduce all of that to be no worse. The library owns the frame, the\n   accessible name and the failure state; it does not own playback chrome.\n\n   NEVER AUTOPLAY. Nothing here starts a video on its own: `preload=\"metadata\"`\n   fetches the first frame and the duration, no more, so a page of videos costs\n   headers rather than bandwidth.\n\n   CAPTIONS COME FROM `tracks`, AND USER UPLOADS USUALLY HAVE NONE. A screen\n   recording attached to a card has no caption file, so most players will render\n   with no `<track>` at all. That is a limit of the content, not something the\n   library can invent; pass `tracks` whenever a caption file exists.\n\n   A LOAD OR DECODE ERROR REPLACES THE PLAYER with the file-type icon, one\n   sentence and — when the consumer passed `onDownload` — a Download action.\n   Codec support differs per browser (H.264 is absent from Chromium builds\n   without it), so \"can't play here\" is a normal outcome, not an exceptional\n   one, and a blank black frame that reads as still loading is the worst\n   rendering of it. The download goes through a callback and not an\n   `<a download>`, because a cross-origin `download` attribute is ignored by\n   browsers.\n   ========================================================================= */\n\nexport interface VideoTrack {\n  /** URL of a WebVTT file. */\n  src: string;\n  /** Shown in the browser's caption menu — \"English\". */\n  label: string;\n  /** BCP-47 language tag — \"en\". */\n  srcLang: string;\n  default?: boolean;\n}\n\nexport interface VideoPlayerProps {\n  src: string;\n  /** The accessible name of the player — usually the file name. */\n  title: string;\n  /** A still shown until playback starts. */\n  poster?: string;\n  muted?: boolean;\n  /** Caption tracks. Rendered as `kind=\"captions\"`. */\n  tracks?: VideoTrack[];\n  /** When passed, the can't-play fallback offers a Download button that calls it. */\n  onDownload?: () => void;\n  /** Sizes the player's frame. A `max-h-*` here caps the video, which then letterboxes. */\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function VideoPlayer({\n  src,\n  title,\n  poster,\n  muted,\n  tracks,\n  onDownload,\n  className,\n  ref,\n}: VideoPlayerProps) {\n  const strings = useUiStrings().videoPlayer;\n  /* The failed SOURCE, not a boolean: a new `src` is a different video and must\n     be given its own chance without an effect to reset anything. */\n  const [failedSrc, setFailedSrc] = useState<string | null>(null);\n  const failed = failedSrc === src;\n\n  return (\n    <div ref={ref} className={cn(\"@container overflow-hidden rounded-lg\", className)}>\n      {failed ? (\n        <div\n          role=\"status\"\n          className=\"flex size-full flex-col items-center justify-center gap-1.5 bg-surface-inset p-2 text-center @min-[16rem]:min-h-32 @min-[16rem]:gap-3 @min-[16rem]:p-4\"\n        >\n          <Icon name={fileKindIcon(\"video\")} size=\"lg\" className=\"text-tertiary\" />\n          <p className=\"text-sm text-secondary\">{strings.cannotPlay}</p>\n          {onDownload && (\n            <Button variant=\"outline\" size=\"sm\" onClick={onDownload}>\n              <Icon name=\"download\" size=\"sm\" />\n              {strings.download}\n            </Button>\n          )}\n        </div>\n      ) : (\n        <video\n          src={src}\n          poster={poster}\n          muted={muted}\n          controls\n          preload=\"metadata\"\n          playsInline\n          aria-label={title}\n          onError={() => setFailedSrc(src)}\n          ref={reportCommittedError(() => setFailedSrc(src))}\n          className=\"block h-full max-h-[inherit] w-full bg-black object-contain\"\n        >\n          {tracks?.map((track) => (\n            <track\n              key={`${track.srcLang}-${track.src}`}\n              kind=\"captions\"\n              src={track.src}\n              srcLang={track.srcLang}\n              label={track.label}\n              default={track.default}\n            />\n          ))}\n        </video>\n      )}\n    </div>\n  );\n}\n"],"names":["VideoPlayer","src","title","poster","muted","tracks","onDownload","className","ref","strings","useUiStrings","failedSrc","setFailedSrc","useState","failed","jsx","cn","jsxs","Icon","fileKindIcon","Button","reportCommittedError","track"],"mappings":";;;;;;;;AA8DO,SAASA,EAAY;AAAA,EAC1B,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,KAAAC;AACF,GAAqB;AACnB,QAAMC,IAAUC,IAAe,aAGzB,CAACC,GAAWC,CAAY,IAAIC,EAAwB,IAAI,GACxDC,IAASH,MAAcV;AAE7B,SACE,gBAAAc,EAAC,SAAI,KAAAP,GAAU,WAAWQ,EAAG,yCAAyCT,CAAS,GAC5E,UAAAO,IACC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA,gBAAAF,EAACG,GAAA,EAAK,MAAMC,EAAa,OAAO,GAAG,MAAK,MAAK,WAAU,iBAAgB;AAAA,QACvE,gBAAAJ,EAAC,KAAA,EAAE,WAAU,0BAA0B,YAAQ,YAAW;AAAA,QACzDT,uBACEc,GAAA,EAAO,SAAQ,WAAU,MAAK,MAAK,SAASd,GAC3C,UAAA;AAAA,UAAA,gBAAAS,EAACG,GAAA,EAAK,MAAK,YAAW,MAAK,MAAK;AAAA,UAC/BT,EAAQ;AAAA,QAAA,EAAA,CACX;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAIJ,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,QAAAE;AAAA,MACA,OAAAC;AAAA,MACA,UAAQ;AAAA,MACR,SAAQ;AAAA,MACR,aAAW;AAAA,MACX,cAAYF;AAAA,MACZ,SAAS,MAAMU,EAAaX,CAAG;AAAA,MAC/B,KAAKoB,EAAqB,MAAMT,EAAaX,CAAG,CAAC;AAAA,MACjD,WAAU;AAAA,MAET,UAAAI,GAAQ,IAAI,CAACiB,MACZ,gBAAAP;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,KAAKO,EAAM;AAAA,UACX,SAASA,EAAM;AAAA,UACf,OAAOA,EAAM;AAAA,UACb,SAASA,EAAM;AAAA,QAAA;AAAA,QALV,GAAGA,EAAM,OAAO,IAAIA,EAAM,GAAG;AAAA,MAAA,CAOrC;AAAA,IAAA;AAAA,EAAA,GAGP;AAEJ;"}

package/dist/components/auth/AcceptInvitationCard.js

@@ -0,0 +1,110 @@
+import { jsxs as l, jsx as e, Fragment as q } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { Avatar as D } from "../Avatar.js";
+import { Button as x } from "../Button.js";
+import { Callout as N } from "../Callout.js";
+import { Field as m } from "../Field.js";
+import { Input as p } from "../Input.js";
+import { SignInProviders as G } from "./SignInProviders.js";
+import { TermsAcceptance as K } from "./TermsAcceptance.js";
+import { useUiStrings as T } from "../../lib/i18n/provider.js";
+import { emphasis as b } from "../../lib/i18n/emphasis.js";
+function se(o) {
+  const {
+    teamName: c,
+    teamLogoUrl: P,
+    inviterName: k,
+    roleLabel: U,
+    email: C,
+    accountExists: F,
+    signedInAsMatchingUser: A,
+    loading: t = !1,
+    error: r,
+    termsHref: J,
+    onOpenTerms: $,
+    initialValues: u,
+    onJoinAsSignedInUser: j,
+    onSignInInstead: E,
+    verifiedIdentity: s,
+    providers: I,
+    onContinueWithProvider: L,
+    pendingProvider: O,
+    className: f
+  } = o, y = T().signInProviders, n = T().acceptInvitationCard, [w, z] = d(u?.name ?? ""), [S, B] = d(u?.username ?? ""), [g, H] = d(""), [h, M] = d(u?.acceptedTerms ?? !1), v = /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-3 pb-2 text-center", children: [
+    /* @__PURE__ */ e(D, { src: P, name: c, size: "lg", shape: "rounded" }),
+    /* @__PURE__ */ e("p", { className: "text-sm text-secondary", children: n.intro(k, C, c, U, b) })
+  ] });
+  if (A)
+    return /* @__PURE__ */ l("div", { className: `flex flex-col gap-4 ${f ?? ""}`, children: [
+      v,
+      r && /* @__PURE__ */ e(N, { tone: "danger", title: r }),
+      /* @__PURE__ */ e("p", { className: "text-center text-sm text-secondary", children: n.signedInAs(A.name, b) }),
+      /* @__PURE__ */ e(x, { onClick: j, loading: t, className: "w-full", children: n.acceptAndJoin(c) })
+    ] });
+  if (F)
+    return /* @__PURE__ */ l("div", { className: `flex flex-col gap-4 ${f ?? ""}`, children: [
+      v,
+      r && /* @__PURE__ */ e(N, { tone: "danger", title: r }),
+      /* @__PURE__ */ e("p", { className: "text-center text-sm text-secondary", children: n.accountExists(C) }),
+      /* @__PURE__ */ e(x, { onClick: E, variant: "outline", className: "w-full", children: n.signInToAccept })
+    ] });
+  const V = !s, i = { name: w.trim(), username: S.trim(), acceptedTerms: !0 }, W = i.name !== "" && i.username !== "" && (!V || g !== "") && h && !t;
+  return /* @__PURE__ */ l("div", { className: `flex flex-col gap-4 ${f ?? ""}`, children: [
+    v,
+    r && /* @__PURE__ */ e(N, { tone: "danger", title: r }),
+    /* @__PURE__ */ e(m, { label: n.name, children: /* @__PURE__ */ e(p, { value: w, onChange: (a) => z(a.target.value), disabled: t, autoFocus: !0 }) }),
+    /* @__PURE__ */ e(m, { label: n.username, children: /* @__PURE__ */ e(p, { value: S, onChange: (a) => B(a.target.value), disabled: t }) }),
+    s ? /* @__PURE__ */ l(q, { children: [
+      /* @__PURE__ */ e(m, { label: n.email, children: /* @__PURE__ */ e(p, { type: "email", value: s.email, readOnly: !0, disabled: t }) }),
+      /* @__PURE__ */ e("p", { className: "text-sm text-secondary", children: y.verifiedAs(
+        y.names[s.provider],
+        s.handle,
+        b
+      ) })
+    ] }) : /* @__PURE__ */ e(m, { label: n.password, children: /* @__PURE__ */ e(
+      p,
+      {
+        type: "password",
+        value: g,
+        onChange: (a) => H(a.target.value),
+        disabled: t
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      K,
+      {
+        checked: h,
+        onCheckedChange: M,
+        termsHref: J,
+        onOpenTerms: $,
+        disabled: t
+      }
+    ),
+    /* @__PURE__ */ e(
+      x,
+      {
+        onClick: () => {
+          o.verifiedIdentity ? o.onCreateAccount(i) : o.onCreateAccount({ ...i, password: g });
+        },
+        disabled: !W,
+        loading: t,
+        className: "w-full",
+        children: n.createAndJoin(c)
+      }
+    ),
+    I && !s && /* @__PURE__ */ e(
+      G,
+      {
+        divided: !0,
+        providers: I,
+        onSelect: (a) => L(a, i),
+        pending: O,
+        disabled: !h || t
+      }
+    )
+  ] });
+}
+export {
+  se as AcceptInvitationCard
+};
+//# sourceMappingURL=AcceptInvitationCard.js.map

package/dist/components/auth/AcceptInvitationCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AcceptInvitationCard.js","sources":["../../../src/components/auth/AcceptInvitationCard.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { Avatar } from \"../Avatar\";\nimport { Button } from \"../Button\";\nimport { Callout } from \"../Callout\";\nimport { Field } from \"../Field\";\nimport { Input } from \"../Input\";\nimport { emphasis, useUiStrings } from \"../../lib/i18n\";\nimport {\n  SignInProviders,\n  type ProviderContinuation,\n  type VerifiedIdentity,\n} from \"./SignInProviders\";\nimport { TermsAcceptance, type TermsAcceptanceProps } from \"./TermsAcceptance\";\n\n/* ============================================================================\n   ACCEPT INVITATION CARD\n\n   The body of the public invite-accept page (rendered inside `AuthLayout`).\n   Three states, chosen by the consumer's own props — this component knows\n   nothing about sessions or cookies, only what to show for each:\n\n     1. `signedInAsMatchingUser` set   — one click joins; no form.\n     2. `accountExists` true, not (1)  — the email already has an account,\n        but THIS viewer isn't signed in as it: point at sign-in, no form.\n     3. neither                        — the new-account form (name, username,\n        password, and the required \"I agree to the Terms of Use\" row),\n        submitted as one `onCreateAccount` call. Submit stays disabled until\n        the row is ticked, and the call carries `acceptedTerms: true`: a new\n        account is created together with its agreement to the terms (DX-4023).\n        Signing in as an existing account to accept does not show the row: that\n        person agrees on the blocking accept screen the app puts in front of\n        every signed-in user who has not accepted the current terms.\n\n   DX-5095 — the new-account form can end without a password:\n     - `providers` + `onContinueWithProvider` add \"Continue with <provider>\"\n       buttons under the form. They stay disabled until the terms row is ticked\n       (a provider sign-in creates the account too) and report what was typed\n       (`{name, username, acceptedTerms}`). The consumer keeps that across its\n       redirect and hands it back as `initialValues`, so the person never\n       re-ticks the terms or re-types after coming back.\n     - `verifiedIdentity` is set once a provider has verified the person (the\n       consumer's own redirect-back): the password field and provider buttons go\n       away, the email shows read-only, and `onCreateAccount` takes no password.\n       The two modes are a discriminated union (like `ChangePasswordForm`), so a\n       handler cannot be handed the wrong shape; a screen that is in either mode\n       renders one branch per mode.\n\n   PRESENTATIONAL ONLY: no fetch, no token handling, no notion of what\n   \"accepting\" does server-side — same relationship every other component in\n   this library has with its data.\n   ========================================================================= */\n\n/** What the new-account form hands over; the password mode adds `password`, the verified mode does not. */\ntype AcceptInvitationAccount = { name: string; username: string; acceptedTerms: true };\n\n/** What the person typed before a provider round trip, handed back on return. */\nexport interface AcceptInvitationInitialValues {\n  name?: string;\n  username?: string;\n  acceptedTerms?: boolean;\n}\n\ntype AcceptInvitationCardBase = {\n  teamName: string;\n  teamLogoUrl?: string;\n  inviterName: string;\n  roleLabel: string;\n  email: string;\n  /** True when an account already exists for `email`, server-reported. */\n  accountExists: boolean;\n  /** Set when the CURRENT VIEWER is already signed in with a session whose\n   *  email matches `email` — consumer-computed (this component has no notion\n   *  of sessions). Renders a one-click join instead of a form. */\n  signedInAsMatchingUser?: { name: string } | null;\n  loading?: boolean;\n  /** A server-side error surfaced after a failed submit (username taken, expired token, ...). */\n  error?: string;\n  /** Where the Terms of Use are read, linked from the new-account form's agreement row. */\n  termsHref: string;\n  /** Runs on that link's click; see `TermsAcceptance`. */\n  onOpenTerms?: TermsAcceptanceProps[\"onOpenTerms\"];\n  /** Seeds the new-account form (read once, on mount): what `onContinueWithProvider` reported before the redirect. */\n  initialValues?: AcceptInvitationInitialValues;\n  onJoinAsSignedInUser?: () => void;\n  /** Offered when `accountExists` is true but the viewer isn't signed in as that email. */\n  onSignInInstead?: () => void;\n  className?: string;\n};\n\nexport type AcceptInvitationCardProps = AcceptInvitationCardBase &\n  ProviderContinuation<AcceptInvitationAccount> &\n  (\n    | {\n        verifiedIdentity?: undefined;\n        onCreateAccount: (input: AcceptInvitationAccount & { password: string }) => void;\n      }\n    | {\n        /** Set once a provider has verified the person; replaces the password field. */\n        verifiedIdentity: VerifiedIdentity;\n        onCreateAccount: (input: AcceptInvitationAccount) => void;\n      }\n  );\n\nexport function AcceptInvitationCard(props: AcceptInvitationCardProps) {\n  const {\n  teamName,\n  teamLogoUrl,\n  inviterName,\n  roleLabel,\n  email,\n  accountExists,\n  signedInAsMatchingUser,\n  loading = false,\n  error,\n  termsHref,\n  onOpenTerms,\n  initialValues,\n  onJoinAsSignedInUser,\n  onSignInInstead,\n  verifiedIdentity,\n  providers,\n  onContinueWithProvider,\n  pendingProvider,\n  className,\n  } = props;\n  const providerStrings = useUiStrings().signInProviders;\n  const strings = useUiStrings().acceptInvitationCard;\n  const [name, setName] = useState(initialValues?.name ?? \"\");\n  const [username, setUsername] = useState(initialValues?.username ?? \"\");\n  const [password, setPassword] = useState(\"\");\n  const [acceptedTerms, setAcceptedTerms] = useState(initialValues?.acceptedTerms ?? false);\n\n  const intro = (\n    <div className=\"flex flex-col items-center gap-3 pb-2 text-center\">\n      <Avatar src={teamLogoUrl} name={teamName} size=\"lg\" shape=\"rounded\" />\n      <p className=\"text-sm text-secondary\">{strings.intro(inviterName, email, teamName, roleLabel, emphasis)}</p>\n    </div>\n  );\n\n  if (signedInAsMatchingUser) {\n    return (\n      <div className={`flex flex-col gap-4 ${className ?? \"\"}`}>\n        {intro}\n        {error && <Callout tone=\"danger\" title={error} />}\n        <p className=\"text-center text-sm text-secondary\">\n          {strings.signedInAs(signedInAsMatchingUser.name, emphasis)}\n        </p>\n        <Button onClick={onJoinAsSignedInUser} loading={loading} className=\"w-full\">\n          {strings.acceptAndJoin(teamName)}\n        </Button>\n      </div>\n    );\n  }\n\n  if (accountExists) {\n    return (\n      <div className={`flex flex-col gap-4 ${className ?? \"\"}`}>\n        {intro}\n        {error && <Callout tone=\"danger\" title={error} />}\n        <p className=\"text-center text-sm text-secondary\">\n          {strings.accountExists(email)}\n        </p>\n        <Button onClick={onSignInInstead} variant=\"outline\" className=\"w-full\">\n          {strings.signInToAccept}\n        </Button>\n      </div>\n    );\n  }\n\n  const needsPassword = !verifiedIdentity;\n  const typed = { name: name.trim(), username: username.trim(), acceptedTerms: true } as const;\n  const canSubmit =\n    typed.name !== \"\" && typed.username !== \"\" && (!needsPassword || password !== \"\") && acceptedTerms && !loading;\n\n  return (\n    <div className={`flex flex-col gap-4 ${className ?? \"\"}`}>\n      {intro}\n      {error && <Callout tone=\"danger\" title={error} />}\n      <Field label={strings.name}>\n        <Input value={name} onChange={(event) => setName(event.target.value)} disabled={loading} autoFocus />\n      </Field>\n      <Field label={strings.username}>\n        <Input value={username} onChange={(event) => setUsername(event.target.value)} disabled={loading} />\n      </Field>\n      {verifiedIdentity ? (\n        <>\n          <Field label={strings.email}>\n            <Input type=\"email\" value={verifiedIdentity.email} readOnly disabled={loading} />\n          </Field>\n          <p className=\"text-sm text-secondary\">\n            {providerStrings.verifiedAs(\n              providerStrings.names[verifiedIdentity.provider],\n              verifiedIdentity.handle,\n              emphasis,\n            )}\n          </p>\n        </>\n      ) : (\n        <Field label={strings.password}>\n          <Input\n            type=\"password\"\n            value={password}\n            onChange={(event) => setPassword(event.target.value)}\n            disabled={loading}\n          />\n        </Field>\n      )}\n      <TermsAcceptance\n        checked={acceptedTerms}\n        onCheckedChange={setAcceptedTerms}\n        termsHref={termsHref}\n        onOpenTerms={onOpenTerms}\n        disabled={loading}\n      />\n      <Button\n        onClick={() => {\n          if (props.verifiedIdentity) props.onCreateAccount(typed);\n          else props.onCreateAccount({ ...typed, password });\n        }}\n        disabled={!canSubmit}\n        loading={loading}\n        className=\"w-full\"\n      >\n        {strings.createAndJoin(teamName)}\n      </Button>\n      {providers && !verifiedIdentity && (\n        <SignInProviders\n          divided\n          providers={providers}\n          onSelect={(id) => onContinueWithProvider(id, typed)}\n          pending={pendingProvider}\n          disabled={!acceptedTerms || loading}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":["AcceptInvitationCard","props","teamName","teamLogoUrl","inviterName","roleLabel","email","accountExists","signedInAsMatchingUser","loading","error","termsHref","onOpenTerms","initialValues","onJoinAsSignedInUser","onSignInInstead","verifiedIdentity","providers","onContinueWithProvider","pendingProvider","className","providerStrings","useUiStrings","strings","name","setName","useState","username","setUsername","password","setPassword","acceptedTerms","setAcceptedTerms","intro","jsxs","jsx","Avatar","emphasis","Callout","Button","needsPassword","typed","canSubmit","Field","Input","event","Fragment","TermsAcceptance","SignInProviders","id"],"mappings":"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"}

package/dist/components/auth/AuthLayout.js

@@ -0,0 +1,18 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+function d({ logo: l, title: r, subtitle: t, footer: c, children: a, className: n }) {
+  return /* @__PURE__ */ e("div", { className: "flex min-h-screen w-full items-center justify-center bg-canvas px-4 py-12", children: /* @__PURE__ */ s("div", { className: `flex w-full max-w-sm flex-col gap-6 ${n ?? ""}`, children: [
+    /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-4 rounded-lg border border-border bg-surface-raised p-8 shadow-sm", children: [
+      l && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: l }),
+      /* @__PURE__ */ s("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+        /* @__PURE__ */ e("h1", { className: "font-sans text-lg font-semibold text-primary", children: r }),
+        t && /* @__PURE__ */ e("p", { className: "text-sm text-secondary", children: t })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "w-full", children: a })
+    ] }),
+    c && /* @__PURE__ */ e("div", { className: "text-center text-sm text-secondary", children: c })
+  ] }) });
+}
+export {
+  d as AuthLayout
+};
+//# sourceMappingURL=AuthLayout.js.map

package/dist/components/auth/AuthLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthLayout.js","sources":["../../../src/components/auth/AuthLayout.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\n/* ============================================================================\n   AUTH LAYOUT\n\n   The one shell every unauthenticated screen renders inside: login, forgot-\n   password, reset-password, invite-accept. A centred card on a full-viewport\n   background, with three slots — a logo, a title, and a footer (a \"Sign up\n   instead\" / \"Back to sign in\" link, typically). PRESENTATIONAL ONLY, no\n   data, no fetch, same relationship every other component in this library has\n   with its data (`rbac/types.ts`'s own header) — it has no notion of what a\n   \"team\" or a \"session\" is, only where they get to render.\n\n   NOT gated on RBAC — a consumer reaches this shell before `useRBAC()` has\n   anything to provide (there is no signed-in principal yet), so it lives in\n   its own `components/auth/` folder rather than `components/rbac/`.\n   ========================================================================= */\n\nexport interface AuthLayoutProps {\n  /** The team/product mark — an `<img>`, an SVG, or a text wordmark. Omit for no logo slot at all. */\n  logo?: ReactNode;\n  title: ReactNode;\n  subtitle?: ReactNode;\n  /** A link or note below the card (\"Don't have an account? Ask your team admin.\", \"Back to sign in\"). */\n  footer?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\nexport function AuthLayout({ logo, title, subtitle, footer, children, className }: AuthLayoutProps) {\n  return (\n    <div className=\"flex min-h-screen w-full items-center justify-center bg-canvas px-4 py-12\">\n      <div className={`flex w-full max-w-sm flex-col gap-6 ${className ?? \"\"}`}>\n        <div className=\"flex flex-col items-center gap-4 rounded-lg border border-border bg-surface-raised p-8 shadow-sm\">\n          {logo && <div className=\"flex items-center justify-center\">{logo}</div>}\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"font-sans text-lg font-semibold text-primary\">{title}</h1>\n            {subtitle && <p className=\"text-sm text-secondary\">{subtitle}</p>}\n          </div>\n          <div className=\"w-full\">{children}</div>\n        </div>\n        {footer && <div className=\"text-center text-sm text-secondary\">{footer}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["AuthLayout","logo","title","subtitle","footer","children","className","jsx","jsxs"],"mappings":";AA6BO,SAASA,EAAW,EAAE,MAAAC,GAAM,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,GAAU,WAAAC,KAA8B;AAClG,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,6EACb,UAAA,gBAAAC,EAAC,SAAI,WAAW,uCAAuCF,KAAa,EAAE,IACpE,UAAA;AAAA,IAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,oGACZ,UAAA;AAAA,MAAAP,KAAQ,gBAAAM,EAAC,OAAA,EAAI,WAAU,oCAAoC,UAAAN,GAAK;AAAA,MACjE,gBAAAO,EAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,QAAA,gBAAAD,EAAC,MAAA,EAAG,WAAU,gDAAgD,UAAAL,GAAM;AAAA,QACnEC,KAAY,gBAAAI,EAAC,KAAA,EAAE,WAAU,0BAA0B,UAAAJ,EAAA,CAAS;AAAA,MAAA,GAC/D;AAAA,MACA,gBAAAI,EAAC,OAAA,EAAI,WAAU,UAAU,UAAAF,EAAA,CAAS;AAAA,IAAA,GACpC;AAAA,IACCD,KAAU,gBAAAG,EAAC,OAAA,EAAI,WAAU,sCAAsC,UAAAH,EAAA,CAAO;AAAA,EAAA,EAAA,CACzE,EAAA,CACF;AAEJ;"}