@nadicodeai/ui 12.1.132 → 12.1.133
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/avatar.d.ts +3 -3
- package/dist/components/avatar.js +3 -3
- package/dist/components/form-dialog.d.ts +8 -4
- package/dist/components/form-dialog.d.ts.map +1 -1
- package/dist/components/form-dialog.js +5 -5
- package/dist/components/identity-mark.d.ts +2 -4
- package/dist/components/identity-mark.d.ts.map +1 -1
- package/dist/components/identity-mark.js +10 -27
- package/dist/components/object-page.d.ts +4 -7
- package/dist/components/object-page.d.ts.map +1 -1
- package/dist/components/object-page.js +2 -2
- package/dist/internal/company-mark.d.ts +13 -0
- package/dist/internal/company-mark.d.ts.map +1 -0
- package/dist/internal/company-mark.js +8 -0
- package/dist/internal/form-submit.d.ts +2 -1
- package/dist/internal/form-submit.d.ts.map +1 -1
- package/dist/internal/form-submit.js +2 -2
- package/dist/showcase/usage.generated.js +7 -7
- package/package.json +2 -2
- package/dist/internal/company-logo.d.ts +0 -17
- package/dist/internal/company-logo.d.ts.map +0 -1
- package/dist/internal/company-logo.js +0 -13
|
@@ -34,9 +34,9 @@ type AvatarProps = AvatarRootProps & AvatarName & {
|
|
|
34
34
|
* `AvatarWithIcon` puts a status glyph at the corner of a person's avatar; its `name` is required
|
|
35
35
|
* and gives the initials, and, like `Avatar`, the type asks for `label` (naming the person and the
|
|
36
36
|
* state) or `decorative`.
|
|
37
|
-
* @instead Ours: an Agent is always its `AgentOrb`, never an avatar. A company is
|
|
38
|
-
*
|
|
39
|
-
* draws an `Avatar` for a person. There are no git-provider avatars and no fetch of a picture by
|
|
37
|
+
* @instead Ours: an Agent is always its `AgentOrb`, never an avatar. A company is never an avatar:
|
|
38
|
+
* it is `IdentityMark`'s company mark, its logo or else its initials on a dark tile. A record's
|
|
39
|
+
* mark, a person's included, is `IdentityMark`, which draws an `Avatar` for a person. There are no git-provider avatars and no fetch of a picture by
|
|
40
40
|
* username.
|
|
41
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)
|
|
42
42
|
* "Set `reverse` to flip the order so the last member sits on top instead." (https://vercel.com/geist/avatar)
|
|
@@ -53,9 +53,9 @@ function avatarInitials(name, length = 2) {
|
|
|
53
53
|
* `AvatarWithIcon` puts a status glyph at the corner of a person's avatar; its `name` is required
|
|
54
54
|
* and gives the initials, and, like `Avatar`, the type asks for `label` (naming the person and the
|
|
55
55
|
* state) or `decorative`.
|
|
56
|
-
* @instead Ours: an Agent is always its `AgentOrb`, never an avatar. A company is
|
|
57
|
-
*
|
|
58
|
-
* draws an `Avatar` for a person. There are no git-provider avatars and no fetch of a picture by
|
|
56
|
+
* @instead Ours: an Agent is always its `AgentOrb`, never an avatar. A company is never an avatar:
|
|
57
|
+
* it is `IdentityMark`'s company mark, its logo or else its initials on a dark tile. A record's
|
|
58
|
+
* mark, a person's included, is `IdentityMark`, which draws an `Avatar` for a person. There are no git-provider avatars and no fetch of a picture by
|
|
59
59
|
* username.
|
|
60
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)
|
|
61
61
|
* "Set `reverse` to flip the order so the last member sits on top instead." (https://vercel.com/geist/avatar)
|
|
@@ -4,16 +4,20 @@ export type FormDialogProps = FormSurfaceProps & {
|
|
|
4
4
|
/** Its form's save is running: the dialog stays open until it settles. */
|
|
5
5
|
pending?: boolean;
|
|
6
6
|
};
|
|
7
|
+
export type FormDialogFormProps = FormProps & {
|
|
8
|
+
/** The primary removes, closes or refuses something, as a decline with a note: it turns red. */
|
|
9
|
+
destructive?: boolean;
|
|
10
|
+
};
|
|
7
11
|
/**
|
|
8
12
|
* A new record, or one or two values from a command, in a modal dialog.
|
|
9
13
|
*
|
|
10
14
|
* @family Compositions
|
|
11
15
|
* @when "Use Modal when a decision must block the rest of the page. For persistent associated context where the underlying page stays readable, use `Sheet` on desktop or `Drawer` on mobile." (https://vercel.com/geist/modal) Ours: a person adds a record through a few fields, or changes one or two values a command asks for: new customer, add a mailbox, add an MCP server.
|
|
12
|
-
* @instead "Skip Modal for routine create flows that have a dedicated page; route to the page instead." (https://vercel.com/geist/modal) "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal) Ours: a record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence is confirmed in a `ConfirmDialog`.
|
|
13
|
-
* @behaviour "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: centred over a scrim without blur, 540 px wide, a bottom sheet on a phone: the title and its help, the fields in a 12 px column, then the footer, which stays at the bottom while a tall form scrolls, with Cancel at the leading edge and the primary at the trailing edge, in one row also on a phone. `FormDialogForm` puts the fields in the dialog's own scroll body and the actions in its fixed footer; no other overlay is nested inside. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them. With `unsaved.dirty`, Escape and a press outside are held back and `unsaved.onDismissBlocked` runs so the caller can ask; Close and Cancel always close. How long it stays open while work goes on follows DESIGN.md "System activity".
|
|
14
|
-
* @words "`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal) "Primary button is `Verb + Noun` and matches the title verb (`Transfer Project` title pairs with `Transfer Project` button). Never `Confirm`, `OK`, or a bare verb on a destructive primary." (https://vercel.com/geist/modal) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title and the primary are sentence case, where Geist writes Title Case: the title names the job and its object, "New customer", "Add a mailbox"; the primary repeats it, "Create customer", "Add mailbox".
|
|
16
|
+
* @instead "Skip Modal for routine create flows that have a dedicated page; route to the page instead." (https://vercel.com/geist/modal) "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal) Ours: a record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence that asks nothing is confirmed in a `ConfirmDialog`.
|
|
17
|
+
* @behaviour "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: centred over a scrim without blur, 540 px wide, a bottom sheet on a phone: the title and its help, the fields in a 12 px column, then the footer, which stays at the bottom while a tall form scrolls, with Cancel at the leading edge and the primary at the trailing edge, in one row also on a phone. `FormDialogForm` puts the fields in the dialog's own scroll body and the actions in its fixed footer; no other overlay is nested inside. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them. With `unsaved.dirty`, Escape and a press outside are held back and `unsaved.onDismissBlocked` runs so the caller can ask; Close and Cancel always close. A form whose primary takes something away, such as declining a company with a note for the record, sets `destructive` on `FormDialogForm`: the primary turns red, as `ConfirmDialog`'s destructive confirm does, and nothing else changes. How long it stays open while work goes on follows DESIGN.md "System activity".
|
|
18
|
+
* @words "`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal) "Primary button is `Verb + Noun` and matches the title verb (`Transfer Project` title pairs with `Transfer Project` button). Never `Confirm`, `OK`, or a bare verb on a destructive primary." (https://vercel.com/geist/modal) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title and the primary are sentence case, where Geist writes Title Case: the title names the job and its object, "New customer", "Add a mailbox"; the primary repeats it, "Create customer", "Add mailbox"; a destructive primary names what it takes away, "Decline company", never a bare "Decline".
|
|
15
19
|
* @access "Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal) "Trap focus inside the Modal while it’s open and return focus to the trigger after close. Restore body scroll on the same tick the Modal unmounts." (https://vercel.com/geist/modal) "After an error inside the Modal, keep focus inside so the user can retry; after success, return focus to the trigger." (https://vercel.com/geist/modal) Ours: a modal dialog with a Close named by `closeLabel`; focus starts in its first field or `initialFocus` and returns to the opener or `finalFocus`. Escape and Close close it unless the save runs.
|
|
16
20
|
*/
|
|
17
21
|
export declare function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus, unsaved, pending, }: FormDialogProps): import("react").JSX.Element;
|
|
18
|
-
export declare function FormDialogForm({ cancelLabel, submit, notice, children, ...form }:
|
|
22
|
+
export declare function FormDialogForm({ cancelLabel, submit, notice, destructive, children, ...form }: FormDialogFormProps): import("react").JSX.Element;
|
|
19
23
|
//# sourceMappingURL=form-dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/components/form-dialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,wBAAwB,CAAC;AAG1E,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAiB,EACjB,OAAO,EACP,OAAe,GAChB,EAAE,eAAe,+BAmBjB;AAED,wBAAgB,cAAc,CAAC,
|
|
1
|
+
{"version":3,"file":"form-dialog.d.ts","sourceRoot":"","sources":["../../src/components/form-dialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,KAAK,SAAS,EAAoB,MAAM,wBAAwB,CAAC;AAG1E,MAAM,MAAM,eAAe,GAAG,gBAAgB,GAAG;IAC/C,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C,gGAAgG;IAChG,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,YAAY,EACZ,UAAiB,EACjB,OAAO,EACP,OAAe,GAChB,EAAE,eAAe,+BAmBjB;AAED,wBAAgB,cAAc,CAAC,EAC7B,WAAW,EACX,MAAM,EACN,MAAM,EACN,WAAmB,EACnB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,mBAAmB,+BAsBrB"}
|
|
@@ -10,9 +10,9 @@ import { guardUnsaved } from "../internal/unsaved-guard.js";
|
|
|
10
10
|
*
|
|
11
11
|
* @family Compositions
|
|
12
12
|
* @when "Use Modal when a decision must block the rest of the page. For persistent associated context where the underlying page stays readable, use `Sheet` on desktop or `Drawer` on mobile." (https://vercel.com/geist/modal) Ours: a person adds a record through a few fields, or changes one or two values a command asks for: new customer, add a mailbox, add an MCP server.
|
|
13
|
-
* @instead "Skip Modal for routine create flows that have a dedicated page; route to the page instead." (https://vercel.com/geist/modal) "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal) Ours: a record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence is confirmed in a `ConfirmDialog`.
|
|
14
|
-
* @behaviour "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: centred over a scrim without blur, 540 px wide, a bottom sheet on a phone: the title and its help, the fields in a 12 px column, then the footer, which stays at the bottom while a tall form scrolls, with Cancel at the leading edge and the primary at the trailing edge, in one row also on a phone. `FormDialogForm` puts the fields in the dialog's own scroll body and the actions in its fixed footer; no other overlay is nested inside. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them. With `unsaved.dirty`, Escape and a press outside are held back and `unsaved.onDismissBlocked` runs so the caller can ask; Close and Cancel always close. How long it stays open while work goes on follows DESIGN.md "System activity".
|
|
15
|
-
* @words "`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal) "Primary button is `Verb + Noun` and matches the title verb (`Transfer Project` title pairs with `Transfer Project` button). Never `Confirm`, `OK`, or a bare verb on a destructive primary." (https://vercel.com/geist/modal) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title and the primary are sentence case, where Geist writes Title Case: the title names the job and its object, "New customer", "Add a mailbox"; the primary repeats it, "Create customer", "Add mailbox".
|
|
13
|
+
* @instead "Skip Modal for routine create flows that have a dedicated page; route to the page instead." (https://vercel.com/geist/modal) "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal) Ours: a record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence that asks nothing is confirmed in a `ConfirmDialog`.
|
|
14
|
+
* @behaviour "Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: centred over a scrim without blur, 540 px wide, a bottom sheet on a phone: the title and its help, the fields in a 12 px column, then the footer, which stays at the bottom while a tall form scrolls, with Cancel at the leading edge and the primary at the trailing edge, in one row also on a phone. `FormDialogForm` puts the fields in the dialog's own scroll body and the actions in its fixed footer; no other overlay is nested inside. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them. With `unsaved.dirty`, Escape and a press outside are held back and `unsaved.onDismissBlocked` runs so the caller can ask; Close and Cancel always close. A form whose primary takes something away, such as declining a company with a note for the record, sets `destructive` on `FormDialogForm`: the primary turns red, as `ConfirmDialog`'s destructive confirm does, and nothing else changes. How long it stays open while work goes on follows DESIGN.md "System activity".
|
|
15
|
+
* @words "`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal) "Primary button is `Verb + Noun` and matches the title verb (`Transfer Project` title pairs with `Transfer Project` button). Never `Confirm`, `OK`, or a bare verb on a destructive primary." (https://vercel.com/geist/modal) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title and the primary are sentence case, where Geist writes Title Case: the title names the job and its object, "New customer", "Add a mailbox"; the primary repeats it, "Create customer", "Add mailbox"; a destructive primary names what it takes away, "Decline company", never a bare "Decline".
|
|
16
16
|
* @access "Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal) "Trap focus inside the Modal while it’s open and return focus to the trigger after close. Restore body scroll on the same tick the Modal unmounts." (https://vercel.com/geist/modal) "After an error inside the Modal, keep focus inside so the user can retry; after success, return focus to the trigger." (https://vercel.com/geist/modal) Ours: a modal dialog with a Close named by `closeLabel`; focus starts in its first field or `initialFocus` and returns to the opener or `finalFocus`. Escape and Close close it unless the save runs.
|
|
17
17
|
*/
|
|
18
18
|
export function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, description, closeLabel, children, initialFocus, finalFocus = true, unsaved, pending = false, }) {
|
|
@@ -22,7 +22,7 @@ export function FormDialog({ open, onOpenChange, onOpenChangeComplete, title, de
|
|
|
22
22
|
requestOpenChange(next, details);
|
|
23
23
|
}, onOpenChangeComplete: onOpenChangeComplete, children: _jsxs(DialogContent, { closeLabel: closeLabel, initialFocus: initialFocus, finalFocus: finalFocus, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: title }), description ? _jsx(DialogDescription, { children: description }) : null] }), children] }) }));
|
|
24
24
|
}
|
|
25
|
-
export function FormDialogForm({ cancelLabel, submit, notice, children, ...form }) {
|
|
25
|
+
export function FormDialogForm({ cancelLabel, submit, notice, destructive = false, children, ...form }) {
|
|
26
26
|
const pending = submit.pending === true;
|
|
27
|
-
return (_jsxs("form", { className: "flex min-h-0 flex-col gap-(--dialog-gap)", "aria-busy": pending || undefined, "data-slot": "form-dialog-form", ...form, children: [_jsx(DialogBody, { children: children }), notice, _jsxs(DialogFooter, { className: "relative", children: [_jsx(DialogClose, { disabled: pending, render: _jsx(Button, { type: "button", variant: "outline" }), children: cancelLabel }), _jsx(FormSubmitButton, { submit: submit }), pending ? (_jsx(WaitingLine, { className: "absolute inset-x-nadicode-sm bottom-1 w-auto", decorative: true })) : null] })] }));
|
|
27
|
+
return (_jsxs("form", { className: "flex min-h-0 flex-col gap-(--dialog-gap)", "aria-busy": pending || undefined, "data-slot": "form-dialog-form", ...form, children: [_jsx(DialogBody, { children: children }), notice, _jsxs(DialogFooter, { className: "relative", children: [_jsx(DialogClose, { disabled: pending, render: _jsx(Button, { type: "button", variant: "outline" }), children: cancelLabel }), _jsx(FormSubmitButton, { destructive: destructive, submit: submit }), pending ? (_jsx(WaitingLine, { className: "absolute inset-x-nadicode-sm bottom-1 w-auto", decorative: true })) : null] })] }));
|
|
28
28
|
}
|
|
@@ -32,8 +32,6 @@ export type IdentityMarkProps = {
|
|
|
32
32
|
* The company's own logo, kept by lookup in its original colours and proportions.
|
|
33
33
|
*/
|
|
34
34
|
logo?: string;
|
|
35
|
-
/** The company's standing, independent of which directory opened it. */
|
|
36
|
-
edition?: "company" | "partner";
|
|
37
35
|
} | {
|
|
38
36
|
kind: "model";
|
|
39
37
|
/** The model maker's author slug, as `ModelMark` takes it: a key held at that maker. */
|
|
@@ -54,13 +52,13 @@ export type IdentityMarkProps = {
|
|
|
54
52
|
/**
|
|
55
53
|
* What says which thing a record is, at a fixed size at the start of its row,
|
|
56
54
|
* its object's head or its feed line: an Agent's orb, an app's logo, a model
|
|
57
|
-
* maker's mark, a company's initials, a person's picture, or a record kind's
|
|
55
|
+
* maker's mark, a company's logo or initials, a person's picture, or a record kind's
|
|
58
56
|
* icon on its tile.
|
|
59
57
|
*
|
|
60
58
|
* @family Status
|
|
61
59
|
* @when The first thing in a record's row (32), at the head of its object page (64), in a feed or a sidebar identity line (24), on a Library entry (40), for the company at the top of Nadia's list (28): wherever it tells a person which thing they are looking at.
|
|
62
60
|
* @instead An icon beside a card's title, a KPI's label or a section heading only repeats the words and is left out. A picture for a first use or a whole-page moment is the empty state's or the page's own. A model is its `ModelIdentity`; a maker's mark beside a model's name in a list of models is `ModelMark` at 24.
|
|
63
|
-
* @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her real orb from the orb engine, at the largest orb size not above the mark's, with no tile and no ring, never an avatar or a painted circle, and `frame` lets the product wrap that orb, such as in the transition that carries her to her page; an app keeps its own logo in its bordered tile on the page ground, or its first letter when it has no logo; a record that belongs to a model maker, such as a key held at that maker, is the maker's `ModelMark` at the mark's size, with its initials when LobeHub has no mark for it; a company is its own logo, contained whole in
|
|
61
|
+
* @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her real orb from the orb engine, at the largest orb size not above the mark's, with no tile and no ring, never an avatar or a painted circle, and `frame` lets the product wrap that orb, such as in the transition that carries her to her page; an app keeps its own logo in its bordered tile on the page ground, or its first letter when it has no logo; a record that belongs to a model maker, such as a key held at that maker, is the maker's `ModelMark` at the mark's size, with its initials when LobeHub has no mark for it; a company is its own logo, contained whole in its original colours and proportions on a dark ringed tile, as Vercel shows a project's favicon, and until a logo is found, or when the stored logo does not load, its initials in white on that same tile, so a found logo only replaces the letters; a company's mark is the same whatever its standing and whichever directory opened it, and a Partner is said in words where its standing matters, never by a colour; a person is their picture, then their initials, in a round mark; a record with its own object picture, such as a Library skill or plugin, draws that picture on its kind's ground; a record with no picture of its own takes its kind's own icon, the same icon its section has in the navigation (Mail for a mailbox, a server for an MCP server, a key for a password), in a ringed tile on the card ground; a Library skill takes the purple category ground with the Skills icon and a plugin the `info-soft` ground with the Plugins icon, both without a ring, so the ground says which kind it is, and an entry that has its own object picture draws it on that ground in the icon's place. A record tile takes `{rounded.sm}` (6 px) corners, `{rounded.md}` (8 px) at 40 and 64; a company's tile and an app's tile take `{rounded.md}` at every size.
|
|
64
62
|
* @words None of its own: the record's name stands beside it. Initials stand for a company or a person: the first letters of the name's first two words. An app with no logo takes the first letter of its name as a monogram, a model maker with no mark the initials of its slug, and no other kind takes letters.
|
|
65
63
|
* @access Decorative beside the record's name. Alone, as in a narrow rail, `label` names it.
|
|
66
64
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"identity-mark.d.ts","sourceRoot":"","sources":["../../src/components/identity-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,aAAa,EACnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAMnE,MAAM,MAAM,gBAAgB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE3D,qHAAqH;AACrH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4GAA4G;IAC5G,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,CACA;IACE,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE;QAAE,IAAI,EAAE,cAAc,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAE,CAAC;IACrF,kGAAkG;IAClG,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,SAAS,CAAC;CAC1C,GACD,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAAC,GAC7C;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"identity-mark.d.ts","sourceRoot":"","sources":["../../src/components/identity-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEnF,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,aAAa,EACnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAMnE,MAAM,MAAM,gBAAgB,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE3D,qHAAqH;AACrH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;CAC5C,CAAC,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,4GAA4G;IAC5G,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,CACA;IACE,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE;QAAE,IAAI,EAAE,cAAc,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;QAAC,KAAK,CAAC,EAAE,aAAa,CAAA;KAAE,CAAC;IACrF,kGAAkG;IAClG,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,YAAY,KAAK,SAAS,CAAC;CAC1C,GACD,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,YAAY,CAAC,GAC7C;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,wFAAwF;IACxF,MAAM,EAAE,MAAM,CAAC;CAChB,GACD;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAChD;IACE,IAAI,EAAE,QAAQ,CAAC;IACf,0FAA0F;IAC1F,IAAI,EAAE,aAAa,CAAC;IACpB,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,4GAA4G;IAC5G,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CACJ,CAAC;AA6DF;;;;;;;;;;;;GAYG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CA6DhE"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { AgentOrb, } from "./agent-orb.js";
|
|
3
3
|
import { AppMark } from "./app-mark.js";
|
|
4
|
-
import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
|
|
4
|
+
import { Avatar, AvatarFallback, AvatarImage, avatarInitials } from "./avatar.js";
|
|
5
5
|
import { ModelMark } from "./model-mark.js";
|
|
6
|
-
import {
|
|
6
|
+
import { CompanyMark } from "../internal/company-mark.js";
|
|
7
7
|
import { cn } from "../lib/utils.js";
|
|
8
8
|
const MEASURES = {
|
|
9
9
|
20: { orb: 20, icon: 12, initials: 8 },
|
|
@@ -18,18 +18,7 @@ const TONES = {
|
|
|
18
18
|
skill: "bg-category-purple text-category-purple-foreground",
|
|
19
19
|
plugin: "bg-info-soft text-info-soft-foreground",
|
|
20
20
|
teal: "bg-category-teal text-category-teal-foreground",
|
|
21
|
-
company: "bg-nc-identity-cobalto text-nc-identity-white",
|
|
22
|
-
partner: "bg-nc-identity-arancio text-nc-identity-ink",
|
|
23
21
|
};
|
|
24
|
-
function identityInitials(name) {
|
|
25
|
-
return name
|
|
26
|
-
.split(/\s+/)
|
|
27
|
-
.map((word) => word.match(/^[\p{L}\p{N}]/u)?.[0])
|
|
28
|
-
.filter((initial) => initial !== undefined)
|
|
29
|
-
.slice(0, 2)
|
|
30
|
-
.join("")
|
|
31
|
-
.toUpperCase();
|
|
32
|
-
}
|
|
33
22
|
function naming(label) {
|
|
34
23
|
return label
|
|
35
24
|
? { role: "img", "aria-label": label }
|
|
@@ -38,23 +27,19 @@ function naming(label) {
|
|
|
38
27
|
function avatarName(label) {
|
|
39
28
|
return label ? { label } : { decorative: true };
|
|
40
29
|
}
|
|
41
|
-
function
|
|
42
|
-
return (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", kind
|
|
43
|
-
? "rounded-t-full rounded-b-sm"
|
|
44
|
-
: size >= 40
|
|
45
|
-
? "rounded-md"
|
|
46
|
-
: "rounded-sm", TONES[tone]), "data-kind": kind, "data-slot": "identity-mark", style: { width: size, height: size }, ...naming(label), children: children }));
|
|
30
|
+
function RecordTile({ label, size, tone, children, }) {
|
|
31
|
+
return (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", size >= 40 ? "rounded-md" : "rounded-sm", TONES[tone]), "data-kind": "record", "data-slot": "identity-mark", style: { width: size, height: size }, ...naming(label), children: children }));
|
|
47
32
|
}
|
|
48
33
|
/**
|
|
49
34
|
* What says which thing a record is, at a fixed size at the start of its row,
|
|
50
35
|
* its object's head or its feed line: an Agent's orb, an app's logo, a model
|
|
51
|
-
* maker's mark, a company's initials, a person's picture, or a record kind's
|
|
36
|
+
* maker's mark, a company's logo or initials, a person's picture, or a record kind's
|
|
52
37
|
* icon on its tile.
|
|
53
38
|
*
|
|
54
39
|
* @family Status
|
|
55
40
|
* @when The first thing in a record's row (32), at the head of its object page (64), in a feed or a sidebar identity line (24), on a Library entry (40), for the company at the top of Nadia's list (28): wherever it tells a person which thing they are looking at.
|
|
56
41
|
* @instead An icon beside a card's title, a KPI's label or a section heading only repeats the words and is left out. A picture for a first use or a whole-page moment is the empty state's or the page's own. A model is its `ModelIdentity`; a maker's mark beside a model's name in a list of models is `ModelMark` at 24.
|
|
57
|
-
* @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her real orb from the orb engine, at the largest orb size not above the mark's, with no tile and no ring, never an avatar or a painted circle, and `frame` lets the product wrap that orb, such as in the transition that carries her to her page; an app keeps its own logo in its bordered tile on the page ground, or its first letter when it has no logo; a record that belongs to a model maker, such as a key held at that maker, is the maker's `ModelMark` at the mark's size, with its initials when LobeHub has no mark for it; a company is its own logo, contained whole in
|
|
42
|
+
* @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her real orb from the orb engine, at the largest orb size not above the mark's, with no tile and no ring, never an avatar or a painted circle, and `frame` lets the product wrap that orb, such as in the transition that carries her to her page; an app keeps its own logo in its bordered tile on the page ground, or its first letter when it has no logo; a record that belongs to a model maker, such as a key held at that maker, is the maker's `ModelMark` at the mark's size, with its initials when LobeHub has no mark for it; a company is its own logo, contained whole in its original colours and proportions on a dark ringed tile, as Vercel shows a project's favicon, and until a logo is found, or when the stored logo does not load, its initials in white on that same tile, so a found logo only replaces the letters; a company's mark is the same whatever its standing and whichever directory opened it, and a Partner is said in words where its standing matters, never by a colour; a person is their picture, then their initials, in a round mark; a record with its own object picture, such as a Library skill or plugin, draws that picture on its kind's ground; a record with no picture of its own takes its kind's own icon, the same icon its section has in the navigation (Mail for a mailbox, a server for an MCP server, a key for a password), in a ringed tile on the card ground; a Library skill takes the purple category ground with the Skills icon and a plugin the `info-soft` ground with the Plugins icon, both without a ring, so the ground says which kind it is, and an entry that has its own object picture draws it on that ground in the icon's place. A record tile takes `{rounded.sm}` (6 px) corners, `{rounded.md}` (8 px) at 40 and 64; a company's tile and an app's tile take `{rounded.md}` at every size.
|
|
58
43
|
* @words None of its own: the record's name stands beside it. Initials stand for a company or a person: the first letters of the name's first two words. An app with no logo takes the first letter of its name as a monogram, a model maker with no mark the initials of its slug, and no other kind takes letters.
|
|
59
44
|
* @access Decorative beside the record's name. Alone, as in a narrow rail, `label` names it.
|
|
60
45
|
*/
|
|
@@ -71,12 +56,10 @@ export function IdentityMark(props) {
|
|
|
71
56
|
case "model":
|
|
72
57
|
return _jsx(ModelMark, { author: props.author, label: props.label, size: size });
|
|
73
58
|
case "person":
|
|
74
|
-
return (_jsxs(Avatar, { "data-kind": "person", "data-slot": "identity-mark", style: { width: size, height: size }, ...avatarName(props.label), children: [props.image ? _jsx(AvatarImage, { alt: "", src: props.image }) : null, _jsx(AvatarFallback, { style: { fontSize: measures.initials }, children:
|
|
75
|
-
case "company":
|
|
76
|
-
|
|
77
|
-
return props.logo ? (_jsx(CompanyLogo, { fallback: initials, logo: props.logo, naming: naming(props.label), size: size })) : (initials);
|
|
78
|
-
}
|
|
59
|
+
return (_jsxs(Avatar, { "data-kind": "person", "data-slot": "identity-mark", style: { width: size, height: size }, ...avatarName(props.label), children: [props.image ? _jsx(AvatarImage, { alt: "", src: props.image }) : null, _jsx(AvatarFallback, { style: { fontSize: measures.initials }, children: avatarInitials(props.name) })] }));
|
|
60
|
+
case "company":
|
|
61
|
+
return (_jsx(CompanyMark, { initialsSize: measures.initials, logo: props.logo, name: props.name, naming: naming(props.label), size: size }));
|
|
79
62
|
case "record":
|
|
80
|
-
return (_jsx(
|
|
63
|
+
return (_jsx(RecordTile, { label: props.label, size: size, tone: props.tone ?? "neutral", children: props.picture ? (_jsx("img", { alt: "", className: "size-[84%] object-contain", "data-slot": "identity-mark-picture", src: props.picture })) : (_jsx(props.icon, { "aria-hidden": "true", size: measures.icon })) }));
|
|
81
64
|
}
|
|
82
65
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ComponentProps, ReactElement, ReactNode } from "react";
|
|
2
2
|
import { type IdentityMarkProps } from "./identity-mark.js";
|
|
3
|
-
import { type
|
|
3
|
+
import { type PageActionsProps } from "./page-actions.js";
|
|
4
4
|
type ObjectPageFact = {
|
|
5
5
|
label: string;
|
|
6
6
|
value: ReactNode;
|
|
@@ -35,11 +35,8 @@ export type ObjectPageProps = {
|
|
|
35
35
|
description?: ReactNode;
|
|
36
36
|
/** Key facts as labelled values in one row; an object always has at least one. */
|
|
37
37
|
facts: readonly [ObjectPageFact, ...ObjectPageFact[]];
|
|
38
|
-
/** The object's commands on its header bar:
|
|
39
|
-
actions?:
|
|
40
|
-
secondary?: PageCommand;
|
|
41
|
-
menu?: PageMenu;
|
|
42
|
-
};
|
|
38
|
+
/** The object's commands on its header bar: a secondary, the primary, then the three dots. */
|
|
39
|
+
actions?: Omit<PageActionsProps, "period">;
|
|
43
40
|
/** Rows that open under the facts, each one part of the object: settings, logs, checks. */
|
|
44
41
|
entries?: readonly ObjectPageEntry[];
|
|
45
42
|
/** The footer: a hint and one link elsewhere. Left out when the object has no such line. */
|
|
@@ -54,7 +51,7 @@ export type ObjectPageProps = {
|
|
|
54
51
|
* @family Compositions
|
|
55
52
|
* @when One thing a person opened from a list and now reads or acts on: a customer, a partner, an Installation, a Library entry.
|
|
56
53
|
* @instead "Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a project, an API key." (https://vercel.com/geist/context-card) Ours: that hover is a `HoverCard`, never this page. A list of records is a CollectionPage; a page of settings only is a SettingsPage, whose cards are SettingsSections; an Agent opens on its AgentProfileCard, the documented exception. A card of values a person saves is a setting card, never this one.
|
|
57
|
-
* @behaviour "For a static key/value metadata block on a detail page, use `Description`." (https://vercel.com/geist/entity) "The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`." (https://vercel.com/geist/entity) "Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`)." (https://vercel.com/geist/entity) "Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`)." (https://vercel.com/geist/description) Ours: as Vercel's deployment page (Deployment Details, then its steps), the object card is the first card of the page: a header bar with the name at the start and the object's commands at the end (
|
|
54
|
+
* @behaviour "For a static key/value metadata block on a detail page, use `Description`." (https://vercel.com/geist/entity) "The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`." (https://vercel.com/geist/entity) "Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`)." (https://vercel.com/geist/entity) "Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`)." (https://vercel.com/geist/description) Ours: as Vercel's deployment page (Deployment Details, then its steps), the object card is the first card of the page: a header bar with the name at the start and the object's commands at the end (a secondary, then the primary as the filled button, then the three dots, in `PageActions`' order, on the name's row while the name keeps 128 px, as on a phone, and under it otherwise; the primary is the one thing the object waits on its viewer for, such as approving a company that waits for approval, beside its alternative as the secondary, and an object with nothing waiting has none), for a company, the compact mark at 64 stands beside the name and optional line in the header, followed by full-width facts with four columns from `lg` and two below; other object kinds keep their mark and line beside their facts in the existing preview treatment (at least one fact is required: an object is never shown without what it is), each a muted label over its value in body text, then an optional footer with a hint at the start and one link at the end. Optional `entries` follow in a card of their own 12 px under it: rows that open one by one, each with its chevron first (it turns down when open), its title, and its summary at the trailing edge, as Vercel's Build Logs and Deployment Checks rows. The footer takes a link only, so no Save or other command of the object fits in it; the object's changes live in its sections, each a setting card with its own footer. The sections follow, 24 apart, each drawing its own states. The card is neutral; colour belongs to the company's compact identity, a semantic fact value, or an entry's status summary, with no coloured card ground.
|
|
58
55
|
* @words "Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen." (https://vercel.com/geist/entity) "Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description) Ours: sentence case throughout. The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact's label is a noun ("Plan"), its value the figure; an entry's title is a noun phrase; the hint is one sentence ("To update it, push to the main branch."); the link names where it goes ("Deployments"); the menu's trigger reads "More for {name}".
|
|
59
56
|
* @access "Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description) "Don’t wrap the component in extra paragraphs that break the list semantics." (https://vercel.com/geist/description) Ours: with `headingProps` the name is the page's h1; without them it is text, for a product whose chrome already titles the page. The mark is decorative beside the facts. Each entry is a button with `aria-expanded` that controls its panel.
|
|
60
57
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"object-page.d.ts","sourceRoot":"","sources":["../../src/components/object-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrE,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"object-page.d.ts","sourceRoot":"","sources":["../../src/components/object-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMrE,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,KAAK,gBAAgB,EAAqC,MAAM,gBAAgB,CAAC;AAE1F,KAAK,cAAc,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAAC;AAE1D,MAAM,MAAM,eAAe,GAAG;IAC5B,kEAAkE;IAClE,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,yEAAyE;IACzE,IAAI,EAAE,YAAY,CAAC;IACnB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,kHAAkH;IAClH,IAAI,EAAE,MAAM,CAAC;IACb,kGAAkG;IAClG,IAAI,EAAE,cAAc,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,wFAAwF;IACxF,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,4FAA4F;IAC5F,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;IACtD,qFAAqF;IACrF,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,kFAAkF;IAClF,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE,GAAG,cAAc,EAAE,CAAC,CAAC;IACtD,8FAA8F;IAC9F,OAAO,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC,CAAC;IAC3C,2FAA2F;IAC3F,OAAO,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,4FAA4F;IAC5F,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,+HAA+H;IAC/H,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,GACT,EAAE,eAAe,GAAG,YAAY,CA8FhC"}
|
|
@@ -12,12 +12,12 @@ import { PageActionsRow, PageCommandButton } from "./page-actions.js";
|
|
|
12
12
|
* @family Compositions
|
|
13
13
|
* @when One thing a person opened from a list and now reads or acts on: a customer, a partner, an Installation, a Library entry.
|
|
14
14
|
* @instead "Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a project, an API key." (https://vercel.com/geist/context-card) Ours: that hover is a `HoverCard`, never this page. A list of records is a CollectionPage; a page of settings only is a SettingsPage, whose cards are SettingsSections; an Agent opens on its AgentProfileCard, the documented exception. A card of values a person saves is a setting card, never this one.
|
|
15
|
-
* @behaviour "For a static key/value metadata block on a detail page, use `Description`." (https://vercel.com/geist/entity) "The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`." (https://vercel.com/geist/entity) "Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`)." (https://vercel.com/geist/entity) "Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`)." (https://vercel.com/geist/description) Ours: as Vercel's deployment page (Deployment Details, then its steps), the object card is the first card of the page: a header bar with the name at the start and the object's commands at the end (
|
|
15
|
+
* @behaviour "For a static key/value metadata block on a detail page, use `Description`." (https://vercel.com/geist/entity) "The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`." (https://vercel.com/geist/entity) "Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`)." (https://vercel.com/geist/entity) "Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`)." (https://vercel.com/geist/description) Ours: as Vercel's deployment page (Deployment Details, then its steps), the object card is the first card of the page: a header bar with the name at the start and the object's commands at the end (a secondary, then the primary as the filled button, then the three dots, in `PageActions`' order, on the name's row while the name keeps 128 px, as on a phone, and under it otherwise; the primary is the one thing the object waits on its viewer for, such as approving a company that waits for approval, beside its alternative as the secondary, and an object with nothing waiting has none), for a company, the compact mark at 64 stands beside the name and optional line in the header, followed by full-width facts with four columns from `lg` and two below; other object kinds keep their mark and line beside their facts in the existing preview treatment (at least one fact is required: an object is never shown without what it is), each a muted label over its value in body text, then an optional footer with a hint at the start and one link at the end. Optional `entries` follow in a card of their own 12 px under it: rows that open one by one, each with its chevron first (it turns down when open), its title, and its summary at the trailing edge, as Vercel's Build Logs and Deployment Checks rows. The footer takes a link only, so no Save or other command of the object fits in it; the object's changes live in its sections, each a setting card with its own footer. The sections follow, 24 apart, each drawing its own states. The card is neutral; colour belongs to the company's compact identity, a semantic fact value, or an entry's status summary, with no coloured card ground.
|
|
16
16
|
* @words "Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen." (https://vercel.com/geist/entity) "Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description) Ours: sentence case throughout. The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact's label is a noun ("Plan"), its value the figure; an entry's title is a noun phrase; the hint is one sentence ("To update it, push to the main branch."); the link names where it goes ("Deployments"); the menu's trigger reads "More for {name}".
|
|
17
17
|
* @access "Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description) "Don’t wrap the component in extra paragraphs that break the list semantics." (https://vercel.com/geist/description) Ours: with `headingProps` the name is the page's h1; without them it is text, for a product whose chrome already titles the page. The mark is decorative beside the facts. Each entry is a button with `aria-expanded` that controls its panel.
|
|
18
18
|
*/
|
|
19
19
|
export function ObjectPage({ mark, name, headingProps, description, facts, actions, entries, footer, children, }) {
|
|
20
20
|
const company = mark.kind === "company";
|
|
21
21
|
const title = headingProps ? (_jsx("h1", { ...headingProps, className: cn("outline-none", headingProps.className), children: name })) : (name);
|
|
22
|
-
return (_jsxs("div", { className: "grid min-w-0 gap-6", "data-slot": "object-page", children: [_jsxs("div", { className: "grid min-w-0 gap-3", children: [_jsxs(Card, { className: "min-w-0", render: _jsx("div", { "data-slot": "object-card" }), size: "sm", children: [_jsxs(CardHeader, { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-3 border-b", children: [company ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 items-center gap-4", actions?.menu && !actions.secondary ? "basis-0" : "basis-64"), children: [_jsx(IdentityMark, { ...mark, size: 64 }), _jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx(CardTitle, { className: "min-w-0 break-words group-data-[size=sm]/card:text-heading-sm", children: title }), description ? _jsx(CardDescription, { children: description }) : null] })] })) : (_jsx(CardTitle, { className: "min-w-0 flex-1 basis-32 break-words", children: title })), actions
|
|
22
|
+
return (_jsxs("div", { className: "grid min-w-0 gap-6", "data-slot": "object-page", children: [_jsxs("div", { className: "grid min-w-0 gap-3", children: [_jsxs(Card, { className: "min-w-0", render: _jsx("div", { "data-slot": "object-card" }), size: "sm", children: [_jsxs(CardHeader, { className: "flex flex-wrap items-center justify-between gap-x-4 gap-y-3 border-b", children: [company ? (_jsxs("div", { className: cn("flex min-w-0 flex-1 items-center gap-4", actions?.menu && !actions.secondary && !actions.primary ? "basis-0" : "basis-64"), children: [_jsx(IdentityMark, { ...mark, size: 64 }), _jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx(CardTitle, { className: "min-w-0 break-words group-data-[size=sm]/card:text-heading-sm", children: title }), description ? _jsx(CardDescription, { children: description }) : null] })] })) : (_jsx(CardTitle, { className: "min-w-0 flex-1 basis-32 break-words", children: title })), actions ? _jsx(PageActionsRow, { ...actions }) : null] }), _jsxs(CardContent, { className: cn("grid min-w-0 gap-x-6 gap-y-5", !company && "md:grid-cols-[minmax(0,18.75rem)_minmax(0,1fr)]"), children: [!company ? (_jsx("div", { className: "flex h-32 min-w-0 items-center md:h-auto md:aspect-[16/10] justify-center rounded-sm border border-border bg-muted", "data-slot": "object-page-tile", children: _jsx(IdentityMark, { ...mark, size: 64 }) })) : null, _jsxs("div", { className: "grid min-w-0 content-start gap-4", children: [!company && description ? (_jsx("div", { className: "min-w-0 text-body-sm text-muted-foreground", children: description })) : null, _jsx("dl", { className: "grid min-w-0 grid-cols-2 gap-x-6 gap-y-4 lg:grid-cols-4", "data-slot": "object-page-facts", children: facts.map((fact) => (_jsxs("div", { className: "grid min-w-0 content-start gap-1", children: [_jsx("dt", { className: "text-label-sm text-muted-foreground", children: fact.label }), _jsx("dd", { className: "min-w-0 text-body-sm break-words text-foreground", children: fact.value })] }, fact.label))) })] })] }), footer ? (_jsx(FooterStrip, { hint: footer.hint, hintSlot: "object-page-hint", children: _jsx(PageCommandButton, { command: footer.link, variant: "outline" }) })) : null] }), entries && entries.length > 0 ? (_jsx(Card, { className: "min-w-0 py-0", render: _jsx("div", { "data-slot": "object-page-entries" }), size: "sm", children: _jsx(Accordion, { className: "[&>:last-child]:border-b-0", multiple: true, size: "small", children: entries.map((entry) => (_jsxs(AccordionItem, { value: entry.title, children: [_jsxs(AccordionTrigger, { className: "justify-start gap-3 px-(--card-spacing) group-data-[size=small]/accordion:text-body-sm focus-visible:-outline-offset-2 [&>[data-slot=accordion-trigger-icon]]:order-first [&>[data-slot=accordion-trigger-icon]]:text-muted-foreground", children: [_jsx("span", { className: "min-w-0 flex-1", children: entry.title }), entry.summary] }), _jsx(AccordionContent, { className: "ps-[calc(var(--card-spacing)+1.75rem)] pe-(--card-spacing)", children: entry.children })] }, entry.title))) }) })) : null] }), children] }));
|
|
23
23
|
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare function CompanyMark({ name, logo, size, initialsSize, naming, }: {
|
|
2
|
+
name: string;
|
|
3
|
+
logo: string | undefined;
|
|
4
|
+
size: number;
|
|
5
|
+
initialsSize: number;
|
|
6
|
+
naming: {
|
|
7
|
+
role: "img";
|
|
8
|
+
"aria-label": string;
|
|
9
|
+
} | {
|
|
10
|
+
"aria-hidden": true;
|
|
11
|
+
};
|
|
12
|
+
}): import("react").JSX.Element;
|
|
13
|
+
//# sourceMappingURL=company-mark.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"company-mark.d.ts","sourceRoot":"","sources":["../../src/internal/company-mark.tsx"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,aAAa,EAAE,IAAI,CAAA;KAAE,CAAC;CACzE,+BA6BA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useState } from "react";
|
|
4
|
+
import { avatarInitials } from "../components/avatar.js";
|
|
5
|
+
export function CompanyMark({ name, logo, size, initialsSize, naming, }) {
|
|
6
|
+
const [failedLogo, setFailedLogo] = useState(null);
|
|
7
|
+
return (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-md bg-nc-card-graphite text-nc-identity-white ring-1 ring-border ring-inset", "data-kind": "company", "data-slot": "identity-mark", style: { width: size, height: size }, ...naming, children: logo && failedLogo !== logo ? (_jsx("img", { alt: "", className: "size-full object-contain", "data-slot": "identity-mark-logo", onError: () => setFailedLogo(logo), src: logo })) : (_jsx("span", { "aria-hidden": "true", className: "leading-none font-semibold", style: { fontSize: initialsSize }, children: avatarInitials(name) })) }));
|
|
8
|
+
}
|
|
@@ -22,7 +22,8 @@ export type FormProps = Omit<ComponentProps<"form">, "children" | "className"> &
|
|
|
22
22
|
notice?: ReactNode;
|
|
23
23
|
children: ReactNode;
|
|
24
24
|
};
|
|
25
|
-
export declare function FormSubmitButton({ submit }: {
|
|
25
|
+
export declare function FormSubmitButton({ submit, destructive, }: {
|
|
26
26
|
submit: FormSubmit;
|
|
27
|
+
destructive?: boolean;
|
|
27
28
|
}): import("react").JSX.Element;
|
|
28
29
|
//# sourceMappingURL=form-submit.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-submit.d.ts","sourceRoot":"","sources":["../../src/internal/form-submit.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,CACA;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC9C;IACE,uFAAuF;IACvF,OAAO,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,YAAY,EAAE,MAAM,CAAC;CACtB,CACJ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC/E,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAoCF,wBAAgB,gBAAgB,CAAC,
|
|
1
|
+
{"version":3,"file":"form-submit.d.ts","sourceRoot":"","sources":["../../src/internal/form-submit.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,CACA;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,GAC9C;IACE,uFAAuF;IACvF,OAAO,EAAE,OAAO,CAAC;IACjB,kFAAkF;IAClF,YAAY,EAAE,MAAM,CAAC;CACtB,CACJ,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC,GAAG;IAC/E,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,UAAU,CAAC;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAoCF,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,WAAmB,GACpB,EAAE;IACD,MAAM,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,+BAeA"}
|
|
@@ -31,7 +31,7 @@ function trimTextFields(form) {
|
|
|
31
31
|
replaceValue(field, trimmed);
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
|
-
export function FormSubmitButton({ submit }) {
|
|
34
|
+
export function FormSubmitButton({ submit, destructive = false, }) {
|
|
35
35
|
const pending = submit.pending === true;
|
|
36
|
-
return (_jsx(Button, { "aria-describedby": submit.describedBy, disabled: submit.disabled, loading: pending, loadingLabel: submit.pendingLabel ?? submit.label, onClick: (event) => trimTextFields(event.currentTarget.form), type: "submit", children: submit.label }));
|
|
36
|
+
return (_jsx(Button, { "aria-describedby": submit.describedBy, disabled: submit.disabled, loading: pending, loadingLabel: submit.pendingLabel ?? submit.label, onClick: (event) => trimTextFields(event.currentTarget.form), type: "submit", variant: destructive ? "destructive" : "default", children: submit.label }));
|
|
37
37
|
}
|
|
@@ -108,9 +108,9 @@ export const USAGE = [
|
|
|
108
108
|
family: "Compositions",
|
|
109
109
|
summary: "A new record, or one or two values from a command, in a modal dialog.",
|
|
110
110
|
when: '"Use Modal when a decision must block the rest of the page. For persistent associated context where the underlying page stays readable, use `Sheet` on desktop or `Drawer` on mobile." (https://vercel.com/geist/modal) Ours: a person adds a record through a few fields, or changes one or two values a command asks for: new customer, add a mailbox, add an MCP server.',
|
|
111
|
-
instead: '"Skip Modal for routine create flows that have a dedicated page; route to the page instead." (https://vercel.com/geist/modal) "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal) Ours: a record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence is confirmed in a `ConfirmDialog`.',
|
|
112
|
-
behaviour: '"Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: centred over a scrim without blur, 540 px wide, a bottom sheet on a phone: the title and its help, the fields in a 12 px column, then the footer, which stays at the bottom while a tall form scrolls, with Cancel at the leading edge and the primary at the trailing edge, in one row also on a phone. `FormDialogForm` puts the fields in the dialog\'s own scroll body and the actions in its fixed footer; no other overlay is nested inside. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them. With `unsaved.dirty`, Escape and a press outside are held back and `unsaved.onDismissBlocked` runs so the caller can ask; Close and Cancel always close. How long it stays open while work goes on follows DESIGN.md "System activity".',
|
|
113
|
-
words: '"`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal) "Primary button is `Verb + Noun` and matches the title verb (`Transfer Project` title pairs with `Transfer Project` button). Never `Confirm`, `OK`, or a bare verb on a destructive primary." (https://vercel.com/geist/modal) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title and the primary are sentence case, where Geist writes Title Case: the title names the job and its object, "New customer", "Add a mailbox"; the primary repeats it, "Create customer", "Add mailbox".',
|
|
111
|
+
instead: '"Skip Modal for routine create flows that have a dedicated page; route to the page instead." (https://vercel.com/geist/modal) "Confirm destructive actions in a Modal. `Drawer` and `Sheet` don’t fully dim the page, so they read as too soft for a delete or revoke." (https://vercel.com/geist/modal) Ours: a record already in a list edits in its row with `RowEditForm`; a choice from a catalogue is a `CatalogDrawer`; a setup in steps with a wait is a `FormDrawer` with `job="steps"`; a consequence that asks nothing is confirmed in a `ConfirmDialog`.',
|
|
112
|
+
behaviour: '"Allow Escape and outside-click to dismiss non-destructive Modals; gate dismissal on destructive ones with unsaved input." (https://vercel.com/geist/modal) Ours: centred over a scrim without blur, 540 px wide, a bottom sheet on a phone: the title and its help, the fields in a 12 px column, then the footer, which stays at the bottom while a tall form scrolls, with Cancel at the leading edge and the primary at the trailing edge, in one row also on a phone. `FormDialogForm` puts the fields in the dialog\'s own scroll body and the actions in its fixed footer; no other overlay is nested inside. A refusal or a failed save sits above the footer and the fields keep what was typed. While its save runs it holds open, Cancel and the primary hold, and the waiting line runs under them. With `unsaved.dirty`, Escape and a press outside are held back and `unsaved.onDismissBlocked` runs so the caller can ask; Close and Cancel always close. A form whose primary takes something away, such as declining a company with a note for the record, sets `destructive` on `FormDialogForm`: the primary turns red, as `ConfirmDialog`\'s destructive confirm does, and nothing else changes. How long it stays open while work goes on follows DESIGN.md "System activity".',
|
|
113
|
+
words: '"`Modal.Title` is a Title Case statement, never a question. `Transfer Project` is correct; `Transfer Project?` is wrong." (https://vercel.com/geist/modal) "Primary button is `Verb + Noun` and matches the title verb (`Transfer Project` title pairs with `Transfer Project` button). Never `Confirm`, `OK`, or a bare verb on a destructive primary." (https://vercel.com/geist/modal) "Cancel literal stays `Cancel`. Acknowledgment-only Modals (after a key reveal, after a one-time-show) use `Done`, never `OK` or `Close`." (https://vercel.com/geist/modal) Ours: the title and the primary are sentence case, where Geist writes Title Case: the title names the job and its object, "New customer", "Add a mailbox"; the primary repeats it, "Create customer", "Add mailbox"; a destructive primary names what it takes away, "Decline company", never a bare "Decline".',
|
|
114
114
|
access: '"Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal) "Trap focus inside the Modal while it’s open and return focus to the trigger after close. Restore body scroll on the same tick the Modal unmounts." (https://vercel.com/geist/modal) "After an error inside the Modal, keep focus inside so the user can retry; after success, return focus to the trigger." (https://vercel.com/geist/modal) Ours: a modal dialog with a Close named by `closeLabel`; focus starts in its first field or `initialFocus` and returns to the opener or `finalFocus`. Escape and Close close it unless the save runs.',
|
|
115
115
|
},
|
|
116
116
|
{
|
|
@@ -142,7 +142,7 @@ export const USAGE = [
|
|
|
142
142
|
summary: "One object's page: the object card with its name, commands, facts, rows that open and one link elsewhere, then its sections as cards.",
|
|
143
143
|
when: "One thing a person opened from a list and now reads or acts on: a customer, a partner, an Installation, a Library entry.",
|
|
144
144
|
instead: '"Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a project, an API key." (https://vercel.com/geist/context-card) Ours: that hover is a `HoverCard`, never this page. A list of records is a CollectionPage; a page of settings only is a SettingsPage, whose cards are SettingsSections; an Agent opens on its AgentProfileCard, the documented exception. A card of values a person saves is a setting card, never this one.',
|
|
145
|
-
behaviour:
|
|
145
|
+
behaviour: "\"For a static key/value metadata block on a detail page, use `Description`.\" (https://vercel.com/geist/entity) \"The right column holds at most one or two controls. If the row needs more, move secondary actions into a `Dots Menu`.\" (https://vercel.com/geist/entity) \"Lead the left column with a scannable identifier: an `Avatar` or icon, a Title Case label, then sentence-case secondary metadata (`Member since Mar 14, 2026`).\" (https://vercel.com/geist/entity) \"Don’t put interactive controls in the title slot. Buttons, menus, and links belong in the content (`<dd>`) or in the parent layout, not the label (`<dt>`).\" (https://vercel.com/geist/description) Ours: as Vercel's deployment page (Deployment Details, then its steps), the object card is the first card of the page: a header bar with the name at the start and the object's commands at the end (a secondary, then the primary as the filled button, then the three dots, in `PageActions`' order, on the name's row while the name keeps 128 px, as on a phone, and under it otherwise; the primary is the one thing the object waits on its viewer for, such as approving a company that waits for approval, beside its alternative as the secondary, and an object with nothing waiting has none), for a company, the compact mark at 64 stands beside the name and optional line in the header, followed by full-width facts with four columns from `lg` and two below; other object kinds keep their mark and line beside their facts in the existing preview treatment (at least one fact is required: an object is never shown without what it is), each a muted label over its value in body text, then an optional footer with a hint at the start and one link at the end. Optional `entries` follow in a card of their own 12 px under it: rows that open one by one, each with its chevron first (it turns down when open), its title, and its summary at the trailing edge, as Vercel's Build Logs and Deployment Checks rows. The footer takes a link only, so no Save or other command of the object fits in it; the object's changes live in its sections, each a setting card with its own footer. The sections follow, 24 apart, each drawing its own states. The card is neutral; colour belongs to the company's compact identity, a semantic fact value, or an entry's status summary, with no coloured card ground.",
|
|
146
146
|
words: '"Keep right-column buttons Verb + Noun (`Remove Member`, `Resend Invite`). Bare verbs like `Remove` or `Confirm` lose context once the row scrolls offscreen." (https://vercel.com/geist/entity) "Title slot is Title Case noun (`Last Deployed`, `Build Duration`); content is sentence case unless the value is a literal identifier, ID, or timestamp that should be preserved verbatim." (https://vercel.com/geist/description) Ours: sentence case throughout. The name as the object is called everywhere else; the line says what it is and whose ("Customer of Partner Alpha · since 3 August 2026"); a fact\'s label is a noun ("Plan"), its value the figure; an entry\'s title is a noun phrase; the hint is one sentence ("To update it, push to the main branch."); the link names where it goes ("Deployments"); the menu\'s trigger reads "More for {name}".',
|
|
147
147
|
access: '"Geist renders `<dl>`/`<dt>`/`<dd>` so screen readers announce each key/value pair as a definition." (https://vercel.com/geist/description) "Don’t wrap the component in extra paragraphs that break the list semantics." (https://vercel.com/geist/description) Ours: with `headingProps` the name is the page\'s h1; without them it is text, for a product whose chrome already titles the page. The mark is decorative beside the facts. Each entry is a button with `aria-expanded` that controls its panel.',
|
|
148
148
|
},
|
|
@@ -658,7 +658,7 @@ export const USAGE = [
|
|
|
658
658
|
family: "Status",
|
|
659
659
|
summary: "A person or a team: their picture, else their initials.",
|
|
660
660
|
when: '"Use a single `<Avatar>` for one person, team, or organization." (https://vercel.com/geist/avatar) "For two or more stacked avatars, use `<AvatarGroup>` so the cluster gets correct overlap, sizing, and a single accessible label." (https://vercel.com/geist/avatar) Ours: a person or a team: the account at the foot of the sidebar, a member list, who changed something. It always says who it shows: `label` names the entity (*Jane Doe*), and `decorative` stands for a name beside it that already does. The type asks for one of the two. "Pass `src` first and fall back to `letter` (1–2 uppercase chars) when the image is missing." (https://vercel.com/geist/avatar) Ours: the children are an `AvatarImage` and an `AvatarFallback` with the initials. "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) Ours: `size` follows the type beside it: `xs` (16 px) and `sm` (24 px) next to small labels, `default` (32 px) next to body text, `lg` (48 px) in a header or an onboarding step. `AvatarWithIcon` puts a status glyph at the corner of a person\'s avatar; its `name` is required and gives the initials, and, like `Avatar`, the type asks for `label` (naming the person and the state) or `decorative`.',
|
|
661
|
-
instead: "Ours: an Agent is always its `AgentOrb`, never an avatar. A company is its initials
|
|
661
|
+
instead: "Ours: an Agent is always its `AgentOrb`, never an avatar. A company is never an avatar: it is `IdentityMark`'s company mark, its logo or else its initials on a dark tile. A record's mark, a person's included, is `IdentityMark`, which draws an `Avatar` for a person. There are no git-provider avatars and no fetch of a picture by username.",
|
|
662
662
|
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) "Set `reverse` to flip the order so the last member sits on top instead." (https://vercel.com/geist/avatar) "The visual left-to-right order is unchanged." (https://vercel.com/geist/avatar) "By default `overlap="auto"` scales the spacing with `size`, keeping a generous, evenly-spaced cluster at any size." (https://vercel.com/geist/avatar) "Pass a number to set the overlap in pixels instead." (https://vercel.com/geist/avatar) "Lower values give more generous spacing; higher values pack tighter for dense, space-constrained UI." (https://vercel.com/geist/avatar) Ours: `auto` is about 30 % of the size (5, 7, 10 and 14 px), and each member is cut out with a 1 px ring in the page colour. When `limit` cuts the group, the last place is a dark `+N` count that covers the member it hides; `AvatarGroup` draws that count itself, so the caller passes `members` and one `label`, never a count of its own. "Reserve `placeholder` for the loading shell, never as a permanent fallback." (https://vercel.com/geist/avatar) Ours: there is no `placeholder`, since a still skeleton is ours; a picture that fails falls back to initials from `avatarInitials`, set in the neutral accent fill with the text colour on it, in both themes. For a name with no readable letter the caller passes a glyph, so it is never blank. The picture is held by a 1 px hairline. The corner glyph of `AvatarWithIcon` is the person\'s state, in the muted foreground colour, so its `label` names the person and the state. The profile\'s upload button is `AvatarUploadButton`.',
|
|
663
663
|
words: '"Keep `letter` uppercase and derived from the entity name. No emoji, no punctuation, no `?`." (https://vercel.com/geist/avatar) Ours: the initials come from the name, else from the email; one initial at `xs`. The overflow is a count: *+2*.',
|
|
664
664
|
access: '"`title` is the literal entity name (`Acme Inc.`, `Jane Doe`)." (https://vercel.com/geist/avatar) "Geist already prefixes letter avatars with `Avatar with initials:` for screen readers, so don’t hand-write `Avatar of …`." (https://vercel.com/geist/avatar) Ours: the name is `label`, as it is written (*Jane Doe*, not *Avatar of Jane Doe*), and we add no prefix. Beside a visible name it is `decorative`. A group carries one label: *5 members*. A corner glyph is `aria-hidden`; `label` says the state: *Jane Doe, paused*.',
|
|
@@ -711,10 +711,10 @@ export const USAGE = [
|
|
|
711
711
|
name: "IdentityMark",
|
|
712
712
|
module: "identity-mark",
|
|
713
713
|
family: "Status",
|
|
714
|
-
summary: "What says which thing a record is, at a fixed size at the start of its row, its object's head or its feed line: an Agent's orb, an app's logo, a model maker's mark, a company's initials, a person's picture, or a record kind's icon on its tile.",
|
|
714
|
+
summary: "What says which thing a record is, at a fixed size at the start of its row, its object's head or its feed line: an Agent's orb, an app's logo, a model maker's mark, a company's logo or initials, a person's picture, or a record kind's icon on its tile.",
|
|
715
715
|
when: "The first thing in a record's row (32), at the head of its object page (64), in a feed or a sidebar identity line (24), on a Library entry (40), for the company at the top of Nadia's list (28): wherever it tells a person which thing they are looking at.",
|
|
716
716
|
instead: "An icon beside a card's title, a KPI's label or a section heading only repeats the words and is left out. A picture for a first use or a whole-page moment is the empty state's or the page's own. A model is its `ModelIdentity`; a maker's mark beside a model's name in a list of models is `ModelMark` at 24.",
|
|
717
|
-
behaviour: "Static, except an Agent's orb, which moves with her state. An Agent is always her real orb from the orb engine, at the largest orb size not above the mark's, with no tile and no ring, never an avatar or a painted circle, and `frame` lets the product wrap that orb, such as in the transition that carries her to her page; an app keeps its own logo in its bordered tile on the page ground, or its first letter when it has no logo; a record that belongs to a model maker, such as a key held at that maker, is the maker's `ModelMark` at the mark's size, with its initials when LobeHub has no mark for it; a company is its own logo, contained whole in
|
|
717
|
+
behaviour: "Static, except an Agent's orb, which moves with her state. An Agent is always her real orb from the orb engine, at the largest orb size not above the mark's, with no tile and no ring, never an avatar or a painted circle, and `frame` lets the product wrap that orb, such as in the transition that carries her to her page; an app keeps its own logo in its bordered tile on the page ground, or its first letter when it has no logo; a record that belongs to a model maker, such as a key held at that maker, is the maker's `ModelMark` at the mark's size, with its initials when LobeHub has no mark for it; a company is its own logo, contained whole in its original colours and proportions on a dark ringed tile, as Vercel shows a project's favicon, and until a logo is found, or when the stored logo does not load, its initials in white on that same tile, so a found logo only replaces the letters; a company's mark is the same whatever its standing and whichever directory opened it, and a Partner is said in words where its standing matters, never by a colour; a person is their picture, then their initials, in a round mark; a record with its own object picture, such as a Library skill or plugin, draws that picture on its kind's ground; a record with no picture of its own takes its kind's own icon, the same icon its section has in the navigation (Mail for a mailbox, a server for an MCP server, a key for a password), in a ringed tile on the card ground; a Library skill takes the purple category ground with the Skills icon and a plugin the `info-soft` ground with the Plugins icon, both without a ring, so the ground says which kind it is, and an entry that has its own object picture draws it on that ground in the icon's place. A record tile takes `{rounded.sm}` (6 px) corners, `{rounded.md}` (8 px) at 40 and 64; a company's tile and an app's tile take `{rounded.md}` at every size.",
|
|
718
718
|
words: "None of its own: the record's name stands beside it. Initials stand for a company or a person: the first letters of the name's first two words. An app with no logo takes the first letter of its name as a monogram, a model maker with no mark the initials of its slug, and no other kind takes letters.",
|
|
719
719
|
access: "Decorative beside the record's name. Alone, as in a narrow rail, `label` names it.",
|
|
720
720
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nadicodeai/ui",
|
|
3
|
-
"version": "12.1.
|
|
3
|
+
"version": "12.1.133",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"@base-ui/react": "^1.9.0",
|
|
84
84
|
"@iconify-icons/logos": "^2.0.3",
|
|
85
85
|
"@iconify/react": "^6.0.2",
|
|
86
|
-
"@nadicodeai/design-system": "12.1.
|
|
86
|
+
"@nadicodeai/design-system": "12.1.133",
|
|
87
87
|
"@tanstack/react-table": "^9.3.1",
|
|
88
88
|
"@vgpu/wgsl": "0.6.0",
|
|
89
89
|
"class-variance-authority": "^0.7.1",
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* A company's logo on its tile, and `fallback`, its initials, when the stored logo does not load,
|
|
4
|
-
* so a broken address never leaves an empty tile.
|
|
5
|
-
*/
|
|
6
|
-
export declare function CompanyLogo({ logo, size, naming, fallback, }: {
|
|
7
|
-
logo: string;
|
|
8
|
-
size: number;
|
|
9
|
-
naming: {
|
|
10
|
-
role: "img";
|
|
11
|
-
"aria-label": string;
|
|
12
|
-
} | {
|
|
13
|
-
"aria-hidden": true;
|
|
14
|
-
};
|
|
15
|
-
fallback: ReactNode;
|
|
16
|
-
}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
|
|
17
|
-
//# sourceMappingURL=company-logo.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"company-logo.d.ts","sourceRoot":"","sources":["../../src/internal/company-logo.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAEjD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE;QAAE,IAAI,EAAE,KAAK,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,aAAa,EAAE,IAAI,CAAA;KAAE,CAAC;IACxE,QAAQ,EAAE,SAAS,CAAC;CACrB,+TAoBA"}
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
4
|
-
/**
|
|
5
|
-
* A company's logo on its tile, and `fallback`, its initials, when the stored logo does not load,
|
|
6
|
-
* so a broken address never leaves an empty tile.
|
|
7
|
-
*/
|
|
8
|
-
export function CompanyLogo({ logo, size, naming, fallback, }) {
|
|
9
|
-
const [failedLogo, setFailedLogo] = useState(null);
|
|
10
|
-
if (failedLogo === logo)
|
|
11
|
-
return fallback;
|
|
12
|
-
return (_jsx("span", { className: "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-md bg-nc-card-graphite ring-1 ring-border ring-inset", "data-kind": "company", "data-slot": "identity-mark", style: { width: size, height: size }, ...naming, children: _jsx("img", { alt: "", className: "size-full object-contain", "data-slot": "identity-mark-logo", onError: () => setFailedLogo(logo), src: logo }) }));
|
|
13
|
-
}
|