@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,114 @@
|
|
|
1
|
+
# ContextMenu
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
Kind: component
|
|
5
|
+
ID: context-menu
|
|
6
|
+
|
|
7
|
+
# ContextMenu agent guide
|
|
8
|
+
|
|
9
|
+
## Purpose
|
|
10
|
+
|
|
11
|
+
Open the shared Menu command model at the invocation point of a secondary-click, keyboard context-menu action, or cancel-safe touch and pen long press.
|
|
12
|
+
|
|
13
|
+
## Use when
|
|
14
|
+
|
|
15
|
+
- Commands belong to the exact file, row, canvas object, or region a user invokes contextually and every important command also has a discoverable route.
|
|
16
|
+
|
|
17
|
+
## Choose something else when
|
|
18
|
+
|
|
19
|
+
- The actions need a visible button, are the only route to an important task, or belong to a persistent application command bar. Use DropdownMenu, visible controls, or Menubar.
|
|
20
|
+
|
|
21
|
+
## Required composition
|
|
22
|
+
|
|
23
|
+
- Compose Root with Trigger wrapping the owned target region and Content. Add Portal and Arrow only when needed; compose Content from the shared Menu Item, selection, grouping, separator, and paired submenu parts.
|
|
24
|
+
|
|
25
|
+
## Rules
|
|
26
|
+
|
|
27
|
+
- **MUST:** Provide another visible or keyboard-discoverable route to every important action; ContextMenu must remain an enhancement rather than the only access path.
|
|
28
|
+
- **MUST:** Keep Trigger as a behavior wrapper without invented button semantics and preserve the wrapped target's native semantics and actions through asChild or render composition.
|
|
29
|
+
- **MUST:** Preserve secondary-click coordinates, keyboard anchor behavior, cross-trigger handoff, and the cancel-safe 700 ms touch and pen long press with its movement, scroll, multi-pointer, and native-event cancellation.
|
|
30
|
+
- **MUST:** Give Content an explicit ariaLabel when the non-semantic Trigger cannot provide an appropriate menu label.
|
|
31
|
+
- **MUST:** Preserve the shared Menu item roles, real focus, typeahead, disabled navigation, selection close policy, submenus, modal ownership, outside dismissal, and focus restoration.
|
|
32
|
+
|
|
33
|
+
## Common mistakes
|
|
34
|
+
|
|
35
|
+
- **Avoid:** Making right-click the only route to an action, adding button semantics to the target wrapper, or implementing a second long-press and point-positioning system. **Instead:** Keep visible alternatives, preserve target semantics, and use ContextMenu's owned invocation and Menu contracts.
|
|
36
|
+
|
|
37
|
+
## Validation checklist
|
|
38
|
+
|
|
39
|
+
- Verify secondary click at changing coordinates, keyboard invocation, preventDefault consumer handling, transfer between registered targets, disabled state, and touch and pen long press cancellation for movement, scroll, release, cancellation, second pointer, native contextmenu, and unmount.
|
|
40
|
+
- Verify Content naming, item focus and typeahead, selection roles and close policies, submenu behavior, Tab and Escape, outside dismissal, modal isolation, parent-modal portals, LTR and RTL, and focus return.
|
|
41
|
+
|
|
42
|
+
## Related guidance
|
|
43
|
+
|
|
44
|
+
- `menu`
|
|
45
|
+
- `dropdown-menu`
|
|
46
|
+
- `menubar`
|
|
47
|
+
|
|
48
|
+
## Machine record
|
|
49
|
+
|
|
50
|
+
```json
|
|
51
|
+
{
|
|
52
|
+
"schema": "flowstack.agent-component.v1",
|
|
53
|
+
"id": "context-menu",
|
|
54
|
+
"name": "ContextMenu",
|
|
55
|
+
"package": "@flowstack-ui/atom",
|
|
56
|
+
"layer": "atom",
|
|
57
|
+
"kind": "component",
|
|
58
|
+
"purpose": "Open the shared Menu command model at the invocation point of a secondary-click, keyboard context-menu action, or cancel-safe touch and pen long press.",
|
|
59
|
+
"useWhen": [
|
|
60
|
+
"Commands belong to the exact file, row, canvas object, or region a user invokes contextually and every important command also has a discoverable route."
|
|
61
|
+
],
|
|
62
|
+
"avoidWhen": [
|
|
63
|
+
{
|
|
64
|
+
"condition": "The actions need a visible button, are the only route to an important task, or belong to a persistent application command bar.",
|
|
65
|
+
"useInstead": "DropdownMenu, visible controls, or Menubar"
|
|
66
|
+
}
|
|
67
|
+
],
|
|
68
|
+
"composition": [
|
|
69
|
+
"Compose Root with Trigger wrapping the owned target region and Content. Add Portal and Arrow only when needed; compose Content from the shared Menu Item, selection, grouping, separator, and paired submenu parts."
|
|
70
|
+
],
|
|
71
|
+
"rules": [
|
|
72
|
+
{
|
|
73
|
+
"id": "context-menu-discoverability",
|
|
74
|
+
"level": "must",
|
|
75
|
+
"statement": "Provide another visible or keyboard-discoverable route to every important action; ContextMenu must remain an enhancement rather than the only access path."
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"id": "context-menu-trigger-semantics",
|
|
79
|
+
"level": "must",
|
|
80
|
+
"statement": "Keep Trigger as a behavior wrapper without invented button semantics and preserve the wrapped target's native semantics and actions through asChild or render composition."
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"id": "context-menu-input",
|
|
84
|
+
"level": "must",
|
|
85
|
+
"statement": "Preserve secondary-click coordinates, keyboard anchor behavior, cross-trigger handoff, and the cancel-safe 700 ms touch and pen long press with its movement, scroll, multi-pointer, and native-event cancellation."
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"id": "context-menu-label",
|
|
89
|
+
"level": "must",
|
|
90
|
+
"statement": "Give Content an explicit ariaLabel when the non-semantic Trigger cannot provide an appropriate menu label."
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"id": "context-menu-shared-contract",
|
|
94
|
+
"level": "must",
|
|
95
|
+
"statement": "Preserve the shared Menu item roles, real focus, typeahead, disabled navigation, selection close policy, submenus, modal ownership, outside dismissal, and focus restoration."
|
|
96
|
+
}
|
|
97
|
+
],
|
|
98
|
+
"commonMistakes": [
|
|
99
|
+
{
|
|
100
|
+
"mistake": "Making right-click the only route to an action, adding button semantics to the target wrapper, or implementing a second long-press and point-positioning system.",
|
|
101
|
+
"correction": "Keep visible alternatives, preserve target semantics, and use ContextMenu's owned invocation and Menu contracts."
|
|
102
|
+
}
|
|
103
|
+
],
|
|
104
|
+
"validation": [
|
|
105
|
+
"Verify secondary click at changing coordinates, keyboard invocation, preventDefault consumer handling, transfer between registered targets, disabled state, and touch and pen long press cancellation for movement, scroll, release, cancellation, second pointer, native contextmenu, and unmount.",
|
|
106
|
+
"Verify Content naming, item focus and typeahead, selection roles and close policies, submenu behavior, Tab and Escape, outside dismissal, modal isolation, parent-modal portals, LTR and RTL, and focus return."
|
|
107
|
+
],
|
|
108
|
+
"related": [
|
|
109
|
+
"menu",
|
|
110
|
+
"dropdown-menu",
|
|
111
|
+
"menubar"
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
```
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
# DataGrid
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
Kind: component
|
|
5
|
+
ID: data-grid
|
|
6
|
+
|
|
7
|
+
# DataGrid agent guide
|
|
8
|
+
|
|
9
|
+
## Purpose
|
|
10
|
+
|
|
11
|
+
Provide a flat ARIA grid with one Root focus target, active-descendant cell navigation, optional row selection, indexed semantics, and actionable column-header boundaries.
|
|
12
|
+
|
|
13
|
+
## Use when
|
|
14
|
+
|
|
15
|
+
- A flat row-and-column dataset needs two-dimensional keyboard cell navigation, optional row selection, or interactive grid headers.
|
|
16
|
+
|
|
17
|
+
## Choose something else when
|
|
18
|
+
|
|
19
|
+
- People only read and compare tabular values without composite cell navigation or row selection. Use Table.
|
|
20
|
+
- Rows expand into a parent-child hierarchy, or the application expects Atom to own sorting, editing, filtering, resizing, or virtualization. Use TreeGrid or an application composition around DataGrid and the relevant utility.
|
|
21
|
+
|
|
22
|
+
## Required composition
|
|
23
|
+
|
|
24
|
+
- Give Root an accessible name and accurate total counts, then compose Caption when useful, Header and Body rowgroups, uniquely valued and accurately indexed Rows, indexed ColumnHeader and Cell parts, and Footer only for summaries. Configure selection and controlled active-cell state deliberately.
|
|
25
|
+
|
|
26
|
+
## Rules
|
|
27
|
+
|
|
28
|
+
- **MUST:** Give Root an accessible name and provide stable one-based row and column indexes plus accurate rowCount and columnCount, including the logical full collection when rows are paged or virtualized.
|
|
29
|
+
- **MUST:** Keep DOM focus on Root and preserve aria-activedescendant, Arrow movement, Home and End, whole-grid movement, disabled-cell skipping, RTL mirroring, loop, and wrapRows policy.
|
|
30
|
+
- **MUST:** Align scalar, array, or null state with selectionMode; give selectable rows stable unique values; and use selectable=false for header or summary rows that remain navigable but cannot be selected.
|
|
31
|
+
- **MUST:** Preserve controlled or uncontrolled active-cell and selection state, disabled behavior, and read-only navigation without selection mutation.
|
|
32
|
+
- **MUST:** Use ColumnHeader onAction for equivalent pointer and active-header Enter activation, keep sortDirection truthful, and leave sorting and data reordering to the application.
|
|
33
|
+
- **MUST:** When windowing, preserve logical indexes and totals and keep the active descendant mounted or move active state before its cell leaves the DOM; Virtualizer supplies geometry, not grid semantics or focus management.
|
|
34
|
+
|
|
35
|
+
## Common mistakes
|
|
36
|
+
|
|
37
|
+
- **Avoid:** Using DataGrid for a read-only table or adding independent Tab stops to every cell. **Instead:** Use Table for read-only comparison and keep DataGrid Root as the composite focus owner.
|
|
38
|
+
- **Avoid:** Using visible array indexes as unstable identity, omitting logical counts during virtualization, or expecting sortDirection to sort rows. **Instead:** Keep durable row values, logical one-based coordinates and totals, and application-owned sorting synchronized with header metadata.
|
|
39
|
+
|
|
40
|
+
## Validation checklist
|
|
41
|
+
|
|
42
|
+
- Verify grid, rowgroup, row, columnheader, and gridcell relationships; Root naming; one-based logical indexes and totals; and active-descendant IDs against the final DOM.
|
|
43
|
+
- Exercise LTR and RTL Arrow navigation, vertical column preservation, Home and End, whole-grid movement, loop and wrapRows boundaries, disabled cells, pointer activation, and consumer cancellation.
|
|
44
|
+
- Verify none, single, and multiple controlled and uncontrolled selection; nonselectable rows; disabled and read-only state; actionable header pointer and Enter parity; and truthful sort metadata.
|
|
45
|
+
- For paged or virtualized data, verify offscreen totals and positions remain accurate and focus never references an unmounted cell.
|
|
46
|
+
|
|
47
|
+
## Related guidance
|
|
48
|
+
|
|
49
|
+
- `table`
|
|
50
|
+
- `tree-grid`
|
|
51
|
+
- `collection`
|
|
52
|
+
- `virtualizer`
|
|
53
|
+
|
|
54
|
+
## Machine record
|
|
55
|
+
|
|
56
|
+
```json
|
|
57
|
+
{
|
|
58
|
+
"schema": "flowstack.agent-component.v1",
|
|
59
|
+
"id": "data-grid",
|
|
60
|
+
"name": "DataGrid",
|
|
61
|
+
"package": "@flowstack-ui/atom",
|
|
62
|
+
"layer": "atom",
|
|
63
|
+
"kind": "component",
|
|
64
|
+
"purpose": "Provide a flat ARIA grid with one Root focus target, active-descendant cell navigation, optional row selection, indexed semantics, and actionable column-header boundaries.",
|
|
65
|
+
"useWhen": [
|
|
66
|
+
"A flat row-and-column dataset needs two-dimensional keyboard cell navigation, optional row selection, or interactive grid headers."
|
|
67
|
+
],
|
|
68
|
+
"avoidWhen": [
|
|
69
|
+
{
|
|
70
|
+
"condition": "People only read and compare tabular values without composite cell navigation or row selection.",
|
|
71
|
+
"useInstead": "Table"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"condition": "Rows expand into a parent-child hierarchy, or the application expects Atom to own sorting, editing, filtering, resizing, or virtualization.",
|
|
75
|
+
"useInstead": "TreeGrid or an application composition around DataGrid and the relevant utility"
|
|
76
|
+
}
|
|
77
|
+
],
|
|
78
|
+
"composition": [
|
|
79
|
+
"Give Root an accessible name and accurate total counts, then compose Caption when useful, Header and Body rowgroups, uniquely valued and accurately indexed Rows, indexed ColumnHeader and Cell parts, and Footer only for summaries. Configure selection and controlled active-cell state deliberately."
|
|
80
|
+
],
|
|
81
|
+
"rules": [
|
|
82
|
+
{
|
|
83
|
+
"id": "data-grid-name-indexes",
|
|
84
|
+
"level": "must",
|
|
85
|
+
"statement": "Give Root an accessible name and provide stable one-based row and column indexes plus accurate rowCount and columnCount, including the logical full collection when rows are paged or virtualized."
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"id": "data-grid-focus",
|
|
89
|
+
"level": "must",
|
|
90
|
+
"statement": "Keep DOM focus on Root and preserve aria-activedescendant, Arrow movement, Home and End, whole-grid movement, disabled-cell skipping, RTL mirroring, loop, and wrapRows policy."
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"id": "data-grid-selection",
|
|
94
|
+
"level": "must",
|
|
95
|
+
"statement": "Align scalar, array, or null state with selectionMode; give selectable rows stable unique values; and use selectable=false for header or summary rows that remain navigable but cannot be selected."
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"id": "data-grid-state-boundary",
|
|
99
|
+
"level": "must",
|
|
100
|
+
"statement": "Preserve controlled or uncontrolled active-cell and selection state, disabled behavior, and read-only navigation without selection mutation."
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
"id": "data-grid-header-action",
|
|
104
|
+
"level": "must",
|
|
105
|
+
"statement": "Use ColumnHeader onAction for equivalent pointer and active-header Enter activation, keep sortDirection truthful, and leave sorting and data reordering to the application."
|
|
106
|
+
},
|
|
107
|
+
{
|
|
108
|
+
"id": "data-grid-virtualization",
|
|
109
|
+
"level": "must",
|
|
110
|
+
"statement": "When windowing, preserve logical indexes and totals and keep the active descendant mounted or move active state before its cell leaves the DOM; Virtualizer supplies geometry, not grid semantics or focus management."
|
|
111
|
+
}
|
|
112
|
+
],
|
|
113
|
+
"commonMistakes": [
|
|
114
|
+
{
|
|
115
|
+
"mistake": "Using DataGrid for a read-only table or adding independent Tab stops to every cell.",
|
|
116
|
+
"correction": "Use Table for read-only comparison and keep DataGrid Root as the composite focus owner."
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"mistake": "Using visible array indexes as unstable identity, omitting logical counts during virtualization, or expecting sortDirection to sort rows.",
|
|
120
|
+
"correction": "Keep durable row values, logical one-based coordinates and totals, and application-owned sorting synchronized with header metadata."
|
|
121
|
+
}
|
|
122
|
+
],
|
|
123
|
+
"validation": [
|
|
124
|
+
"Verify grid, rowgroup, row, columnheader, and gridcell relationships; Root naming; one-based logical indexes and totals; and active-descendant IDs against the final DOM.",
|
|
125
|
+
"Exercise LTR and RTL Arrow navigation, vertical column preservation, Home and End, whole-grid movement, loop and wrapRows boundaries, disabled cells, pointer activation, and consumer cancellation.",
|
|
126
|
+
"Verify none, single, and multiple controlled and uncontrolled selection; nonselectable rows; disabled and read-only state; actionable header pointer and Enter parity; and truthful sort metadata.",
|
|
127
|
+
"For paged or virtualized data, verify offscreen totals and positions remain accurate and focus never references an unmounted cell."
|
|
128
|
+
],
|
|
129
|
+
"related": [
|
|
130
|
+
"table",
|
|
131
|
+
"tree-grid",
|
|
132
|
+
"collection",
|
|
133
|
+
"virtualizer"
|
|
134
|
+
]
|
|
135
|
+
}
|
|
136
|
+
```
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
# Dialog
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
Kind: component
|
|
5
|
+
ID: dialog
|
|
6
|
+
|
|
7
|
+
# Dialog agent guide
|
|
8
|
+
|
|
9
|
+
## Purpose
|
|
10
|
+
|
|
11
|
+
Present an ordinary blocking task, form, or information surface with modal focus, dismissal, labeling, portal, background-isolation, and scroll-lock behavior.
|
|
12
|
+
|
|
13
|
+
## Use when
|
|
14
|
+
|
|
15
|
+
- A user must focus on a temporary blocking task, form, or information surface before returning to the underlying application.
|
|
16
|
+
|
|
17
|
+
## Choose something else when
|
|
18
|
+
|
|
19
|
+
- The user must make an urgent consequential choice, the task is a side sheet, or the panel is small, attached, and should usually remain non-modal. Use AlertDialog, Drawer, or Popover.
|
|
20
|
+
|
|
21
|
+
## Required composition
|
|
22
|
+
|
|
23
|
+
- Compose Root around Content; add Trigger for local activation or omit it for controlled and triggerless workflows, and use Portal only when the layer must leave its DOM location. When Overlay is rendered, keep it as a sibling of Content. Inside Content, use Title or native labeling for the accessible name, add Description only when useful, and add Close only when the task needs an owned close control.
|
|
24
|
+
|
|
25
|
+
## Rules
|
|
26
|
+
|
|
27
|
+
- **MUST:** Render Overlay and Content as siblings inside Portal; never nest Content beneath the aria-hidden Overlay.
|
|
28
|
+
- **MUST:** Give Content an accessible name with one Title or native aria-label or aria-labelledby; render Description only when useful or provide an explicit native description relationship.
|
|
29
|
+
- **MUST:** Use Dialog-owned focus containment and restoration, background isolation, scroll locking, Escape handling, direct-target backdrop dismissal, and nested top-layer behavior instead of recreating them.
|
|
30
|
+
- **MUST:** Mount descendant interactive portals inside Content when possible; otherwise register an unavoidable consumer-owned third-party portal with Modal.Branch.
|
|
31
|
+
- **SHOULD:** Use initialFocus or finalFocus for explicit workflow targets and preserve Dialog's touch-safe content focus and restoration fallbacks for ordinary use.
|
|
32
|
+
|
|
33
|
+
## Common mistakes
|
|
34
|
+
|
|
35
|
+
- **Avoid:** Putting Content inside Overlay, omitting an accessible name, or adding custom document listeners and focus traps around Dialog. **Instead:** Keep Overlay and Content siblings, label Content, and rely on the Dialog and shared Modal contracts.
|
|
36
|
+
|
|
37
|
+
## Validation checklist
|
|
38
|
+
|
|
39
|
+
- Verify trigger semantics, accessible name and optional description, keyboard, pointer, touch, and programmatic initial focus, Tab containment, Close, top-layer Escape, direct-target backdrop dismissal, and focus restoration.
|
|
40
|
+
- Verify controlled state, nested dialogs and descendant portals, background isolation, document scroll lock, long-content scrolling, exit presence, and authored-style cleanup.
|
|
41
|
+
|
|
42
|
+
## Related guidance
|
|
43
|
+
|
|
44
|
+
- `alert-dialog`
|
|
45
|
+
- `modal`
|
|
46
|
+
- `drawer`
|
|
47
|
+
- `popover`
|
|
48
|
+
|
|
49
|
+
## Machine record
|
|
50
|
+
|
|
51
|
+
```json
|
|
52
|
+
{
|
|
53
|
+
"schema": "flowstack.agent-component.v1",
|
|
54
|
+
"id": "dialog",
|
|
55
|
+
"name": "Dialog",
|
|
56
|
+
"package": "@flowstack-ui/atom",
|
|
57
|
+
"layer": "atom",
|
|
58
|
+
"kind": "component",
|
|
59
|
+
"purpose": "Present an ordinary blocking task, form, or information surface with modal focus, dismissal, labeling, portal, background-isolation, and scroll-lock behavior.",
|
|
60
|
+
"useWhen": [
|
|
61
|
+
"A user must focus on a temporary blocking task, form, or information surface before returning to the underlying application."
|
|
62
|
+
],
|
|
63
|
+
"avoidWhen": [
|
|
64
|
+
{
|
|
65
|
+
"condition": "The user must make an urgent consequential choice, the task is a side sheet, or the panel is small, attached, and should usually remain non-modal.",
|
|
66
|
+
"useInstead": "AlertDialog, Drawer, or Popover"
|
|
67
|
+
}
|
|
68
|
+
],
|
|
69
|
+
"composition": [
|
|
70
|
+
"Compose Root around Content; add Trigger for local activation or omit it for controlled and triggerless workflows, and use Portal only when the layer must leave its DOM location. When Overlay is rendered, keep it as a sibling of Content. Inside Content, use Title or native labeling for the accessible name, add Description only when useful, and add Close only when the task needs an owned close control."
|
|
71
|
+
],
|
|
72
|
+
"rules": [
|
|
73
|
+
{
|
|
74
|
+
"id": "dialog-sibling-overlay",
|
|
75
|
+
"level": "must",
|
|
76
|
+
"statement": "Render Overlay and Content as siblings inside Portal; never nest Content beneath the aria-hidden Overlay."
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"id": "dialog-accessible-name",
|
|
80
|
+
"level": "must",
|
|
81
|
+
"statement": "Give Content an accessible name with one Title or native aria-label or aria-labelledby; render Description only when useful or provide an explicit native description relationship."
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"id": "dialog-owned-modal-behavior",
|
|
85
|
+
"level": "must",
|
|
86
|
+
"statement": "Use Dialog-owned focus containment and restoration, background isolation, scroll locking, Escape handling, direct-target backdrop dismissal, and nested top-layer behavior instead of recreating them."
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
"id": "dialog-descendant-portals",
|
|
90
|
+
"level": "must",
|
|
91
|
+
"statement": "Mount descendant interactive portals inside Content when possible; otherwise register an unavoidable consumer-owned third-party portal with Modal.Branch."
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"id": "dialog-focus-targets",
|
|
95
|
+
"level": "should",
|
|
96
|
+
"statement": "Use initialFocus or finalFocus for explicit workflow targets and preserve Dialog's touch-safe content focus and restoration fallbacks for ordinary use."
|
|
97
|
+
}
|
|
98
|
+
],
|
|
99
|
+
"commonMistakes": [
|
|
100
|
+
{
|
|
101
|
+
"mistake": "Putting Content inside Overlay, omitting an accessible name, or adding custom document listeners and focus traps around Dialog.",
|
|
102
|
+
"correction": "Keep Overlay and Content siblings, label Content, and rely on the Dialog and shared Modal contracts."
|
|
103
|
+
}
|
|
104
|
+
],
|
|
105
|
+
"validation": [
|
|
106
|
+
"Verify trigger semantics, accessible name and optional description, keyboard, pointer, touch, and programmatic initial focus, Tab containment, Close, top-layer Escape, direct-target backdrop dismissal, and focus restoration.",
|
|
107
|
+
"Verify controlled state, nested dialogs and descendant portals, background isolation, document scroll lock, long-content scrolling, exit presence, and authored-style cleanup."
|
|
108
|
+
],
|
|
109
|
+
"related": [
|
|
110
|
+
"alert-dialog",
|
|
111
|
+
"modal",
|
|
112
|
+
"drawer",
|
|
113
|
+
"popover"
|
|
114
|
+
]
|
|
115
|
+
}
|
|
116
|
+
```
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
# Direction
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
Kind: component
|
|
5
|
+
ID: direction
|
|
6
|
+
|
|
7
|
+
# Direction agent guide
|
|
8
|
+
|
|
9
|
+
## Purpose
|
|
10
|
+
|
|
11
|
+
Provide left-to-right or right-to-left React context for Atom-owned keyboard, placement, gesture, and navigation behavior without rendering a DOM wrapper.
|
|
12
|
+
|
|
13
|
+
## Use when
|
|
14
|
+
|
|
15
|
+
- A subtree of Atom components must mirror direction-aware behavior for a left-to-right or right-to-left interface.
|
|
16
|
+
|
|
17
|
+
## Choose something else when
|
|
18
|
+
|
|
19
|
+
- Only document text direction needs to change, one component already has an accurate local dir prop, or visual mirroring is being attempted without semantic direction. Use the native dir attribute, the component's local dir prop, or direction-aware higher-layer styling.
|
|
20
|
+
|
|
21
|
+
## Required composition
|
|
22
|
+
|
|
23
|
+
- Set native dir and the appropriate language on the semantic HTML subtree, then wrap the matching Atom subtree in Direction.Provider with the same ltr or rtl value. Let a component-specific dir prop override context only for a deliberately different nested behavior direction.
|
|
24
|
+
|
|
25
|
+
## Rules
|
|
26
|
+
|
|
27
|
+
- **MUST:** Pair Direction.Provider with the matching native dir attribute because context mirrors Atom behavior but does not set browser text, punctuation, layout, or assistive-technology direction.
|
|
28
|
+
- **MUST:** Use only ltr or rtl and keep Provider, native dir, written language, and content direction consistent; omitted context resolves to ltr.
|
|
29
|
+
- **MUST:** Scope Provider to the Atom subtree whose behavior shares the direction and use nested Providers only at genuine bidirectional boundaries.
|
|
30
|
+
- **MUST:** Treat a component's explicit dir prop as the local behavior override and verify it intentionally differs before overriding shared context.
|
|
31
|
+
- **MUST:** Do not expect Provider to render a wrapper, role, ARIA attribute, data attribute, or styling hook.
|
|
32
|
+
- **MUST:** Verify semantic start and end, Arrow keys, expand and collapse keys, placement, gestures, and focus movement in both directions for every composed primitive that owns direction-aware behavior.
|
|
33
|
+
|
|
34
|
+
## Common mistakes
|
|
35
|
+
|
|
36
|
+
- **Avoid:** Wrapping components in Direction.Provider without setting native dir on the document subtree. **Instead:** Set native dir for browser and assistive-technology semantics and use Provider for matching Atom behavior.
|
|
37
|
+
- **Avoid:** Using CSS transforms to mirror controls or assuming every Arrow key should reverse in RTL. **Instead:** Use semantic direction and test each primitive's documented logical and spatial keyboard contract.
|
|
38
|
+
- **Avoid:** Passing conflicting Provider and component-local directions accidentally. **Instead:** Choose one subtree direction and reserve local dir overrides for intentional nested behavior boundaries.
|
|
39
|
+
|
|
40
|
+
## Validation checklist
|
|
41
|
+
|
|
42
|
+
- Verify useDirection returns ltr outside a Provider and the nearest ltr or rtl value inside nested Providers, with no rendered wrapper or added attributes.
|
|
43
|
+
- Inspect the final semantic subtree for matching native dir and language and test text, punctuation, focus order, logical start and end, and assistive-technology interpretation.
|
|
44
|
+
- Exercise direction-aware Atom components in LTR and RTL, including horizontal navigation, tree expansion, popup placement, swipe or drag gestures, and any deliberate local dir override.
|
|
45
|
+
|
|
46
|
+
## Related guidance
|
|
47
|
+
|
|
48
|
+
- `menu`
|
|
49
|
+
- `popover`
|
|
50
|
+
- `tree-grid`
|
|
51
|
+
|
|
52
|
+
## Machine record
|
|
53
|
+
|
|
54
|
+
```json
|
|
55
|
+
{
|
|
56
|
+
"schema": "flowstack.agent-component.v1",
|
|
57
|
+
"id": "direction",
|
|
58
|
+
"name": "Direction",
|
|
59
|
+
"package": "@flowstack-ui/atom",
|
|
60
|
+
"layer": "atom",
|
|
61
|
+
"kind": "component",
|
|
62
|
+
"purpose": "Provide left-to-right or right-to-left React context for Atom-owned keyboard, placement, gesture, and navigation behavior without rendering a DOM wrapper.",
|
|
63
|
+
"useWhen": [
|
|
64
|
+
"A subtree of Atom components must mirror direction-aware behavior for a left-to-right or right-to-left interface."
|
|
65
|
+
],
|
|
66
|
+
"avoidWhen": [
|
|
67
|
+
{
|
|
68
|
+
"condition": "Only document text direction needs to change, one component already has an accurate local dir prop, or visual mirroring is being attempted without semantic direction.",
|
|
69
|
+
"useInstead": "the native dir attribute, the component's local dir prop, or direction-aware higher-layer styling"
|
|
70
|
+
}
|
|
71
|
+
],
|
|
72
|
+
"composition": [
|
|
73
|
+
"Set native dir and the appropriate language on the semantic HTML subtree, then wrap the matching Atom subtree in Direction.Provider with the same ltr or rtl value. Let a component-specific dir prop override context only for a deliberately different nested behavior direction."
|
|
74
|
+
],
|
|
75
|
+
"rules": [
|
|
76
|
+
{
|
|
77
|
+
"id": "direction-native-pair",
|
|
78
|
+
"level": "must",
|
|
79
|
+
"statement": "Pair Direction.Provider with the matching native dir attribute because context mirrors Atom behavior but does not set browser text, punctuation, layout, or assistive-technology direction."
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
"id": "direction-value",
|
|
83
|
+
"level": "must",
|
|
84
|
+
"statement": "Use only ltr or rtl and keep Provider, native dir, written language, and content direction consistent; omitted context resolves to ltr."
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"id": "direction-scope",
|
|
88
|
+
"level": "must",
|
|
89
|
+
"statement": "Scope Provider to the Atom subtree whose behavior shares the direction and use nested Providers only at genuine bidirectional boundaries."
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"id": "direction-local-override",
|
|
93
|
+
"level": "must",
|
|
94
|
+
"statement": "Treat a component's explicit dir prop as the local behavior override and verify it intentionally differs before overriding shared context."
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"id": "direction-no-dom",
|
|
98
|
+
"level": "must",
|
|
99
|
+
"statement": "Do not expect Provider to render a wrapper, role, ARIA attribute, data attribute, or styling hook."
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"id": "direction-behavior-test",
|
|
103
|
+
"level": "must",
|
|
104
|
+
"statement": "Verify semantic start and end, Arrow keys, expand and collapse keys, placement, gestures, and focus movement in both directions for every composed primitive that owns direction-aware behavior."
|
|
105
|
+
}
|
|
106
|
+
],
|
|
107
|
+
"commonMistakes": [
|
|
108
|
+
{
|
|
109
|
+
"mistake": "Wrapping components in Direction.Provider without setting native dir on the document subtree.",
|
|
110
|
+
"correction": "Set native dir for browser and assistive-technology semantics and use Provider for matching Atom behavior."
|
|
111
|
+
},
|
|
112
|
+
{
|
|
113
|
+
"mistake": "Using CSS transforms to mirror controls or assuming every Arrow key should reverse in RTL.",
|
|
114
|
+
"correction": "Use semantic direction and test each primitive's documented logical and spatial keyboard contract."
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"mistake": "Passing conflicting Provider and component-local directions accidentally.",
|
|
118
|
+
"correction": "Choose one subtree direction and reserve local dir overrides for intentional nested behavior boundaries."
|
|
119
|
+
}
|
|
120
|
+
],
|
|
121
|
+
"validation": [
|
|
122
|
+
"Verify useDirection returns ltr outside a Provider and the nearest ltr or rtl value inside nested Providers, with no rendered wrapper or added attributes.",
|
|
123
|
+
"Inspect the final semantic subtree for matching native dir and language and test text, punctuation, focus order, logical start and end, and assistive-technology interpretation.",
|
|
124
|
+
"Exercise direction-aware Atom components in LTR and RTL, including horizontal navigation, tree expansion, popup placement, swipe or drag gestures, and any deliberate local dir override."
|
|
125
|
+
],
|
|
126
|
+
"related": [
|
|
127
|
+
"menu",
|
|
128
|
+
"popover",
|
|
129
|
+
"tree-grid"
|
|
130
|
+
]
|
|
131
|
+
}
|
|
132
|
+
```
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
# Divider
|
|
2
|
+
|
|
3
|
+
Source: @flowstack-ui/atom@0.24.0
|
|
4
|
+
Kind: component
|
|
5
|
+
ID: divider
|
|
6
|
+
|
|
7
|
+
# Divider agent guide
|
|
8
|
+
|
|
9
|
+
## Purpose
|
|
10
|
+
|
|
11
|
+
Separate nearby content decoratively or with static separator semantics.
|
|
12
|
+
|
|
13
|
+
## Use when
|
|
14
|
+
|
|
15
|
+
- Two nearby content groups need a visual or meaningful static boundary.
|
|
16
|
+
|
|
17
|
+
## Choose something else when
|
|
18
|
+
|
|
19
|
+
- The boundary is draggable or changes a value. Use an interactive splitter with value and keyboard behavior.
|
|
20
|
+
|
|
21
|
+
## Required composition
|
|
22
|
+
|
|
23
|
+
- Use Divider.Root and keep decorative=true unless assistive technology must perceive the separation.
|
|
24
|
+
|
|
25
|
+
## Rules
|
|
26
|
+
|
|
27
|
+
- **MUST:** Choose decorative or semantic behavior from meaning, not from the desired line style.
|
|
28
|
+
- **MUST:** Do not make Divider focusable or use it as a resize handle.
|
|
29
|
+
|
|
30
|
+
## Common mistakes
|
|
31
|
+
|
|
32
|
+
- **Avoid:** Exposing every visual line as a separator. **Instead:** Keep purely visual boundaries decorative.
|
|
33
|
+
|
|
34
|
+
## Validation checklist
|
|
35
|
+
|
|
36
|
+
- Confirm decorative dividers are absent from the accessibility tree.
|
|
37
|
+
- Confirm semantic vertical dividers expose the correct orientation.
|
|
38
|
+
|
|
39
|
+
## Related guidance
|
|
40
|
+
|
|
41
|
+
- `toolbar`
|
|
42
|
+
- `app-bar`
|
|
43
|
+
|
|
44
|
+
## Machine record
|
|
45
|
+
|
|
46
|
+
```json
|
|
47
|
+
{
|
|
48
|
+
"schema": "flowstack.agent-component.v1",
|
|
49
|
+
"id": "divider",
|
|
50
|
+
"name": "Divider",
|
|
51
|
+
"package": "@flowstack-ui/atom",
|
|
52
|
+
"layer": "atom",
|
|
53
|
+
"kind": "component",
|
|
54
|
+
"purpose": "Separate nearby content decoratively or with static separator semantics.",
|
|
55
|
+
"useWhen": [
|
|
56
|
+
"Two nearby content groups need a visual or meaningful static boundary."
|
|
57
|
+
],
|
|
58
|
+
"avoidWhen": [
|
|
59
|
+
{
|
|
60
|
+
"condition": "The boundary is draggable or changes a value.",
|
|
61
|
+
"useInstead": "an interactive splitter with value and keyboard behavior"
|
|
62
|
+
}
|
|
63
|
+
],
|
|
64
|
+
"composition": [
|
|
65
|
+
"Use Divider.Root and keep decorative=true unless assistive technology must perceive the separation."
|
|
66
|
+
],
|
|
67
|
+
"rules": [
|
|
68
|
+
{
|
|
69
|
+
"id": "divider-semantic-intent",
|
|
70
|
+
"level": "must",
|
|
71
|
+
"statement": "Choose decorative or semantic behavior from meaning, not from the desired line style."
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"id": "divider-not-interactive",
|
|
75
|
+
"level": "must",
|
|
76
|
+
"statement": "Do not make Divider focusable or use it as a resize handle."
|
|
77
|
+
}
|
|
78
|
+
],
|
|
79
|
+
"commonMistakes": [
|
|
80
|
+
{
|
|
81
|
+
"mistake": "Exposing every visual line as a separator.",
|
|
82
|
+
"correction": "Keep purely visual boundaries decorative."
|
|
83
|
+
}
|
|
84
|
+
],
|
|
85
|
+
"validation": [
|
|
86
|
+
"Confirm decorative dividers are absent from the accessibility tree.",
|
|
87
|
+
"Confirm semantic vertical dividers expose the correct orientation."
|
|
88
|
+
],
|
|
89
|
+
"related": [
|
|
90
|
+
"toolbar",
|
|
91
|
+
"app-bar"
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
```
|