@signal9/era-ui 32.0.0 → 33.0.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.
Files changed (145) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/dev/audit-overlay.svelte +2 -2
  3. package/dist/era-ui.css +1 -1
  4. package/dist/generated-docs/utilities.json +99 -99
  5. package/dist/os/pane.svelte +3 -13
  6. package/dist/styles/index.css +2 -956
  7. package/dist/styles/typography.css +1 -1
  8. package/dist/styles/utilities/geometry.css +188 -0
  9. package/dist/styles/utilities/interaction.css +334 -0
  10. package/dist/styles/utilities/materials.css +39 -0
  11. package/dist/styles/utilities/public.css +391 -0
  12. package/dist/styles/utilities.css +5 -0
  13. package/dist/ui/card/card.svelte +2 -52
  14. package/dist/ui/card/card.svelte.d.ts +0 -43
  15. package/dist/ui/card/variants.d.ts +44 -0
  16. package/dist/ui/card/variants.js +20 -0
  17. package/dist/ui/context-menu/context-menu-checkbox-item.svelte +2 -4
  18. package/dist/ui/context-menu/context-menu-group-heading.svelte +2 -5
  19. package/dist/ui/context-menu/context-menu-item.svelte +2 -8
  20. package/dist/ui/context-menu/context-menu-radio-item.svelte +2 -8
  21. package/dist/ui/context-menu/context-menu-separator.svelte +2 -5
  22. package/dist/ui/context-menu/context-menu-sub-trigger.svelte +2 -8
  23. package/dist/ui/dialog/dialog-header.svelte +1 -1
  24. package/dist/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte +2 -4
  25. package/dist/ui/dropdown-menu/dropdown-menu-group-heading.svelte +2 -5
  26. package/dist/ui/dropdown-menu/dropdown-menu-item.svelte +2 -8
  27. package/dist/ui/dropdown-menu/dropdown-menu-radio-item.svelte +2 -8
  28. package/dist/ui/dropdown-menu/dropdown-menu-separator.svelte +2 -5
  29. package/dist/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte +2 -8
  30. package/dist/ui/menu-recipes.d.ts +6 -0
  31. package/dist/ui/menu-recipes.js +6 -0
  32. package/dist/ui/menubar/menubar-checkbox-item.svelte +2 -9
  33. package/dist/ui/menubar/menubar-group-heading.svelte +2 -5
  34. package/dist/ui/menubar/menubar-item.svelte +2 -8
  35. package/dist/ui/menubar/menubar-radio-item.svelte +2 -8
  36. package/dist/ui/menubar/menubar-separator.svelte +2 -5
  37. package/dist/ui/menubar/menubar-sub-trigger.svelte +2 -8
  38. package/dist/ui/pane/pane-close.svelte +7 -26
  39. package/dist/ui/video-player/video-player.svelte +8 -8
  40. package/package.json +48 -12
  41. package/dist/docs/badge.md +0 -18
  42. package/dist/docs/bits-ui-audit.md +0 -58
  43. package/dist/docs/button.md +0 -19
  44. package/dist/docs/chip.md +0 -20
  45. package/dist/docs/component-docs-core.d.ts +0 -8
  46. package/dist/docs/component-docs-core.js +0 -73
  47. package/dist/docs/component-docs.d.ts +0 -2
  48. package/dist/docs/component-docs.js +0 -25
  49. package/dist/docs/component-source-scanners.d.ts +0 -18
  50. package/dist/docs/component-source-scanners.js +0 -46
  51. package/dist/docs/consumer-import.d.ts +0 -65
  52. package/dist/docs/consumer-import.js +0 -70
  53. package/dist/docs/css-utilities.d.ts +0 -58
  54. package/dist/docs/css-utilities.js +0 -317
  55. package/dist/docs/extract-props.d.ts +0 -13
  56. package/dist/docs/extract-props.js +0 -324
  57. package/dist/docs/generated-docs.d.ts +0 -6
  58. package/dist/docs/generated-docs.js +0 -30
  59. package/dist/docs/index.d.ts +0 -5
  60. package/dist/docs/index.js +0 -66
  61. package/dist/docs/notes.md +0 -83
  62. package/dist/docs/scroll-area.md +0 -7
  63. package/dist/docs/separator.md +0 -20
  64. package/dist/docs/table.md +0 -35
  65. package/dist/docs/utilities.d.ts +0 -4
  66. package/dist/docs/utilities.js +0 -15
  67. package/dist/generated-docs/accordion.md +0 -57
  68. package/dist/generated-docs/alert-dialog.md +0 -91
  69. package/dist/generated-docs/aspect-ratio.md +0 -17
  70. package/dist/generated-docs/avatar.md +0 -39
  71. package/dist/generated-docs/badge.md +0 -41
  72. package/dist/generated-docs/bar.md +0 -41
  73. package/dist/generated-docs/button-group.md +0 -19
  74. package/dist/generated-docs/button.md +0 -117
  75. package/dist/generated-docs/calendar.md +0 -126
  76. package/dist/generated-docs/card.md +0 -58
  77. package/dist/generated-docs/checkbox.md +0 -42
  78. package/dist/generated-docs/chip.md +0 -61
  79. package/dist/generated-docs/code-block.md +0 -20
  80. package/dist/generated-docs/collapsible.md +0 -30
  81. package/dist/generated-docs/combobox.md +0 -74
  82. package/dist/generated-docs/command-bar.md +0 -3
  83. package/dist/generated-docs/command.md +0 -126
  84. package/dist/generated-docs/context-menu.md +0 -104
  85. package/dist/generated-docs/copy-button.md +0 -29
  86. package/dist/generated-docs/cycle.md +0 -29
  87. package/dist/generated-docs/date-field.md +0 -49
  88. package/dist/generated-docs/date-picker.md +0 -180
  89. package/dist/generated-docs/date-range-field.md +0 -50
  90. package/dist/generated-docs/date-range-picker.md +0 -180
  91. package/dist/generated-docs/dialog.md +0 -94
  92. package/dist/generated-docs/draggable.md +0 -3
  93. package/dist/generated-docs/dropdown-menu.md +0 -104
  94. package/dist/generated-docs/file-upload.md +0 -18
  95. package/dist/generated-docs/getting-started.md +0 -3
  96. package/dist/generated-docs/input.md +0 -23
  97. package/dist/generated-docs/kv.md +0 -20
  98. package/dist/generated-docs/label.md +0 -17
  99. package/dist/generated-docs/link-preview.md +0 -40
  100. package/dist/generated-docs/llm-shell.md +0 -3
  101. package/dist/generated-docs/llms-full.txt +0 -5201
  102. package/dist/generated-docs/llms.txt +0 -138
  103. package/dist/generated-docs/logo.md +0 -24
  104. package/dist/generated-docs/manifest.json +0 -1685
  105. package/dist/generated-docs/measurements.md +0 -3
  106. package/dist/generated-docs/menu.md +0 -11
  107. package/dist/generated-docs/menubar.md +0 -104
  108. package/dist/generated-docs/meter.md +0 -101
  109. package/dist/generated-docs/mode.md +0 -24
  110. package/dist/generated-docs/nav.md +0 -73
  111. package/dist/generated-docs/navigation-menu.md +0 -11
  112. package/dist/generated-docs/notes.md +0 -87
  113. package/dist/generated-docs/os.md +0 -3
  114. package/dist/generated-docs/pagination.md +0 -55
  115. package/dist/generated-docs/pane.md +0 -34
  116. package/dist/generated-docs/pin-input.md +0 -31
  117. package/dist/generated-docs/popover.md +0 -43
  118. package/dist/generated-docs/progress.md +0 -17
  119. package/dist/generated-docs/radio-group.md +0 -31
  120. package/dist/generated-docs/range-calendar.md +0 -11
  121. package/dist/generated-docs/rating-group.md +0 -31
  122. package/dist/generated-docs/scroll-area.md +0 -65
  123. package/dist/generated-docs/select.md +0 -67
  124. package/dist/generated-docs/separator.md +0 -57
  125. package/dist/generated-docs/sheet.md +0 -11
  126. package/dist/generated-docs/skeleton.md +0 -18
  127. package/dist/generated-docs/slider.md +0 -71
  128. package/dist/generated-docs/spacing.md +0 -3
  129. package/dist/generated-docs/step.md +0 -51
  130. package/dist/generated-docs/surfaces.md +0 -3
  131. package/dist/generated-docs/switch.md +0 -18
  132. package/dist/generated-docs/table.md +0 -113
  133. package/dist/generated-docs/tabs.md +0 -48
  134. package/dist/generated-docs/text.md +0 -3
  135. package/dist/generated-docs/time-field.md +0 -49
  136. package/dist/generated-docs/time-range-field.md +0 -50
  137. package/dist/generated-docs/timeline.md +0 -32
  138. package/dist/generated-docs/todo.md +0 -3
  139. package/dist/generated-docs/toggle-group.md +0 -31
  140. package/dist/generated-docs/toggle.md +0 -20
  141. package/dist/generated-docs/toolbar.md +0 -11
  142. package/dist/generated-docs/tooltip.md +0 -40
  143. package/dist/generated-docs/tree.md +0 -36
  144. package/dist/generated-docs/utilities.md +0 -1236
  145. package/dist/generated-docs/video-player.md +0 -73
@@ -1,3 +0,0 @@
1
- # Measurements
2
-
3
- Every component measured as it renders — gaps, radii, and the laws they must obey.
@@ -1,11 +0,0 @@
1
- # Menu
2
-
3
- Headless menu primitives re-exported from bits-ui.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import * as Menu from "@signal9/era-ui/menu";
9
- ```
10
-
11
- Composed from sub-components — compose explicitly at the call site:
@@ -1,104 +0,0 @@
1
- # Menubar
2
-
3
- A horizontal bar of dropdown menus.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import * as Menubar from "@signal9/era-ui/menubar";
9
- ```
10
-
11
- Composed from sub-components — compose explicitly at the call site:
12
-
13
- - `Menubar.Root`
14
- - `Menubar.Trigger`
15
- - `Menubar.Content`
16
- - `Menubar.Item`
17
- - `Menubar.CheckboxItem`
18
- - `Menubar.RadioItem`
19
- - `Menubar.Separator`
20
- - `Menubar.SubTrigger`
21
- - `Menubar.SubContent`
22
- - `Menubar.GroupHeading`
23
-
24
- ## Menubar.Root
25
-
26
- Inherits all props from `Menubar.RootProps`.
27
-
28
- | Prop | Type | Default | Notes |
29
- |------|------|---------|-------|
30
- | `ref?` | `(forwarded)` | `null` | bindable |
31
- | `value?` | `(forwarded)` | `''` | bindable |
32
-
33
- ## Menubar.Trigger
34
-
35
- Inherits all props from `PartProps<Menubar.TriggerProps>`.
36
-
37
- | Prop | Type | Default | Notes |
38
- |------|------|---------|-------|
39
- | `ref?` | `(forwarded)` | `null` | bindable |
40
-
41
- ## Menubar.Content
42
-
43
- Inherits all props from `OwnedPartProps<Menubar.ContentProps>`.
44
-
45
- | Prop | Type | Default | Notes |
46
- |------|------|---------|-------|
47
- | `ref?` | `(forwarded)` | `null` | bindable |
48
-
49
- ## Menubar.Item
50
-
51
- Inherits all props from `PartProps<Menubar.ItemProps>`.
52
-
53
- | Prop | Type | Default | Notes |
54
- |------|------|---------|-------|
55
- | `ref?` | `(forwarded)` | `null` | bindable |
56
-
57
- ## Menubar.CheckboxItem
58
-
59
- Inherits all props from `Menubar.CheckboxItemProps`.
60
-
61
- | Prop | Type | Default | Notes |
62
- |------|------|---------|-------|
63
- | `ref?` | `(forwarded)` | `null` | bindable |
64
- | `checked?` | `(forwarded)` | `false` | bindable |
65
-
66
- ## Menubar.RadioItem
67
-
68
- Inherits all props from `Menubar.RadioItemProps`.
69
-
70
- | Prop | Type | Default | Notes |
71
- |------|------|---------|-------|
72
- | `ref?` | `(forwarded)` | `null` | bindable |
73
-
74
- ## Menubar.Separator
75
-
76
- Inherits all props from `Menubar.SeparatorProps`.
77
-
78
- | Prop | Type | Default | Notes |
79
- |------|------|---------|-------|
80
- | `ref?` | `(forwarded)` | `null` | bindable |
81
-
82
- ## Menubar.SubTrigger
83
-
84
- Inherits all props from `OwnedPartProps<Menubar.SubTriggerProps>`.
85
-
86
- | Prop | Type | Default | Notes |
87
- |------|------|---------|-------|
88
- | `ref?` | `(forwarded)` | `null` | bindable |
89
-
90
- ## Menubar.SubContent
91
-
92
- Inherits all props from `OwnedPartProps<Menubar.SubContentProps>`.
93
-
94
- | Prop | Type | Default | Notes |
95
- |------|------|---------|-------|
96
- | `ref?` | `(forwarded)` | `null` | bindable |
97
-
98
- ## Menubar.GroupHeading
99
-
100
- Inherits all props from `Menubar.GroupHeadingProps`.
101
-
102
- | Prop | Type | Default | Notes |
103
- |------|------|---------|-------|
104
- | `ref?` | `(forwarded)` | `null` | bindable |
@@ -1,101 +0,0 @@
1
- # Meter
2
-
3
- Displays a value within a known range.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import { Meter } from "@signal9/era-ui/meter";
9
- ```
10
-
11
- ## Props
12
-
13
- Inherits all props from `Meter.RootProps`.
14
-
15
- | Prop | Type | Default | Notes |
16
- |------|------|---------|-------|
17
- | `tone?` | `'default' \| 'accent' \| 'destructive' \| 'success' \| 'warning' \| 'info'` | `'default'` | The band this reading falls in. Tone is the fill's colour only — the
18
- track stays neutral, because the well belongs to the control and the
19
- fill belongs to the value.
20
- Tone carries no semantics on its own: a meter in the destructive band
21
- still needs an accessible label saying what has run out. Pair it with
22
- `aria-label` / a visible label, never rely on the hue alone. |
23
- | `threshold?` | `number` | — | A BOUNDARY INSIDE THE RANGE — in the same units as `value`, not a
24
- percentage. A quota with a soft limit before the hard one; a plan that
25
- includes 30 hours of the 50 it bills against; a temperature that is
26
- fine until it is not. The bar fills against `max`, and the mark says
27
- where the number the reader is actually deciding about sits.
28
- WHY THE MARK HAS NO COLOUR OF ITS OWN. It has to read against both
29
- sides of itself: over the empty track before the value reaches it, and
30
- over the fill afterwards. One token cannot do that — a colour tuned
31
- against the track disappears into the fill the moment the value
32
- crosses, which is exactly what a consumer hit hand-rolling this. So
33
- the mark is painted in the colour of the side it is NOT on: the fill's
34
- paint while the value is short of it, the track's fill once the value
35
- has passed. That contrast is not a new promise — it is the meter's
36
- own. A fill that did not stand out from its track would not be a
37
- meter, so borrowing the pair is the one choice that cannot be wrong in
38
- a theme, a tone, or a surface era has not seen.
39
- IT IS DECORATION, and silent on purpose. There is no `role` and
40
- nothing to announce: a screen reader gets `value`/`min`/`max` and the
41
- meter's own accessible name, and a boundary it cannot position adds
42
- nothing. If the threshold is part of the reading — it usually is —
43
- put the figure in `aria-label` and in a caption, where it is a number
44
- rather than a position.
45
- PASS `aria-valuetext` IF YOUR STORED UNIT IS NOT YOUR DISPLAYED ONE.
46
- `value`, `max` and `threshold` all have to sit in one unit for this
47
- arithmetic to work, and `aria-valuenow` is `value` verbatim — so a bar
48
- stored in minutes and read in hours announces "2640 of 3000", a figure
49
- the customer was never quoted. Converting the props is not available
50
- to you (it would move the mark), which makes `aria-valuetext` the only
51
- lever; it passes through `restProps` onto the same element. Reported
52
- by a consumer billing minutes and quoting hours.
53
- Outside `[min, max]` it renders NOTHING rather than clamping to an
54
- end, because a mark pinned to the edge of the bar would claim a
55
- boundary that is not in the range. |
56
- | `buffer?` | `number` | — | A REGION FROM `min` THAT IS A DIFFERENT KIND OF QUANTITY — painted
57
- under the fill, over the track, in the same units as `value`.
58
- The media player's buffered-progress shape, and the name is borrowed
59
- from it, but the reading is more general: some of the range is already
60
- accounted for. A plan whose first 30 of 50 hours are included in the
61
- monthly minimum is not "24 hours into a bill", it is "24 of 30 hours
62
- you have already paid for" — money spent against money that will be
63
- spent, which is a distinction the bar could not draw.
64
- NO COLOUR OF ITS OWN, for the reason `threshold` has none: it has to
65
- be legible over the track while never competing with the fill that
66
- crosses it, and a token tuned for one of those is wrong for the other.
67
- It is the fill's own paint at 30%, so it cannot be wrong in a theme,
68
- a tone or a surface era has not seen, and it is the same 30% Slider's
69
- `progress` has used for a seek bar's buffer since it shipped.
70
- UNDER the fill, so it disappears as the value consumes it. That is the
71
- reading, not a limitation: once you are past your included hours, the
72
- included region IS spent, and `threshold` is what goes on marking
73
- where it ended.
74
- CLAMPED to the range rather than dropped, which is where it differs
75
- from `threshold`. A region can be honestly truncated — a buffer past
76
- `max` means the whole visible bar is accounted for, and painting it
77
- all says exactly that. A point cannot: a mark pinned to the edge would
78
- claim a boundary that is not in the range, so an out-of-range
79
- `threshold` renders nothing instead.
80
- Silent, like the mark. `aria-valuetext` already carries the reading,
81
- and a second region a screen reader cannot position adds nothing.
82
- (Slider spells its equivalent `progress` and takes a 0–1 FRACTION.
83
- Here every positional prop is in the value's own units — `value`,
84
- `max`, `threshold`, `buffer` — because a component that mixed the two
85
- would be a bug generator. The names differ because on a Meter
86
- `progress` would be a synonym for `value`.) |
87
- | `start?` | `Snippet` | — | Captions under the two ends of the bar — what the range MEANS.
88
- A meter states a proportion and leaves the reader to work out what of.
89
- "0m used" on the left and "50h before approval" on the right is not
90
- decoration, it is the reading; every consumer of a bare meter ends up
91
- hand-rolling the same flex row underneath it, which is where this came
92
- from. `start` is left, `end` is right, either may stand alone.
93
- NOT ANNOUNCED. They are captions, so a screen reader gets the meter's
94
- value and its own `aria-label`, not these. If the range needs saying
95
- out loud, say it in the label too — the same rule `tone` carries.
96
- THE DOM IS UNCHANGED WITHOUT THEM. With neither snippet this renders
97
- exactly the element it always did, so `class` still lands on the track
98
- and the geometry audits still walk the same box. Passing one wraps the
99
- track in a column, and `class` still lands on the track. |
100
- | `end?` | `Snippet` | — | — |
101
- | `ref?` | `(forwarded)` | `null` | bindable |
@@ -1,24 +0,0 @@
1
- # Mode
2
-
3
- Scoped density / surface / corners override for any subtree.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import { Mode } from "@signal9/era-ui/mode";
9
- ```
10
-
11
- ## Props
12
-
13
- Inherits all props from `HTMLAttributes<HTMLDivElement>`.
14
-
15
- | Prop | Type | Default | Notes |
16
- |------|------|---------|-------|
17
- | `mode?` | `ProviderMode` | — | — |
18
- | `surface?` | `Surface` | — | — |
19
- | `corners?` | `Corners` | — | — |
20
- | `font?` | `Font` | — | — |
21
- | `motion?` | `Motion` | — | — |
22
- | `primary?` | `string` | — | Any CSS color — sets --color-primary for this subtree. |
23
- | `primaryFg?` | `string` | — | Foreground against `primary` — sets --color-primary-fg. |
24
- | `children?` | `Snippet` | — | — |
@@ -1,73 +0,0 @@
1
- # Nav
2
-
3
- A navigation landmark and its items — the current one announces itself, and that announcement is what paints it.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import * as Nav from "@signal9/era-ui/nav";
9
- ```
10
-
11
- Composed from sub-components — compose explicitly at the call site:
12
-
13
- - `Nav.Bar`
14
- - `Nav.Item`
15
-
16
- ## Nav.Bar
17
-
18
- Inherits all props from `HTMLAttributes<HTMLElement>`.
19
-
20
- | Prop | Type | Default | Notes |
21
- |------|------|---------|-------|
22
- | `ref?` | `HTMLElement \| null` | `null` | bindable |
23
- | `size?` | `'chip' \| 'control' \| 'bar'` | `'bar'` | Height tier, exactly as Bar's — the geometry is Bar's, not a second copy. |
24
- | `content?` | `BarContent` | — | Tier of the items inside, so the wall stays concentric to them. |
25
- | `divider?` | `boolean` | `false` | Draw Bar's flush cap-a-panel rule beneath the bar. Off by default,
26
- because a nav that sits in a page already has whatever separation the
27
- layout gives it — and a link-variant nav in particular reads as text,
28
- where an unasked-for rule is chrome. Turn it on rather than reaching for
29
- a Separator underneath, so the line is the bar's own and stays with it. |
30
- | `label?` | `string` | `'Main'` | The accessible name for this landmark. A page may hold several
31
- navigations (primary, breadcrumb, pagination, footer) and a screen
32
- reader lists them all by name — unnamed, they read as "navigation",
33
- "navigation", "navigation". Defaults to "Main" rather than nothing so
34
- the common case is named without anyone having to know this. |
35
- | `children?` | `Snippet` | — | — |
36
-
37
- ## Nav.Item
38
-
39
- Inherits all props from `HTMLAnchorAttributes`.
40
-
41
- | Prop | Type | Default | Notes |
42
- |------|------|---------|-------|
43
- | `ref?` | `HTMLAnchorElement \| null` | `null` | bindable |
44
- | `href` | `string` | — | — |
45
- | `variant?` | `'filled' \| 'link'` | `'filled'` | `filled` (default) is a control on a rung — a bar of buttons. `link`
46
- drops the chrome entirely and renders running text, for a primary nav
47
- that should read as links rather than a row of raised keycaps. Existing
48
- bars are byte-identical. |
49
- | `currentCue?` | `'thickness' \| 'ink' \| 'none'` | `'thickness'` | WHAT MARKS THE CURRENT ITEM. `thickness` (default) is the three-state
50
- decoration — portable across every theme and font because it is one
51
- ink at three strengths. `ink` brightens the current item instead, and
52
- is theme-dependent by construction: era's default themes point
53
- --color-link at --color-bright, so its delta there is zero. `none`
54
- silences era's cue entirely, for a consumer painting their own.
55
- See navItemVariants above for the measurements behind each. |
56
- | `current?` | `boolean` | `false` | Whether this item points at the page you are on.
57
- There is deliberately no `active` prop beside this one. `active` would
58
- be a second source of truth for one fact, and the two drift the moment
59
- a route changes and someone updates the styling flag but not the
60
- announcement — leaving a tab that LOOKS current to sighted users and
61
- announces nothing to a screen reader, or the reverse. This sets
62
- `aria-current="page"`, and the styling below keys off that attribute,
63
- so the look and the announcement cannot disagree: there is one fact
64
- and it is the accessible one. |
65
- | `size?` | `'control' \| 'chip' \| 'pill' \| 'icon'` | `'control'` | Tier, matching Button's rungs so an item nests in a bar the same way. |
66
- | `lead?` | `Snippet` | — | Icon before the label, outside it — same contract as Button's. |
67
- | `trail?` | `Snippet` | — | Icon after the label, outside it. |
68
- | `caps?` | `boolean` | `false` | The label is ALL CAPS or an initialism — trims to the cap band instead of
69
- the x-height band. Same prop, same reason, same wording as Button's:
70
- Nav.Item borrows Button's geometry and renders the identical label box,
71
- so a nav of "API" / "SDK" / "CLI" links had the identical defect and no
72
- way to reach it either. |
73
- | `children?` | `Snippet` | — | — |
@@ -1,11 +0,0 @@
1
- # Navigation Menu
2
-
3
- Headless navigation-menu primitives re-exported from bits-ui.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import * as NavigationMenu from "@signal9/era-ui/navigation-menu";
9
- ```
10
-
11
- Composed from sub-components — compose explicitly at the call site:
@@ -1,87 +0,0 @@
1
- # Notes
2
-
3
- A complete notes app — rich-text editor, slash commands, local persistence.
4
-
5
- ## Usage
6
-
7
- **Notes is not published.** It lives in `src/apps/` in the era-ui repository,
8
- outside the packaged `src/lib`, so there is no import path that reaches it — the
9
- `@signal9/era-ui/apps` subpath was removed in v13.
10
-
11
- A design system that also ships a note-taking application is two products in one
12
- package: Notes alone brings fifteen TipTap packages, and its release cadence and
13
- support expectations are nothing like a primitive's. It stays in the repo as a
14
- reference implementation and a demo — read it, copy it, or lift it into the
15
- product that renders it.
16
-
17
- What era DOES publish is the part that generalises: `@signal9/era-ui/styles/prose`
18
- is the document typography Notes uses, available to anyone building an editor.
19
-
20
- Read as a reference, the integration is: a sidebar with filter, pin, and delete; a TipTap
21
- document with a `/` command menu and a selection toolbar; and persistence to
22
- `localStorage` under `era-ui:notes`.
23
-
24
- ## Peer dependencies
25
-
26
- Install alongside the library (they are not bundled):
27
-
28
- ```
29
- @tiptap/core @tiptap/pm @tiptap/starter-kit @tiptap/suggestion
30
- @tiptap/extension-code-block-lowlight @tiptap/extension-details
31
- @tiptap/extension-highlight @tiptap/extension-image
32
- @tiptap/extension-placeholder @tiptap/extension-table
33
- @tiptap/extension-task-item @tiptap/extension-task-list
34
- @tiptap/extension-typography @tiptap/extension-unique-id
35
- lowlight tiptap-markdown
36
- ```
37
-
38
- ## Props
39
-
40
- | Prop | Type | Default | Notes |
41
- | ------------ | ---------------- | ------------------ | ----------------------------------------------------------------- |
42
- | `store` | `NotesStore` | created internally | Bring your own; when set, the host owns its lifecycle. |
43
- | `adapter` | `NotesAdapter` | `localStorage` | Persistence for the internally-created store. |
44
- | `storageKey` | `string` | `era-ui:notes` | Key for the default adapter. |
45
- | `noteId` | `string \| null` | `null` | `$bindable` — the open note, for deep-linking or session restore. |
46
- | `seed` | `NoteInit[]` | — | Created only when storage comes back empty (first-run sample). |
47
-
48
- ## Persistence
49
-
50
- Persistence is one small interface, so server-backed hosting is a drop-in swap —
51
- `load`/`save` may be sync or async:
52
-
53
- ```ts
54
- import { Notes, NotesStore } from '$apps/index.js'; // in-repo; not published
55
-
56
- const store = new NotesStore({
57
- adapter: {
58
- load: () => fetch('/api/notes').then((r) => r.json()),
59
- save: (notes) => fetch('/api/notes', { method: 'PUT', body: JSON.stringify(notes) })
60
- }
61
- });
62
- ```
63
-
64
- `NotesStore` is the reactive source of truth (`notes`, `ordered`, `loading`,
65
- `status`, `lastError`) with `create` / `update` / `remove` / `togglePin` /
66
- `setIcon` / `search` / `toMarkdown` / `flush`. Writes are debounced and
67
- coalesced, so a burst of keystrokes costs one `save`.
68
-
69
- ## The heading index
70
-
71
- Every document is also a tree. `buildGlobalTree()` walks heading structure,
72
- `treeToText()` renders it as a table of contents a model can read, and
73
- `extractSection(title, doc, headingId)` returns just the requested slice as
74
- structure-preserving markdown — reasoning-based retrieval rather than
75
- embeddings. Heading ids are stable (`@tiptap/extension-unique-id`), so a section
76
- address survives edits above it.
77
-
78
- ## Notes
79
-
80
- - Keyboard: `/` opens the command menu, `Mod-K` links a selection, `Mod-S`
81
- flushes pending writes immediately.
82
- - The slash menu and selection toolbar are real Svelte components mounted into
83
- the document root, so they follow every axis — density tiers, surface chrome,
84
- corners, motion, font — instead of carrying their own hardcoded styling.
85
- - `@tiptap/extension-mathematics` is deliberately absent: it needs KaTeX's
86
- stylesheet and fonts to render. Spread `noteExtensions` and add it yourself if
87
- you want math.
@@ -1,3 +0,0 @@
1
- # OS Shell
2
-
3
- Window manager, desktop, taskbar with command bar, notifications.
@@ -1,55 +0,0 @@
1
- # Pagination
2
-
3
- Enables users to navigate through a series of pages.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import * as Pagination from "@signal9/era-ui/pagination";
9
- ```
10
-
11
- Composed from sub-components — compose explicitly at the call site:
12
-
13
- - `Pagination.Root`
14
- - `Pagination.Page`
15
- - `Pagination.PrevButton`
16
- - `Pagination.NextButton`
17
-
18
- ## Pagination.Root
19
-
20
- Inherits all props from `Pagination.RootProps`.
21
-
22
- | Prop | Type | Default | Notes |
23
- |------|------|---------|-------|
24
- | `ref?` | `(forwarded)` | `null` | bindable |
25
- | `page?` | `(forwarded)` | `1` | bindable |
26
-
27
- ## Pagination.Page
28
-
29
- Inherits all props from `WithoutChildrenOrChild<Pagination.PageProps>`.
30
- Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
31
-
32
- | Prop | Type | Default | Notes |
33
- |------|------|---------|-------|
34
- | `children?` | `Snippet` | — | — |
35
- | `ref?` | `(forwarded)` | `null` | bindable |
36
-
37
- ## Pagination.PrevButton
38
-
39
- Inherits all props from `WithoutChildrenOrChild<Pagination.PrevButtonProps>`.
40
- Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
41
-
42
- | Prop | Type | Default | Notes |
43
- |------|------|---------|-------|
44
- | `children?` | `Snippet` | — | — |
45
- | `ref?` | `(forwarded)` | `null` | bindable |
46
-
47
- ## Pagination.NextButton
48
-
49
- Inherits all props from `WithoutChildrenOrChild<Pagination.NextButtonProps>`.
50
- Inherits all props from `Pick<ButtonVariants, 'tone' | 'size'>`.
51
-
52
- | Prop | Type | Default | Notes |
53
- |------|------|---------|-------|
54
- | `children?` | `Snippet` | — | — |
55
- | `ref?` | `(forwarded)` | `null` | bindable |
@@ -1,34 +0,0 @@
1
- # Pane
2
-
3
- A draggable floating window with a handle bar.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import { Pane } from "@signal9/era-ui/pane";
9
- ```
10
-
11
- ## Props
12
-
13
- Inherits all props from `HTMLAttributes<HTMLDivElement>`.
14
-
15
- | Prop | Type | Default | Notes |
16
- |------|------|---------|-------|
17
- | `ref?` | `HTMLDivElement \| null` | `null` | bindable |
18
- | `position?` | `{ x: number; y: number }` | `{ x: 0, y: 0 }` | bindable — Offset from the pane's layout position. Bindable and writable —
19
- assign to move the pane programmatically (e.g. reset to 0,0). |
20
- | `size?` | `{ width: number; height: number } \| null` | `null` | bindable — Explicit pixel size once resized (or a preset). `null` = auto. Bindable. |
21
- | `resizable?` | `boolean` | `false` | Render a corner grip and allow the pane to be resized. |
22
- | `title?` | `string` | — | Text shown in the handle bar. For richer chrome use `header`. |
23
- | `icon?` | `Component<IconProps> \| null` | `AppPane` | Lucide icon rendered left of the title. Pass `null` to omit. |
24
- | `disabled?` | `boolean` | `false` | Disables dragging (reactive). |
25
- | `plugins?` | `DragPlugin[] \| (() => DragPlugin[])` | `[]` | Tier-2 neodrag plugins (`use`) appended to the drag. Tier-1 concerns
26
- (axis/bounds/grid/threshold) are Pane.Root props — spread through
27
- restProps or use Root directly for those. |
28
- | `onDragStart?` | `(data: DragEventData) => void` | — | — |
29
- | `onDrag?` | `(data: DragEventData) => void` | — | — |
30
- | `onDragEnd?` | `(data: DragEventData) => void` | — | — |
31
- | `onClose?` | `() => void` | — | When set, a close button renders at the right of the handle bar. |
32
- | `header?` | `Snippet` | — | Extra handle-bar content, rendered after the title. |
33
- | `center?` | `Snippet` | — | Content centred on the bar itself — Pane.Handle's three-track grid. |
34
- | `children?` | `Snippet` | — | — |
@@ -1,31 +0,0 @@
1
- # PIN Input
2
-
3
- Enables users to input a sequence of one-character inputs.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import * as PinInput from "@signal9/era-ui/pin-input";
9
- ```
10
-
11
- Composed from sub-components — compose explicitly at the call site:
12
-
13
- - `PinInput.Root`
14
- - `PinInput.Cell`
15
-
16
- ## PinInput.Root
17
-
18
- Inherits all props from `PinInput.RootProps`.
19
-
20
- | Prop | Type | Default | Notes |
21
- |------|------|---------|-------|
22
- | `ref?` | `(forwarded)` | `null` | bindable |
23
- | `value?` | `(forwarded)` | `''` | bindable |
24
-
25
- ## PinInput.Cell
26
-
27
- Inherits all props from `WithoutChildrenOrChild<PinInput.CellProps>`.
28
-
29
- | Prop | Type | Default | Notes |
30
- |------|------|---------|-------|
31
- | `ref?` | `(forwarded)` | `null` | bindable |
@@ -1,43 +0,0 @@
1
- # Popover
2
-
3
- A floating panel anchored to a trigger.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import * as Popover from "@signal9/era-ui/popover";
9
- ```
10
-
11
- Composed from sub-components — compose explicitly at the call site:
12
-
13
- - `Popover.Trigger`
14
- - `Popover.Content`
15
- - `Popover.Close`
16
-
17
- ## Popover.Trigger
18
-
19
- Inherits all props from `WithoutChildrenOrChild<Popover.TriggerProps>`.
20
- Inherits all props from `ButtonVariants`.
21
-
22
- | Prop | Type | Default | Notes |
23
- |------|------|---------|-------|
24
- | `children?` | `Snippet` | — | — |
25
- | `ref?` | `(forwarded)` | `null` | bindable |
26
-
27
- ## Popover.Content
28
-
29
- Inherits all props from `PartProps<Popover.ContentProps>`.
30
-
31
- | Prop | Type | Default | Notes |
32
- |------|------|---------|-------|
33
- | `ref?` | `(forwarded)` | `null` | bindable |
34
-
35
- ## Popover.Close
36
-
37
- Inherits all props from `WithoutChildrenOrChild<Popover.CloseProps>`.
38
- Inherits all props from `Omit<ButtonVariants, 'active'>`.
39
-
40
- | Prop | Type | Default | Notes |
41
- |------|------|---------|-------|
42
- | `children?` | `Snippet` | — | — |
43
- | `ref?` | `(forwarded)` | `null` | bindable |
@@ -1,17 +0,0 @@
1
- # Progress
2
-
3
- Shows the completion status of a task.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import { Progress } from "@signal9/era-ui/progress";
9
- ```
10
-
11
- ## Props
12
-
13
- Inherits all props from `Progress.RootProps`.
14
-
15
- | Prop | Type | Default | Notes |
16
- |------|------|---------|-------|
17
- | `ref?` | `(forwarded)` | `null` | bindable |
@@ -1,31 +0,0 @@
1
- # Radio Group
2
-
3
- Groups radio items for single selection.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import * as RadioGroup from "@signal9/era-ui/radio-group";
9
- ```
10
-
11
- Composed from sub-components — compose explicitly at the call site:
12
-
13
- - `RadioGroup.Root`
14
- - `RadioGroup.Item`
15
-
16
- ## RadioGroup.Root
17
-
18
- Inherits all props from `RadioGroup.RootProps`.
19
-
20
- | Prop | Type | Default | Notes |
21
- |------|------|---------|-------|
22
- | `ref?` | `(forwarded)` | `null` | bindable |
23
- | `value?` | `(forwarded)` | `''` | bindable |
24
-
25
- ## RadioGroup.Item
26
-
27
- Inherits all props from `RadioGroup.ItemProps`.
28
-
29
- | Prop | Type | Default | Notes |
30
- |------|------|---------|-------|
31
- | `ref?` | `(forwarded)` | `null` | bindable |
@@ -1,11 +0,0 @@
1
- # Range Calendar
2
-
3
- Headless range-calendar primitives re-exported from bits-ui.
4
-
5
- ## Import
6
-
7
- ```ts
8
- import * as RangeCalendar from "@signal9/era-ui/range-calendar";
9
- ```
10
-
11
- Composed from sub-components — compose explicitly at the call site: