@elabs-ai/components-ui 5.1.0 → 5.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-KBWHHAI3.js → chunk-2ZWUTZHE.js} +2 -2
- package/dist/{chunk-SSQG36MH.js → chunk-34CYSZ2F.js} +2 -2
- package/dist/chunk-34CYSZ2F.js.map +1 -0
- package/dist/{chunk-AXHMQOIZ.js → chunk-3GJLYUZ6.js} +3 -3
- package/dist/{chunk-CEDK5GM2.js → chunk-5AJQUJ5C.js} +2 -2
- package/dist/{chunk-MDQYRES4.js → chunk-5KNLME6F.js} +11 -5
- package/dist/chunk-5KNLME6F.js.map +1 -0
- package/dist/{chunk-ERTYAID6.js → chunk-5QQFXDUY.js} +5 -3
- package/dist/{chunk-ERTYAID6.js.map → chunk-5QQFXDUY.js.map} +1 -1
- package/dist/{chunk-E3GNYOLS.js → chunk-64BKIIJC.js} +2 -2
- package/dist/{chunk-RHVYRQN4.js → chunk-7ZJLR6RP.js} +2 -2
- package/dist/{chunk-HWVU636Q.js → chunk-A3JF66ZC.js} +3 -3
- package/dist/{chunk-NZUKZRT7.js → chunk-A3TT32GE.js} +2 -2
- package/dist/{chunk-C2ICCCP5.js → chunk-A4ZSNEZD.js} +2 -2
- package/dist/{chunk-JTY3REOB.js → chunk-BGXBANS2.js} +3 -3
- package/dist/{chunk-MY5H6D5Y.js → chunk-C4FNDXBM.js} +2 -2
- package/dist/{chunk-QF6UWWDY.js → chunk-C4FZWPI4.js} +1 -1
- package/dist/{chunk-QF6UWWDY.js.map → chunk-C4FZWPI4.js.map} +1 -1
- package/dist/{chunk-QLM3KTAQ.js → chunk-C6I5I5LA.js} +3 -3
- package/dist/{chunk-IE5GWE72.js → chunk-CF7YSCCA.js} +3 -3
- package/dist/chunk-CF7YSCCA.js.map +1 -0
- package/dist/{chunk-RYPK72YP.js → chunk-CGY25FAG.js} +2 -2
- package/dist/{chunk-HDS64Z5L.js → chunk-DIL73NE3.js} +2 -2
- package/dist/{chunk-VC4GKLZL.js → chunk-EHN5ZAHP.js} +2 -2
- package/dist/{chunk-HXQ4MDCH.js → chunk-F6FF4EJN.js} +2 -2
- package/dist/{chunk-V5QCJHDA.js → chunk-FC2LHNJG.js} +3 -3
- package/dist/{chunk-ZRMF4YAS.js → chunk-FCVHZDP7.js} +3 -3
- package/dist/{chunk-BYFRDLDL.js → chunk-FKDI2T7X.js} +2 -2
- package/dist/{chunk-GWHO5ACE.js → chunk-FNRVVVXX.js} +2 -2
- package/dist/{chunk-Y33ZFTMR.js → chunk-FWAFP76U.js} +2 -2
- package/dist/{chunk-ZALGMUSW.js → chunk-HUXLE3K3.js} +2 -2
- package/dist/{chunk-NRPZ3BH4.js → chunk-I3LBIBVN.js} +2 -2
- package/dist/{chunk-GTDCC4YX.js → chunk-IV6OYZTL.js} +2 -2
- package/dist/{chunk-4DWIMWR5.js → chunk-JQIXRCLG.js} +2 -2
- package/dist/{chunk-M5WPZXBA.js → chunk-JU4KW7JN.js} +3 -3
- package/dist/{chunk-PSXUEWUS.js → chunk-LVY7B5PD.js} +2 -2
- package/dist/{chunk-FLCQKC64.js → chunk-MIWFBH5S.js} +3 -3
- package/dist/{chunk-6TJVJPNU.js → chunk-O6AIFSTX.js} +46 -1
- package/dist/chunk-O6AIFSTX.js.map +1 -0
- package/dist/{chunk-EJQYE4MY.js → chunk-OFFWEDKY.js} +2 -2
- package/dist/{chunk-W7OIVERI.js → chunk-ONXBRQJT.js} +2 -2
- package/dist/{chunk-ENL3CCZB.js → chunk-PCNQ6NP2.js} +5 -5
- package/dist/{chunk-BRL2HMZJ.js → chunk-PFGQDW3H.js} +2 -2
- package/dist/{chunk-GMXSCEYN.js → chunk-R6CITZBB.js} +2 -2
- package/dist/{chunk-CY5ISPFB.js → chunk-RHZSAWAU.js} +2 -2
- package/dist/{chunk-FXC64HLD.js → chunk-S7YR3FYZ.js} +2 -2
- package/dist/{chunk-W35X6J5P.js → chunk-SD5MGHIJ.js} +3 -3
- package/dist/{chunk-2DFB4YTK.js → chunk-SJHDX73F.js} +2 -2
- package/dist/{chunk-MRBDJASL.js → chunk-SQLEVIAD.js} +3 -3
- package/dist/{chunk-3EDNWHWD.js → chunk-SR3SC2Q3.js} +2 -2
- package/dist/{chunk-HANBQNW3.js → chunk-U7ADXWTI.js} +26 -14
- package/dist/chunk-U7ADXWTI.js.map +1 -0
- package/dist/{chunk-CEHCVDYR.js → chunk-U7CSWQAE.js} +3 -3
- package/dist/{chunk-SWQCCR6Q.js → chunk-U7FC5J6J.js} +3 -3
- package/dist/{chunk-4VCU3GFI.js → chunk-UVVVKPSH.js} +2 -2
- package/dist/{chunk-BDOG4YSM.js → chunk-VAWYYETZ.js} +8 -8
- package/dist/{chunk-ALNJV4XB.js → chunk-WDZ47ZTX.js} +2 -2
- package/dist/{chunk-HHZJALGA.js → chunk-WL2EZDSD.js} +3 -3
- package/dist/{chunk-UQPW7INX.js → chunk-XE6GYGWS.js} +2 -2
- package/dist/{chunk-OGTILHKP.js → chunk-Y3CKZ7SH.js} +3 -3
- package/dist/{chunk-RIYDAMSQ.js → chunk-YA2CG4YL.js} +2 -2
- package/dist/{chunk-4DZGAY6R.js → chunk-ZESSUMCO.js} +2 -2
- package/dist/{chunk-L6A3RXCU.js → chunk-ZGNWDYSC.js} +3 -3
- package/dist/components/advanced-group/advanced-group.js +3 -3
- package/dist/components/advanced-group/index.js +3 -3
- package/dist/components/app-sidebar/app-sidebar.js +5 -5
- package/dist/components/app-sidebar/index.js +5 -5
- package/dist/components/attribution-panel/attribution-panel.js +4 -4
- package/dist/components/attribution-panel/attributions.generated.js +1 -1
- package/dist/components/attribution-panel/index.js +4 -4
- package/dist/components/bounded-number/bounded-number.js +4 -4
- package/dist/components/bounded-number/index.js +4 -4
- package/dist/components/breadcrumb/breadcrumb.js +3 -3
- package/dist/components/breadcrumb/index.js +3 -3
- package/dist/components/carousel/carousel.js +3 -3
- package/dist/components/carousel/index.js +3 -3
- package/dist/components/change-review/change-review.js +4 -4
- package/dist/components/change-review/index.js +4 -4
- package/dist/components/color-picker/color-picker.js +3 -3
- package/dist/components/color-picker/index.js +3 -3
- package/dist/components/combobox/combobox.js +5 -5
- package/dist/components/combobox/index.js +5 -5
- package/dist/components/command/command.js +4 -4
- package/dist/components/command/index.js +4 -4
- package/dist/components/confirm-dialog/confirm-dialog.js +4 -4
- package/dist/components/confirm-dialog/index.js +4 -4
- package/dist/components/context-rail/context-rail.js +6 -6
- package/dist/components/context-rail/index.js +6 -6
- package/dist/components/copyable-value/copyable-value.js +3 -3
- package/dist/components/copyable-value/index.js +3 -3
- package/dist/components/date-picker/date-picker.js +3 -3
- package/dist/components/date-picker/index.js +3 -3
- package/dist/components/date-range-picker/date-range-picker.js +3 -3
- package/dist/components/date-range-picker/index.js +3 -3
- package/dist/components/dialog/dialog.js +3 -3
- package/dist/components/dialog/index.js +3 -3
- package/dist/components/empty-state/empty-state.js +4 -4
- package/dist/components/empty-state/index.js +4 -4
- package/dist/components/error-state/error-state.js +4 -4
- package/dist/components/error-state/index.js +4 -4
- package/dist/components/expand-dialog/expand-dialog.js +4 -4
- package/dist/components/expand-dialog/index.js +4 -4
- package/dist/components/file-upload/file-upload.js +3 -3
- package/dist/components/file-upload/index.js +3 -3
- package/dist/components/key-value-editor/index.js +3 -3
- package/dist/components/key-value-editor/key-value-editor.js +3 -3
- package/dist/components/keyboard-shortcuts/index.js +4 -4
- package/dist/components/keyboard-shortcuts/keyboard-shortcuts.js +4 -4
- package/dist/components/list-editor/index.js +3 -3
- package/dist/components/list-editor/list-editor.js +3 -3
- package/dist/components/loading-state/index.js +4 -4
- package/dist/components/loading-state/loading-state.js +4 -4
- package/dist/components/locale-provider/index.js +2 -2
- package/dist/components/locale-provider/locale-provider.js +2 -2
- package/dist/components/locale-provider/messages.js +1 -1
- package/dist/components/mention-input/index.js +3 -3
- package/dist/components/mention-input/mention-input.js +3 -3
- package/dist/components/metric-card/index.js +4 -4
- package/dist/components/metric-card/metric-card.js +4 -4
- package/dist/components/model-picker/index.js +5 -5
- package/dist/components/model-picker/model-picker.js +5 -5
- package/dist/components/nav-main/index.js +5 -5
- package/dist/components/nav-main/nav-main.js +5 -5
- package/dist/components/nav-notifications/index.js +3 -3
- package/dist/components/nav-notifications/nav-notifications.js +3 -3
- package/dist/components/nav-user/index.js +5 -5
- package/dist/components/nav-user/nav-user.js +5 -5
- package/dist/components/number-input/index.js +3 -3
- package/dist/components/number-input/number-input.js +3 -3
- package/dist/components/pagination/index.js +3 -3
- package/dist/components/pagination/pagination.js +3 -3
- package/dist/components/revision-timeline/index.js +3 -3
- package/dist/components/revision-timeline/revision-timeline.js +3 -3
- package/dist/components/schema-form/index.js +9 -9
- package/dist/components/schema-form/schema-form.js +9 -9
- package/dist/components/sheet/index.js +3 -3
- package/dist/components/sheet/sheet.js +3 -3
- package/dist/components/side-dock/index.js +4 -4
- package/dist/components/side-dock/side-dock.js +4 -4
- package/dist/components/sidebar/index.js +4 -4
- package/dist/components/sidebar/sidebar.js +4 -4
- package/dist/components/slider-number/index.js +4 -4
- package/dist/components/slider-number/slider-number.js +4 -4
- package/dist/components/spec-playground/index.js +2 -2
- package/dist/components/spec-playground/locate-json-path.js +1 -1
- package/dist/components/spec-playground/spec-playground.js +2 -2
- package/dist/components/spinner/index.js +3 -3
- package/dist/components/spinner/spinner.js +3 -3
- package/dist/components/state-panel/index.js +3 -3
- package/dist/components/state-panel/state-panel.js +3 -3
- package/dist/components/table/index.js +3 -3
- package/dist/components/table/table.js +3 -3
- package/dist/components/team-switcher/index.js +5 -5
- package/dist/components/team-switcher/team-switcher.js +5 -5
- package/dist/components/theme-switcher/index.js +3 -3
- package/dist/components/theme-switcher/theme-switcher.js +3 -3
- package/dist/components/toolbar/index.js +1 -1
- package/dist/components/toolbar/toolbar.js +1 -1
- package/dist/components/transfer/index.js +3 -3
- package/dist/components/transfer/transfer.js +3 -3
- package/dist/components/tree/index.js +4 -4
- package/dist/components/tree/tree.js +4 -4
- package/dist/components/tree-select/index.js +5 -5
- package/dist/components/tree-select/tree-select.js +5 -5
- package/dist/components/view-toolbar/index.js +3 -3
- package/dist/components/view-toolbar/view-toolbar.js +3 -3
- package/dist/components/virtual-select/index.js +3 -3
- package/dist/components/virtual-select/virtual-select.js +3 -3
- package/dist/components/workspace-picker/index.js +6 -6
- package/dist/components/workspace-picker/workspace-picker.js +6 -6
- package/dist/index.d.ts +18 -3
- package/dist/index.js +60 -57
- package/dist/lib/streamdown-translations.js +3 -3
- package/package.json +3 -3
- package/src/components/attribution-panel/attributions.generated.ts +26 -14
- package/src/components/locale-provider/messages.ts +47 -0
- package/src/components/metric-card/metric-card.tsx +1 -1
- package/src/components/spec-playground/locate-json-path.ts +1 -1
- package/src/components/spec-playground/spec-playground.tsx +1 -1
- package/src/components/toolbar/toolbar.tsx +4 -2
- package/src/components/tree/tree.stories.tsx +28 -0
- package/src/components/tree/tree.tsx +17 -2
- package/src/index.ts +3 -0
- package/dist/chunk-6TJVJPNU.js.map +0 -1
- package/dist/chunk-HANBQNW3.js.map +0 -1
- package/dist/chunk-IE5GWE72.js.map +0 -1
- package/dist/chunk-MDQYRES4.js.map +0 -1
- package/dist/chunk-SSQG36MH.js.map +0 -1
- /package/dist/{chunk-KBWHHAI3.js.map → chunk-2ZWUTZHE.js.map} +0 -0
- /package/dist/{chunk-AXHMQOIZ.js.map → chunk-3GJLYUZ6.js.map} +0 -0
- /package/dist/{chunk-CEDK5GM2.js.map → chunk-5AJQUJ5C.js.map} +0 -0
- /package/dist/{chunk-E3GNYOLS.js.map → chunk-64BKIIJC.js.map} +0 -0
- /package/dist/{chunk-RHVYRQN4.js.map → chunk-7ZJLR6RP.js.map} +0 -0
- /package/dist/{chunk-HWVU636Q.js.map → chunk-A3JF66ZC.js.map} +0 -0
- /package/dist/{chunk-NZUKZRT7.js.map → chunk-A3TT32GE.js.map} +0 -0
- /package/dist/{chunk-C2ICCCP5.js.map → chunk-A4ZSNEZD.js.map} +0 -0
- /package/dist/{chunk-JTY3REOB.js.map → chunk-BGXBANS2.js.map} +0 -0
- /package/dist/{chunk-MY5H6D5Y.js.map → chunk-C4FNDXBM.js.map} +0 -0
- /package/dist/{chunk-QLM3KTAQ.js.map → chunk-C6I5I5LA.js.map} +0 -0
- /package/dist/{chunk-RYPK72YP.js.map → chunk-CGY25FAG.js.map} +0 -0
- /package/dist/{chunk-HDS64Z5L.js.map → chunk-DIL73NE3.js.map} +0 -0
- /package/dist/{chunk-VC4GKLZL.js.map → chunk-EHN5ZAHP.js.map} +0 -0
- /package/dist/{chunk-HXQ4MDCH.js.map → chunk-F6FF4EJN.js.map} +0 -0
- /package/dist/{chunk-V5QCJHDA.js.map → chunk-FC2LHNJG.js.map} +0 -0
- /package/dist/{chunk-ZRMF4YAS.js.map → chunk-FCVHZDP7.js.map} +0 -0
- /package/dist/{chunk-BYFRDLDL.js.map → chunk-FKDI2T7X.js.map} +0 -0
- /package/dist/{chunk-GWHO5ACE.js.map → chunk-FNRVVVXX.js.map} +0 -0
- /package/dist/{chunk-Y33ZFTMR.js.map → chunk-FWAFP76U.js.map} +0 -0
- /package/dist/{chunk-ZALGMUSW.js.map → chunk-HUXLE3K3.js.map} +0 -0
- /package/dist/{chunk-NRPZ3BH4.js.map → chunk-I3LBIBVN.js.map} +0 -0
- /package/dist/{chunk-GTDCC4YX.js.map → chunk-IV6OYZTL.js.map} +0 -0
- /package/dist/{chunk-4DWIMWR5.js.map → chunk-JQIXRCLG.js.map} +0 -0
- /package/dist/{chunk-M5WPZXBA.js.map → chunk-JU4KW7JN.js.map} +0 -0
- /package/dist/{chunk-PSXUEWUS.js.map → chunk-LVY7B5PD.js.map} +0 -0
- /package/dist/{chunk-FLCQKC64.js.map → chunk-MIWFBH5S.js.map} +0 -0
- /package/dist/{chunk-EJQYE4MY.js.map → chunk-OFFWEDKY.js.map} +0 -0
- /package/dist/{chunk-W7OIVERI.js.map → chunk-ONXBRQJT.js.map} +0 -0
- /package/dist/{chunk-ENL3CCZB.js.map → chunk-PCNQ6NP2.js.map} +0 -0
- /package/dist/{chunk-BRL2HMZJ.js.map → chunk-PFGQDW3H.js.map} +0 -0
- /package/dist/{chunk-GMXSCEYN.js.map → chunk-R6CITZBB.js.map} +0 -0
- /package/dist/{chunk-CY5ISPFB.js.map → chunk-RHZSAWAU.js.map} +0 -0
- /package/dist/{chunk-FXC64HLD.js.map → chunk-S7YR3FYZ.js.map} +0 -0
- /package/dist/{chunk-W35X6J5P.js.map → chunk-SD5MGHIJ.js.map} +0 -0
- /package/dist/{chunk-2DFB4YTK.js.map → chunk-SJHDX73F.js.map} +0 -0
- /package/dist/{chunk-MRBDJASL.js.map → chunk-SQLEVIAD.js.map} +0 -0
- /package/dist/{chunk-3EDNWHWD.js.map → chunk-SR3SC2Q3.js.map} +0 -0
- /package/dist/{chunk-CEHCVDYR.js.map → chunk-U7CSWQAE.js.map} +0 -0
- /package/dist/{chunk-SWQCCR6Q.js.map → chunk-U7FC5J6J.js.map} +0 -0
- /package/dist/{chunk-4VCU3GFI.js.map → chunk-UVVVKPSH.js.map} +0 -0
- /package/dist/{chunk-BDOG4YSM.js.map → chunk-VAWYYETZ.js.map} +0 -0
- /package/dist/{chunk-ALNJV4XB.js.map → chunk-WDZ47ZTX.js.map} +0 -0
- /package/dist/{chunk-HHZJALGA.js.map → chunk-WL2EZDSD.js.map} +0 -0
- /package/dist/{chunk-UQPW7INX.js.map → chunk-XE6GYGWS.js.map} +0 -0
- /package/dist/{chunk-OGTILHKP.js.map → chunk-Y3CKZ7SH.js.map} +0 -0
- /package/dist/{chunk-RIYDAMSQ.js.map → chunk-YA2CG4YL.js.map} +0 -0
- /package/dist/{chunk-4DZGAY6R.js.map → chunk-ZESSUMCO.js.map} +0 -0
- /package/dist/{chunk-L6A3RXCU.js.map → chunk-ZGNWDYSC.js.map} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/metric-card/metric-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Card, CardContent } from \"../card\";\nimport { CopyableValue } from \"../copyable-value\";\nimport { Skeleton } from \"../skeleton\";\nimport { useLocale } from \"../locale-provider\";\nimport { cn } from \"../../lib/cn\";\nimport {\n type NumberFormat,\n type ResolvedNumberFormat,\n resolveNumberFormat,\n} from \"../../lib/compact-number\";\n\n/**\n * Applies a {@link ResolvedNumberFormat}'s `prefix`/`suffix`/`parens` on top\n * of the plain `Intl` string `formatNumber` produces — the two things Intl\n * itself cannot render (RM-109). Twin of `formatResolvedChartValue`\n * (`packages/charts/src/charts/chart-formatters.ts`).\n */\nfunction formatResolvedNumber(\n resolved: ResolvedNumberFormat,\n formatNumber: (n: number, opts?: Intl.NumberFormatOptions) => string,\n value: number,\n): string {\n const numeric = formatNumber(resolved.parens ? Math.abs(value) : value, resolved.options);\n const signed = resolved.parens && value < 0 ? `(${numeric})` : numeric;\n return `${resolved.prefix}${signed}${resolved.suffix}`;\n}\n\n/*\n * ADR 0012: this is the ONE KPI tile — `@elabs-ai/components-charts` re-exports it.\n * RM-072 adds `size` (sm | md | lg) for dashboard-sheet tiles and a `sparkline`\n * slot under the value. `ui` never imports `charts`: the host passes the\n * `<Sparkline …/>` element in.\n */\n\n/*\n * `emphasis` — size/weight/space ONLY, no new hue (research 11 §B.5 KPI-1/5):\n * `headline` is the answer-leading rung (`text-kpi`, ~32px); `default` stays\n * calm on the intermediate 1.5rem reading rung (the pre-#188 step between\n * `title` and `kpi` — no app role exists there, same precedent as the prose\n * h1/h3 rungs; baselined in the text-scale ratchet).\n */\nconst metricValueVariants = cva(\"tabular-nums text-foreground\", {\n variants: {\n emphasis: {\n default: \"text-2xl font-semibold tracking-tight\",\n headline: \"text-kpi\",\n },\n /* `md` adds nothing (today's rungs); `sm`/`lg` override the size via `cn()`. */\n size: {\n sm: \"text-title\",\n md: \"\",\n lg: \"text-kpi\",\n },\n },\n defaultVariants: { emphasis: \"default\", size: \"md\" },\n});\n\nconst metricContentVariants = cva(\"space-y-2\", {\n variants: {\n emphasis: {\n default: \"p-5\",\n headline: \"p-6\",\n },\n size: {\n sm: \"space-y-1 p-3\",\n md: \"\",\n lg: \"p-6\",\n },\n },\n defaultVariants: { emphasis: \"default\", size: \"md\" },\n});\n\nconst metricSparklineVariants = cva(\"\", {\n variants: {\n size: {\n /* never rendered — `sm` drops the slot; kept so the axis is total */\n sm: \"\",\n md: \"pt-1\",\n lg: \"min-h-12 pt-2\",\n },\n },\n defaultVariants: { size: \"md\" },\n});\n\nexport type MetricCardEmphasis = NonNullable<VariantProps<typeof metricValueVariants>[\"emphasis\"]>;\n\n/**\n * Tile tier (RM-072). `sm`: label + value only (no icon, delta, description,\n * sparkline, visual or evidence); `md`: the default tile; `lg`: the kpi value\n * rung with more room for the `sparkline` slot.\n */\nexport type MetricCardSize = NonNullable<VariantProps<typeof metricValueVariants>[\"size\"]>;\n\n/**\n * How a NUMERIC `value` is rendered. A function takes over completely.\n *\n * `\"compact\"` is the default because a KPI tile is a small box and\n * `50012102.632741` does not fit in one — the exact figure stays one click\n * away via `CopyableValue`. Anything that is not a `number` (a string, an\n * element) is passed through untouched, so every existing call site is\n * unaffected.\n *\n * Also accepts the object form (RM-109, `NumberFormatSpec` —\n * `{ decimals, abbreviate, sign, prefix, suffix, … }`,\n * `packages/ui/src/lib/compact-number.ts`) for a tile that needs e.g.\n * `{ decimals: 1, suffix: \"%\" }` without hand-formatting the string itself.\n * The two preset-string cases render byte-for-byte as before this type\n * widened — only a spec OBJECT argument reaches the new code path.\n */\nexport type MetricCardValueFormat = NumberFormat | ((value: number) => ReactNode);\n\nexport interface MetricCardProps\n extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof metricValueVariants> {\n label: ReactNode;\n value: ReactNode;\n /**\n * How to render a NUMERIC `value`. Default: `\"compact\"`. Ignored for every\n * other `ReactNode` — a string you already formatted is rendered verbatim.\n */\n valueFormat?: MetricCardValueFormat;\n /** ISO 4217 code for `valueFormat: \"currency\"`. Default: `\"USD\"`. */\n currency?: string;\n /**\n * Offer the exact figure on click when a numeric `value` was shortened.\n * Default: `true`. Turning it off leaves a compacted number with no way back\n * to its digits, so only do that when the tile is decorative.\n */\n copyExactValue?: boolean;\n /** Secondary line under the value — sublabel / context. */\n description?: ReactNode;\n /** Signed change, e.g. \"+12.4%\". Direction colors it. */\n delta?: string;\n deltaDirection?: \"up\" | \"down\" | \"neutral\";\n /** Whether \"up\" is good (green) — flip for metrics where down is good. */\n positiveIsGood?: boolean;\n icon?: ReactNode;\n /** Optional inline visual shown under the value/description. */\n visual?: ReactNode;\n /**\n * Trend slot rendered directly under the value (RM-072) — pass a\n * `<Sparkline …/>` from `@elabs-ai/components-charts`. Hidden at `size=\"sm\"`.\n */\n sparkline?: ReactNode;\n /**\n * Optional grounding footer (research 11 §B.5 KPI-3) — connects a cited\n * figure to its source (e.g. an `EvidenceChip` from `@elabs-ai/components-ai`). Rendered\n * subdued (`text-meta text-muted-foreground`) under the tile body.\n */\n evidence?: ReactNode;\n /**\n * Loading vs ready — renders a layout-shaped skeleton (matching the real\n * box height) instead of the value/label/delta text. Default: `false`.\n */\n loading?: boolean;\n /**\n * Whether this tile announces its own `loading` state via a live region.\n * Set to `false` when several tiles are composed inside a container that\n * already announces once for the whole region (e.g. a loading\n * `MetricGrid`) — see loading-states.md §a11y (\"one live region per\n * region, not per box\"). Default: `true`.\n */\n announceLoading?: boolean;\n}\n\n/** Compact KPI tile for dashboards. */\nexport const MetricCard = forwardRef<HTMLDivElement, MetricCardProps>(function MetricCard(\n {\n label,\n value,\n valueFormat = \"compact\",\n currency,\n copyExactValue = true,\n description,\n delta,\n deltaDirection = \"neutral\",\n positiveIsGood = true,\n icon,\n visual,\n sparkline,\n evidence,\n emphasis,\n size,\n loading = false,\n announceLoading = true,\n className,\n ...props\n },\n ref,\n) {\n const { t, formatNumber } = useLocale();\n\n // Formatting applies to NUMBERS only. Every shipped call site passes a string\n // it formatted itself, so this branch is inert for them — that is what makes\n // a new default safe.\n const isNumeric = typeof value === \"number\";\n const formattedValue: ReactNode = !isNumeric\n ? value\n : typeof valueFormat === \"function\"\n ? valueFormat(value)\n : formatResolvedNumber(\n resolveNumberFormat(valueFormat, value, currency),\n formatNumber,\n value,\n );\n // Only offer the exact figure when the display actually differs from it —\n // a button around a value that was never shortened is noise.\n const showsExact = isNumeric && String(formattedValue) === String(value);\n const canCopyExact =\n isNumeric && copyExactValue && typeof valueFormat !== \"function\" && !showsExact;\n\n const good =\n deltaDirection === \"up\" ? positiveIsGood : deltaDirection === \"down\" ? !positiveIsGood : null;\n const deltaColor =\n good === null ? \"text-muted-foreground\" : good ? \"text-success-text\" : \"text-destructive-text\";\n // Stable, theme-agnostic polarity hook. High decoration reveals a non-color\n // polarity glyph from this attribute (decoration.css); chromatic themes ignore it\n // and use color. Issue #162.\n const polarity = good === null ? \"neutral\" : good ? \"good\" : \"bad\";\n const arrow = deltaDirection === \"up\" ? \"↑\" : deltaDirection === \"down\" ? \"↓\" : \"\";\n // Direction is conveyed visually by the arrow glyph + color; give AT a single\n // unambiguous name (\"up 12.4%, favorable\") since neither the glyph nor color is a\n // reliable signal (high decoration / high-contrast collapse the hue) — and good/bad\n // polarity is otherwise invisible to AT. See accessibility.md, #162.\n const directionLabel = deltaDirection === \"up\" ? \"up\" : deltaDirection === \"down\" ? \"down\" : \"\";\n const polarityLabel = good === null ? \"\" : good ? \", favorable\" : \", unfavorable\";\n // `sm` is label + value only: every secondary row is dropped (RM-072).\n const compact = size === \"sm\";\n const valueClassName = cn(metricValueVariants({ emphasis, size }));\n\n return (\n <Card ref={ref} className={cn(\"overflow-hidden\", className)} {...props}>\n <CardContent\n className={cn(metricContentVariants({ emphasis, size }))}\n {...(loading && announceLoading ? { role: \"status\", \"aria-live\": \"polite\" as const } : {})}\n >\n {loading && announceLoading ? (\n <span className=\"sr-only\">{t(\"ui.metricCard.loading\")}</span>\n ) : null}\n <div className=\"flex items-center justify-between\">\n {loading ? (\n <Skeleton className=\"h-4 w-24\" />\n ) : (\n /* `min-w-0` + `truncate`, not just the text utility: a flex child's\n default `min-width: auto` refuses to shrink below its content, so\n without it the label OVERFLOWS the row and `Card`'s own\n `overflow-hidden` hard-clips it — characters lost mid-word, no\n ellipsis, no title. Measured on a 230px pane: \"Awaiting approval\"\n rendered as \"Awaiting approva\". See interaction-guidelines.md\n § Content handling (\"flex children need `min-w-0`\"). `title` only\n when the label is a string — there is nothing to put in the\n attribute otherwise, and the ellipsis needs a way back to the\n full words. */\n <span\n className=\"min-w-0 truncate text-body font-medium text-muted-foreground\"\n title={typeof label === \"string\" ? label : undefined}\n >\n {label}\n </span>\n )}\n {/* `shrink-0`: the icon is a fixed 16px mark, so the LABEL is what\n gives way when the row runs out of width. */}\n {icon && !compact ? (\n <span className=\"shrink-0 text-muted-foreground [&_svg]:size-4\">{icon}</span>\n ) : null}\n </div>\n <div className=\"flex items-baseline gap-2\">\n {loading ? (\n <Skeleton className={emphasis === \"headline\" ? \"h-9 w-28\" : \"h-8 w-24\"} />\n ) : canCopyExact ? (\n <CopyableValue\n className={valueClassName}\n // Two tiles in one grid can compact to the same display (\"$1.2M\"),\n // and the visible label is a sibling node the button's name does\n // not include — so without this a screen-reader user tabbing the\n // grid hears the identical name twice. A non-string label has no\n // text to borrow; the default hint stands.\n hint={\n typeof label === \"string\" ? `${label}, ${t(\"ui.copyableValue.hint\")}` : undefined\n }\n value={String(value)}\n >\n {formattedValue}\n </CopyableValue>\n ) : (\n <span className={valueClassName}>{formattedValue}</span>\n )}\n {delta && !compact ? (\n loading ? (\n <Skeleton className=\"h-4 w-14\" />\n ) : (\n <span\n data-polarity={polarity}\n className={cn(\"text-meta tabular-nums\", deltaColor)}\n aria-label={\n directionLabel ? `${directionLabel} ${delta}${polarityLabel}` : undefined\n }\n >\n {arrow ? <span aria-hidden=\"true\">{arrow} </span> : null}\n {delta}\n </span>\n )\n ) : null}\n </div>\n {sparkline && !compact ? (\n <div className={metricSparklineVariants({ size })}>\n {loading ? <Skeleton className=\"h-8 w-full\" /> : sparkline}\n </div>\n ) : null}\n {description && !compact ? (\n loading ? (\n <Skeleton className=\"h-3 w-32\" />\n ) : (\n <p className=\"text-meta font-normal text-muted-foreground\">{description}</p>\n )\n ) : null}\n {visual && !compact ? (\n <div className=\"pt-1\">{loading ? <Skeleton className=\"h-8 w-full\" /> : visual}</div>\n ) : null}\n {evidence && !compact ? (\n <div className=\"pt-1 text-meta font-normal text-muted-foreground\">\n {loading ? <Skeleton className=\"h-3 w-24\" /> : evidence}\n </div>\n ) : null}\n </CardContent>\n </Card>\n );\n});\n"],"mappings":"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","names":["MetricCard"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/tree/tree.tsx"],"sourcesContent":["// a2ui.exposed: yes\n\"use client\";\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { ChevronRight, AlertCircle, RotateCcw } from \"lucide-react\";\nimport { useVirtualizer, type Virtualizer } from \"@tanstack/react-virtual\";\nimport { cn } from \"../../lib/cn\";\nimport { Checkbox } from \"../checkbox/checkbox\";\nimport { useLocale } from \"../locale-provider\";\nimport { Skeleton } from \"../skeleton/skeleton\";\nimport { Spinner } from \"../spinner/spinner\";\nimport { useTreeKeyboard } from \"./use-tree-keyboard\";\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\nexport interface TreeNode<T = unknown> {\n id: string;\n label: ReactNode;\n children?: TreeNode<T>[];\n /**\n * Marks a node as expandable even when `children` is not yet loaded.\n * A node with `hasChildren: true` and no `children` array will show the\n * expand affordance. Calling `loadChildren` will populate its children.\n */\n hasChildren?: boolean;\n disabled?: boolean;\n icon?: ReactNode;\n /**\n * Optional trailing content rendered after the label — e.g. a size or\n * token-count badge (#369). Rendered as a SIBLING of the label and kept out\n * of the row's accessible name: a string `label` names the row via\n * `aria-label`, a `ReactNode` label names it via `aria-labelledby` pointing\n * at the label span only, so the accessory text never joins either.\n *\n * The slot is isolated from the row: click, keydown and focus are stopped at\n * the accessory, so it never selects/expands the row, never lets the tree's\n * roving-tabindex handler swallow its keys, and never has focus yanked back\n * to the row. Interactive content (a button, a link) therefore works and is\n * independently focusable in normal tab order; the row's own keyboard\n * navigation (arrow keys, Enter/Space) is unaffected while the row is focused.\n */\n accessory?: ReactNode;\n data?: T;\n}\n\nexport interface TreeProps<T = unknown> extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n nodes: TreeNode<T>[];\n /** Controlled expanded ids */\n expandedIds?: string[];\n /** Uncontrolled initial expanded ids */\n defaultExpandedIds?: string[];\n onExpandedChange?: (ids: string[]) => void;\n /** \"single\" | \"multiple\" | \"none\" — default \"single\" */\n selectionMode?: \"single\" | \"multiple\" | \"none\";\n /** Controlled selected ids */\n selectedIds?: string[];\n /** Uncontrolled initial selected ids */\n defaultSelectedIds?: string[];\n onSelectionChange?: (ids: string[]) => void;\n /** Show checkboxes for multi-selection affordance — default false */\n checkboxes?: boolean;\n /**\n * The surface on which the tree is rendered.\n * - `\"default\"` (default) — renders selected rows with `bg-selection` (for use\n * on background/card surfaces).\n * - `\"sidebar\"` — renders selected rows with the sidebar's own active-item\n * treatment (`bg-sidebar-accent` + `text-sidebar-accent-foreground` +\n * `font-medium`), so selection reads consistently with `SidebarMenuButton`'s\n * active state on the `--sidebar` surface. (No fill is ≥3:1 on a sidebar;\n * perceivability comes from the foreground/weight shift + `aria-selected`,\n * the same multi-cue approach the Sidebar uses.)\n */\n surface?: \"default\" | \"sidebar\";\n /**\n * Enable windowed rendering for large trees (>50 visible rows).\n * When `true`, only the visible slice of the flattened tree is mounted in\n * the DOM. Requires a bounded scroll container — either via `maxHeight` or\n * by sizing the root element externally with `overflow-auto`.\n * Default: `false` (backward-compatible nested-group DOM).\n */\n virtualize?: boolean;\n /** Estimated row height in px used by the virtualizer. Default 32. */\n estimateRowHeight?: number;\n /** Number of extra rows to render beyond the visible window. Default 8. */\n overscan?: number;\n /**\n * CSS max-height for the scroll viewport when `virtualize` is true.\n * E.g. `\"400px\"` or `\"60vh\"`. When omitted the root div must be sized by\n * the caller (e.g. via `className=\"h-96 overflow-auto\"`).\n */\n maxHeight?: number | string;\n /**\n * Scroll the node with this id into view when the value CHANGES. Reveals a\n * node selected programmatically (via `selectedIds`) that is windowed out of\n * the DOM in `virtualize` mode (or below the fold), so the tree shows \"where\n * I am\", not just structure. Expands the node's (loaded) ancestors and kicks\n * their lazy `loadChildren` as needed, then centers the node. Independent of\n * keyboard focus (keyboard nav's own scroll is unchanged).\n */\n scrollToId?: string;\n /**\n * When `true`, reveal the newly-selected controlled node (the id added to\n * `selectedIds`) into view — the selection-driven equivalent of `scrollToId`.\n * `scrollToId` wins when both are set.\n */\n scrollSelectionIntoView?: boolean;\n /**\n * Async function called when a node with `hasChildren: true` (and no\n * loaded `children`) is expanded for the first time. The returned nodes\n * are merged into the internal tree state and cached so re-expanding the\n * node does not re-fetch.\n */\n loadChildren?: (node: TreeNode<T>) => Promise<TreeNode<T>[]>;\n className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Internal types for lazy-load state\n// ---------------------------------------------------------------------------\n\ntype LoadState = \"idle\" | \"loading\" | \"error\";\n\ninterface LazyState {\n [nodeId: string]: LoadState;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction useControllableSet(\n controlled: string[] | undefined,\n defaultValue: string[] | undefined,\n onChange: ((ids: string[]) => void) | undefined,\n): [Set<string>, (next: Set<string>) => void] {\n const isControlled = controlled !== undefined;\n const [internal, setInternal] = useState<Set<string>>(\n () => new Set(controlled ?? defaultValue ?? []),\n );\n\n // Stable controlled Set: build a new Set only when the controlled array's\n // CONTENT actually changed, not merely its reference (many callers pass a\n // freshly-computed array with the same ids on every render). Without this,\n // `selectedIds`/`expandedIds` changed identity on every render, which made\n // effects keyed on them (the scrollToId/scrollSelectionIntoView reveal\n // effect) fire on every re-render instead of on a real selection change —\n // the scroll-jump-while-scrolling bug.\n const controlledSetRef = useRef<Set<string> | null>(null);\n let value: Set<string>;\n if (isControlled) {\n const prev = controlledSetRef.current;\n const sameContent =\n !!prev && prev.size === controlled!.length && controlled!.every((id) => prev.has(id));\n value = sameContent ? prev! : new Set(controlled);\n controlledSetRef.current = value;\n } else {\n value = internal;\n }\n\n const setValue = useCallback(\n (next: Set<string>) => {\n if (!isControlled) setInternal(next);\n onChange?.(Array.from(next));\n },\n [isControlled, onChange],\n );\n\n return [value, setValue];\n}\n\n/**\n * Reconcile an incoming `nodes` prop against the previous internal tree,\n * preserving any children merged in locally via `loadChildren` that the new\n * prop doesn't (yet) carry. Without this, any parent re-render that hands\n * down a new (even structurally-identical) `nodes` array wipes out every\n * lazily-loaded subtree that isn't also present upstream.\n */\nfunction reconcileNodes<T>(propNodes: TreeNode<T>[], prevNodes: TreeNode<T>[]): TreeNode<T>[] {\n const prevById = new Map(prevNodes.map((n) => [n.id, n] as const));\n return propNodes.map((n) => {\n const prev = prevById.get(n.id);\n if (!prev) return n;\n if (!n.children?.length && prev.children?.length) {\n // The prop still marks this node as lazily-expandable but doesn't (yet)\n // carry the children we already fetched — keep what we loaded.\n return { ...n, children: prev.children, hasChildren: n.hasChildren };\n }\n if (n.children?.length && prev.children?.length) {\n return { ...n, children: reconcileNodes(n.children, prev.children) };\n }\n return n;\n });\n}\n\n/** Merge resolved children into a tree, returning a new tree. */\nfunction mergeChildren<T>(\n nodes: TreeNode<T>[],\n nodeId: string,\n children: TreeNode<T>[],\n): TreeNode<T>[] {\n return nodes.map((n) => {\n if (n.id === nodeId) {\n return { ...n, children, hasChildren: undefined };\n }\n if (n.children?.length) {\n return { ...n, children: mergeChildren(n.children, nodeId, children) };\n }\n return n;\n });\n}\n\n// ---------------------------------------------------------------------------\n// VirtualFlatRow — a single flat row for the virtualized path\n// ---------------------------------------------------------------------------\n\ninterface FlatRow<T> {\n node: TreeNode<T>;\n level: number;\n setSize: number;\n posInSet: number;\n}\n\ninterface VirtualFlatRowProps<T> {\n row: FlatRow<T>;\n isExpanded: boolean;\n isSelected: boolean;\n isActive: boolean;\n lazyState: LoadState;\n expandable: boolean; // has children OR hasChildren flag\n selectionMode: \"single\" | \"multiple\" | \"none\";\n checkboxes: boolean;\n surface: \"default\" | \"sidebar\";\n onToggleExpand: (id: string) => void;\n onSelect: (id: string) => void;\n onRetry: (id: string) => void;\n registerNodeRef: (id: string, el: HTMLElement | null) => void;\n setActiveId: (id: string | null) => void;\n}\n\nfunction VirtualFlatRow<T>({\n row,\n isExpanded,\n isSelected,\n isActive,\n lazyState,\n expandable,\n selectionMode,\n checkboxes,\n surface,\n onToggleExpand,\n onSelect,\n onRetry,\n registerNodeRef,\n setActiveId,\n}: VirtualFlatRowProps<T>) {\n const { t } = useLocale();\n const { node, level, setSize, posInSet } = row;\n const isLoading = lazyState === \"loading\";\n const isError = lazyState === \"error\";\n // A ReactNode label can't name the row via `aria-label`, so without this the\n // name would fall back to the row's CONTENTS — which includes the accessory\n // (#369). Point at the label span instead, so the accessory is excluded for\n // BOTH label shapes.\n const labelId = useId();\n\n const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };\n\n const handleRowClick = () => {\n if (node.disabled) return;\n setActiveId(node.id);\n onSelect(node.id);\n if (expandable) onToggleExpand(node.id);\n };\n\n return (\n <div\n role=\"treeitem\"\n aria-expanded={expandable ? isExpanded : undefined}\n aria-selected={selectionMode !== \"none\" && !checkboxes ? isSelected : undefined}\n aria-checked={checkboxes ? isSelected : undefined}\n aria-label={typeof node.label === \"string\" ? node.label : undefined}\n aria-labelledby={typeof node.label === \"string\" ? undefined : labelId}\n aria-level={level}\n aria-setsize={setSize}\n aria-posinset={posInSet}\n aria-disabled={node.disabled ? true : undefined}\n aria-busy={isLoading ? true : undefined}\n tabIndex={isActive ? 0 : -1}\n data-tree-id={node.id}\n ref={(el) => registerNodeRef(node.id, el)}\n onClick={node.disabled ? undefined : handleRowClick}\n onFocus={() => setActiveId(node.id)}\n className={cn(\n \"flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-md px-2 py-1.5 text-body outline-none\",\n \"transition-colors duration-fast ease-standard motion-reduce:transition-none\",\n \"hover:bg-accent hover:text-accent-foreground\",\n \"focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n isSelected &&\n selectionMode !== \"none\" &&\n (surface === \"sidebar\"\n ? \"bg-sidebar-accent text-sidebar-accent-foreground font-medium\"\n : \"bg-selection text-selection-foreground font-medium\"),\n node.disabled && \"cursor-not-allowed opacity-50 pointer-events-none\",\n )}\n style={indentStyle}\n >\n {/* expand/collapse chevron */}\n {expandable ? (\n <span\n aria-hidden=\"true\"\n onClick={(e) => {\n e.stopPropagation();\n onToggleExpand(node.id);\n }}\n className={cn(\n \"flex size-4 shrink-0 items-center justify-center rounded transition-transform duration-fast ease-standard motion-reduce:transition-none\",\n isExpanded && \"rotate-90\",\n )}\n >\n {isLoading ? (\n <Spinner className=\"size-3.5\" label=\"Loading children\" />\n ) : (\n <ChevronRight className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n )}\n </span>\n ) : (\n <span aria-hidden=\"true\" className=\"size-4 shrink-0\" />\n )}\n\n {/* optional checkbox for multi-select */}\n {checkboxes && selectionMode === \"multiple\" && (\n <Checkbox\n checked={isSelected}\n disabled={node.disabled}\n aria-hidden=\"true\"\n tabIndex={-1}\n onClick={(e) => {\n e.stopPropagation();\n onSelect(node.id);\n }}\n className=\"shrink-0\"\n />\n )}\n\n {/* optional node icon */}\n {node.icon && (\n <span aria-hidden=\"true\" className=\"flex size-4 shrink-0 items-center justify-center\">\n {node.icon}\n </span>\n )}\n\n {/* label */}\n {isError ? (\n // #124: running text (\"Failed to load…\"), not a mark — the ink rung\n // clears >=4.5:1 and the wrapped icon inherits it fine (>=3:1 trivially).\n <span id={labelId} className=\"min-w-0 flex items-center gap-1 text-destructive-text\">\n <AlertCircle className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span className=\"truncate\">{t(\"ui.tree.failedToLoad\")}</span>\n <button\n type=\"button\"\n aria-label={t(\"ui.tree.retryLoadingChildren\")}\n onClick={(e) => {\n e.stopPropagation();\n onRetry(node.id);\n }}\n className={cn(\n \"ms-1 flex items-center gap-0.5 rounded px-1 py-0.5 text-caption\",\n \"text-muted-foreground hover:text-foreground\",\n \"focus-ring\",\n )}\n >\n <RotateCcw className=\"size-3\" aria-hidden=\"true\" />\n {t(\"ui.tree.retry\")}\n </button>\n </span>\n ) : (\n <span id={labelId} className=\"min-w-0 truncate\">\n {node.label}\n </span>\n )}\n\n {/* optional trailing accessory — a sibling of the label, never inside it\n and never part of the row's accessible name (#369); click/keydown/focus\n are stopped so it never selects, expands or steals the row's handling. */}\n {node.accessory ? (\n <span\n data-slot=\"tree-item-accessory\"\n className=\"ms-auto flex shrink-0 items-center gap-1\"\n onClick={(e) => e.stopPropagation()}\n // The tree's keyboard handler lives on the ROOT and preventDefaults\n // Enter/Space/arrows; without this an interactive accessory could\n // never be activated (its native click is cancelled) and the ROW\n // would be selected instead.\n onKeyDown={(e) => e.stopPropagation()}\n // React's onFocus is focusin (it bubbles), and the row's handler\n // calls setActiveId → el.focus(), which would yank focus straight\n // back out of an interactive accessory.\n onFocus={(e) => e.stopPropagation()}\n >\n {node.accessory}\n </span>\n ) : null}\n </div>\n );\n}\n\n// ---------------------------------------------------------------------------\n// Lazy-loading skeleton row (child of a loading node in non-virtual path)\n// ---------------------------------------------------------------------------\n\nfunction LoadingRow({ level }: { level: number }) {\n const { t } = useLocale();\n const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };\n return (\n <div\n role=\"treeitem\"\n aria-label={t(\"loading\")}\n aria-disabled=\"true\"\n tabIndex={-1}\n className=\"flex min-w-0 items-center gap-1.5 px-2 py-1.5\"\n style={indentStyle}\n >\n <span aria-hidden=\"true\" className=\"size-4 shrink-0\" />\n <Skeleton className=\"h-4 w-24\" />\n </div>\n );\n}\n\nfunction ErrorRow({ level, onRetry }: { level: number; onRetry: () => void }) {\n const { t } = useLocale();\n const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };\n return (\n <div\n role=\"treeitem\"\n aria-label={t(\"ui.tree.failedToLoad\")}\n aria-disabled=\"true\"\n tabIndex={-1}\n className=\"flex min-w-0 items-center gap-1.5 px-2 py-1.5 text-body text-destructive-text\"\n style={indentStyle}\n >\n <span aria-hidden=\"true\" className=\"size-4 shrink-0\" />\n <AlertCircle className=\"size-3.5 shrink-0\" aria-hidden=\"true\" />\n <span className=\"truncate\">{t(\"ui.tree.failedToLoad\")}</span>\n <button\n type=\"button\"\n onClick={(e) => {\n e.stopPropagation();\n onRetry();\n }}\n className={cn(\n \"ms-1 flex items-center gap-0.5 rounded px-1 py-0.5 text-meta\",\n \"text-muted-foreground hover:text-foreground\",\n \"focus-ring\",\n )}\n >\n <RotateCcw className=\"size-3\" aria-hidden=\"true\" />\n {t(\"ui.tree.retry\")}\n </button>\n </div>\n );\n}\n\n// ---------------------------------------------------------------------------\n// TreeItemRow — renders a single treeitem row (recursive, non-virtual path)\n// ---------------------------------------------------------------------------\n\ninterface TreeItemProps<T> {\n node: TreeNode<T>;\n level: number;\n setSize: number;\n posInSet: number;\n expandedIds: Set<string>;\n onExpandedChange: (ids: Set<string>) => void;\n selectionMode: \"single\" | \"multiple\" | \"none\";\n selectedIds: Set<string>;\n onSelectionChange: (ids: Set<string>) => void;\n checkboxes: boolean;\n surface: \"default\" | \"sidebar\";\n activeId: string | null;\n setActiveId: (id: string | null) => void;\n registerNodeRef: (id: string, el: HTMLElement | null) => void;\n lazyState: LazyState;\n onExpandLazy: (node: TreeNode<T>) => void;\n}\n\nfunction TreeItem<T>({\n node,\n level,\n setSize,\n posInSet,\n expandedIds,\n onExpandedChange,\n selectionMode,\n selectedIds,\n onSelectionChange,\n checkboxes,\n surface,\n activeId,\n setActiveId,\n registerNodeRef,\n lazyState,\n onExpandLazy,\n}: TreeItemProps<T>) {\n const hasLoadedChildren = !!node.children?.length;\n // A node is expandable if it has loaded children OR the hasChildren flag is set\n const expandable = hasLoadedChildren || !!node.hasChildren;\n const isExpanded = expandable && expandedIds.has(node.id);\n const isSelected = selectedIds.has(node.id);\n const isActive = activeId === node.id;\n const nodeLoadState: LoadState = lazyState[node.id] ?? \"idle\";\n const isLoading = nodeLoadState === \"loading\";\n const isError = nodeLoadState === \"error\";\n // See VirtualFlatRow: a ReactNode label must name the row via `aria-labelledby`\n // so the trailing accessory never joins the accessible name (#369).\n const labelId = useId();\n\n const toggleExpanded = () => {\n if (!expandable) return;\n const next = new Set(expandedIds);\n if (isExpanded) {\n next.delete(node.id);\n } else {\n next.add(node.id);\n // If no loaded children yet, trigger lazy load\n if (!hasLoadedChildren && node.hasChildren) {\n onExpandLazy(node);\n }\n }\n onExpandedChange(next);\n };\n\n const handleSelect = () => {\n if (node.disabled || selectionMode === \"none\") return;\n setActiveId(node.id);\n if (selectionMode === \"single\") {\n onSelectionChange(new Set([node.id]));\n } else {\n const next = new Set(selectedIds);\n if (next.has(node.id)) {\n next.delete(node.id);\n } else {\n next.add(node.id);\n }\n onSelectionChange(next);\n }\n };\n\n const handleRowClick = () => {\n setActiveId(node.id);\n handleSelect();\n if (expandable) toggleExpanded();\n };\n\n const indentStyle = { paddingLeft: `${(level - 1) * 1}rem` };\n\n return (\n <li role=\"none\">\n {/* treeitem row */}\n <div\n role=\"treeitem\"\n aria-expanded={expandable ? isExpanded : undefined}\n aria-selected={selectionMode !== \"none\" && !checkboxes ? isSelected : undefined}\n aria-checked={checkboxes ? isSelected : undefined}\n aria-label={typeof node.label === \"string\" ? node.label : undefined}\n aria-labelledby={typeof node.label === \"string\" ? undefined : labelId}\n aria-level={level}\n aria-setsize={setSize}\n aria-posinset={posInSet}\n aria-disabled={node.disabled ? true : undefined}\n aria-busy={isLoading ? true : undefined}\n tabIndex={isActive ? 0 : -1}\n data-tree-id={node.id}\n ref={(el) => registerNodeRef(node.id, el)}\n onClick={node.disabled ? undefined : handleRowClick}\n onFocus={() => setActiveId(node.id)}\n className={cn(\n \"flex min-w-0 cursor-pointer select-none items-center gap-1.5 rounded-md px-2 py-1.5 text-body outline-none\",\n \"transition-colors duration-fast ease-standard motion-reduce:transition-none\",\n \"hover:bg-accent hover:text-accent-foreground\",\n \"focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n isSelected &&\n selectionMode !== \"none\" &&\n (surface === \"sidebar\"\n ? \"bg-sidebar-accent text-sidebar-accent-foreground font-medium\"\n : \"bg-selection text-selection-foreground font-medium\"),\n node.disabled && \"cursor-not-allowed opacity-50 pointer-events-none\",\n )}\n style={indentStyle}\n >\n {/* expand/collapse chevron */}\n {expandable ? (\n <span\n aria-hidden=\"true\"\n onClick={(e) => {\n e.stopPropagation();\n toggleExpanded();\n }}\n className={cn(\n \"flex size-4 shrink-0 items-center justify-center rounded transition-transform duration-fast ease-standard motion-reduce:transition-none\",\n isExpanded && !isLoading && \"rotate-90\",\n )}\n >\n {isLoading ? (\n <Spinner className=\"size-3.5\" label=\"Loading children\" />\n ) : (\n <ChevronRight className=\"size-3.5 text-muted-foreground\" aria-hidden=\"true\" />\n )}\n </span>\n ) : (\n <span aria-hidden=\"true\" className=\"size-4 shrink-0\" />\n )}\n\n {/* optional checkbox for multi-select */}\n {checkboxes && selectionMode === \"multiple\" && (\n <Checkbox\n checked={isSelected}\n disabled={node.disabled}\n aria-hidden=\"true\"\n tabIndex={-1}\n onClick={(e) => {\n e.stopPropagation();\n handleSelect();\n }}\n className=\"shrink-0\"\n />\n )}\n\n {/* optional node icon */}\n {node.icon && (\n <span aria-hidden=\"true\" className=\"flex size-4 shrink-0 items-center justify-center\">\n {node.icon}\n </span>\n )}\n\n {/* label */}\n <span id={labelId} className=\"min-w-0 truncate\">\n {node.label}\n </span>\n\n {/* optional trailing accessory — a sibling of the label, never inside\n it and never part of the row's accessible name (#369);\n click/keydown/focus are stopped at the accessory. */}\n {node.accessory ? (\n <span\n data-slot=\"tree-item-accessory\"\n className=\"ms-auto flex shrink-0 items-center gap-1\"\n onClick={(e) => e.stopPropagation()}\n // See VirtualFlatRow: the tree's root keydown handler preventDefaults\n // Enter/Space/arrows, and the row's onFocus (focusin, bubbling) calls\n // setActiveId → el.focus(). Both must stop at the accessory or\n // interactive content in this slot is unusable.\n onKeyDown={(e) => e.stopPropagation()}\n onFocus={(e) => e.stopPropagation()}\n >\n {node.accessory}\n </span>\n ) : null}\n </div>\n\n {/* children group */}\n {isExpanded && (\n <ul role=\"group\" className=\"list-none m-0 p-0\">\n {isLoading ? (\n <li role=\"none\">\n <LoadingRow level={level + 1} />\n </li>\n ) : isError ? (\n <li role=\"none\">\n <ErrorRow level={level + 1} onRetry={() => onExpandLazy(node)} />\n </li>\n ) : (\n node.children?.map((child, i) => (\n <TreeItem\n key={child.id}\n node={child}\n level={level + 1}\n setSize={node.children!.length}\n posInSet={i + 1}\n expandedIds={expandedIds}\n onExpandedChange={onExpandedChange}\n selectionMode={selectionMode}\n selectedIds={selectedIds}\n onSelectionChange={onSelectionChange}\n checkboxes={checkboxes}\n surface={surface}\n activeId={activeId}\n setActiveId={setActiveId}\n registerNodeRef={registerNodeRef}\n lazyState={lazyState}\n onExpandLazy={onExpandLazy}\n />\n ))\n )}\n </ul>\n )}\n </li>\n );\n}\n\n// ---------------------------------------------------------------------------\n// flattenVisibleWithMeta — for the virtual path\n// ---------------------------------------------------------------------------\n\nfunction flattenVisibleWithMeta<T>(\n nodes: TreeNode<T>[],\n expandedIds: Set<string>,\n lazyState: LazyState,\n level = 1,\n parentSetSize?: number,\n): FlatRow<T>[] {\n const result: FlatRow<T>[] = [];\n const setSize = parentSetSize ?? nodes.length;\n nodes.forEach((node, i) => {\n result.push({\n node,\n level,\n setSize,\n posInSet: i + 1,\n });\n const hasLoadedChildren = !!node.children?.length;\n const isExpandable = hasLoadedChildren || !!node.hasChildren;\n if (isExpandable && expandedIds.has(node.id)) {\n const nodeLoad = lazyState[node.id];\n if (nodeLoad === \"loading\" || nodeLoad === \"error\") {\n // placeholder row represented by a synthetic \"loading/error\" node\n // We don't push a row here — the loading/error state is shown via\n // aria-busy on the parent treeitem row (virtual path inline indicators)\n } else if (hasLoadedChildren) {\n const childRows = flattenVisibleWithMeta(\n node.children!,\n expandedIds,\n lazyState,\n level + 1,\n node.children!.length,\n );\n result.push(...childRows);\n }\n }\n });\n return result;\n}\n\n// ---------------------------------------------------------------------------\n// Tree — root component\n// ---------------------------------------------------------------------------\n\n/**\n * A fully accessible tree view with roving tabindex keyboard navigation,\n * single/multiple selection, expand/collapse, checkboxes, and type-ahead.\n *\n * Set `virtualize` to window large trees (>50 visible rows). Set `loadChildren`\n * to lazily fetch children on demand when a node has `hasChildren: true`.\n */\n/** Ancestor ids (root → parent) of `id` within the loaded tree, or `null` if absent. */\nfunction findNodePath(nodes: TreeNode[], id: string, trail: string[] = []): string[] | null {\n for (const n of nodes) {\n if (n.id === id) return trail;\n if (n.children?.length) {\n const found = findNodePath(n.children, id, [...trail, n.id]);\n if (found) return found;\n }\n }\n return null;\n}\n\n/** The node with `id` within the loaded tree, or `null`. */\nfunction findNodeById(nodes: TreeNode[], id: string): TreeNode | null {\n for (const n of nodes) {\n if (n.id === id) return n;\n if (n.children?.length) {\n const found = findNodeById(n.children, id);\n if (found) return found;\n }\n }\n return null;\n}\n\nexport const Tree = forwardRef<HTMLDivElement, TreeProps>(function Tree(\n {\n nodes: nodesProp,\n expandedIds: expandedIdsProp,\n defaultExpandedIds,\n onExpandedChange,\n selectionMode = \"single\",\n selectedIds: selectedIdsProp,\n defaultSelectedIds,\n onSelectionChange,\n checkboxes = false,\n virtualize = false,\n estimateRowHeight = 32,\n overscan = 8,\n maxHeight,\n scrollToId,\n scrollSelectionIntoView = false,\n loadChildren,\n surface = \"default\",\n className,\n ...props\n },\n ref,\n) {\n // Internal mutable tree (supports lazy-loaded children merge)\n const [nodes, setNodes] = useState<TreeNode[]>(() => nodesProp as TreeNode[]);\n\n // Keep internal tree in sync with nodesProp if it changes externally,\n // preserving any children merged in locally via lazy `loadChildren`.\n useEffect(() => {\n setNodes((prev) => reconcileNodes(nodesProp as TreeNode[], prev));\n }, [nodesProp]);\n\n const [expandedIds, setExpandedIds] = useControllableSet(\n expandedIdsProp,\n defaultExpandedIds,\n onExpandedChange,\n );\n const [selectedIds, setSelectedIds] = useControllableSet(\n selectedIdsProp,\n defaultSelectedIds,\n onSelectionChange,\n );\n\n // Lazy-load state per node id\n const [lazyState, setLazyState] = useState<LazyState>({});\n\n // Scroll container ref for virtualizer\n const scrollRef = useRef<HTMLDivElement>(null);\n\n // Pending focus id — used when the target row isn't yet mounted (virtual path)\n const pendingFocusIdRef = useRef<string | null>(null);\n\n // ---------------------------------------------------------------------------\n // Lazy load handler\n // ---------------------------------------------------------------------------\n\n const handleExpandLazy = useCallback(\n async (node: TreeNode) => {\n if (!loadChildren) return;\n if (lazyState[node.id] === \"loading\") return;\n\n setLazyState((prev) => ({ ...prev, [node.id]: \"loading\" }));\n try {\n const children = await loadChildren(node as TreeNode<unknown>);\n setNodes((prev) => mergeChildren(prev, node.id, children as TreeNode[]));\n setLazyState((prev) => {\n const next = { ...prev };\n delete next[node.id];\n return next;\n });\n } catch {\n setLazyState((prev) => ({ ...prev, [node.id]: \"error\" }));\n }\n },\n [loadChildren, lazyState],\n );\n\n // ---------------------------------------------------------------------------\n // Flattened visible rows (for virtualized path and keyboard hook)\n // ---------------------------------------------------------------------------\n\n const flatRows = useMemo(\n () => flattenVisibleWithMeta(nodes, expandedIds, lazyState),\n [nodes, expandedIds, lazyState],\n );\n const flatNodeIds = useMemo(() => flatRows.map((r) => r.node.id), [flatRows]);\n // O(1) row lookup by id — `handleToggleExpand`/`handleSelectVirtual` run on\n // every click/keypress and previously did an O(n) `Array.find` each time.\n const flatRowIndexById = useMemo(() => {\n const map = new Map<string, number>();\n flatRows.forEach((r, i) => map.set(r.node.id, i));\n return map;\n }, [flatRows]);\n\n // ---------------------------------------------------------------------------\n // Keyboard hook\n // ---------------------------------------------------------------------------\n\n // For the virtual path: when navigating to a node whose DOM is not mounted,\n // we need to scroll to it first and then focus when it mounts.\n // We achieve this by passing a scrollToIndex callback to the keyboard hook.\n\n const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element> | null>(null);\n\n const scrollToVirtualIndex = useCallback((index: number) => {\n virtualizerRef.current?.scrollToIndex(index, { align: \"auto\" });\n }, []);\n\n const { activeId, setActiveId, registerNodeRef, onKeyDown } = useTreeKeyboard({\n nodes,\n expandedIds,\n onExpandedChange: setExpandedIds,\n selectionMode,\n selectedIds,\n onSelectionChange: setSelectedIds,\n // Virtualization-aware extras\n virtualize,\n flatNodeIds,\n pendingFocusIdRef,\n scrollToVirtualIndex,\n });\n\n // ---------------------------------------------------------------------------\n // Handle expand/collapse for virtual path (needs to call lazy loader)\n // ---------------------------------------------------------------------------\n\n const handleToggleExpand = useCallback(\n (nodeId: string) => {\n const index = flatRowIndexById.get(nodeId);\n if (index === undefined) return;\n const node = flatRows[index]?.node;\n if (!node) return;\n const hasLoadedChildren = !!node.children?.length;\n const next = new Set(expandedIds);\n if (expandedIds.has(nodeId)) {\n next.delete(nodeId);\n } else {\n next.add(nodeId);\n if (!hasLoadedChildren && node.hasChildren && loadChildren) {\n handleExpandLazy(node);\n }\n }\n setExpandedIds(next);\n },\n [expandedIds, flatRows, flatRowIndexById, setExpandedIds, loadChildren, handleExpandLazy],\n );\n\n const handleSelectVirtual = useCallback(\n (nodeId: string) => {\n const index = flatRowIndexById.get(nodeId);\n if (index === undefined) return;\n const node = flatRows[index]?.node;\n if (!node || node.disabled || selectionMode === \"none\") return;\n if (selectionMode === \"single\") {\n setSelectedIds(new Set([nodeId]));\n } else {\n const next = new Set(selectedIds);\n if (next.has(nodeId)) {\n next.delete(nodeId);\n } else {\n next.add(nodeId);\n }\n setSelectedIds(next);\n }\n },\n [flatRows, flatRowIndexById, selectionMode, selectedIds, setSelectedIds],\n );\n\n // ---------------------------------------------------------------------------\n // Layout effect to flush pending focus once a row mounts (virtual path)\n // ---------------------------------------------------------------------------\n\n // This runs after every render; if pendingFocusIdRef has an id, try to focus it.\n // The registerNodeRef callback will have stored the element if it mounted.\n // We use useLayoutEffect so the DOM is painted before we try to focus.\n const nodeRefsForFlush = useRef<Map<string, HTMLElement>>(new Map());\n\n const registerAndFlush = useCallback(\n (id: string, el: HTMLElement | null) => {\n registerNodeRef(id, el);\n if (el) {\n nodeRefsForFlush.current.set(id, el);\n if (pendingFocusIdRef.current === id) {\n pendingFocusIdRef.current = null;\n el.focus();\n }\n } else {\n nodeRefsForFlush.current.delete(id);\n }\n },\n [registerNodeRef],\n );\n\n // ---------------------------------------------------------------------------\n // Virtualizer (only created in virtual mode)\n // ---------------------------------------------------------------------------\n\n const virtualizer = useVirtualizer({\n count: flatRows.length,\n getScrollElement: () => (virtualize ? scrollRef.current : null),\n estimateSize: () => estimateRowHeight,\n overscan,\n enabled: virtualize,\n });\n\n // Keep ref so keyboard handler can call scrollToIndex\n useEffect(() => {\n if (virtualize) {\n virtualizerRef.current = virtualizer;\n }\n });\n\n // ---------------------------------------------------------------------------\n // Reveal-into-view (scrollToId / scrollSelectionIntoView)\n // ---------------------------------------------------------------------------\n\n // Set while a requested node isn't yet a visible row (its ancestors are still\n // expanding / lazy-loading); the retry effect finishes once the rows change.\n const pendingRevealIdRef = useRef<string | null>(null);\n const prevSelectedRef = useRef<Set<string>>(selectedIds);\n const prevScrollToIdRef = useRef<string | undefined>(undefined);\n\n // Scroll `id` into view if it is currently a visible row. Virtual mode drives\n // the virtualizer (the row may be unmounted); non-virtual uses the mounted DOM\n // node (registered via registerAndFlush in both paths).\n const scrollNodeIntoView = useCallback(\n (id: string): boolean => {\n const index = flatRowIndexById.get(id);\n if (index === undefined) return false;\n if (virtualize) {\n virtualizerRef.current?.scrollToIndex(index, { align: \"center\" });\n } else {\n // `?.` on scrollIntoView too — jsdom doesn't implement it (browser-only).\n nodeRefsForFlush.current.get(id)?.scrollIntoView?.({ block: \"center\" });\n }\n return true;\n },\n [flatRowIndexById, virtualize],\n );\n\n // Reveal `id`: scroll it now if visible, else expand its (loaded) ancestors and\n // kick their lazy loaders so it becomes a row — the retry effect finishes the job.\n const revealNode = useCallback(\n (id: string) => {\n if (scrollNodeIntoView(id)) {\n pendingRevealIdRef.current = null;\n return;\n }\n pendingRevealIdRef.current = id;\n const path = findNodePath(nodes, id);\n if (!path || path.length === 0) return; // unknown / not yet loaded — best effort\n const next = new Set(expandedIds);\n path.forEach((ancestorId) => next.add(ancestorId));\n setExpandedIds(next);\n if (loadChildren) {\n for (const ancestorId of path) {\n const anc = findNodeById(nodes, ancestorId);\n if (anc && anc.hasChildren && !anc.children?.length) void handleExpandLazy(anc);\n }\n }\n },\n [scrollNodeIntoView, nodes, expandedIds, setExpandedIds, loadChildren, handleExpandLazy],\n );\n\n // Latest revealNode so the trigger effect fires on target CHANGE only (without\n // re-running when flatNodeIds / expandedIds churn each render).\n const revealNodeRef = useRef(revealNode);\n revealNodeRef.current = revealNode;\n\n // Trigger: reveal when `scrollToId` changes; else (scrollSelectionIntoView) when\n // the selection gains a node. `scrollToId` wins.\n useEffect(() => {\n const scrollIdChanged = scrollToId !== prevScrollToIdRef.current;\n const selectionChanged = selectedIds !== prevSelectedRef.current;\n const prevSel = prevSelectedRef.current;\n prevScrollToIdRef.current = scrollToId;\n prevSelectedRef.current = selectedIds;\n\n if (scrollToId != null && scrollIdChanged) {\n revealNodeRef.current(scrollToId);\n } else if (scrollToId == null && scrollSelectionIntoView && selectionChanged) {\n const added = [...selectedIds].find((sid) => !prevSel.has(sid));\n const target = added ?? (selectedIds.size > 0 ? [...selectedIds][0] : undefined);\n if (target != null) revealNodeRef.current(target);\n }\n }, [scrollToId, scrollSelectionIntoView, selectedIds]);\n\n // Retry a pending reveal after the rows change (ancestors expanded / lazy data\n // arrived) — scroll once the node materialises, then clear.\n useEffect(() => {\n const id = pendingRevealIdRef.current;\n if (id != null && scrollNodeIntoView(id)) {\n pendingRevealIdRef.current = null;\n }\n }, [scrollNodeIntoView]);\n\n // ---------------------------------------------------------------------------\n // Render: NON-virtual path (backward compatible nested-group DOM)\n // ---------------------------------------------------------------------------\n\n if (!virtualize) {\n return (\n <div\n ref={ref}\n role=\"tree\"\n aria-multiselectable={selectionMode === \"multiple\" ? true : undefined}\n onKeyDown={onKeyDown}\n className={cn(\"w-full select-none\", className)}\n {...props}\n >\n <ul role=\"none\" className=\"m-0 list-none p-0\">\n {nodes.map((node, i) => (\n <TreeItem\n key={node.id}\n node={node}\n level={1}\n setSize={nodes.length}\n posInSet={i + 1}\n expandedIds={expandedIds}\n onExpandedChange={setExpandedIds}\n selectionMode={selectionMode}\n selectedIds={selectedIds}\n onSelectionChange={setSelectedIds}\n checkboxes={checkboxes}\n surface={surface}\n activeId={activeId}\n setActiveId={setActiveId}\n // registerAndFlush (not raw registerNodeRef) so nodeRefsForFlush is\n // populated in the non-virtual path too — lets scrollToId reveal a\n // below-the-fold node. pendingFocusIdRef is virtual-only, so the\n // focus-flush branch never fires here: keyboard behavior is unchanged.\n registerNodeRef={registerAndFlush}\n lazyState={lazyState}\n onExpandLazy={handleExpandLazy}\n />\n ))}\n </ul>\n </div>\n );\n }\n\n // ---------------------------------------------------------------------------\n // Render: VIRTUAL path (flat DOM, windowed rows)\n // ---------------------------------------------------------------------------\n\n const virtualItems = virtualizer.getVirtualItems();\n\n const scrollStyle: React.CSSProperties = maxHeight\n ? { maxHeight, overflowY: \"auto\" }\n : { overflowY: \"auto\" };\n\n return (\n <div\n ref={ref}\n role=\"tree\"\n aria-multiselectable={selectionMode === \"multiple\" ? true : undefined}\n onKeyDown={onKeyDown}\n className={cn(\"w-full select-none\", className)}\n {...props}\n >\n {/* Scroll viewport — role=\"presentation\" so the tree still OWNS the\n treeitems (windowing wrappers are skipped in the a11y tree, keeping\n aria-required-children valid). */}\n <div ref={scrollRef} role=\"presentation\" style={scrollStyle} className=\"outline-none\">\n {/* Total-size spacer — gives the scroll container its full height */}\n <div\n role=\"presentation\"\n style={{ height: virtualizer.getTotalSize(), position: \"relative\" }}\n >\n {virtualItems.map((virtualRow) => {\n const row = flatRows[virtualRow.index];\n if (!row) return null;\n const { node } = row;\n const hasLoadedChildren = !!node.children?.length;\n const expandable = hasLoadedChildren || !!node.hasChildren;\n const isExpanded = expandable && expandedIds.has(node.id);\n const isSelected = selectedIds.has(node.id);\n const isActive = activeId === node.id;\n const nodeLoad: LoadState = lazyState[node.id] ?? \"idle\";\n\n return (\n <div\n key={virtualRow.key}\n role=\"presentation\"\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: `${virtualRow.size}px`,\n transform: `translateY(${virtualRow.start}px)`,\n }}\n >\n <VirtualFlatRow\n row={row}\n isExpanded={isExpanded}\n isSelected={isSelected}\n isActive={isActive}\n lazyState={nodeLoad}\n expandable={expandable}\n selectionMode={selectionMode}\n checkboxes={checkboxes}\n surface={surface}\n onToggleExpand={handleToggleExpand}\n onSelect={handleSelectVirtual}\n onRetry={() => handleExpandLazy(node)}\n registerNodeRef={registerAndFlush}\n setActiveId={setActiveId}\n />\n </div>\n );\n })}\n </div>\n </div>\n </div>\n );\n}) as <T = unknown>(\n props: TreeProps<T> & { ref?: React.Ref<HTMLDivElement> },\n) => React.ReactElement | null;\n"],"mappings":"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","names":["Tree"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/spec-playground/spec-playground.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n forwardRef,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ForwardedRef,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport { Braces, ChevronDown, CircleAlert, CircleCheck, RotateCcw } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../lib/use-controllable-state\";\nimport { Badge } from \"../badge\";\nimport { Button } from \"../button\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"../dropdown-menu\";\nimport { Textarea } from \"../textarea\";\nimport { lineOfParseError, locateJsonPath, offsetOfLine } from \"./locate-json-path\";\n\n/** One problem a validator reports — the shape both the A2UI and DashboardSpec validators use. */\nexport interface SpecPlaygroundError {\n /** JSON-path-like address of the problem (`root.children[2].props.label`, `$.tiles[0]`). */\n path: string;\n /** The validator's machine-readable code (`missing-prop`, `overlap`, …). */\n code: string;\n message: string;\n}\n\n/** What `validate` returns: the typed spec, or the validator's own errors. */\nexport type SpecPlaygroundValidation<TSpec> =\n | { ok: true; spec: TSpec }\n | { ok: false; errors: readonly SpecPlaygroundError[] };\n\n/** An entry in the `Load example` menu. */\nexport interface SpecPlaygroundExample {\n id: string;\n label: string;\n /** The JSON text loaded into the editor. */\n value: string;\n}\n\n/** The playground's status: what the last validated text turned out to be. */\nexport type SpecPlaygroundStatus = \"valid\" | \"invalid\" | \"parse-error\";\n\n/** Every string the playground renders — pass your own to localize it. */\nexport interface SpecPlaygroundLabels {\n /** Accessible name of the default textarea editor. */\n editor: string;\n /** Accessible name of the rendered-result region. */\n preview: string;\n /** Accessible name of the error list. */\n errors: string;\n /** Trigger of the examples menu. */\n loadExample: string;\n /** Resets the editor to its initial text. */\n reset: string;\n /** Status chip: the text validates. */\n valid: string;\n /** Status chip: the validator reported `count` errors. */\n errorCount: (count: number) => string;\n /** Status chip: the text is not JSON. */\n parseError: string;\n /** Shown over the render when it is the last valid spec, not the current text. */\n showingLastValid: string;\n /** Shown in the render pane before any text has validated. */\n nothingValid: string;\n /** Suffix naming the editor line an error points at. */\n line: (line: number) => string;\n}\n\nexport const DEFAULT_SPEC_PLAYGROUND_LABELS: SpecPlaygroundLabels = {\n editor: \"Spec (JSON)\",\n preview: \"Rendered result\",\n errors: \"Problems\",\n loadExample: \"Load example\",\n reset: \"Reset\",\n valid: \"Valid\",\n errorCount: (count) => (count === 1 ? \"1 error\" : `${count} errors`),\n parseError: \"Parse error\",\n showingLastValid: \"Showing last valid\",\n nothingValid: \"Nothing valid to render yet.\",\n line: (line) => `line ${line}`,\n};\n\nexport interface SpecPlaygroundProps<TSpec> extends Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onChange\" | \"defaultValue\"\n> {\n /** The JSON text (controlled). */\n value?: string;\n /** Initial JSON text (uncontrolled); also what `Reset` restores. Default: the first example. */\n defaultValue?: string;\n /** Called with the new text on every edit, example load and reset. */\n onChange?: (value: string) => void;\n /** Checks the parsed JSON; the errors shown are exactly the ones it returns. */\n validate: (json: unknown) => SpecPlaygroundValidation<TSpec>;\n /** Renders a validated spec. */\n render: (spec: TSpec) => ReactNode;\n /** Entries of the `Load example` menu (the menu is hidden without any). */\n examples?: readonly SpecPlaygroundExample[];\n /**\n * The editor. Bind it to `value`/`onChange` yourself. Default: a `Textarea`, so the\n * playground works without a code editor.\n */\n editor?: ReactNode;\n /**\n * Called when an error is chosen, with the editor line its path resolves to — move a custom\n * editor's caret there. The default textarea handles this itself.\n */\n onErrorSelect?: (error: SpecPlaygroundError, line: number | undefined) => void;\n /** Milliseconds between the last edit and validation. Default 250. */\n debounceMs?: number;\n labels?: Partial<SpecPlaygroundLabels>;\n}\n\ntype Checked<TSpec> =\n | { status: \"valid\"; spec: TSpec; errors: readonly SpecPlaygroundError[] }\n | { status: \"invalid\" | \"parse-error\"; errors: readonly SpecPlaygroundError[] };\n\nfunction check<TSpec>(\n text: string,\n validate: (json: unknown) => SpecPlaygroundValidation<TSpec>,\n): Checked<TSpec> {\n let json: unknown;\n try {\n json = JSON.parse(text);\n } catch (error) {\n const message = error instanceof Error ? error.message : String(error);\n return { status: \"parse-error\", errors: [{ path: \"\", code: \"parse-error\", message }] };\n }\n const result = validate(json);\n return result.ok\n ? { status: \"valid\", spec: result.spec, errors: [] }\n : { status: \"invalid\", errors: result.errors };\n}\n\nfunction SpecPlaygroundInner<TSpec>(\n {\n value: valueProp,\n defaultValue,\n onChange,\n validate,\n render,\n examples = [],\n editor,\n onErrorSelect,\n debounceMs = 250,\n labels: labelsProp,\n className,\n ...props\n }: SpecPlaygroundProps<TSpec>,\n ref: ForwardedRef<HTMLDivElement>,\n) {\n const labels = { ...DEFAULT_SPEC_PLAYGROUND_LABELS, ...labelsProp };\n const initial = defaultValue ?? examples[0]?.value ?? \"\";\n const [resetValue] = useState(initial);\n const [value, setValue] = useControllableState(valueProp, initial, onChange);\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n // Validation trails the text by `debounceMs`; the first render validates immediately.\n const [settled, setSettled] = useState(value);\n useEffect(() => {\n if (settled === value) return;\n const timer = setTimeout(() => setSettled(value), debounceMs);\n return () => clearTimeout(timer);\n }, [value, settled, debounceMs]);\n\n const checked = useMemo(() => check(settled, validate), [settled, validate]);\n\n // The last spec that validated — kept on screen while the current text does not.\n const lastValidRef = useRef<{ spec: TSpec } | null>(null);\n if (checked.status === \"valid\") lastValidRef.current = { spec: checked.spec };\n const shown = checked.status === \"valid\" ? { spec: checked.spec } : lastValidRef.current;\n const stale = checked.status !== \"valid\" && shown !== null;\n\n const lineOf = (error: SpecPlaygroundError) =>\n error.code === \"parse-error\"\n ? lineOfParseError(settled, error.message)\n : locateJsonPath(settled, error.path);\n\n const selectError = (error: SpecPlaygroundError) => {\n const line = lineOf(error);\n if (onErrorSelect) return onErrorSelect(error, line);\n const textarea = textareaRef.current;\n if (!textarea) return;\n const offset = line === undefined ? 0 : offsetOfLine(textarea.value, line);\n textarea.focus();\n textarea.setSelectionRange(offset, offset);\n };\n\n const errorListId = `${props.id ?? \"spec-playground\"}-errors`;\n const hasErrors = checked.errors.length > 0;\n\n return (\n <div\n ref={ref}\n data-slot=\"spec-playground\"\n data-status={checked.status}\n className={cn(\"grid min-w-0 gap-4 lg:grid-cols-2\", className)}\n {...props}\n >\n <div data-slot=\"spec-playground-source\" className=\"flex min-w-0 flex-col gap-3\">\n <div data-slot=\"spec-playground-toolbar\" className=\"flex flex-wrap items-center gap-2\">\n <span role=\"status\" aria-live=\"polite\" className=\"me-auto\">\n <Badge\n data-slot=\"spec-playground-status\"\n data-status={checked.status}\n variant={\n checked.status === \"valid\"\n ? \"success\"\n : checked.status === \"invalid\"\n ? \"destructive\"\n : \"warning\"\n }\n className=\"gap-1\"\n >\n {checked.status === \"valid\" ? (\n <CircleCheck aria-hidden=\"true\" size={14} />\n ) : checked.status === \"invalid\" ? (\n <CircleAlert aria-hidden=\"true\" size={14} />\n ) : (\n <Braces aria-hidden=\"true\" size={14} />\n )}\n {checked.status === \"valid\"\n ? labels.valid\n : checked.status === \"invalid\"\n ? labels.errorCount(checked.errors.length)\n : labels.parseError}\n </Badge>\n </span>\n {examples.length > 0 ? (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" data-slot=\"spec-playground-examples\">\n {labels.loadExample}\n <ChevronDown aria-hidden=\"true\" size={14} />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n {examples.map((example) => (\n <DropdownMenuItem\n key={example.id}\n data-example-id={example.id}\n onSelect={() => setValue(example.value)}\n >\n {example.label}\n </DropdownMenuItem>\n ))}\n </DropdownMenuContent>\n </DropdownMenu>\n ) : null}\n <Button\n variant=\"ghost\"\n size=\"sm\"\n data-slot=\"spec-playground-reset\"\n onClick={() => setValue(resetValue)}\n >\n <RotateCcw aria-hidden=\"true\" size={14} />\n {labels.reset}\n </Button>\n </div>\n <div data-slot=\"spec-playground-editor\" className=\"min-h-80 min-w-0\">\n {editor ?? (\n <Textarea\n ref={textareaRef}\n data-slot=\"spec-playground-textarea\"\n aria-label={labels.editor}\n aria-invalid={hasErrors || undefined}\n aria-describedby={hasErrors ? errorListId : undefined}\n spellCheck={false}\n value={value}\n onChange={(event) => setValue(event.target.value)}\n className=\"h-80 min-h-80 resize-y font-mono text-code\"\n />\n )}\n </div>\n {hasErrors ? (\n <ol\n id={errorListId}\n aria-label={labels.errors}\n data-slot=\"spec-playground-errors\"\n className=\"flex flex-col gap-1\"\n >\n {checked.errors.map((error) => {\n const line = lineOf(error);\n return (\n <li key={`${error.path}|${error.code}|${error.message}`}>\n <button\n type=\"button\"\n data-slot=\"spec-playground-error\"\n data-path={error.path}\n data-code={error.code}\n onClick={() => selectError(error)}\n className=\"focus-ring flex w-full min-w-0 flex-wrap items-baseline gap-x-2 rounded-md border-s-2 border-s-destructive px-2 py-1 text-start text-caption hover:bg-muted\"\n >\n {error.path ? <code className=\"font-mono text-code\">{error.path}</code> : null}\n <span className=\"font-mono text-code text-destructive-text\">{error.code}</span>\n <span className=\"min-w-0 break-words text-muted-foreground\">\n {error.message}\n </span>\n {line !== undefined ? (\n <span className=\"text-meta text-muted-foreground\">{labels.line(line)}</span>\n ) : null}\n </button>\n </li>\n );\n })}\n </ol>\n ) : null}\n </div>\n <section\n aria-label={labels.preview}\n data-slot=\"spec-playground-preview\"\n data-stale={stale ? \"\" : undefined}\n className=\"flex min-w-0 flex-col gap-2\"\n >\n {stale ? (\n <Badge variant=\"outline\" data-slot=\"spec-playground-stale\" className=\"self-start\">\n {labels.showingLastValid}\n </Badge>\n ) : null}\n {shown ? (\n render(shown.spec)\n ) : (\n <p className=\"text-caption text-muted-foreground\">{labels.nothingValid}</p>\n )}\n </section>\n </div>\n );\n}\n\n/**\n * A live spec editor: JSON on the left, what it renders on the right (stacked below 1024 px).\n * Edits are validated after a short pause by the host's own `validate`; its errors are listed\n * under the editor (`path · code · message`, click to jump to the line) and the render keeps\n * the last valid spec, marked as such, until the text validates again. The editor, validator\n * and renderer all come from the host — this component owns only the loop between them.\n */\nexport const SpecPlayground = forwardRef(SpecPlaygroundInner) as <TSpec>(\n props: SpecPlaygroundProps<TSpec> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n(SpecPlayground as { displayName?: string }).displayName = \"SpecPlayground\";\n"],"mappings":"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","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|