@nadicodeai/ui 12.1.111 → 12.1.114
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/AGENTS.md +11 -9
- package/README.md +3 -2
- package/dist/components/account-menu.d.ts +1 -1
- package/dist/components/account-menu.js +1 -1
- package/dist/components/action-menu.d.ts +2 -2
- package/dist/components/action-menu.js +2 -2
- package/dist/components/activity-feed.d.ts +1 -1
- package/dist/components/activity-feed.js +1 -1
- package/dist/components/agent-card.d.ts +5 -3
- package/dist/components/agent-card.d.ts.map +1 -1
- package/dist/components/agent-card.js +5 -3
- package/dist/components/agent-list-row.d.ts +2 -2
- package/dist/components/agent-list-row.js +2 -2
- package/dist/components/agent-orb.d.ts +31 -7
- package/dist/components/agent-orb.d.ts.map +1 -1
- package/dist/components/agent-orb.js +29 -5
- package/dist/components/agent-profile.d.ts +6 -2
- package/dist/components/agent-profile.d.ts.map +1 -1
- package/dist/components/agent-profile.js +6 -2
- package/dist/components/aspect-ratio.d.ts +7 -3
- package/dist/components/aspect-ratio.d.ts.map +1 -1
- package/dist/components/aspect-ratio.js +7 -3
- package/dist/components/avatar.d.ts +11 -5
- package/dist/components/avatar.d.ts.map +1 -1
- package/dist/components/avatar.js +11 -5
- package/dist/components/breadcrumb.d.ts +1 -1
- package/dist/components/breadcrumb.js +1 -1
- package/dist/components/button.d.ts +23 -10
- package/dist/components/button.d.ts.map +1 -1
- package/dist/components/button.js +23 -10
- package/dist/components/card-row.d.ts +4 -2
- package/dist/components/card-row.d.ts.map +1 -1
- package/dist/components/card-row.js +4 -2
- package/dist/components/card.d.ts +1 -1
- package/dist/components/card.js +1 -1
- package/dist/components/carousel.d.ts +9 -4
- package/dist/components/carousel.d.ts.map +1 -1
- package/dist/components/carousel.js +9 -4
- package/dist/components/catalog-drawer.d.ts +1 -1
- package/dist/components/catalog-drawer.js +1 -1
- package/dist/components/chart-card.d.ts +1 -1
- package/dist/components/chart-card.js +1 -1
- package/dist/components/checkbox.d.ts +2 -1
- package/dist/components/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox.js +2 -1
- package/dist/components/choicebox.d.ts +9 -5
- package/dist/components/choicebox.d.ts.map +1 -1
- package/dist/components/choicebox.js +9 -5
- package/dist/components/clearable-input.d.ts +2 -1
- package/dist/components/clearable-input.d.ts.map +1 -1
- package/dist/components/clearable-input.js +2 -1
- package/dist/components/code-block.d.ts +13 -10
- package/dist/components/code-block.d.ts.map +1 -1
- package/dist/components/code-block.js +13 -10
- package/dist/components/collection-filters.d.ts +1 -1
- package/dist/components/collection-filters.js +1 -1
- package/dist/components/collection-search.d.ts +11 -7
- package/dist/components/collection-search.d.ts.map +1 -1
- package/dist/components/collection-search.js +11 -7
- package/dist/components/combobox.d.ts +4 -1
- package/dist/components/combobox.d.ts.map +1 -1
- package/dist/components/combobox.js +4 -1
- package/dist/components/command.d.ts +1 -1
- package/dist/components/command.js +1 -1
- package/dist/components/company-card.d.ts +28 -5
- package/dist/components/company-card.d.ts.map +1 -1
- package/dist/components/company-card.js +28 -5
- package/dist/components/confirm-dialog.d.ts +3 -2
- package/dist/components/confirm-dialog.d.ts.map +1 -1
- package/dist/components/confirm-dialog.js +2 -2
- package/dist/components/copy-button.d.ts +2 -2
- package/dist/components/copy-button.js +2 -2
- package/dist/components/data-table.d.ts +2 -2
- package/dist/components/data-table.js +2 -2
- package/dist/components/drawer.d.ts +4 -4
- package/dist/components/drawer.d.ts.map +1 -1
- package/dist/components/drawer.js +3 -3
- package/dist/components/dropdown-menu.d.ts +2 -2
- package/dist/components/dropdown-menu.js +2 -2
- package/dist/components/empty-state.d.ts +2 -2
- package/dist/components/empty-state.js +2 -2
- package/dist/components/field.d.ts +4 -0
- package/dist/components/field.d.ts.map +1 -1
- package/dist/components/field.js +4 -0
- package/dist/components/file-diff.d.ts +5 -2
- package/dist/components/file-diff.d.ts.map +1 -1
- package/dist/components/file-diff.js +5 -2
- package/dist/components/form-dialog.d.ts +1 -1
- package/dist/components/form-dialog.js +1 -1
- package/dist/components/form-drawer.d.ts +1 -1
- package/dist/components/form-drawer.js +1 -1
- package/dist/components/gauge.d.ts +9 -7
- package/dist/components/gauge.d.ts.map +1 -1
- package/dist/components/gauge.js +9 -7
- package/dist/components/hover-card.d.ts +5 -2
- package/dist/components/hover-card.d.ts.map +1 -1
- package/dist/components/hover-card.js +5 -2
- package/dist/components/identity-mark.d.ts +3 -3
- package/dist/components/identity-mark.js +3 -3
- package/dist/components/input-group.d.ts +1 -0
- package/dist/components/input-group.d.ts.map +1 -1
- package/dist/components/input-group.js +1 -0
- package/dist/components/input-otp.d.ts +5 -3
- package/dist/components/input-otp.d.ts.map +1 -1
- package/dist/components/input-otp.js +5 -3
- package/dist/components/input.d.ts +4 -2
- package/dist/components/input.d.ts.map +1 -1
- package/dist/components/input.js +4 -2
- package/dist/components/item.d.ts +1 -1
- package/dist/components/item.js +1 -1
- package/dist/components/kbd.d.ts +4 -2
- package/dist/components/kbd.d.ts.map +1 -1
- package/dist/components/kbd.js +4 -2
- package/dist/components/label.d.ts +8 -3
- package/dist/components/label.d.ts.map +1 -1
- package/dist/components/label.js +8 -3
- package/dist/components/load-more-button.d.ts +3 -2
- package/dist/components/load-more-button.d.ts.map +1 -1
- package/dist/components/load-more-button.js +3 -2
- package/dist/components/message-notice.d.ts +1 -1
- package/dist/components/message-notice.js +1 -1
- package/dist/components/multi-select.d.ts +6 -4
- package/dist/components/multi-select.d.ts.map +1 -1
- package/dist/components/multi-select.js +6 -4
- package/dist/components/notice-banner.d.ts +2 -2
- package/dist/components/notice-banner.js +2 -2
- package/dist/components/object-workspace.d.ts +3 -3
- package/dist/components/object-workspace.d.ts.map +1 -1
- package/dist/components/object-workspace.js +2 -2
- package/dist/components/pairing-code.d.ts +2 -2
- package/dist/components/pairing-code.js +2 -2
- package/dist/components/picture-label.d.ts +3 -2
- package/dist/components/picture-label.d.ts.map +1 -1
- package/dist/components/picture-label.js +3 -2
- package/dist/components/popover.d.ts +7 -3
- package/dist/components/popover.d.ts.map +1 -1
- package/dist/components/popover.js +7 -3
- package/dist/components/progress-checklist.d.ts +1 -1
- package/dist/components/progress-checklist.js +1 -1
- package/dist/components/progress.d.ts +4 -2
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +4 -2
- package/dist/components/qr-code.d.ts +5 -2
- package/dist/components/qr-code.d.ts.map +1 -1
- package/dist/components/qr-code.js +5 -2
- package/dist/components/radio-group.d.ts +8 -5
- package/dist/components/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group.js +8 -5
- package/dist/components/record-identity.d.ts +1 -1
- package/dist/components/record-identity.js +1 -1
- package/dist/components/record-list.d.ts +2 -2
- package/dist/components/record-list.js +2 -2
- package/dist/components/record-sheet.d.ts +2 -2
- package/dist/components/record-sheet.js +2 -2
- package/dist/components/record-time.d.ts +1 -1
- package/dist/components/record-time.js +1 -1
- package/dist/components/resizable.d.ts +2 -2
- package/dist/components/resizable.js +2 -2
- package/dist/components/row-edit-form.d.ts +1 -1
- package/dist/components/row-edit-form.js +1 -1
- package/dist/components/run-timeline.d.ts +2 -2
- package/dist/components/run-timeline.js +2 -2
- package/dist/components/scroll-area.d.ts +5 -3
- package/dist/components/scroll-area.d.ts.map +1 -1
- package/dist/components/scroll-area.js +5 -3
- package/dist/components/segmented-control.d.ts +1 -1
- package/dist/components/segmented-control.js +1 -1
- package/dist/components/select.d.ts +5 -3
- package/dist/components/select.d.ts.map +1 -1
- package/dist/components/select.js +5 -3
- package/dist/components/separator.d.ts +4 -2
- package/dist/components/separator.d.ts.map +1 -1
- package/dist/components/separator.js +4 -2
- package/dist/components/settings-facts.d.ts +3 -2
- package/dist/components/settings-facts.d.ts.map +1 -1
- package/dist/components/settings-facts.js +3 -2
- package/dist/components/settings-section.d.ts +1 -1
- package/dist/components/settings-section.js +1 -1
- package/dist/components/sheet.d.ts +6 -3
- package/dist/components/sheet.d.ts.map +1 -1
- package/dist/components/sheet.js +6 -3
- package/dist/components/skeleton.d.ts +1 -1
- package/dist/components/skeleton.js +1 -1
- package/dist/components/slider.d.ts +2 -1
- package/dist/components/slider.d.ts.map +1 -1
- package/dist/components/slider.js +2 -1
- package/dist/components/snippet.d.ts +3 -1
- package/dist/components/snippet.d.ts.map +1 -1
- package/dist/components/snippet.js +3 -1
- package/dist/components/sonner.d.ts +2 -2
- package/dist/components/sonner.js +2 -2
- package/dist/components/status-badge.d.ts +5 -2
- package/dist/components/status-badge.d.ts.map +1 -1
- package/dist/components/status-badge.js +5 -2
- package/dist/components/status-dot.d.ts +2 -1
- package/dist/components/status-dot.d.ts.map +1 -1
- package/dist/components/status-dot.js +2 -1
- package/dist/components/switch.d.ts +7 -6
- package/dist/components/switch.d.ts.map +1 -1
- package/dist/components/switch.js +7 -6
- package/dist/components/table.d.ts +18 -11
- package/dist/components/table.d.ts.map +1 -1
- package/dist/components/table.js +18 -11
- package/dist/components/tabs.d.ts +19 -13
- package/dist/components/tabs.d.ts.map +1 -1
- package/dist/components/tabs.js +19 -13
- package/dist/components/text-link.d.ts +9 -4
- package/dist/components/text-link.d.ts.map +1 -1
- package/dist/components/text-link.js +9 -4
- package/dist/components/text-with-copy-button.d.ts +2 -2
- package/dist/components/text-with-copy-button.js +2 -2
- package/dist/components/textarea.d.ts +4 -3
- package/dist/components/textarea.d.ts.map +1 -1
- package/dist/components/textarea.js +4 -3
- package/dist/components/tooltip.d.ts +5 -3
- package/dist/components/tooltip.d.ts.map +1 -1
- package/dist/components/tooltip.js +5 -3
- package/dist/components/usage-meter.d.ts +2 -2
- package/dist/components/usage-meter.js +2 -2
- package/dist/components/waiting-line.d.ts +1 -1
- package/dist/components/waiting-line.js +1 -1
- package/dist/showcase/usage.generated.d.ts.map +1 -1
- package/dist/showcase/usage.generated.js +147 -147
- package/dist/styles/shadcn.tailwind.css +8 -0
- package/package.json +3 -3
package/AGENTS.md
CHANGED
|
@@ -4,15 +4,16 @@ Shared React components, primitives, the Agent conversation interface, and
|
|
|
4
4
|
product compositions. Source lives in `src/`; consumers receive `dist/` through
|
|
5
5
|
`package.json` exports.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
The rules every component shares are in `../design-system/DESIGN.md`: tokens,
|
|
8
|
+
roles, materials, glass, motion, status, activity, Agent orbs and marks. A
|
|
9
|
+
component's own contract (its sizes, variants, behaviour, words and access) is
|
|
10
|
+
the usage page in the TSDoc of its main export, which `generate:usage` compiles
|
|
11
|
+
and `lint` checks. A component change a person can see goes through
|
|
12
|
+
`product-design` first. This file holds only how the package is kept.
|
|
12
13
|
|
|
13
14
|
- **Styling.** A component uses the semantic roles and the generated tokens, and
|
|
14
15
|
nothing else: no raw colour, no `dark:` utility, no mode branch, no second
|
|
15
|
-
token vocabulary. A new value is added to
|
|
16
|
+
token vocabulary. A new value is added to the design system's tokens first.
|
|
16
17
|
- **Placement.** Every reusable component lives here, even while one product
|
|
17
18
|
alone uses it, so each product draws the design system from one source; a
|
|
18
19
|
product keeps only its own pages, data, routing and copy. A component admitted
|
|
@@ -30,9 +31,10 @@ package is kept.
|
|
|
30
31
|
package ships no auth abstraction. A value or function an app's server code
|
|
31
32
|
calls lives in a module without `"use client"`, and only the Portal's
|
|
32
33
|
production build (`npm run build -w @nadicodeai/portal`) proves it.
|
|
33
|
-
- **Usage.** The main export's TSDoc
|
|
34
|
-
`@behaviour`, `@words` and `@access`;
|
|
35
|
-
showcase's index from it, and `lint` fails
|
|
34
|
+
- **Usage.** The main export's TSDoc is the component's contract and carries
|
|
35
|
+
`@family`, `@when`, `@instead`, `@behaviour`, `@words` and `@access`;
|
|
36
|
+
`generate:usage` refreshes the showcase's index from it, and `lint` fails
|
|
37
|
+
until it runs.
|
|
36
38
|
- **Agents.** `@nadicodeai/ui/agents` re-exports assistant-ui and our reviewed
|
|
37
39
|
compositions; `@nadicodeai/ui/agent-orb` is the React-free entry a native
|
|
38
40
|
startup screen paints an orb with before React loads.
|
package/README.md
CHANGED
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
nadicode's React components, published as a built package: shadcn components on
|
|
4
4
|
Base UI, the chart kit, the Agent conversation interface, and the product
|
|
5
5
|
compositions the website, the Portal, Nadia and Alveare share. They build on
|
|
6
|
-
`@nadicodeai/design-system`, whose `DESIGN.md` is the design system and its
|
|
7
|
-
|
|
6
|
+
`@nadicodeai/design-system`, whose `DESIGN.md` is the design system and its design
|
|
7
|
+
authority for tokens, visual direction and the rules components share; a
|
|
8
|
+
component's own contract is the usage page in its source.
|
|
8
9
|
|
|
9
10
|
## Install
|
|
10
11
|
|
|
@@ -100,7 +100,7 @@ export type AccountMenuProps = {
|
|
|
100
100
|
* @family Menus
|
|
101
101
|
* @when The account at the sidebar's foot in the Portal, Nadia and Alveare: the gear to the account's settings, Theme, Language, a product's own settings, its commands, and Sign out.
|
|
102
102
|
* @instead A record's or a page's commands are an ActionMenu; a setting with more than a few options or one that needs a Save belongs on a SettingsPage.
|
|
103
|
-
* @behaviour The menu opens 6 px above its trigger, 288 px wide, as Vercel's does: a header of the name and every line under it with the gear at its end, one divider, then 36 px rows, each its label leading and its icon or control trailing: Theme and Language as small round pills, the product's choices as submenus, its commands with any reading before their icon, and Sign out last. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
|
|
103
|
+
* @behaviour The menu opens 6 px above its trigger, 288 px wide, as Vercel's does: a header of the name and every line under it with the gear at its end and no picture, one divider, then 36 px rows, each its label leading and its icon or control trailing in muted ink: Theme and Language as small round pills, the product's choices as submenus, its commands with any reading before their icon, and Sign out last in the body colour, since signing out destroys nothing. Ruled by the owner on 16 October 2026. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
|
|
104
104
|
* @words The menu's name ("Account"), the person's name and lines, then each row's noun or verb from the product's catalogue: "Theme", "Language", "Usage", "Sign out" and "Signing out".
|
|
105
105
|
* @access The trigger and the menu are named "{label}: {name}"; the gear carries its label; the pending sign-out is aria-busy and announced through a status; a failure is an alert.
|
|
106
106
|
*/
|
|
@@ -25,7 +25,7 @@ export function AccountMenuIdentity({ className, identity, pictureOnly = false,
|
|
|
25
25
|
* @family Menus
|
|
26
26
|
* @when The account at the sidebar's foot in the Portal, Nadia and Alveare: the gear to the account's settings, Theme, Language, a product's own settings, its commands, and Sign out.
|
|
27
27
|
* @instead A record's or a page's commands are an ActionMenu; a setting with more than a few options or one that needs a Save belongs on a SettingsPage.
|
|
28
|
-
* @behaviour The menu opens 6 px above its trigger, 288 px wide, as Vercel's does: a header of the name and every line under it with the gear at its end, one divider, then 36 px rows, each its label leading and its icon or control trailing: Theme and Language as small round pills, the product's choices as submenus, its commands with any reading before their icon, and Sign out last. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
|
|
28
|
+
* @behaviour The menu opens 6 px above its trigger, 288 px wide, as Vercel's does: a header of the name and every line under it with the gear at its end and no picture, one divider, then 36 px rows, each its label leading and its icon or control trailing in muted ink: Theme and Language as small round pills, the product's choices as submenus, its commands with any reading before their icon, and Sign out last in the body colour, since signing out destroys nothing. Ruled by the owner on 16 October 2026. Theme and Language apply at once and keep the menu open. While signing out, Sign out says its pending word, the menu stays open and the trigger is locked; a failure shows under it. A Sign out that `confirms` closes the menu instead, for the product's own confirmation.
|
|
29
29
|
* @words The menu's name ("Account"), the person's name and lines, then each row's noun or verb from the product's catalogue: "Theme", "Language", "Usage", "Sign out" and "Signing out".
|
|
30
30
|
* @access The trigger and the menu are named "{label}: {name}"; the gear carries its label; the pending sign-out is aria-busy and announced through a status; a failure is an alert.
|
|
31
31
|
*/
|
|
@@ -41,7 +41,7 @@ export type ActionMenuProps = RecordMenu & {
|
|
|
41
41
|
* @family Menus
|
|
42
42
|
* @when "An overflow menu triggered by a three-dot icon that reveals additional actions in a dropdown." (https://vercel.com/geist/dots-menu) "Use Menu for a discoverable trigger that opens a list of actions on a single resource (a dots menu on a row, a dropdown on a primary entity)." (https://vercel.com/geist/menu) Ours: the secondary commands of one record from a visible trigger: the row's three dots, or the page's, which comes last in the title row. A record's one main task is a visible button beside the dots; one non-destructive command that can run, alone, is drawn as a button by `RecordList` and `PageActions`, never as a menu; one that cannot run or is locked stays in the menu so its reason is read.
|
|
43
43
|
* @instead "For right-click or long-press on a row, use `ContextMenu`. For global commands behind `⌘K`, use `CommandMenu`. For two related primary actions, use a split button rather than burying the secondary action." (https://vercel.com/geist/menu) Ours: for a record's main task use a visible button (Edit opens the row). For finding across everything use `CommandDialog`. For a value to choose use `Select`. For right-click use the mirror, `ActionContextMenu`.
|
|
44
|
-
* @behaviour "Open on click, not hover; hover-open menus collide with screen readers and trackpad scrolls." (https://vercel.com/geist/menu) "Position auto-flips based on window bounds; don’t hardcode a side that clips on narrow viewports." (https://vercel.com/geist/menu) "Close on item activation, Escape, and outside-click. Don’t auto-close on a hover-out." (https://vercel.com/geist/menu) "Use `MenuItemLocked` for permission-gated actions so the lock icon and disabled state explain why the row is inert." (https://vercel.com/geist/menu) Ours: that is `locked` with its `reason`, in the
|
|
44
|
+
* @behaviour "Open on click, not hover; hover-open menus collide with screen readers and trackpad scrolls." (https://vercel.com/geist/menu) "Position auto-flips based on window bounds; don’t hardcode a side that clips on narrow viewports." (https://vercel.com/geist/menu) "Close on item activation, Escape, and outside-click. Don’t auto-close on a hover-out." (https://vercel.com/geist/menu) "Use `MenuItemLocked` for permission-gated actions so the lock icon and disabled state explain why the row is inert." (https://vercel.com/geist/menu) Ours: that is `locked` with its `reason`, which is required: the row stays in place, inert, with a lock at its end and the reason under its label. The trigger is a ghost icon button at `{spacing.control-height}` (36 px) wherever it stands, named for its record ("More for pec@acme.it"), and comes last, after any button; it keeps its fill while open. The menu opens 10 px under the trigger, aligned to its end: the record's name, the commands with their icons first and the value one acts on in mono under it, then the destructive ones after a divider in the error colour. A command that cannot run now takes `disabledReason`: it stays in place, 36 px like the rest, with its text muted, never dimmed, and says why in a line under its label; a destructive one is muted, not red; a running one takes `pending` and `pendingLabel`. Nothing renders with no command.
|
|
45
45
|
* @words "Item children are Title Case `Verb + Noun` (`Rename Project`, `Duplicate Deployment`). Bare verbs like `Rename` or `Edit` are wrong outside obvious single-object context." (https://vercel.com/geist/menu) "End an item with `…` only when activating it opens a follow-up dialog (`Rename…`, `Transfer to Team…`)." (https://vercel.com/geist/menu) "Group destructive items at the bottom, separated by a divider, and keep the destructive copy as `Verb + Noun` (`Delete Project`, never bare `Delete`)." (https://vercel.com/geist/menu) "Cap a Menu around 10 items. Past that, group with `MenuSection` or move secondary actions to a settings page." (https://vercel.com/geist/menu) Ours: sentence case, "Remove mailbox", not Title Case. The trigger reads "More for {record}"; the header is the record's name. Rows wrap, never truncate.
|
|
46
46
|
* @access "Typeahead jumps to the next item whose label starts with the typed character; keep the visible label first so typeahead matches what the user sees." (https://vercel.com/geist/menu) "Return focus to the trigger on close so keyboard users keep their place in the row." (https://vercel.com/geist/menu) Ours: the trigger is a ghost icon button named by `label`, which is required, `aria-expanded` while open. `role="menu"`, items `menuitem` in a group named by `record`, which is required; every command requires its `icon`. The value a command acts on and its reason are the item's description; icons hidden.
|
|
47
47
|
*/
|
|
@@ -57,7 +57,7 @@ export type ActionContextMenuProps = RecordMenu & {
|
|
|
57
57
|
* @family Menus
|
|
58
58
|
* @when "ContextMenu must never be the only entry point for an action. Mirror every item in a visible `Menu` trigger or row button so mouse-only and keyboard-only users have parity." (https://vercel.com/geist/context-menu) Ours: a right-click or long-press convenience on a record that already has a visible menu with the same commands.
|
|
59
59
|
* @instead "For a global command palette, use `CommandMenu`; for a dropdown opened from a visible trigger, use `Menu`." (https://vercel.com/geist/context-menu) Ours: for anything a person must find use the visible three dots or a button. For global search use `CommandDialog`.
|
|
60
|
-
* @behaviour "Bind to right-click on desktop and long-press on touch. Suppress the native browser menu only on the trigger area, not the whole page." (https://vercel.com/geist/context-menu) "Position the menu at the pointer; if it would overflow the viewport, flip horizontally then vertically before clipping." (https://vercel.com/geist/context-menu) "Close on activation, Escape, and outside-click. Don’t close on hover-out." (https://vercel.com/geist/context-menu) Ours: the dropdown's surface and rows exactly. The same commands in the same order, the same muted rows and reasons, destructive last after a divider. With no command the row renders alone.
|
|
60
|
+
* @behaviour "Bind to right-click on desktop and long-press on touch. Suppress the native browser menu only on the trigger area, not the whole page." (https://vercel.com/geist/context-menu) "Position the menu at the pointer; if it would overflow the viewport, flip horizontally then vertically before clipping." (https://vercel.com/geist/context-menu) "Close on activation, Escape, and outside-click. Don’t close on hover-out." (https://vercel.com/geist/context-menu) Ours: it takes the same `RecordMenu` as the row's `ActionMenu`, over the `ContextMenu` family, with the dropdown's surface and rows exactly. The same commands in the same order, the same muted rows and reasons, destructive last after a divider. With no command the row renders alone.
|
|
61
61
|
* @words "Items follow the same rules as `Menu`: Title Case `Verb + Noun` (`Open in New Tab`, `Copy URL`, `Delete Deployment`). Bare verbs are wrong." (https://vercel.com/geist/context-menu) Ours: sentence case, "Copy address". Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
|
|
62
62
|
* @access "Trigger the keyboard menu key (`Shift+F10` on Windows/Linux, the menu key, or platform equivalent) to open the same menu without right-click." (https://vercel.com/geist/context-menu) "Up/Down arrows move focus, Enter/Space activates, Escape closes and returns focus to the row." (https://vercel.com/geist/context-menu) Ours: the menu is named by `label`, which is required.
|
|
63
63
|
*/
|
|
@@ -12,7 +12,7 @@ const MAX_COMMANDS = 10;
|
|
|
12
12
|
* @family Menus
|
|
13
13
|
* @when "An overflow menu triggered by a three-dot icon that reveals additional actions in a dropdown." (https://vercel.com/geist/dots-menu) "Use Menu for a discoverable trigger that opens a list of actions on a single resource (a dots menu on a row, a dropdown on a primary entity)." (https://vercel.com/geist/menu) Ours: the secondary commands of one record from a visible trigger: the row's three dots, or the page's, which comes last in the title row. A record's one main task is a visible button beside the dots; one non-destructive command that can run, alone, is drawn as a button by `RecordList` and `PageActions`, never as a menu; one that cannot run or is locked stays in the menu so its reason is read.
|
|
14
14
|
* @instead "For right-click or long-press on a row, use `ContextMenu`. For global commands behind `⌘K`, use `CommandMenu`. For two related primary actions, use a split button rather than burying the secondary action." (https://vercel.com/geist/menu) Ours: for a record's main task use a visible button (Edit opens the row). For finding across everything use `CommandDialog`. For a value to choose use `Select`. For right-click use the mirror, `ActionContextMenu`.
|
|
15
|
-
* @behaviour "Open on click, not hover; hover-open menus collide with screen readers and trackpad scrolls." (https://vercel.com/geist/menu) "Position auto-flips based on window bounds; don’t hardcode a side that clips on narrow viewports." (https://vercel.com/geist/menu) "Close on item activation, Escape, and outside-click. Don’t auto-close on a hover-out." (https://vercel.com/geist/menu) "Use `MenuItemLocked` for permission-gated actions so the lock icon and disabled state explain why the row is inert." (https://vercel.com/geist/menu) Ours: that is `locked` with its `reason`, in the
|
|
15
|
+
* @behaviour "Open on click, not hover; hover-open menus collide with screen readers and trackpad scrolls." (https://vercel.com/geist/menu) "Position auto-flips based on window bounds; don’t hardcode a side that clips on narrow viewports." (https://vercel.com/geist/menu) "Close on item activation, Escape, and outside-click. Don’t auto-close on a hover-out." (https://vercel.com/geist/menu) "Use `MenuItemLocked` for permission-gated actions so the lock icon and disabled state explain why the row is inert." (https://vercel.com/geist/menu) Ours: that is `locked` with its `reason`, which is required: the row stays in place, inert, with a lock at its end and the reason under its label. The trigger is a ghost icon button at `{spacing.control-height}` (36 px) wherever it stands, named for its record ("More for pec@acme.it"), and comes last, after any button; it keeps its fill while open. The menu opens 10 px under the trigger, aligned to its end: the record's name, the commands with their icons first and the value one acts on in mono under it, then the destructive ones after a divider in the error colour. A command that cannot run now takes `disabledReason`: it stays in place, 36 px like the rest, with its text muted, never dimmed, and says why in a line under its label; a destructive one is muted, not red; a running one takes `pending` and `pendingLabel`. Nothing renders with no command.
|
|
16
16
|
* @words "Item children are Title Case `Verb + Noun` (`Rename Project`, `Duplicate Deployment`). Bare verbs like `Rename` or `Edit` are wrong outside obvious single-object context." (https://vercel.com/geist/menu) "End an item with `…` only when activating it opens a follow-up dialog (`Rename…`, `Transfer to Team…`)." (https://vercel.com/geist/menu) "Group destructive items at the bottom, separated by a divider, and keep the destructive copy as `Verb + Noun` (`Delete Project`, never bare `Delete`)." (https://vercel.com/geist/menu) "Cap a Menu around 10 items. Past that, group with `MenuSection` or move secondary actions to a settings page." (https://vercel.com/geist/menu) Ours: sentence case, "Remove mailbox", not Title Case. The trigger reads "More for {record}"; the header is the record's name. Rows wrap, never truncate.
|
|
17
17
|
* @access "Typeahead jumps to the next item whose label starts with the typed character; keep the visible label first so typeahead matches what the user sees." (https://vercel.com/geist/menu) "Return focus to the trigger on close so keyboard users keep their place in the row." (https://vercel.com/geist/menu) Ours: the trigger is a ghost icon button named by `label`, which is required, `aria-expanded` while open. `role="menu"`, items `menuitem` in a group named by `record`, which is required; every command requires its `icon`. The value a command acts on and its reason are the item's description; icons hidden.
|
|
18
18
|
*/
|
|
@@ -32,7 +32,7 @@ export function ActionMenu({ label, record, commands, triggerId, open, onOpenCha
|
|
|
32
32
|
* @family Menus
|
|
33
33
|
* @when "ContextMenu must never be the only entry point for an action. Mirror every item in a visible `Menu` trigger or row button so mouse-only and keyboard-only users have parity." (https://vercel.com/geist/context-menu) Ours: a right-click or long-press convenience on a record that already has a visible menu with the same commands.
|
|
34
34
|
* @instead "For a global command palette, use `CommandMenu`; for a dropdown opened from a visible trigger, use `Menu`." (https://vercel.com/geist/context-menu) Ours: for anything a person must find use the visible three dots or a button. For global search use `CommandDialog`.
|
|
35
|
-
* @behaviour "Bind to right-click on desktop and long-press on touch. Suppress the native browser menu only on the trigger area, not the whole page." (https://vercel.com/geist/context-menu) "Position the menu at the pointer; if it would overflow the viewport, flip horizontally then vertically before clipping." (https://vercel.com/geist/context-menu) "Close on activation, Escape, and outside-click. Don’t close on hover-out." (https://vercel.com/geist/context-menu) Ours: the dropdown's surface and rows exactly. The same commands in the same order, the same muted rows and reasons, destructive last after a divider. With no command the row renders alone.
|
|
35
|
+
* @behaviour "Bind to right-click on desktop and long-press on touch. Suppress the native browser menu only on the trigger area, not the whole page." (https://vercel.com/geist/context-menu) "Position the menu at the pointer; if it would overflow the viewport, flip horizontally then vertically before clipping." (https://vercel.com/geist/context-menu) "Close on activation, Escape, and outside-click. Don’t close on hover-out." (https://vercel.com/geist/context-menu) Ours: it takes the same `RecordMenu` as the row's `ActionMenu`, over the `ContextMenu` family, with the dropdown's surface and rows exactly. The same commands in the same order, the same muted rows and reasons, destructive last after a divider. With no command the row renders alone.
|
|
36
36
|
* @words "Items follow the same rules as `Menu`: Title Case `Verb + Noun` (`Open in New Tab`, `Copy URL`, `Delete Deployment`). Bare verbs are wrong." (https://vercel.com/geist/context-menu) Ours: sentence case, "Copy address". Identical to the visible menu's, in the same order; a command reached two ways reads the same both ways.
|
|
37
37
|
* @access "Trigger the keyboard menu key (`Shift+F10` on Windows/Linux, the menu key, or platform equivalent) to open the same menu without right-click." (https://vercel.com/geist/context-menu) "Up/Down arrows move focus, Enter/Space activates, Escape closes and returns focus to the row." (https://vercel.com/geist/context-menu) Ours: the menu is named by `label`, which is required.
|
|
38
38
|
*/
|
|
@@ -54,7 +54,7 @@ export type ActivityFeedProps = {
|
|
|
54
54
|
* @family Compositions
|
|
55
55
|
* @when A record's history: a Customer's, a Partner's or an Installation's Activity tab in the Portal, the company wiki's updates in Nadia. Each answers "what happened, and when?".
|
|
56
56
|
* @instead The steps of one Agent run, read in order, are a RunTimeline; a list of records a person finds and acts on is a CollectionPage; a single "last changed" fact is a RecordTime.
|
|
57
|
-
* @behaviour The search, filters and window sit right above the rows, kept in the URL by the product. Days stand newest first, each a title and a muted date over one card of rows; a row is the time of day, the actor's 24 px mark, the sentence with a status badge only for an exception, and one muted line of detail. "Show older events" follows the last day as a full-width `LoadMoreButton`, or as a `ButtonLink` when it navigates; there is never a page count. States, first that holds: failed, loading (still rows in the row's shape), no match with Clear filters, nothing yet in one line, the days. Under 900 px the time moves under the sentence. It draws no card header: the tab is the title.
|
|
57
|
+
* @behaviour The search, filters and window sit right above the rows, kept in the URL by the product. Days stand newest first, each a title and a muted date over one card of rows; a row is the time of day, the actor's 24 px mark, the sentence with a status badge only for an exception, and one muted line of detail. "Show older events" follows the last day as a full-width `LoadMoreButton`, or as a `ButtonLink` when it navigates; there is never a page count. States, first that holds: failed, loading (still rows in the row's shape), no match with Clear filters, nothing yet in one line, the days. Nothing yet is one quiet line, never a picture; a failed read is the warning mark with Retry, never "no events". The time is the time of day in the viewer's own zone in tabular figures (`RecordTime`), with UTC and the viewer's zone in its hover card; one rule for every feed, never a time printed in UTC as the viewer's: a server-rendered page passes the viewer's `timeZone`, since without it the server and the first client render print UTC. The actor's mark is a person's initials, an Agent's real orb or an Installation's tile; the system's own work has no mark and never takes an orb. Under 900 px the time moves under the sentence. It draws no card header: the tab is the title.
|
|
58
58
|
* @words The sentence names the actor in `<strong>`, the action in the past tense and the object as a link that keeps the text's colour: "Marco Rinaldi created the Agent Acme Quotes". Day titles are "Today", "Yesterday", then the weekday; dates are the product's own ("14 October"). Nothing yet: "No events yet." and what will appear. No match: "No events match these filters.".
|
|
59
59
|
* @access The toolbar is named by `label`; each day's title is a level-3 heading over a list of its events; while loading, one status named by `loadingLabel` stands for the rows; each time is a `<time>` with its exact moment for assistive technology. A system event has no mark, so nothing empty is announced.
|
|
60
60
|
*/
|
|
@@ -41,7 +41,7 @@ function Days({ days, locale, timeZone, older, }) {
|
|
|
41
41
|
* @family Compositions
|
|
42
42
|
* @when A record's history: a Customer's, a Partner's or an Installation's Activity tab in the Portal, the company wiki's updates in Nadia. Each answers "what happened, and when?".
|
|
43
43
|
* @instead The steps of one Agent run, read in order, are a RunTimeline; a list of records a person finds and acts on is a CollectionPage; a single "last changed" fact is a RecordTime.
|
|
44
|
-
* @behaviour The search, filters and window sit right above the rows, kept in the URL by the product. Days stand newest first, each a title and a muted date over one card of rows; a row is the time of day, the actor's 24 px mark, the sentence with a status badge only for an exception, and one muted line of detail. "Show older events" follows the last day as a full-width `LoadMoreButton`, or as a `ButtonLink` when it navigates; there is never a page count. States, first that holds: failed, loading (still rows in the row's shape), no match with Clear filters, nothing yet in one line, the days. Under 900 px the time moves under the sentence. It draws no card header: the tab is the title.
|
|
44
|
+
* @behaviour The search, filters and window sit right above the rows, kept in the URL by the product. Days stand newest first, each a title and a muted date over one card of rows; a row is the time of day, the actor's 24 px mark, the sentence with a status badge only for an exception, and one muted line of detail. "Show older events" follows the last day as a full-width `LoadMoreButton`, or as a `ButtonLink` when it navigates; there is never a page count. States, first that holds: failed, loading (still rows in the row's shape), no match with Clear filters, nothing yet in one line, the days. Nothing yet is one quiet line, never a picture; a failed read is the warning mark with Retry, never "no events". The time is the time of day in the viewer's own zone in tabular figures (`RecordTime`), with UTC and the viewer's zone in its hover card; one rule for every feed, never a time printed in UTC as the viewer's: a server-rendered page passes the viewer's `timeZone`, since without it the server and the first client render print UTC. The actor's mark is a person's initials, an Agent's real orb or an Installation's tile; the system's own work has no mark and never takes an orb. Under 900 px the time moves under the sentence. It draws no card header: the tab is the title.
|
|
45
45
|
* @words The sentence names the actor in `<strong>`, the action in the past tense and the object as a link that keeps the text's colour: "Marco Rinaldi created the Agent Acme Quotes". Day titles are "Today", "Yesterday", then the weekday; dates are the product's own ("14 October"). Nothing yet: "No events yet." and what will appear. No match: "No events match these filters.".
|
|
46
46
|
* @access The toolbar is named by `label`; each day's title is a level-3 heading over a list of its events; while loading, one status named by `loadingLabel` stands for the rows; each time is a `<time>` with its exact moment for assistive technology. A system event has no mark, so nothing empty is announced.
|
|
47
47
|
*/
|
|
@@ -15,11 +15,13 @@ type AgentCardProps = Omit<React.ComponentProps<typeof Card>, "children"> & {
|
|
|
15
15
|
*
|
|
16
16
|
* @family Data
|
|
17
17
|
* @when A gallery of Agents or templates where each one is chosen by its picture and its job: the
|
|
18
|
-
* Agents to create from, the templates of a hub.
|
|
18
|
+
* Agents to create from, the templates of a hub. An Agent shown as an object is this one card
|
|
19
|
+
* shape wherever it appears, in the Portal's Library and in Nadia's gallery alike.
|
|
19
20
|
* @instead A list of Agents to open is `AgentListRow`. An Agent's own page opens with
|
|
20
|
-
* `AgentProfileCard
|
|
21
|
+
* `AgentProfileCard`, where the name is the page heading. A Library skill or plugin is a row of its
|
|
22
|
+
* collection (`CollectionPage`).
|
|
21
23
|
* @behaviour Vercel's template card: the name over its job, cut after two lines, then the small
|
|
22
|
-
* meta and an optional status, and under them the preview tile, inset 32 px from the card's
|
|
24
|
+
* meta and an optional status row, and under them the preview tile, inset 32 px from the card's
|
|
23
25
|
* leading edge and running off its trailing and bottom edges, the picture (her orb at 96) in its
|
|
24
26
|
* middle on the recessed ground. The one action stands at the name's right, as a card's one
|
|
25
27
|
* header action does. A long name wraps inside the card. A text object, with no picture, ends
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agent-card.d.ts","sourceRoot":"","sources":["../../src/components/agent-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,IAAI,EAA8B,MAAM,mBAAmB,CAAC;AAGrE,KAAK,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,GAAG,EAAE,SAAS,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAMF
|
|
1
|
+
{"version":3,"file":"agent-card.d.ts","sourceRoot":"","sources":["../../src/components/agent-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,IAAI,EAA8B,MAAM,mBAAmB,CAAC;AAGrE,KAAK,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IAC1E,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,GAAG,EAAE,SAAS,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6FAA6F;IAC7F,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,iBAAS,SAAS,CAAC,EACjB,MAAM,EACN,SAAS,EACT,GAAG,EACH,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,MAAM,EACN,GAAG,KAAK,EACT,EAAE,cAAc,+BAsDhB;AAED,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,CAAC"}
|
|
@@ -10,11 +10,13 @@ function hasSlotContent(value) {
|
|
|
10
10
|
*
|
|
11
11
|
* @family Data
|
|
12
12
|
* @when A gallery of Agents or templates where each one is chosen by its picture and its job: the
|
|
13
|
-
* Agents to create from, the templates of a hub.
|
|
13
|
+
* Agents to create from, the templates of a hub. An Agent shown as an object is this one card
|
|
14
|
+
* shape wherever it appears, in the Portal's Library and in Nadia's gallery alike.
|
|
14
15
|
* @instead A list of Agents to open is `AgentListRow`. An Agent's own page opens with
|
|
15
|
-
* `AgentProfileCard
|
|
16
|
+
* `AgentProfileCard`, where the name is the page heading. A Library skill or plugin is a row of its
|
|
17
|
+
* collection (`CollectionPage`).
|
|
16
18
|
* @behaviour Vercel's template card: the name over its job, cut after two lines, then the small
|
|
17
|
-
* meta and an optional status, and under them the preview tile, inset 32 px from the card's
|
|
19
|
+
* meta and an optional status row, and under them the preview tile, inset 32 px from the card's
|
|
18
20
|
* leading edge and running off its trailing and bottom edges, the picture (her orb at 96) in its
|
|
19
21
|
* middle on the recessed ground. The one action stands at the name's right, as a card's one
|
|
20
22
|
* header action does. A long name wraps inside the card. A text object, with no picture, ends
|
|
@@ -8,8 +8,8 @@ import { type StatusTone } from "./status-dot.js";
|
|
|
8
8
|
* @family Navigation
|
|
9
9
|
* @when Nadia's Agents in her window's sidebar, and a website scene that shows a list of Agents.
|
|
10
10
|
* @instead An Agent as a record among others in a page's list is a RecordList row with an agent IdentityMark; an Agent's own page heads with ObjectPage.
|
|
11
|
-
* @behaviour It is the row's presentation alone: the consumer owns the control around it (Nadia's button that opens the Agent, a scene's list item that opens nothing). The current row's name is set in 500. A state tone puts a
|
|
12
|
-
* @words The name, then one state line: what she is doing now ("Answering on Telegram", "Working") or what she is for ("Sorts requests"). The tone never says more than the line does.
|
|
11
|
+
* @behaviour It is the row's presentation alone: the consumer owns the control around it (Nadia's button that opens the Agent, a scene's list item that opens nothing). The current row's name is set in 500. A state tone puts a 10 px dot before the state line, 6 px from its words. Narrow, the orb stands alone and the words stay for a screen reader; the consumer names it with its state line in a tooltip, as Nadia's list does. Only the orb moves in the list. In Nadia's list the row is at least 52 px high, her orb at 32 px in her real state, in the narrow column from 640 to 899 px as in the wide one.
|
|
12
|
+
* @words The name, then one state line: what she is doing now ("Answering on Telegram", "Working") or what she is for ("Sorts requests"). The tone never says more than the line does. Nadia's list says "Working", "Idle" or "Needs you"; the dot marks a state that needs the person ("Needs you", a failed set-up), and the orb shows working by itself.
|
|
13
13
|
* @access The orb is decorative; the name and the state line are the row's text, read by its control. The dot is hidden from assistive technology, so the line carries its meaning.
|
|
14
14
|
*/
|
|
15
15
|
export declare function AgentListRow({ className, color, current, form, motionKey, name, narrow, size, state, stateLine, stateTone, ...props }: Omit<React.ComponentProps<"span">, "color"> & {
|
|
@@ -10,8 +10,8 @@ import { cn } from "../lib/utils.js";
|
|
|
10
10
|
* @family Navigation
|
|
11
11
|
* @when Nadia's Agents in her window's sidebar, and a website scene that shows a list of Agents.
|
|
12
12
|
* @instead An Agent as a record among others in a page's list is a RecordList row with an agent IdentityMark; an Agent's own page heads with ObjectPage.
|
|
13
|
-
* @behaviour It is the row's presentation alone: the consumer owns the control around it (Nadia's button that opens the Agent, a scene's list item that opens nothing). The current row's name is set in 500. A state tone puts a
|
|
14
|
-
* @words The name, then one state line: what she is doing now ("Answering on Telegram", "Working") or what she is for ("Sorts requests"). The tone never says more than the line does.
|
|
13
|
+
* @behaviour It is the row's presentation alone: the consumer owns the control around it (Nadia's button that opens the Agent, a scene's list item that opens nothing). The current row's name is set in 500. A state tone puts a 10 px dot before the state line, 6 px from its words. Narrow, the orb stands alone and the words stay for a screen reader; the consumer names it with its state line in a tooltip, as Nadia's list does. Only the orb moves in the list. In Nadia's list the row is at least 52 px high, her orb at 32 px in her real state, in the narrow column from 640 to 899 px as in the wide one.
|
|
14
|
+
* @words The name, then one state line: what she is doing now ("Answering on Telegram", "Working") or what she is for ("Sorts requests"). The tone never says more than the line does. Nadia's list says "Working", "Idle" or "Needs you"; the dot marks a state that needs the person ("Needs you", a failed set-up), and the orb shows working by itself.
|
|
15
15
|
* @access The orb is decorative; the name and the state line are the row's text, read by its control. The dot is hidden from assistive technology, so the line carries its meaning.
|
|
16
16
|
*/
|
|
17
17
|
export function AgentListRow({ className, color, current = false, form, motionKey, name, narrow = false, size = 40, state = "idle", stateLine, stateTone, ...props }) {
|
|
@@ -4,9 +4,9 @@ export type { AgentOrbFigure, AgentOrbForm, AgentOrbMotion, AgentOrbPresence, Ag
|
|
|
4
4
|
import type { AgentOrbState } from "../internal/agent-orb-motion.js";
|
|
5
5
|
export type { AgentOrbState } from "../internal/agent-orb-motion.js";
|
|
6
6
|
type AgentOrbBaseProps = {
|
|
7
|
-
/** A chosen form, or `nadia`:
|
|
7
|
+
/** A chosen form, or `nadia` or `sofia`: their striped ribbons, whose colours are fixed. */
|
|
8
8
|
form: AgentOrbFigure;
|
|
9
|
-
/** The pigment of a chosen form; on Nadia, only
|
|
9
|
+
/** The pigment of a chosen form; on Nadia and Sofia, only the third stripe takes it. */
|
|
10
10
|
color?: CSSProperties["color"];
|
|
11
11
|
/** The laid-out size, unless `className` sizes the canvas itself. */
|
|
12
12
|
size?: AgentOrbSize;
|
|
@@ -34,12 +34,36 @@ export type AgentOrbProps = AgentOrbBaseProps & ({
|
|
|
34
34
|
*
|
|
35
35
|
* @family Status
|
|
36
36
|
* @when An Agent, anywhere: 20 in the sidebar, 32 in a row, 64 on her Profile card, 96 in an Agent
|
|
37
|
-
* card, 160 on entry. There is no other Agent picture.
|
|
37
|
+
* card, 160 on entry. There is no other Agent picture. The sizes are 20, 24, 32, 40, 64, 96 and
|
|
38
|
+
* 160 px, and no other. On a photograph the orb takes the stronger `presence="over-picture"`
|
|
39
|
+
* weight; everywhere else it is `plain`.
|
|
38
40
|
* @instead A person is an `Avatar`. The system's own wait is the waiting line, never an orb. An orb
|
|
39
|
-
* in artwork takes `motion="ambient"` and claims no activity.
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
41
|
+
* in artwork, such as a sign-in picture, takes `motion="ambient"` and claims no activity. An orb
|
|
42
|
+
* that stands for an Agent shows her real state.
|
|
43
|
+
* @behaviour The only thing that moves on its own. Idle turns at its form's own pace and breathes;
|
|
44
|
+
* working and thinking move with their cue, the ribbon around working and three dots above
|
|
45
|
+
* thinking; waiting holds; blocked makes one interrupted effort and stops; done celebrates once and
|
|
46
|
+
* settles back into idle. A surface that only knows a machine checked in draws idle. No state draws
|
|
47
|
+
* a circle around the orb. Ambient motion moves the form at its own pace with no state pose or cue.
|
|
48
|
+
* Reduced motion: movement stops, a thinking or working orb breathes between full ink and 0.45
|
|
49
|
+
* opacity so busy still reads as busy, and an ambient orb holds still.
|
|
50
|
+
* An orb is one of seven forms, `ribbon`, `lattice`, `orbit`, `globe`, `network`, `braid` and
|
|
51
|
+
* `morph`, in one colour a person chose: cobalto, verde or arancio, or none, which draws it in the
|
|
52
|
+
* text colour. Giallo is not offered because it fails 3:1 on white; rosso is not offered because it
|
|
53
|
+
* is the error red. nadicode's own two Agents are the only ones with a figure nobody chooses, the
|
|
54
|
+
* same at every size and in every state. Nadia is her striped ribbon, the form `nadia`: azzurro,
|
|
55
|
+
* verde, the text colour and rosso along its whole length. Sofia, the Agent that looks up a new
|
|
56
|
+
* company, is her sister, the form `sofia`: the same ribbon turned to face Nadia's, striped
|
|
57
|
+
* cobalto, giallo, the text colour and arancio, the identity hues Nadia does not wear. Neither
|
|
58
|
+
* figure is ever stored as an Agent's look.
|
|
59
|
+
* An Agent's form is stored as `orb:<form>` and its colour as the identity hex or nothing; a
|
|
60
|
+
* template declares its starting look the same way. The stored-appearance resolver reads it: the root Agent
|
|
61
|
+
* always draws as Nadia, an unknown form draws `orbit`, an unknown colour the text colour, and a
|
|
62
|
+
* stored rosso draws arancio. The retired `forma:*` shapes each draw one of the seven forms, so an
|
|
63
|
+
* Agent that chose one before the orbs keeps a distinct look. An Agent's look is a person's choice
|
|
64
|
+
* and is never derived from a name, id or role. A template that names no look is the one exception:
|
|
65
|
+
* `templateAgentOrb` gives it a form and colour fixed by its slug, so the templates in a gallery
|
|
66
|
+
* differ and the Portal and Nadia draw the same one; Nadia and Sofia keep their figures.
|
|
43
67
|
* @words Text sits beside the orb, never on it. Where the exact state matters a word names it:
|
|
44
68
|
* *Working*, *Waiting for you*.
|
|
45
69
|
* @access `role="img"` labelled with the Agent's name, and her state where it matters; `decorative`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agent-orb.d.ts","sourceRoot":"","sources":["../../src/components/agent-orb.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,OAAO,CAAC;AAE9D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EAElB,MAAM,uBAAuB,CAAC;AAG/B,YAAY,EACV,cAAc,EACd,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,YAAY,GACb,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE,KAAK,iBAAiB,GAAG;IACvB,
|
|
1
|
+
{"version":3,"file":"agent-orb.d.ts","sourceRoot":"","sources":["../../src/components/agent-orb.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAqB,MAAM,OAAO,CAAC;AAE9D,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EAElB,MAAM,uBAAuB,CAAC;AAG/B,YAAY,EACV,cAAc,EACd,YAAY,EACZ,cAAc,EACd,gBAAgB,EAChB,YAAY,GACb,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAClE,YAAY,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE,KAAK,iBAAiB,GAAG;IACvB,4FAA4F;IAC5F,IAAI,EAAE,cAAc,CAAC;IACrB,wFAAwF;IACxF,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,qEAAqE;IACrE,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,wFAAwF;IACxF,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,iBAAiB,GAC3C,CAAC;IAAE,MAAM,CAAC,EAAE,QAAQ,CAAC;IAAC,KAAK,CAAC,EAAE,aAAa,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GACrF,CAAC;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,UAAU,CAAC,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEhF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,IAAS,EACT,QAAkB,EAClB,MAAc,EACd,KAAc,EACd,MAAiB,EACjB,SAAa,EACb,UAAkB,EAClB,KAAK,EACL,SAAS,GACV,EAAE,aAAa,+BAyDf"}
|
|
@@ -8,12 +8,36 @@ import { cn } from "../lib/utils.js";
|
|
|
8
8
|
*
|
|
9
9
|
* @family Status
|
|
10
10
|
* @when An Agent, anywhere: 20 in the sidebar, 32 in a row, 64 on her Profile card, 96 in an Agent
|
|
11
|
-
* card, 160 on entry. There is no other Agent picture.
|
|
11
|
+
* card, 160 on entry. There is no other Agent picture. The sizes are 20, 24, 32, 40, 64, 96 and
|
|
12
|
+
* 160 px, and no other. On a photograph the orb takes the stronger `presence="over-picture"`
|
|
13
|
+
* weight; everywhere else it is `plain`.
|
|
12
14
|
* @instead A person is an `Avatar`. The system's own wait is the waiting line, never an orb. An orb
|
|
13
|
-
* in artwork takes `motion="ambient"` and claims no activity.
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
*
|
|
15
|
+
* in artwork, such as a sign-in picture, takes `motion="ambient"` and claims no activity. An orb
|
|
16
|
+
* that stands for an Agent shows her real state.
|
|
17
|
+
* @behaviour The only thing that moves on its own. Idle turns at its form's own pace and breathes;
|
|
18
|
+
* working and thinking move with their cue, the ribbon around working and three dots above
|
|
19
|
+
* thinking; waiting holds; blocked makes one interrupted effort and stops; done celebrates once and
|
|
20
|
+
* settles back into idle. A surface that only knows a machine checked in draws idle. No state draws
|
|
21
|
+
* a circle around the orb. Ambient motion moves the form at its own pace with no state pose or cue.
|
|
22
|
+
* Reduced motion: movement stops, a thinking or working orb breathes between full ink and 0.45
|
|
23
|
+
* opacity so busy still reads as busy, and an ambient orb holds still.
|
|
24
|
+
* An orb is one of seven forms, `ribbon`, `lattice`, `orbit`, `globe`, `network`, `braid` and
|
|
25
|
+
* `morph`, in one colour a person chose: cobalto, verde or arancio, or none, which draws it in the
|
|
26
|
+
* text colour. Giallo is not offered because it fails 3:1 on white; rosso is not offered because it
|
|
27
|
+
* is the error red. nadicode's own two Agents are the only ones with a figure nobody chooses, the
|
|
28
|
+
* same at every size and in every state. Nadia is her striped ribbon, the form `nadia`: azzurro,
|
|
29
|
+
* verde, the text colour and rosso along its whole length. Sofia, the Agent that looks up a new
|
|
30
|
+
* company, is her sister, the form `sofia`: the same ribbon turned to face Nadia's, striped
|
|
31
|
+
* cobalto, giallo, the text colour and arancio, the identity hues Nadia does not wear. Neither
|
|
32
|
+
* figure is ever stored as an Agent's look.
|
|
33
|
+
* An Agent's form is stored as `orb:<form>` and its colour as the identity hex or nothing; a
|
|
34
|
+
* template declares its starting look the same way. The stored-appearance resolver reads it: the root Agent
|
|
35
|
+
* always draws as Nadia, an unknown form draws `orbit`, an unknown colour the text colour, and a
|
|
36
|
+
* stored rosso draws arancio. The retired `forma:*` shapes each draw one of the seven forms, so an
|
|
37
|
+
* Agent that chose one before the orbs keeps a distinct look. An Agent's look is a person's choice
|
|
38
|
+
* and is never derived from a name, id or role. A template that names no look is the one exception:
|
|
39
|
+
* `templateAgentOrb` gives it a form and colour fixed by its slug, so the templates in a gallery
|
|
40
|
+
* differ and the Portal and Nadia draw the same one; Nadia and Sofia keep their figures.
|
|
17
41
|
* @words Text sits beside the orb, never on it. Where the exact state matters a word names it:
|
|
18
42
|
* *Working*, *Waiting for you*.
|
|
19
43
|
* @access `role="img"` labelled with the Agent's name, and her state where it matters; `decorative`
|
|
@@ -71,8 +71,12 @@ export type AgentProfileCardProps = {
|
|
|
71
71
|
* `ObjectPage`.
|
|
72
72
|
* @behaviour Her orb at 64, her name with the pencil, her description and her facts on the left;
|
|
73
73
|
* her description is read whole, wrapping and never cut; her model and reasoning on the right; the card's footer saves both sides. The pencil turns her
|
|
74
|
-
* name and
|
|
75
|
-
*
|
|
74
|
+
* name, description and, where the product holds it, her look into fields in place, saved by the
|
|
75
|
+
* card's own Save, with no drawer or overlay. Her facts are her state, her last activity and the
|
|
76
|
+
* template she was made from; her model is drawn with its maker's mark, and her permissions join the
|
|
77
|
+
* right column where the product holds them. The page's commands sit in the window's three dots
|
|
78
|
+
* where the product has one, and otherwise at the end of her name's row (`actions`). A fact being
|
|
79
|
+
* read draws its place; a missing one keeps its label and a dash.
|
|
76
80
|
* @words Each product brings its own data, fields and words; the shape, sizes and order are this
|
|
77
81
|
* component's. Her state is a word: *Working*, *Waiting for you*.
|
|
78
82
|
* @access Her name is the page's `h1`, kept as the heading while she is edited; the pencil is named
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agent-profile.d.ts","sourceRoot":"","sources":["../../src/components/agent-profile.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAK5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAGvD,OAAO,EAAkB,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAe,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAMnE;;;;GAIG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,2DAA2D;IAC3D,GAAG,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,SAAS,CAAC;IACvC,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAE,GAAG,SAAS,CAAC;IACxF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,eAAe,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,uEAAuE;IACvE,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,4CAA4C;IAC5C,MAAM,EAAE,gBAAgB,CAAC;IACzB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iFAAiF;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,GAAG,SAAS,CAAC;IACvC,wDAAwD;IACxD,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;CACvD,CAAC;AAcF
|
|
1
|
+
{"version":3,"file":"agent-profile.d.ts","sourceRoot":"","sources":["../../src/components/agent-profile.tsx"],"names":[],"mappings":"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"}
|
|
@@ -29,8 +29,12 @@ function FactValue({ fact }) {
|
|
|
29
29
|
* `ObjectPage`.
|
|
30
30
|
* @behaviour Her orb at 64, her name with the pencil, her description and her facts on the left;
|
|
31
31
|
* her description is read whole, wrapping and never cut; her model and reasoning on the right; the card's footer saves both sides. The pencil turns her
|
|
32
|
-
* name and
|
|
33
|
-
*
|
|
32
|
+
* name, description and, where the product holds it, her look into fields in place, saved by the
|
|
33
|
+
* card's own Save, with no drawer or overlay. Her facts are her state, her last activity and the
|
|
34
|
+
* template she was made from; her model is drawn with its maker's mark, and her permissions join the
|
|
35
|
+
* right column where the product holds them. The page's commands sit in the window's three dots
|
|
36
|
+
* where the product has one, and otherwise at the end of her name's row (`actions`). A fact being
|
|
37
|
+
* read draws its place; a missing one keeps its label and a dash.
|
|
34
38
|
* @words Each product brings its own data, fields and words; the shape, sizes and order are this
|
|
35
39
|
* component's. Her state is a word: *Working*, *Waiting for you*.
|
|
36
40
|
* @access Her name is the page's `h1`, kept as the heading while she is edited; the pencil is named
|
|
@@ -3,10 +3,14 @@
|
|
|
3
3
|
*
|
|
4
4
|
* @family Other
|
|
5
5
|
* @when A picture or a captured screen that must keep its shape while its width changes.
|
|
6
|
-
* @instead A fixed-size mark is its own component (`AppMark`, `AgentOrb`).
|
|
7
|
-
*
|
|
6
|
+
* @instead A fixed-size mark is its own component (`AppMark`, `AgentOrb`). The box creates neither
|
|
7
|
+
* playback controls nor a device frame: video controls belong to the player, and a decorative frame
|
|
8
|
+
* is drawn by the page that needs it; there is no shared device-frame export.
|
|
9
|
+
* @behaviour The height follows the width at `ratio`; the content fills it. It holds a stable layout
|
|
10
|
+
* for real media while it loads, so supply a ratio that matches the media.
|
|
8
11
|
* @words None of its own.
|
|
9
|
-
* @access A layout container; the content keeps its own alternative text
|
|
12
|
+
* @access A layout container; the content keeps its own alternative text, and the caller supplies
|
|
13
|
+
* the correct one for the media.
|
|
10
14
|
*/
|
|
11
15
|
declare function AspectRatio({ ratio, className, style, ...props }: React.ComponentProps<"div"> & {
|
|
12
16
|
ratio: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../src/components/aspect-ratio.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../src/components/aspect-ratio.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,+BAejD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -5,10 +5,14 @@ import { cn } from "../lib/utils.js";
|
|
|
5
5
|
*
|
|
6
6
|
* @family Other
|
|
7
7
|
* @when A picture or a captured screen that must keep its shape while its width changes.
|
|
8
|
-
* @instead A fixed-size mark is its own component (`AppMark`, `AgentOrb`).
|
|
9
|
-
*
|
|
8
|
+
* @instead A fixed-size mark is its own component (`AppMark`, `AgentOrb`). The box creates neither
|
|
9
|
+
* playback controls nor a device frame: video controls belong to the player, and a decorative frame
|
|
10
|
+
* is drawn by the page that needs it; there is no shared device-frame export.
|
|
11
|
+
* @behaviour The height follows the width at `ratio`; the content fills it. It holds a stable layout
|
|
12
|
+
* for real media while it loads, so supply a ratio that matches the media.
|
|
10
13
|
* @words None of its own.
|
|
11
|
-
* @access A layout container; the content keeps its own alternative text
|
|
14
|
+
* @access A layout container; the content keeps its own alternative text, and the caller supplies
|
|
15
|
+
* the correct one for the media.
|
|
12
16
|
*/
|
|
13
17
|
function AspectRatio({ ratio, className, style, ...props }) {
|
|
14
18
|
return (_jsx("div", { "data-slot": "aspect-ratio",
|
|
@@ -31,9 +31,13 @@ type AvatarProps = AvatarRootProps & AvatarName & {
|
|
|
31
31
|
* "Pick a size that matches adjacent type: 20–24px next to `text-label-14`, 32px next to `text-label-16`, 48–64px in headers and onboarding states." (https://vercel.com/geist/avatar)
|
|
32
32
|
* Ours: `size` follows the type beside it: `xs` (16 px) and `sm` (24 px) next to small labels,
|
|
33
33
|
* `default` (32 px) next to body text, `lg` (48 px) in a header or an onboarding step.
|
|
34
|
-
* `AvatarWithIcon` puts a status glyph at the corner of a person's avatar
|
|
34
|
+
* `AvatarWithIcon` puts a status glyph at the corner of a person's avatar; its `name` is required
|
|
35
|
+
* and gives the initials, and, like `Avatar`, the type asks for `label` (naming the person and the
|
|
36
|
+
* state) or `decorative`.
|
|
35
37
|
* @instead Ours: an Agent is always its `AgentOrb`, never an avatar. A company is its initials in a
|
|
36
|
-
* 6 px tile inside `RecordIdentity`.
|
|
38
|
+
* 6 px tile inside `RecordIdentity`. A record's mark, a person's included, is `IdentityMark`, which
|
|
39
|
+
* draws an `Avatar` for a person. There are no git-provider avatars and no fetch of a picture by
|
|
40
|
+
* username.
|
|
37
41
|
* @behaviour "By default the first member sits on top of the stack, so the first credited author stays the most prominent." (https://vercel.com/geist/avatar)
|
|
38
42
|
* "Set `reverse` to flip the order so the last member sits on top instead." (https://vercel.com/geist/avatar)
|
|
39
43
|
* "The visual left-to-right order is unchanged." (https://vercel.com/geist/avatar)
|
|
@@ -42,10 +46,12 @@ type AvatarProps = AvatarRootProps & AvatarName & {
|
|
|
42
46
|
* "Lower values give more generous spacing; higher values pack tighter for dense, space-constrained UI." (https://vercel.com/geist/avatar)
|
|
43
47
|
* Ours: `auto` is about 30 % of the size (5, 7, 10 and 14 px), and each member is cut out with a 1
|
|
44
48
|
* px ring in the page colour. When `limit` cuts the group, the last place is a dark `+N` count that
|
|
45
|
-
* covers the member it hides
|
|
49
|
+
* covers the member it hides; `AvatarGroup` draws that count itself, so the caller passes `members`
|
|
50
|
+
* and one `label`, never a count of its own.
|
|
46
51
|
* "Reserve `placeholder` for the loading shell, never as a permanent fallback." (https://vercel.com/geist/avatar)
|
|
47
|
-
* Ours: there is no `placeholder
|
|
48
|
-
* `avatarInitials`, set in the neutral accent fill with the text colour on it, in
|
|
52
|
+
* Ours: there is no `placeholder`, since a still skeleton is ours; a picture that fails falls back
|
|
53
|
+
* to initials from `avatarInitials`, set in the neutral accent fill with the text colour on it, in
|
|
54
|
+
* both themes.
|
|
49
55
|
* For a name with no readable letter the caller passes a glyph, so it is never blank. The picture
|
|
50
56
|
* is held by a 1 px hairline. The corner glyph of `AvatarWithIcon` is the person's state, in the
|
|
51
57
|
* muted foreground colour, so its `label` names the person and the state. The profile's upload
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQlE,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;AA4BjD;;;GAGG;AACH,iBAAS,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,GAAE,CAAC,GAAG,CAAK,GAAG,MAAM,CAQ/D;AAED,KAAK,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,UAAU,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAE9F,KAAK,eAAe,GAAG,IAAI,CACzB,eAAe,CAAC,IAAI,CAAC,KAAK,EAC1B,MAAM,GAAG,aAAa,GAAG,YAAY,GAAG,iBAAiB,CAC1D,CAAC;AAEF,KAAK,WAAW,GAAG,eAAe,GAAG,UAAU,GAAG;IAAE,IAAI,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAExE
|
|
1
|
+
{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/components/avatar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -50,9 +50,13 @@ function avatarInitials(name, length = 2) {
|
|
|
50
50
|
* "Pick a size that matches adjacent type: 20–24px next to `text-label-14`, 32px next to `text-label-16`, 48–64px in headers and onboarding states." (https://vercel.com/geist/avatar)
|
|
51
51
|
* Ours: `size` follows the type beside it: `xs` (16 px) and `sm` (24 px) next to small labels,
|
|
52
52
|
* `default` (32 px) next to body text, `lg` (48 px) in a header or an onboarding step.
|
|
53
|
-
* `AvatarWithIcon` puts a status glyph at the corner of a person's avatar
|
|
53
|
+
* `AvatarWithIcon` puts a status glyph at the corner of a person's avatar; its `name` is required
|
|
54
|
+
* and gives the initials, and, like `Avatar`, the type asks for `label` (naming the person and the
|
|
55
|
+
* state) or `decorative`.
|
|
54
56
|
* @instead Ours: an Agent is always its `AgentOrb`, never an avatar. A company is its initials in a
|
|
55
|
-
* 6 px tile inside `RecordIdentity`.
|
|
57
|
+
* 6 px tile inside `RecordIdentity`. A record's mark, a person's included, is `IdentityMark`, which
|
|
58
|
+
* draws an `Avatar` for a person. There are no git-provider avatars and no fetch of a picture by
|
|
59
|
+
* username.
|
|
56
60
|
* @behaviour "By default the first member sits on top of the stack, so the first credited author stays the most prominent." (https://vercel.com/geist/avatar)
|
|
57
61
|
* "Set `reverse` to flip the order so the last member sits on top instead." (https://vercel.com/geist/avatar)
|
|
58
62
|
* "The visual left-to-right order is unchanged." (https://vercel.com/geist/avatar)
|
|
@@ -61,10 +65,12 @@ function avatarInitials(name, length = 2) {
|
|
|
61
65
|
* "Lower values give more generous spacing; higher values pack tighter for dense, space-constrained UI." (https://vercel.com/geist/avatar)
|
|
62
66
|
* Ours: `auto` is about 30 % of the size (5, 7, 10 and 14 px), and each member is cut out with a 1
|
|
63
67
|
* px ring in the page colour. When `limit` cuts the group, the last place is a dark `+N` count that
|
|
64
|
-
* covers the member it hides
|
|
68
|
+
* covers the member it hides; `AvatarGroup` draws that count itself, so the caller passes `members`
|
|
69
|
+
* and one `label`, never a count of its own.
|
|
65
70
|
* "Reserve `placeholder` for the loading shell, never as a permanent fallback." (https://vercel.com/geist/avatar)
|
|
66
|
-
* Ours: there is no `placeholder
|
|
67
|
-
* `avatarInitials`, set in the neutral accent fill with the text colour on it, in
|
|
71
|
+
* Ours: there is no `placeholder`, since a still skeleton is ours; a picture that fails falls back
|
|
72
|
+
* to initials from `avatarInitials`, set in the neutral accent fill with the text colour on it, in
|
|
73
|
+
* both themes.
|
|
68
74
|
* For a name with no readable letter the caller passes a glyph, so it is never blank. The picture
|
|
69
75
|
* is held by a 1 px hairline. The corner glyph of `AvatarWithIcon` is the person's state, in the
|
|
70
76
|
* muted foreground colour, so its `label` names the person and the state. The profile's upload
|
|
@@ -14,7 +14,7 @@ type BreadcrumbProps = Omit<React.ComponentProps<"nav">, "aria-label"> & {
|
|
|
14
14
|
* @when "Navigation aid that shows the user's location within a site's hierarchy, with text and menu variants." (https://vercel.com/geist/breadcrumbs)
|
|
15
15
|
* Ours: the top bar of every product page: the sidebar group or the parents, ending at the destination or the object. An object opened from search still shows its parent.
|
|
16
16
|
* @instead Never a back button in its place. A return link may remember a visit, beside the path, not instead of it. Sibling views are tabs.
|
|
17
|
-
* @behaviour Neutral only, one step of grey carries every state. `text` (the default) is a 20 px line of 14 px text with a 16 px chevron between steps and 6 px around each; `menu` is a row of 22 px chips with a rule and no chevrons, each chip cut with an ellipsis past 10 rem and carrying its full name in a tooltip, scrolling sideways when the path is long; a chip's rule darkens a step on hover. Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. An ancestor the person may not open is a `BreadcrumbLink` with `disabled`: the placeholder grey, which sits close to the muted grey, so `aria-disabled`, the not-allowed cursor and no hover carry the state, and the type refuses an `href` or a `render` on it, so it cannot navigate. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item.
|
|
17
|
+
* @behaviour Compose `Breadcrumb` (the labelled `nav`) around one `BreadcrumbList`, whose `BreadcrumbItem`s each hold a `BreadcrumbLink` for an ancestor, or a `BreadcrumbPage` for the current item, last; between two items goes a `BreadcrumbSeparator` (a chevron by default), and a folded middle is a `BreadcrumbEllipsis` in an item of its own. `type="menu"` draws no `BreadcrumbSeparator`, so the same composition works for both types. Neutral only, one step of grey carries every state. `text` (the default) is a 20 px line of 14 px text with a 16 px chevron between steps and 6 px around each; `menu` is a row of 22 px chips with a rule and no chevrons, each chip cut with an ellipsis past 10 rem and carrying its full name in a tooltip, scrolling sideways when the path is long; a chip's rule darkens a step on hover. Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. An ancestor the person may not open is a `BreadcrumbLink` with `disabled`: the placeholder grey, which sits close to the muted grey, so `aria-disabled`, the not-allowed cursor and no hover carry the state, and the type refuses an `href` or a `render` on it, so it cannot navigate. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item. `menu` is only the chip look: a crumb does not open a menu of its siblings.
|
|
18
18
|
* @words The groups' and records' own names, exactly as the sidebar and the record write them. The `aria-label` and the ellipsis's `label` come from the product's catalogue: "Path", "More".
|
|
19
19
|
* @access A labelled `nav` with an ordered list; the current item has `aria-current="page"`; a disabled ancestor has `aria-disabled`; the chevrons and the ⋯ glyph are hidden, and the folded middle reads its `label`.
|
|
20
20
|
*/
|
|
@@ -14,7 +14,7 @@ const BreadcrumbTypeContext = React.createContext("text");
|
|
|
14
14
|
* @when "Navigation aid that shows the user's location within a site's hierarchy, with text and menu variants." (https://vercel.com/geist/breadcrumbs)
|
|
15
15
|
* Ours: the top bar of every product page: the sidebar group or the parents, ending at the destination or the object. An object opened from search still shows its parent.
|
|
16
16
|
* @instead Never a back button in its place. A return link may remember a visit, beside the path, not instead of it. Sibling views are tabs.
|
|
17
|
-
* @behaviour Neutral only, one step of grey carries every state. `text` (the default) is a 20 px line of 14 px text with a 16 px chevron between steps and 6 px around each; `menu` is a row of 22 px chips with a rule and no chevrons, each chip cut with an ellipsis past 10 rem and carrying its full name in a tooltip, scrolling sideways when the path is long; a chip's rule darkens a step on hover. Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. An ancestor the person may not open is a `BreadcrumbLink` with `disabled`: the placeholder grey, which sits close to the muted grey, so `aria-disabled`, the not-allowed cursor and no hover carry the state, and the type refuses an `href` or a `render` on it, so it cannot navigate. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item.
|
|
17
|
+
* @behaviour Compose `Breadcrumb` (the labelled `nav`) around one `BreadcrumbList`, whose `BreadcrumbItem`s each hold a `BreadcrumbLink` for an ancestor, or a `BreadcrumbPage` for the current item, last; between two items goes a `BreadcrumbSeparator` (a chevron by default), and a folded middle is a `BreadcrumbEllipsis` in an item of its own. `type="menu"` draws no `BreadcrumbSeparator`, so the same composition works for both types. Neutral only, one step of grey carries every state. `text` (the default) is a 20 px line of 14 px text with a 16 px chevron between steps and 6 px around each; `menu` is a row of 22 px chips with a rule and no chevrons, each chip cut with an ellipsis past 10 rem and carrying its full name in a tooltip, scrolling sideways when the path is long; a chip's rule darkens a step on hover. Ancestors are links in the body colour that turn ink on hover; the current item is ink and not a link. An ancestor the person may not open is a `BreadcrumbLink` with `disabled`: the placeholder grey, which sits close to the muted grey, so `aria-disabled`, the not-allowed cursor and no hover carry the state, and the type refuses an `href` or a `render` on it, so it cannot navigate. A long path folds its middle into `BreadcrumbEllipsis` and keeps the parent and the current item. `menu` is only the chip look: a crumb does not open a menu of its siblings.
|
|
18
18
|
* @words The groups' and records' own names, exactly as the sidebar and the record write them. The `aria-label` and the ellipsis's `label` come from the product's catalogue: "Path", "More".
|
|
19
19
|
* @access A labelled `nav` with an ordered list; the current item has `aria-current="page"`; a disabled ancestor has `aria-disabled`; the chevrons and the ⋯ glyph are hidden, and the folded middle reads its `label`.
|
|
20
20
|
*/
|