@flowstack-ui/agent-tools 0.1.0-bootstrap.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/.codex-plugin/plugin.json +37 -0
- package/CHANGELOG.md +21 -0
- package/LICENSE +21 -0
- package/README.md +125 -0
- package/docs/architecture.md +77 -0
- package/docs/releasing.md +26 -0
- package/docs/testing.md +32 -0
- package/package.json +63 -0
- package/public/index.json +2073 -0
- package/public/llms.txt +19 -0
- package/public/packages/atom/0.24.0/components/accordion.txt +131 -0
- package/public/packages/atom/0.24.0/components/alert-dialog.txt +112 -0
- package/public/packages/atom/0.24.0/components/app-bar.txt +96 -0
- package/public/packages/atom/0.24.0/components/aspect-ratio.txt +111 -0
- package/public/packages/atom/0.24.0/components/avatar.txt +119 -0
- package/public/packages/atom/0.24.0/components/badge.txt +123 -0
- package/public/packages/atom/0.24.0/components/bottom-navigation.txt +96 -0
- package/public/packages/atom/0.24.0/components/breadcrumb.txt +96 -0
- package/public/packages/atom/0.24.0/components/button.txt +98 -0
- package/public/packages/atom/0.24.0/components/carousel.txt +128 -0
- package/public/packages/atom/0.24.0/components/checkbox-group.txt +118 -0
- package/public/packages/atom/0.24.0/components/checkbox.txt +100 -0
- package/public/packages/atom/0.24.0/components/clipboard.txt +112 -0
- package/public/packages/atom/0.24.0/components/collapsible.txt +112 -0
- package/public/packages/atom/0.24.0/components/color-picker.txt +117 -0
- package/public/packages/atom/0.24.0/components/combobox.txt +126 -0
- package/public/packages/atom/0.24.0/components/context-menu.txt +114 -0
- package/public/packages/atom/0.24.0/components/data-grid.txt +136 -0
- package/public/packages/atom/0.24.0/components/dialog.txt +116 -0
- package/public/packages/atom/0.24.0/components/direction.txt +132 -0
- package/public/packages/atom/0.24.0/components/divider.txt +94 -0
- package/public/packages/atom/0.24.0/components/drag-drop.txt +141 -0
- package/public/packages/atom/0.24.0/components/drawer.txt +96 -0
- package/public/packages/atom/0.24.0/components/dropdown-menu.txt +112 -0
- package/public/packages/atom/0.24.0/components/feed.txt +132 -0
- package/public/packages/atom/0.24.0/components/field.txt +108 -0
- package/public/packages/atom/0.24.0/components/fieldset.txt +96 -0
- package/public/packages/atom/0.24.0/components/file-upload.txt +120 -0
- package/public/packages/atom/0.24.0/components/form.txt +98 -0
- package/public/packages/atom/0.24.0/components/hover-card.txt +114 -0
- package/public/packages/atom/0.24.0/components/image.txt +94 -0
- package/public/packages/atom/0.24.0/components/input.txt +96 -0
- package/public/packages/atom/0.24.0/components/label.txt +121 -0
- package/public/packages/atom/0.24.0/components/link.txt +100 -0
- package/public/packages/atom/0.24.0/components/list.txt +131 -0
- package/public/packages/atom/0.24.0/components/listbox.txt +120 -0
- package/public/packages/atom/0.24.0/components/menu.txt +126 -0
- package/public/packages/atom/0.24.0/components/menubar.txt +120 -0
- package/public/packages/atom/0.24.0/components/modal.txt +118 -0
- package/public/packages/atom/0.24.0/components/multi-select.txt +120 -0
- package/public/packages/atom/0.24.0/components/nav-list.txt +104 -0
- package/public/packages/atom/0.24.0/components/navigation-menu.txt +104 -0
- package/public/packages/atom/0.24.0/components/number-input.txt +124 -0
- package/public/packages/atom/0.24.0/components/otp-field.txt +122 -0
- package/public/packages/atom/0.24.0/components/pagination.txt +111 -0
- package/public/packages/atom/0.24.0/components/password-toggle-field.txt +116 -0
- package/public/packages/atom/0.24.0/components/popover.txt +122 -0
- package/public/packages/atom/0.24.0/components/pressable.txt +94 -0
- package/public/packages/atom/0.24.0/components/progress.txt +130 -0
- package/public/packages/atom/0.24.0/components/radio-group.txt +118 -0
- package/public/packages/atom/0.24.0/components/rating.txt +122 -0
- package/public/packages/atom/0.24.0/components/reorder.txt +141 -0
- package/public/packages/atom/0.24.0/components/scroll-area.txt +96 -0
- package/public/packages/atom/0.24.0/components/select.txt +126 -0
- package/public/packages/atom/0.24.0/components/sidebar.txt +96 -0
- package/public/packages/atom/0.24.0/components/skip-link.txt +96 -0
- package/public/packages/atom/0.24.0/components/slider.txt +124 -0
- package/public/packages/atom/0.24.0/components/swipeable-item.txt +118 -0
- package/public/packages/atom/0.24.0/components/switch.txt +116 -0
- package/public/packages/atom/0.24.0/components/table.txt +128 -0
- package/public/packages/atom/0.24.0/components/tabs.txt +96 -0
- package/public/packages/atom/0.24.0/components/textarea.txt +96 -0
- package/public/packages/atom/0.24.0/components/toast.txt +124 -0
- package/public/packages/atom/0.24.0/components/toggle-group.txt +118 -0
- package/public/packages/atom/0.24.0/components/toggle.txt +110 -0
- package/public/packages/atom/0.24.0/components/toolbar.txt +98 -0
- package/public/packages/atom/0.24.0/components/tooltip.txt +112 -0
- package/public/packages/atom/0.24.0/components/tree-grid.txt +138 -0
- package/public/packages/atom/0.24.0/components/tree.txt +138 -0
- package/public/packages/atom/0.24.0/components/visually-hidden.txt +119 -0
- package/public/packages/atom/0.24.0/docs/guides/agent-knowledge.txt +55 -0
- package/public/packages/atom/0.24.0/docs/guides/getting-started.txt +65 -0
- package/public/packages/atom/0.24.0/docs/guides/imports.txt +26 -0
- package/public/packages/atom/0.24.0/docs/guides/public-api.txt +100 -0
- package/public/packages/atom/0.24.0/guides/behavior-composition.txt +277 -0
- package/public/packages/atom/0.24.0/guides/layer-selection.txt +807 -0
- package/public/packages/atom/0.24.0/index.txt +89 -0
- package/public/packages/brick/0.1.11/components/accordion.txt +158 -0
- package/public/packages/brick/0.1.11/components/alert-dialog.txt +175 -0
- package/public/packages/brick/0.1.11/components/app-bar.txt +134 -0
- package/public/packages/brick/0.1.11/components/appearance.txt +143 -0
- package/public/packages/brick/0.1.11/components/aspect-ratio.txt +136 -0
- package/public/packages/brick/0.1.11/components/avatar.txt +152 -0
- package/public/packages/brick/0.1.11/components/badge.txt +139 -0
- package/public/packages/brick/0.1.11/components/bleed.txt +104 -0
- package/public/packages/brick/0.1.11/components/bottom-navigation.txt +106 -0
- package/public/packages/brick/0.1.11/components/breadcrumb.txt +96 -0
- package/public/packages/brick/0.1.11/components/button.txt +103 -0
- package/public/packages/brick/0.1.11/components/card.txt +132 -0
- package/public/packages/brick/0.1.11/components/carousel.txt +206 -0
- package/public/packages/brick/0.1.11/components/checkbox-group.txt +175 -0
- package/public/packages/brick/0.1.11/components/checkbox.txt +103 -0
- package/public/packages/brick/0.1.11/components/chip.txt +128 -0
- package/public/packages/brick/0.1.11/components/code-block.txt +134 -0
- package/public/packages/brick/0.1.11/components/code.txt +120 -0
- package/public/packages/brick/0.1.11/components/collapsible.txt +179 -0
- package/public/packages/brick/0.1.11/components/color-picker.txt +135 -0
- package/public/packages/brick/0.1.11/components/color-swatch.txt +98 -0
- package/public/packages/brick/0.1.11/components/combobox.txt +157 -0
- package/public/packages/brick/0.1.11/components/container.txt +112 -0
- package/public/packages/brick/0.1.11/components/context-menu.txt +174 -0
- package/public/packages/brick/0.1.11/components/data-grid.txt +199 -0
- package/public/packages/brick/0.1.11/components/data-list.txt +115 -0
- package/public/packages/brick/0.1.11/components/dialog.txt +176 -0
- package/public/packages/brick/0.1.11/components/divider.txt +104 -0
- package/public/packages/brick/0.1.11/components/drawer.txt +146 -0
- package/public/packages/brick/0.1.11/components/dropdown-menu.txt +179 -0
- package/public/packages/brick/0.1.11/components/feed.txt +143 -0
- package/public/packages/brick/0.1.11/components/field.txt +115 -0
- package/public/packages/brick/0.1.11/components/fieldset.txt +103 -0
- package/public/packages/brick/0.1.11/components/file-upload.txt +154 -0
- package/public/packages/brick/0.1.11/components/form.txt +108 -0
- package/public/packages/brick/0.1.11/components/frame.txt +132 -0
- package/public/packages/brick/0.1.11/components/grid.txt +141 -0
- package/public/packages/brick/0.1.11/components/group.txt +136 -0
- package/public/packages/brick/0.1.11/components/hide.txt +121 -0
- package/public/packages/brick/0.1.11/components/hover-card.txt +156 -0
- package/public/packages/brick/0.1.11/components/icon-button.txt +119 -0
- package/public/packages/brick/0.1.11/components/icon.txt +160 -0
- package/public/packages/brick/0.1.11/components/image.txt +163 -0
- package/public/packages/brick/0.1.11/components/input.txt +101 -0
- package/public/packages/brick/0.1.11/components/link-box.txt +161 -0
- package/public/packages/brick/0.1.11/components/link.txt +133 -0
- package/public/packages/brick/0.1.11/components/list.txt +139 -0
- package/public/packages/brick/0.1.11/components/menubar.txt +174 -0
- package/public/packages/brick/0.1.11/components/multi-select.txt +153 -0
- package/public/packages/brick/0.1.11/components/nav-list.txt +130 -0
- package/public/packages/brick/0.1.11/components/navigation-menu.txt +150 -0
- package/public/packages/brick/0.1.11/components/notification-badge.txt +148 -0
- package/public/packages/brick/0.1.11/components/number-input.txt +150 -0
- package/public/packages/brick/0.1.11/components/otp-field.txt +146 -0
- package/public/packages/brick/0.1.11/components/pagination.txt +124 -0
- package/public/packages/brick/0.1.11/components/password-toggle-field.txt +146 -0
- package/public/packages/brick/0.1.11/components/popover.txt +181 -0
- package/public/packages/brick/0.1.11/components/progress-circle.txt +142 -0
- package/public/packages/brick/0.1.11/components/progress.txt +150 -0
- package/public/packages/brick/0.1.11/components/radio-group.txt +152 -0
- package/public/packages/brick/0.1.11/components/rating.txt +151 -0
- package/public/packages/brick/0.1.11/components/reorderable-list.txt +130 -0
- package/public/packages/brick/0.1.11/components/scroll-area.txt +110 -0
- package/public/packages/brick/0.1.11/components/section.txt +118 -0
- package/public/packages/brick/0.1.11/components/segment-group.txt +116 -0
- package/public/packages/brick/0.1.11/components/select.txt +157 -0
- package/public/packages/brick/0.1.11/components/show.txt +121 -0
- package/public/packages/brick/0.1.11/components/sidebar.txt +126 -0
- package/public/packages/brick/0.1.11/components/skeleton.txt +127 -0
- package/public/packages/brick/0.1.11/components/skip-link.txt +102 -0
- package/public/packages/brick/0.1.11/components/slider.txt +147 -0
- package/public/packages/brick/0.1.11/components/stack.txt +155 -0
- package/public/packages/brick/0.1.11/components/status.txt +110 -0
- package/public/packages/brick/0.1.11/components/surface.txt +194 -0
- package/public/packages/brick/0.1.11/components/swipeable-item.txt +154 -0
- package/public/packages/brick/0.1.11/components/switch.txt +152 -0
- package/public/packages/brick/0.1.11/components/table.txt +183 -0
- package/public/packages/brick/0.1.11/components/tabs.txt +136 -0
- package/public/packages/brick/0.1.11/components/text.txt +148 -0
- package/public/packages/brick/0.1.11/components/textarea.txt +101 -0
- package/public/packages/brick/0.1.11/components/toast.txt +150 -0
- package/public/packages/brick/0.1.11/components/toggle-group.txt +149 -0
- package/public/packages/brick/0.1.11/components/toggle.txt +140 -0
- package/public/packages/brick/0.1.11/components/toolbar.txt +118 -0
- package/public/packages/brick/0.1.11/components/tooltip.txt +156 -0
- package/public/packages/brick/0.1.11/components/tree-grid.txt +160 -0
- package/public/packages/brick/0.1.11/components/tree.txt +156 -0
- package/public/packages/brick/0.1.11/components/visually-hidden.txt +123 -0
- package/public/packages/brick/0.1.11/components/z-stack.txt +143 -0
- package/public/packages/brick/0.1.11/docs/guides/agent-knowledge.txt +67 -0
- package/public/packages/brick/0.1.11/docs/guides/appearance-and-tokens.txt +179 -0
- package/public/packages/brick/0.1.11/docs/guides/browser-support.txt +25 -0
- package/public/packages/brick/0.1.11/docs/guides/control-sizing.txt +59 -0
- package/public/packages/brick/0.1.11/docs/guides/installation.txt +79 -0
- package/public/packages/brick/0.1.11/docs/guides/theme-contract.txt +90 -0
- package/public/packages/brick/0.1.11/guides/interface-composition.txt +665 -0
- package/public/packages/brick/0.1.11/guides/layer-selection.txt +1437 -0
- package/public/packages/brick/0.1.11/index.txt +110 -0
- package/public/packages/colors/0.1.1/docs/agent-knowledge.txt +63 -0
- package/public/packages/colors/0.1.1/docs/architecture.txt +74 -0
- package/public/packages/colors/0.1.1/docs/color-foundations.txt +128 -0
- package/public/packages/colors/0.1.1/docs/compatibility.txt +75 -0
- package/public/packages/colors/0.1.1/docs/dependency-qualification.txt +117 -0
- package/public/packages/colors/0.1.1/docs/installation.txt +48 -0
- package/public/packages/colors/0.1.1/docs/palette-generation.txt +151 -0
- package/public/packages/colors/0.1.1/docs/releasing.txt +34 -0
- package/public/packages/colors/0.1.1/docs/testing.txt +51 -0
- package/public/packages/colors/0.1.1/guides/colors-system.txt +282 -0
- package/public/packages/colors/0.1.1/index.txt +29 -0
- package/public/packages/colors/0.1.1/operations/color-conversion.txt +14 -0
- package/public/packages/colors/0.1.1/operations/color-inspection.txt +23 -0
- package/public/packages/colors/0.1.1/operations/color-measurement.txt +18 -0
- package/public/packages/colors/0.1.1/operations/color-provenance.txt +14 -0
- package/public/packages/colors/0.1.1/operations/named-palette-reference.txt +15 -0
- package/public/packages/colors/0.1.1/operations/palette-candidate.txt +37 -0
- package/public/packages/theme/0.1.1/docs/agent-knowledge.txt +44 -0
- package/public/packages/theme/0.1.1/docs/appearances-and-portals.txt +41 -0
- package/public/packages/theme/0.1.1/docs/architecture.txt +121 -0
- package/public/packages/theme/0.1.1/docs/authoring.txt +141 -0
- package/public/packages/theme/0.1.1/docs/colors-interchange.txt +82 -0
- package/public/packages/theme/0.1.1/docs/fonts.txt +40 -0
- package/public/packages/theme/0.1.1/docs/installation.txt +45 -0
- package/public/packages/theme/0.1.1/docs/migration.txt +40 -0
- package/public/packages/theme/0.1.1/docs/testing.txt +64 -0
- package/public/packages/theme/0.1.1/docs/troubleshooting.txt +53 -0
- package/public/packages/theme/0.1.1/guides/theme-system.txt +340 -0
- package/public/packages/theme/0.1.1/index.txt +31 -0
- package/public/packages/theme/0.1.1/operations/brick-contract-compatibility.txt +35 -0
- package/public/packages/theme/0.1.1/operations/colors-interchange.txt +35 -0
- package/public/packages/theme/0.1.1/operations/theme-artifacts.txt +19 -0
- package/public/packages/theme/0.1.1/operations/theme-cli.txt +10 -0
- package/public/packages/theme/0.1.1/operations/theme-compilation.txt +23 -0
- package/public/packages/theme/0.1.1/operations/theme-definition.txt +36 -0
- package/public/packages/theme/0.1.1/operations/theme-validation.txt +19 -0
- package/public/tasks/data.txt +39 -0
- package/public/tasks/forms.txt +65 -0
- package/public/tasks/layout.txt +37 -0
- package/public/tasks/navigation.txt +51 -0
- package/public/tasks/overlays.txt +39 -0
- package/public/tasks/theming.txt +37 -0
- package/skills/flowstack-ui-builder/SKILL.md +35 -0
- package/skills/flowstack-ui-builder/agents/openai.yaml +4 -0
- package/skills/flowstack-ui-builder/scripts/resolve-agent-knowledge.mjs +399 -0
- package/skills/flowstack-ui-compose/SKILL.md +32 -0
- package/skills/flowstack-ui-compose/agents/openai.yaml +4 -0
- package/skills/flowstack-ui-compose/scripts/resolve-agent-knowledge.mjs +399 -0
- package/skills/flowstack-ui-maintainer/SKILL.md +40 -0
- package/skills/flowstack-ui-maintainer/agents/openai.yaml +4 -0
- package/skills/flowstack-ui-maintainer/scripts/resolve-agent-knowledge.mjs +399 -0
- package/skills/flowstack-ui-review/SKILL.md +29 -0
- package/skills/flowstack-ui-review/agents/openai.yaml +4 -0
- package/skills/flowstack-ui-review/scripts/resolve-agent-knowledge.mjs +399 -0
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
# Tree
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
Kind: component
|
|
5
|
+
ID: tree
|
|
6
|
+
|
|
7
|
+
# Tree agent guide
|
|
8
|
+
|
|
9
|
+
## Purpose
|
|
10
|
+
|
|
11
|
+
Provide one-dimensional hierarchical navigation with tree semantics, active-descendant focus, controlled selection and expansion, typeahead, form state, and nested group relationships.
|
|
12
|
+
|
|
13
|
+
## Use when
|
|
14
|
+
|
|
15
|
+
- Users navigate and optionally select expandable parent-child items in one primary column, such as a file browser or category picker.
|
|
16
|
+
|
|
17
|
+
## Choose something else when
|
|
18
|
+
|
|
19
|
+
- Each hierarchical row has several navigable columns, or the sections contain general disclosure content rather than selectable items. Use TreeGrid or Accordion.
|
|
20
|
+
- Items form a flat option collection without parent-child expansion. Use Listbox.
|
|
21
|
+
|
|
22
|
+
## Required composition
|
|
23
|
+
|
|
24
|
+
- Give Root an accessible name and deliberate selection, expansion, orientation, direction, and form state. Compose uniquely valued Item parts with ItemText for reliable naming and typeahead, mark only real parents expandable, and place each nested Group inside its parent Item.
|
|
25
|
+
|
|
26
|
+
## Rules
|
|
27
|
+
|
|
28
|
+
- **MUST:** Name Root and preserve tree, treeitem, and group relationships, automatic levels, ItemText labeling, and parent-child nesting.
|
|
29
|
+
- **MUST:** Give every Item a stable unique value; align scalar or array selection with multiple; and keep selection and expandedValue controlled or uncontrolled without mixing ownership.
|
|
30
|
+
- **MUST:** Keep DOM focus on Root and preserve active-descendant focus, visible-item Arrow movement, expand and collapse or parent movement, Home and End, typeahead, disabled skipping, loop policy, and RTL behavior.
|
|
31
|
+
- **MUST:** Mark only actual parent Items expandable, keep collapsed descendants out of visible navigation, and ensure active state relocates to a visible ancestor or resets when controlled expansion hides it.
|
|
32
|
+
- **MUST:** Preserve Field naming and descriptions, disabled, read-only, required, invalid, and named form submission; read-only may navigate but must not change selection or expansion through selection keys.
|
|
33
|
+
- **MUST:** If a large tree is windowed, retain complete parent relationships and logical accessibility metadata and keep the active descendant and expansion target mounted; generic Virtualizer does not reconstruct tree semantics.
|
|
34
|
+
|
|
35
|
+
## Common mistakes
|
|
36
|
+
|
|
37
|
+
- **Avoid:** Building arbitrary disclosure sections as treeitems or marking leaf Items expandable merely to show an icon. **Instead:** Use Accordion for content sections and set expandable only when the Item owns a nested Group.
|
|
38
|
+
- **Avoid:** Giving each Item a Tab stop, omitting ItemText for complex labels, or allowing duplicate values. **Instead:** Keep Root as the sole composite focus target, register reliable visible text, and use durable unique identities.
|
|
39
|
+
|
|
40
|
+
## Validation checklist
|
|
41
|
+
|
|
42
|
+
- Verify Root naming; tree, treeitem, and group relationships; automatic levels; ItemText naming; unique values; nested visibility; and form submission in the final DOM.
|
|
43
|
+
- Exercise initial focus, LTR and RTL expansion and parent keys, orientation movement, Home and End, loop boundaries, typeahead cycling and prefixes, pointer selection, disabled Items, and scroll-to-nearest behavior.
|
|
44
|
+
- Verify single and multiple controlled and uncontrolled selection, controlled expansion, collapse of the active branch, force-mounted hidden Groups, read-only and Field state, and asChild or render prop merging.
|
|
45
|
+
- For windowed trees, verify every visible level and parent relationship is correct and aria-activedescendant never references an unmounted Item.
|
|
46
|
+
|
|
47
|
+
## Related guidance
|
|
48
|
+
|
|
49
|
+
- `tree-grid`
|
|
50
|
+
- `accordion`
|
|
51
|
+
- `listbox`
|
|
52
|
+
- `collection`
|
|
53
|
+
- `virtualizer`
|
|
54
|
+
|
|
55
|
+
## Machine record
|
|
56
|
+
|
|
57
|
+
```json
|
|
58
|
+
{
|
|
59
|
+
"schema": "flowstack.agent-component.v1",
|
|
60
|
+
"id": "tree",
|
|
61
|
+
"name": "Tree",
|
|
62
|
+
"package": "@flowstack-ui/atom",
|
|
63
|
+
"layer": "atom",
|
|
64
|
+
"kind": "component",
|
|
65
|
+
"purpose": "Provide one-dimensional hierarchical navigation with tree semantics, active-descendant focus, controlled selection and expansion, typeahead, form state, and nested group relationships.",
|
|
66
|
+
"useWhen": [
|
|
67
|
+
"Users navigate and optionally select expandable parent-child items in one primary column, such as a file browser or category picker."
|
|
68
|
+
],
|
|
69
|
+
"avoidWhen": [
|
|
70
|
+
{
|
|
71
|
+
"condition": "Each hierarchical row has several navigable columns, or the sections contain general disclosure content rather than selectable items.",
|
|
72
|
+
"useInstead": "TreeGrid or Accordion"
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"condition": "Items form a flat option collection without parent-child expansion.",
|
|
76
|
+
"useInstead": "Listbox"
|
|
77
|
+
}
|
|
78
|
+
],
|
|
79
|
+
"composition": [
|
|
80
|
+
"Give Root an accessible name and deliberate selection, expansion, orientation, direction, and form state. Compose uniquely valued Item parts with ItemText for reliable naming and typeahead, mark only real parents expandable, and place each nested Group inside its parent Item."
|
|
81
|
+
],
|
|
82
|
+
"rules": [
|
|
83
|
+
{
|
|
84
|
+
"id": "tree-name-anatomy",
|
|
85
|
+
"level": "must",
|
|
86
|
+
"statement": "Name Root and preserve tree, treeitem, and group relationships, automatic levels, ItemText labeling, and parent-child nesting."
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"id": "tree-identity-state",
|
|
90
|
+
"level": "must",
|
|
91
|
+
"statement": "Give every Item a stable unique value; align scalar or array selection with multiple; and keep selection and expandedValue controlled or uncontrolled without mixing ownership."
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"id": "tree-focus-keyboard",
|
|
95
|
+
"level": "must",
|
|
96
|
+
"statement": "Keep DOM focus on Root and preserve active-descendant focus, visible-item Arrow movement, expand and collapse or parent movement, Home and End, typeahead, disabled skipping, loop policy, and RTL behavior."
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"id": "tree-visible-state",
|
|
100
|
+
"level": "must",
|
|
101
|
+
"statement": "Mark only actual parent Items expandable, keep collapsed descendants out of visible navigation, and ensure active state relocates to a visible ancestor or resets when controlled expansion hides it."
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"id": "tree-form-state",
|
|
105
|
+
"level": "must",
|
|
106
|
+
"statement": "Preserve Field naming and descriptions, disabled, read-only, required, invalid, and named form submission; read-only may navigate but must not change selection or expansion through selection keys."
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"id": "tree-virtualization",
|
|
110
|
+
"level": "must",
|
|
111
|
+
"statement": "If a large tree is windowed, retain complete parent relationships and logical accessibility metadata and keep the active descendant and expansion target mounted; generic Virtualizer does not reconstruct tree semantics."
|
|
112
|
+
}
|
|
113
|
+
],
|
|
114
|
+
"commonMistakes": [
|
|
115
|
+
{
|
|
116
|
+
"mistake": "Building arbitrary disclosure sections as treeitems or marking leaf Items expandable merely to show an icon.",
|
|
117
|
+
"correction": "Use Accordion for content sections and set expandable only when the Item owns a nested Group."
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"mistake": "Giving each Item a Tab stop, omitting ItemText for complex labels, or allowing duplicate values.",
|
|
121
|
+
"correction": "Keep Root as the sole composite focus target, register reliable visible text, and use durable unique identities."
|
|
122
|
+
}
|
|
123
|
+
],
|
|
124
|
+
"validation": [
|
|
125
|
+
"Verify Root naming; tree, treeitem, and group relationships; automatic levels; ItemText naming; unique values; nested visibility; and form submission in the final DOM.",
|
|
126
|
+
"Exercise initial focus, LTR and RTL expansion and parent keys, orientation movement, Home and End, loop boundaries, typeahead cycling and prefixes, pointer selection, disabled Items, and scroll-to-nearest behavior.",
|
|
127
|
+
"Verify single and multiple controlled and uncontrolled selection, controlled expansion, collapse of the active branch, force-mounted hidden Groups, read-only and Field state, and asChild or render prop merging.",
|
|
128
|
+
"For windowed trees, verify every visible level and parent relationship is correct and aria-activedescendant never references an unmounted Item."
|
|
129
|
+
],
|
|
130
|
+
"related": [
|
|
131
|
+
"tree-grid",
|
|
132
|
+
"accordion",
|
|
133
|
+
"listbox",
|
|
134
|
+
"collection",
|
|
135
|
+
"virtualizer"
|
|
136
|
+
]
|
|
137
|
+
}
|
|
138
|
+
```
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
# VisuallyHidden
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
Kind: component
|
|
5
|
+
ID: visually-hidden
|
|
6
|
+
|
|
7
|
+
# VisuallyHidden agent guide
|
|
8
|
+
|
|
9
|
+
## Purpose
|
|
10
|
+
|
|
11
|
+
Keep authored text or semantic content available to assistive technology while removing it from visual layout through an authoritative hiding contract.
|
|
12
|
+
|
|
13
|
+
## Use when
|
|
14
|
+
|
|
15
|
+
- Assistive technology needs words that sighted users already infer from visible context, such as the name of an icon-only control or extra link context.
|
|
16
|
+
|
|
17
|
+
## Choose something else when
|
|
18
|
+
|
|
19
|
+
- The explanation benefits everyone, content is decorative and should be hidden from assistive technology, or interactive content would become invisible to sighted keyboard users. Use visible text, aria-hidden, or a visibly focusable interaction.
|
|
20
|
+
|
|
21
|
+
## Required composition
|
|
22
|
+
|
|
23
|
+
- Place concise meaningful content inside Root within the element whose accessible name or reading context it should extend. Hide decorative visual siblings with aria-hidden when needed, and keep any focusable control itself visible rather than wrapping it in VisuallyHidden.
|
|
24
|
+
|
|
25
|
+
## Rules
|
|
26
|
+
|
|
27
|
+
- **MUST:** Use Root only for content that should remain in the accessibility tree while being visually absent; it does not hide content from assistive technology.
|
|
28
|
+
- **MUST:** Prefer visible text whenever the name, instruction, status, or explanation also benefits sighted users.
|
|
29
|
+
- **MUST:** Do not visually hide an interactive element that can receive keyboard focus unless it has a deliberate visible-on-focus pattern owned elsewhere.
|
|
30
|
+
- **MUST:** Author concise text in the correct naming or reading-order context and verify it does not duplicate an existing accessible name.
|
|
31
|
+
- **MUST:** Do not override Atom's hiding geometry; consumer styles merge first and the exported visuallyHiddenStyle contract remains authoritative.
|
|
32
|
+
|
|
33
|
+
## Common mistakes
|
|
34
|
+
|
|
35
|
+
- **Avoid:** Using VisuallyHidden to hide a decorative icon from screen readers or to conceal required instructions from sighted users. **Instead:** Use aria-hidden for decoration and keep broadly useful instructions visible.
|
|
36
|
+
- **Avoid:** Wrapping an icon-only Button itself in VisuallyHidden, creating an invisible focus target. **Instead:** Keep the Button visible and place VisuallyHidden text inside it as its accessible label.
|
|
37
|
+
|
|
38
|
+
## Validation checklist
|
|
39
|
+
|
|
40
|
+
- Inspect the accessibility tree and computed accessible name or description to confirm hidden text is present once, in the intended reading order, without duplicate wording.
|
|
41
|
+
- Verify no focusable element becomes visually absent, visible text remains available where broadly useful, and decorative content uses aria-hidden instead.
|
|
42
|
+
- Verify authoritative hiding styles survive consumer style, asChild, and render composition and that the final element adds no unintended role or ARIA attributes.
|
|
43
|
+
|
|
44
|
+
## Related guidance
|
|
45
|
+
|
|
46
|
+
- `label`
|
|
47
|
+
- `button`
|
|
48
|
+
|
|
49
|
+
## Machine record
|
|
50
|
+
|
|
51
|
+
```json
|
|
52
|
+
{
|
|
53
|
+
"schema": "flowstack.agent-component.v1",
|
|
54
|
+
"id": "visually-hidden",
|
|
55
|
+
"name": "VisuallyHidden",
|
|
56
|
+
"package": "@flowstack-ui/atom",
|
|
57
|
+
"layer": "atom",
|
|
58
|
+
"kind": "component",
|
|
59
|
+
"purpose": "Keep authored text or semantic content available to assistive technology while removing it from visual layout through an authoritative hiding contract.",
|
|
60
|
+
"useWhen": [
|
|
61
|
+
"Assistive technology needs words that sighted users already infer from visible context, such as the name of an icon-only control or extra link context."
|
|
62
|
+
],
|
|
63
|
+
"avoidWhen": [
|
|
64
|
+
{
|
|
65
|
+
"condition": "The explanation benefits everyone, content is decorative and should be hidden from assistive technology, or interactive content would become invisible to sighted keyboard users.",
|
|
66
|
+
"useInstead": "visible text, aria-hidden, or a visibly focusable interaction"
|
|
67
|
+
}
|
|
68
|
+
],
|
|
69
|
+
"composition": [
|
|
70
|
+
"Place concise meaningful content inside Root within the element whose accessible name or reading context it should extend. Hide decorative visual siblings with aria-hidden when needed, and keep any focusable control itself visible rather than wrapping it in VisuallyHidden."
|
|
71
|
+
],
|
|
72
|
+
"rules": [
|
|
73
|
+
{
|
|
74
|
+
"id": "visually-hidden-at-only",
|
|
75
|
+
"level": "must",
|
|
76
|
+
"statement": "Use Root only for content that should remain in the accessibility tree while being visually absent; it does not hide content from assistive technology."
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"id": "visually-hidden-visible-first",
|
|
80
|
+
"level": "must",
|
|
81
|
+
"statement": "Prefer visible text whenever the name, instruction, status, or explanation also benefits sighted users."
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"id": "visually-hidden-no-focus-trap",
|
|
85
|
+
"level": "must",
|
|
86
|
+
"statement": "Do not visually hide an interactive element that can receive keyboard focus unless it has a deliberate visible-on-focus pattern owned elsewhere."
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"id": "visually-hidden-context",
|
|
90
|
+
"level": "must",
|
|
91
|
+
"statement": "Author concise text in the correct naming or reading-order context and verify it does not duplicate an existing accessible name."
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"id": "visually-hidden-style",
|
|
95
|
+
"level": "must",
|
|
96
|
+
"statement": "Do not override Atom's hiding geometry; consumer styles merge first and the exported visuallyHiddenStyle contract remains authoritative."
|
|
97
|
+
}
|
|
98
|
+
],
|
|
99
|
+
"commonMistakes": [
|
|
100
|
+
{
|
|
101
|
+
"mistake": "Using VisuallyHidden to hide a decorative icon from screen readers or to conceal required instructions from sighted users.",
|
|
102
|
+
"correction": "Use aria-hidden for decoration and keep broadly useful instructions visible."
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"mistake": "Wrapping an icon-only Button itself in VisuallyHidden, creating an invisible focus target.",
|
|
106
|
+
"correction": "Keep the Button visible and place VisuallyHidden text inside it as its accessible label."
|
|
107
|
+
}
|
|
108
|
+
],
|
|
109
|
+
"validation": [
|
|
110
|
+
"Inspect the accessibility tree and computed accessible name or description to confirm hidden text is present once, in the intended reading order, without duplicate wording.",
|
|
111
|
+
"Verify no focusable element becomes visually absent, visible text remains available where broadly useful, and decorative content uses aria-hidden instead.",
|
|
112
|
+
"Verify authoritative hiding styles survive consumer style, asChild, and render composition and that the final element adds no unintended role or ARIA attributes."
|
|
113
|
+
],
|
|
114
|
+
"related": [
|
|
115
|
+
"label",
|
|
116
|
+
"button"
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
```
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# Public document: guides/agent-knowledge
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
|
|
5
|
+
# Agent Knowledge
|
|
6
|
+
|
|
7
|
+
Atom ships public component and cross-component guidance for coding agents
|
|
8
|
+
alongside its runtime artifacts. Component guidance explains local selection,
|
|
9
|
+
required composition, accessibility rules, recurring mistakes, and
|
|
10
|
+
validation. Package guides first explain layer selection and behavior
|
|
11
|
+
composition. Neither artifact adds runtime behavior or a dependency.
|
|
12
|
+
|
|
13
|
+
Use `@flowstack-ui/atom/agents/manifest.json` to discover guidance. Its
|
|
14
|
+
separate `guides` and `components` collections point to machine-readable JSON
|
|
15
|
+
and human-readable Markdown. Read `layer-selection` and
|
|
16
|
+
`behavior-composition` before choosing individual primitives, for example:
|
|
17
|
+
|
|
18
|
+
```text
|
|
19
|
+
@flowstack-ui/atom/agents/field.json
|
|
20
|
+
@flowstack-ui/atom/agents/field.md
|
|
21
|
+
@flowstack-ui/atom/agents/layer-selection.json
|
|
22
|
+
@flowstack-ui/atom/agents/behavior-composition.md
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
The manifest links `@flowstack-ui/atom/agents/coverage.json`, a deterministic
|
|
26
|
+
`flowstack.agent-coverage.v1` report derived from the package exports, public
|
|
27
|
+
TypeScript symbols, documented primitive owners, and the checked-in catalog.
|
|
28
|
+
It distinguishes component owners from compound parts, root aliases,
|
|
29
|
+
utilities, metadata, and intentional native/application destinations. This
|
|
30
|
+
prevents utility subpaths from being mistaken for missing components and
|
|
31
|
+
prevents a new public surface from escaping classification.
|
|
32
|
+
|
|
33
|
+
The source pair lives beside the primitive it describes. `agent.json` is the
|
|
34
|
+
structured authority and `agent.md` is generated from it. Component source,
|
|
35
|
+
types, public documentation, and tests remain authoritative when a guide is
|
|
36
|
+
incomplete.
|
|
37
|
+
|
|
38
|
+
Package-level guide sources live under `agents/guides/`. They use
|
|
39
|
+
`flowstack.agent-guide.v1`; component sources continue to use
|
|
40
|
+
`flowstack.agent-component.v1`. Manifest `guides` is additive, so consumers
|
|
41
|
+
that already read only `components` remain compatible.
|
|
42
|
+
|
|
43
|
+
`npm run agents:build` and `npm run agents:check` are strict closure gates.
|
|
44
|
+
They require every public component owner to have a valid source pair and
|
|
45
|
+
manifest entry, and check mode compares every generated artifact while
|
|
46
|
+
rejecting stale or extra output. Builds, prepublication, packed-package checks,
|
|
47
|
+
and installed-consumer checks all require complete coverage with zero
|
|
48
|
+
failures.
|
|
49
|
+
|
|
50
|
+
When a finished application has selected `@flowstack-ui/brick`, consume Brick
|
|
51
|
+
instead of importing Atom directly. Atom's guides are behavior authority for
|
|
52
|
+
primitive authors and for diagnosing a genuine Brick-to-Atom gap.
|
|
53
|
+
|
|
54
|
+
Agent Knowledge is public usage guidance. It does not contain private prompts,
|
|
55
|
+
ranking policy, customer information, or application workflows.
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
# Public document: guides/getting-started
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
|
|
5
|
+
# Getting Started
|
|
6
|
+
|
|
7
|
+
Atom UI is a headless React primitive package. It provides accessible behavior
|
|
8
|
+
and semantic structure without visual styling.
|
|
9
|
+
|
|
10
|
+
Install Atom in an existing React application:
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @flowstack-ui/atom
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
React and React DOM 18 or newer are peer dependencies and must be provided by
|
|
17
|
+
the consuming application. Atom installs its Floating UI runtime dependency
|
|
18
|
+
automatically.
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
Prefer namespace imports:
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { Dialog, Field, Input } from "@flowstack-ui/atom";
|
|
26
|
+
|
|
27
|
+
export function Example() {
|
|
28
|
+
return (
|
|
29
|
+
<Dialog.Root>
|
|
30
|
+
<Dialog.Trigger>Open</Dialog.Trigger>
|
|
31
|
+
<Dialog.Portal>
|
|
32
|
+
<Dialog.Overlay />
|
|
33
|
+
<Dialog.Content>
|
|
34
|
+
<Dialog.Title>Profile</Dialog.Title>
|
|
35
|
+
<Field.Root id="email" required>
|
|
36
|
+
<Field.Label>Email</Field.Label>
|
|
37
|
+
<Input.Root name="email" type="email" />
|
|
38
|
+
</Field.Root>
|
|
39
|
+
</Dialog.Content>
|
|
40
|
+
</Dialog.Portal>
|
|
41
|
+
</Dialog.Root>
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Subpath imports are supported:
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { Dialog } from "@flowstack-ui/atom/dialog";
|
|
50
|
+
import { Input } from "@flowstack-ui/atom/input";
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Styling
|
|
54
|
+
|
|
55
|
+
Atom does not ship CSS. Style primitives through native selectors,
|
|
56
|
+
`data-slot`, and behavior state attributes.
|
|
57
|
+
|
|
58
|
+
```css
|
|
59
|
+
[data-slot="button"][data-state="pressed"] {
|
|
60
|
+
opacity: 0.85;
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
Styled packages should compose Atom primitives instead of reimplementing ARIA,
|
|
65
|
+
keyboard, focus, and state behavior.
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
# Public document: guides/imports
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
|
|
5
|
+
# Imports
|
|
6
|
+
|
|
7
|
+
Use the main namespace import for convenient access to several primitives:
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
import { Input, Dialog, MultiSelect } from "@flowstack-ui/atom";
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Subpath imports are also public and stable:
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Input } from "@flowstack-ui/atom/input";
|
|
17
|
+
import { Dialog } from "@flowstack-ui/atom/dialog";
|
|
18
|
+
import { Link } from "@flowstack-ui/atom/link";
|
|
19
|
+
import { Clipboard } from "@flowstack-ui/atom/clipboard";
|
|
20
|
+
import { Carousel } from "@flowstack-ui/atom/carousel";
|
|
21
|
+
import { MultiSelect } from "@flowstack-ui/atom/multi-select";
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Use the main package import when teaching component anatomy. Use subpaths when a
|
|
25
|
+
project wants explicit package boundaries per primitive or when a bundler policy
|
|
26
|
+
requires focused entrypoints.
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
# Public document: guides/public-api
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
|
|
5
|
+
# Public API
|
|
6
|
+
|
|
7
|
+
Atom UI exposes three public API layers.
|
|
8
|
+
|
|
9
|
+
## Namespace Exports
|
|
10
|
+
|
|
11
|
+
Namespace exports are the stable API for application and styled-layer usage.
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { Select } from "@flowstack-ui/atom";
|
|
15
|
+
|
|
16
|
+
<Select.Root>
|
|
17
|
+
<Select.Trigger />
|
|
18
|
+
<Select.Content />
|
|
19
|
+
</Select.Root>;
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Subpath Exports
|
|
23
|
+
|
|
24
|
+
Subpaths are stable focused entrypoints.
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { Select } from "@flowstack-ui/atom/select";
|
|
28
|
+
import { Link } from "@flowstack-ui/atom/link";
|
|
29
|
+
import { Clipboard } from "@flowstack-ui/atom/clipboard";
|
|
30
|
+
import { Carousel } from "@flowstack-ui/atom/carousel";
|
|
31
|
+
import { Image } from "@flowstack-ui/atom/image";
|
|
32
|
+
import { useControllableState } from "@flowstack-ui/atom/hooks";
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Every supported subpath is declared by the package and provides JavaScript plus
|
|
36
|
+
TypeScript declarations.
|
|
37
|
+
|
|
38
|
+
## Direct Part Exports
|
|
39
|
+
|
|
40
|
+
Direct exports are available from component subpaths for migration and
|
|
41
|
+
advanced composition.
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { SelectRoot, SelectTrigger } from "@flowstack-ui/atom/select";
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Prefer namespace usage for new code unless a direct part export improves local
|
|
48
|
+
readability. Shared primitives retain their shared direct names. For example,
|
|
49
|
+
`Dialog.Root` is directly exported as `ModalRoot` because Dialog composes the
|
|
50
|
+
shared Modal root behavior. Check the component subpath declarations rather
|
|
51
|
+
than assuming every direct export is named by concatenating its namespace and
|
|
52
|
+
part names.
|
|
53
|
+
|
|
54
|
+
## Non-API Files
|
|
55
|
+
|
|
56
|
+
The following are not public package API:
|
|
57
|
+
|
|
58
|
+
- files under `src/primitives/**`
|
|
59
|
+
- files under `src/utils/**`, except `Portal` through `@flowstack-ui/atom/portal`
|
|
60
|
+
- tests
|
|
61
|
+
- internal helper functions that are not exported from a public subpath
|
|
62
|
+
|
|
63
|
+
These implementation files may change between releases even when the public
|
|
64
|
+
entrypoints remain compatible.
|
|
65
|
+
|
|
66
|
+
## Composition
|
|
67
|
+
|
|
68
|
+
Components that document `asChild` clone their only child and merge Atom props
|
|
69
|
+
onto it. Components that document `render` can replace the default element with
|
|
70
|
+
an intrinsic tag, element, or render callback. Both paths preserve forwarded
|
|
71
|
+
refs, native props, and Atom-owned behavior.
|
|
72
|
+
|
|
73
|
+
Choose a composed element whose native semantics match the interaction. For
|
|
74
|
+
example, a Button link composition should expose its destination through an
|
|
75
|
+
`href` prop so Atom preserves link semantics instead of adding button behavior:
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import { Button } from "@flowstack-ui/atom";
|
|
79
|
+
|
|
80
|
+
<Button.Root asChild>
|
|
81
|
+
<a href="/settings">Settings</a>
|
|
82
|
+
</Button.Root>;
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
The same rule applies to custom link adapters and `render` elements: keep
|
|
86
|
+
`href` visible on the element passed to Button. This lets Button identify link
|
|
87
|
+
semantics and replace `href`, `target`, and `rel` with `null` while disabled or
|
|
88
|
+
loading. Native anchors and permissive adapters render without those
|
|
89
|
+
attributes.
|
|
90
|
+
|
|
91
|
+
A router component that requires `href` to remain a string is not safe for
|
|
92
|
+
direct inactive composition. Use a render adapter that bypasses the router
|
|
93
|
+
component and returns a destination-free anchor when `aria-disabled` is true.
|
|
94
|
+
Atom does not ship router-specific bindings, inspect framework-specific
|
|
95
|
+
navigation props, or retain a live destination on an inactive link.
|
|
96
|
+
|
|
97
|
+
The generic `Link.Root` is narrower than Button link mode. Its default render
|
|
98
|
+
requires `href`, while `render` or `asChild` may supply a router adapter that
|
|
99
|
+
owns the final destination. Link does not add action, loading, disabled, or
|
|
100
|
+
router-provider behavior and remains server-safe.
|