@nadicodeai/ui 12.1.169 → 12.1.171

package/dist/components/entry-picture.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The art-directed cut-out an entry page stands beside its centred column.
+ *
+ * @family Compositions
+ * @when A whole-page moment with a picture, at the window's left edge: a sign-in handed to Nadia, an invitation, an invite to a company's Alveare.
+ * @instead A failure page centres its picture above the words ("Failure surfaces"). A first use's picture is `EmptyState`'s. Nadia's desktop entry screens are `EntryScene` and Alveare's are `HiveScene`.
+ * @behaviour One whole cut-out fixed to the window's floor at the left edge, so a page taller than the window never cuts its feet. It keeps its own shape and is never wider than half its pixels, the width it stays sharp at on a DPR 2 screen, nor than the room left of the centred `column`, nor taller than 85 % of the window. It shows only from `lg`: below, the task keeps the screen and the browser does not fetch it. A page draws it only in the state the picture is about, so a page that cannot go on never shows one welcoming the person.
+ * @words None: the picture carries no caption.
+ * @access Decorative and inert: hidden from assistive technology, never focused or clicked.
+ */
+declare function EntryPicture({ src, width, height, column, }: {
+    src: string;
+    /** The file's width and height in pixels. */
+    width: number;
+    height: number;
+    /** The width of the column the page centres beside it. */
+    column?: string;
+}): import("react").JSX.Element;
+export { EntryPicture };
+//# sourceMappingURL=entry-picture.d.ts.map

package/dist/components/entry-picture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"entry-picture.d.ts","sourceRoot":"","sources":["../../src/components/entry-picture.tsx"],"names":[],"mappings":"AAKA;;;;;;;;;GASG;AACH,iBAAS,YAAY,CAAC,EACpB,GAAG,EACH,KAAK,EACL,MAAM,EACN,MAAgB,GACjB,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,+BA0BA;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/entry-picture.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** How far the picture stands from the window's left edge. */
+const INSET = "clamp(0.5rem, 4vw, 6rem)";
+/**
+ * The art-directed cut-out an entry page stands beside its centred column.
+ *
+ * @family Compositions
+ * @when A whole-page moment with a picture, at the window's left edge: a sign-in handed to Nadia, an invitation, an invite to a company's Alveare.
+ * @instead A failure page centres its picture above the words ("Failure surfaces"). A first use's picture is `EmptyState`'s. Nadia's desktop entry screens are `EntryScene` and Alveare's are `HiveScene`.
+ * @behaviour One whole cut-out fixed to the window's floor at the left edge, so a page taller than the window never cuts its feet. It keeps its own shape and is never wider than half its pixels, the width it stays sharp at on a DPR 2 screen, nor than the room left of the centred `column`, nor taller than 85 % of the window. It shows only from `lg`: below, the task keeps the screen and the browser does not fetch it. A page draws it only in the state the picture is about, so a page that cannot go on never shows one welcoming the person.
+ * @words None: the picture carries no caption.
+ * @access Decorative and inert: hidden from assistive technology, never focused or clicked.
+ */
+function EntryPicture({ src, width, height, column = "28rem", }) {
+    const box = {
+        left: INSET,
+        aspectRatio: `${width} / ${height}`,
+        width: `min(${width / 2}px, calc(85svh * ${width / height}), calc(50vw - ${column} / 2 - 1.5rem - ${INSET}))`,
+    };
+    return (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none fixed bottom-0 z-0 hidden lg:block", "data-slot": "entry-picture", inert: true, style: box, children: _jsx("img", { alt: "", className: "size-full object-contain object-bottom", decoding: "async", fetchPriority: "high", height: height, loading: "lazy", src: src, width: width }) }));
+}
+export { EntryPicture };

package/dist/components/invite-card.d.ts

@@ -0,0 +1,46 @@
+import { type PlatformName } from "./platform-mark.js";
+type Installer = {
+    platform: PlatformName;
+    /** The computer's name: *macOS*. */
+    name: string;
+    href: string;
+    /** The download's size, written: *119 MB*. */
+    size?: string;
+    /** The computer the page believes the reader is on. */
+    suggested?: boolean;
+};
+/**
+ * A link that opens an app: the app's mark, the invite's words, the action that opens it, the
+ * installers for a computer without the app, and the code that opens the same link on a phone.
+ *
+ * @family Compositions
+ * @when The page an invite link opens: Alveare's invite to a company. It stands centred on an entry page, with `EntryPicture` at the window's left edge.
+ * @instead An invitation to a role the person accepts in the Portal is the Portal's invitation card. Downloads with formats and steps is the Portal's Downloads page. A code the phone takes to sign in is `QrCode` in Nadia's pairing drawer.
+ * @behaviour The mark, the title and the one line are centred; the open action fills the card's width under them, and the phone's code, as large as a phone scans from across a desk, comes next as the other way to open the same link. The installers are one row per computer, each with its mark, its name, its size and its download, so every row lines up whatever its words; the computer the reader is on carries the `suggested` badge. The installers show from `md` and the phone's code from `lg`, because a phone neither installs a computer's app nor scans its own screen. A link that holds no invite passes the title and the line alone.
+ * @words The title says what the person joins: *Join your company on Alveare*. The line says what happens and what to do if it does not. Each download is *Download*, named for its computer to assistive technology; the phone's line says what the code opens and how: *Open this invite on your phone*, *Point your phone's camera at the code*.
+ * @access The title is the page's level-1 heading and the installers a list under its own heading. The mark is decorative; the code is an image named by what it opens.
+ */
+declare function InviteCard({ mark, title, description, open, install, phone, }: {
+    /** The app's mark, as an image address. */
+    mark: string;
+    title: string;
+    description: string;
+    open?: {
+        label: string;
+        href: string;
+    };
+    install?: {
+        label: string;
+        download: string;
+        suggested: string;
+        installers: readonly Installer[];
+    };
+    /** The same link, for a phone's camera. */
+    phone?: {
+        link: string;
+        label: string;
+        how: string;
+    };
+}): import("react").JSX.Element;
+export { InviteCard };
+//# sourceMappingURL=invite-card.d.ts.map

package/dist/components/invite-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invite-card.d.ts","sourceRoot":"","sources":["../../src/components/invite-card.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAM7E,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,YAAY,CAAC;IACvB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,IAAI,EACJ,OAAO,EACP,KAAK,GACN,EAAE;IACD,2CAA2C;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,SAAS,SAAS,EAAE,CAAC;KAClC,CAAC;IACF,2CAA2C;IAC3C,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CACtD,+BAgEA;AAED,OAAO,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/invite-card.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Download } from "lucide-react";
+import { Badge } from "./badge.js";
+import { ButtonLink } from "./button.js";
+import { Card, CardContent } from "./card.js";
+import { Item, ItemActions, ItemContent, ItemDescription, ItemGroup, ItemMedia, ItemTitle, } from "./item.js";
+import { PlatformMark } from "./platform-mark.js";
+import { QrCode } from "./qr-code.js";
+/** The phone's code, large enough to scan from across a desk. */
+const QR_PX = 160;
+/**
+ * A link that opens an app: the app's mark, the invite's words, the action that opens it, the
+ * installers for a computer without the app, and the code that opens the same link on a phone.
+ *
+ * @family Compositions
+ * @when The page an invite link opens: Alveare's invite to a company. It stands centred on an entry page, with `EntryPicture` at the window's left edge.
+ * @instead An invitation to a role the person accepts in the Portal is the Portal's invitation card. Downloads with formats and steps is the Portal's Downloads page. A code the phone takes to sign in is `QrCode` in Nadia's pairing drawer.
+ * @behaviour The mark, the title and the one line are centred; the open action fills the card's width under them, and the phone's code, as large as a phone scans from across a desk, comes next as the other way to open the same link. The installers are one row per computer, each with its mark, its name, its size and its download, so every row lines up whatever its words; the computer the reader is on carries the `suggested` badge. The installers show from `md` and the phone's code from `lg`, because a phone neither installs a computer's app nor scans its own screen. A link that holds no invite passes the title and the line alone.
+ * @words The title says what the person joins: *Join your company on Alveare*. The line says what happens and what to do if it does not. Each download is *Download*, named for its computer to assistive technology; the phone's line says what the code opens and how: *Open this invite on your phone*, *Point your phone's camera at the code*.
+ * @access The title is the page's level-1 heading and the installers a list under its own heading. The mark is decorative; the code is an image named by what it opens.
+ */
+function InviteCard({ mark, title, description, open, install, phone, }) {
+    return (_jsx(Card, { "data-slot": "invite-card", children: _jsxs(CardContent, { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [_jsx("img", { alt: "", "aria-hidden": "true", className: "h-10 w-auto", src: mark }), _jsx("h1", { className: "nc-type-heading-sm m-0", children: title }), _jsx("p", { className: "nc-type-body-md m-0 text-muted-foreground", children: description })] }), open ? (_jsx(ButtonLink, { className: "w-full", href: open.href, size: "lg", children: open.label })) : null, phone ? (_jsxs("div", { className: "hidden items-center gap-5 rounded-md border border-border p-4 lg:flex", children: [_jsx(QrCode, { className: "shrink-0", label: phone.label, size: QR_PX, value: phone.link }), _jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx("span", { className: "nc-type-body-md font-medium", children: phone.label }), _jsx("span", { className: "nc-type-body-sm text-muted-foreground", children: phone.how })] })] })) : null, install && install.installers.length > 0 ? (_jsxs("section", { "aria-labelledby": "invite-card-install", className: "hidden flex-col gap-2 md:flex", children: [_jsx("h2", { className: "nc-type-body-sm m-0 text-muted-foreground", id: "invite-card-install", children: install.label }), _jsx(ItemGroup, { className: "rounded-md border border-border", divided: true, render: _jsx("ul", {}), children: install.installers.map((installer) => (_jsxs(Item, { render: _jsx("li", {}), children: [_jsx(ItemMedia, { variant: "icon", children: _jsx(PlatformMark, { platform: installer.platform, size: 20 }) }), _jsxs(ItemContent, { children: [_jsxs(ItemTitle, { children: [installer.name, installer.suggested ? (_jsx(Badge, { size: "sm", variant: "outline", children: install.suggested })) : null] }), installer.size ? _jsx(ItemDescription, { children: installer.size }) : null] }), _jsx(ItemActions, { children: _jsxs(ButtonLink, { "aria-label": `${install.download} ${installer.name}`, href: installer.href, size: "sm", variant: "secondary", children: [_jsx(Download, { "aria-hidden": "true" }), install.download] }) })] }, installer.platform))) })] })) : null] }) }));
+}
+export { InviteCard };

package/dist/showcase/specimens/compositions.d.ts

@@ -6,6 +6,8 @@ declare function CollectionPageSpecimen(): import("react").JSX.Element;
 declare function CollectionToolbarSpecimen(): import("react").JSX.Element;
 declare function ConfirmDialogSpecimen(): import("react").JSX.Element;
 declare function EntrySceneSpecimen(): import("react").JSX.Element;
+declare function EntryPictureSpecimen(): import("react").JSX.Element;
+declare function InviteCardSpecimen(): import("react").JSX.Element;
 declare function FormDialogSpecimen(): import("react").JSX.Element;
 declare function FormDrawerSpecimen(): import("react").JSX.Element;
 declare function LibraryShelfSpecimen(): import("react").JSX.Element;
@@ -21,7 +23,9 @@ export declare const COMPOSITIONS: {
     CollectionPage: typeof CollectionPageSpecimen;
     CollectionToolbar: typeof CollectionToolbarSpecimen;
     ConfirmDialog: typeof ConfirmDialogSpecimen;
+    EntryPicture: typeof EntryPictureSpecimen;
     EntryScene: typeof EntrySceneSpecimen;
+    InviteCard: typeof InviteCardSpecimen;
     FormDialog: typeof FormDialogSpecimen;
     FormDrawer: typeof FormDrawerSpecimen;
     LibraryShelf: typeof LibraryShelfSpecimen;

package/dist/showcase/specimens/compositions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compositions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/compositions.tsx"],"names":[],"mappings":"AAoIA,iBAAS,oBAAoB,gCA+B5B;AAMD,iBAAS,wBAAwB,gCAahC;AAED,iBAAS,qBAAqB,gCA0B7B;AAED,iBAAS,yBAAyB,gCAGjC;AAED,iBAAS,sBAAsB,gCAyD9B;AAED,iBAAS,yBAAyB,gCAUjC;AAED,iBAAS,qBAAqB,gCAwC7B;AAED,iBAAS,kBAAkB,gCAiB1B;AAED,iBAAS,kBAAkB,gCAuE1B;AAED,iBAAS,kBAAkB,gCAwB1B;AAED,iBAAS,oBAAoB,gCAkD5B;AAED,iBAAS,oBAAoB,gCAqC5B;AAED,iBAAS,mBAAmB,gCA2B3B;AAED,iBAAS,mBAAmB,gCAoB3B;AAwBD,iBAAS,uBAAuB,gCAkD/B;AA+BD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;CA2FE,CAAC"}
+{"version":3,"file":"compositions.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/compositions.tsx"],"names":[],"mappings":"AAsIA,iBAAS,oBAAoB,gCA+B5B;AAMD,iBAAS,wBAAwB,gCAahC;AAED,iBAAS,qBAAqB,gCA0B7B;AAED,iBAAS,yBAAyB,gCAGjC;AAED,iBAAS,sBAAsB,gCAyD9B;AAED,iBAAS,yBAAyB,gCAUjC;AAED,iBAAS,qBAAqB,gCAwC7B;AAED,iBAAS,kBAAkB,gCAiB1B;AAED,iBAAS,oBAAoB,gCAS5B;AAED,iBAAS,kBAAkB,gCA0B1B;AAED,iBAAS,kBAAkB,gCAuE1B;AAED,iBAAS,kBAAkB,gCAwB1B;AAED,iBAAS,oBAAoB,gCAkD5B;AAED,iBAAS,oBAAoB,gCAqC5B;AAED,iBAAS,mBAAmB,gCA2B3B;AAED,iBAAS,mBAAmB,gCAoB3B;AAwBD,iBAAS,uBAAuB,gCAkD/B;AA+BD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;CA6FE,CAAC"}

package/dist/showcase/specimens/compositions.js

@@ -14,10 +14,12 @@ import { CollectionPage } from "../../components/collection-page.js";
 import { CollectionSearch } from "../../components/collection-search.js";
 import { CollectionToolbar } from "../../components/collection-toolbar.js";
 import { ConfirmDialog } from "../../components/confirm-dialog.js";
+import { EntryPicture } from "../../components/entry-picture.js";
 import { EntryAction, EntryActions, EntryMessage, EntryScene } from "../../components/entry-scene.js";
 import { FormDialog, FormDialogForm } from "../../components/form-dialog.js";
 import { FormDrawer, FormDrawerBody, FormDrawerFooter } from "../../components/form-drawer.js";
 import { Input } from "../../components/input.js";
+import { InviteCard } from "../../components/invite-card.js";
 import { LibraryShelf } from "../../components/library-shelf.js";
 import { NadiaPresence } from "../../components/nadia-presence.js";
 import { ObjectPage } from "../../components/object-page.js";
@@ -212,6 +214,28 @@ function EntrySceneSpecimen() {
     const art = useEmptyArt();
     return (_jsx("div", { className: "max-w-3xl overflow-hidden rounded-md", children: _jsxs(EntryScene, { picture: _jsx("img", { alt: "", className: "size-full object-cover", src: art.agents }), presence: _jsx(NadiaPresence, { label: "Nadia is ready", reveal: 1, state: "ready" }), title: "Nadia is ready", wordmark: _jsx(BrandWordmark, {}), children: [_jsx(EntryMessage, { children: "Sign in to bring your Agents to this computer." }), _jsx(EntryActions, { children: _jsx(EntryAction, { children: "Sign in" }) })] }) }));
 }
+function EntryPictureSpecimen() {
+    const art = useEmptyArt();
+    // A transform makes the box the picture's containing block, so it stands at this box's floor
+    // rather than the showcase window's.
+    return (_jsx("div", { className: "relative h-80 w-full overflow-hidden rounded-md border border-border [transform:translateZ(0)]", children: _jsx(EntryPicture, { column: "0rem", height: 1024, src: art.agents, width: 1024 }) }));
+}
+function InviteCardSpecimen() {
+    return (_jsx("div", { className: "max-w-130", children: _jsx(InviteCard, { description: "Alveare opens by itself with your invite. If it doesn't open, install it, then open the invite link again.", install: {
+                label: "Install Alveare",
+                download: "Download",
+                suggested: "Suggested",
+                installers: [
+                    { platform: "apple", name: "macOS", href: "#", size: "119 MB", suggested: true },
+                    { platform: "windows", name: "Windows", href: "#", size: "44 MB" },
+                    { platform: "linux", name: "Linux", href: "#", size: "133 MB" },
+                ],
+            }, mark: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='18' fill='%231e3cff'/%3E%3C/svg%3E", open: { label: "Open Alveare", href: "#" }, phone: {
+                link: "https://nadicode.ai/en/join",
+                label: "Open this invite on your phone",
+                how: "Point your phone's camera at the code.",
+            }, title: "Join your company on Alveare" }) }));
+}
 function FormDialogSpecimen() {
     const [open, setOpen] = useState(null);
     const [discardOpen, setDiscardOpen] = useState(false);
@@ -358,7 +382,9 @@ export const COMPOSITIONS = {
     CollectionPage: CollectionPageSpecimen,
     CollectionToolbar: CollectionToolbarSpecimen,
     ConfirmDialog: ConfirmDialogSpecimen,
+    EntryPicture: EntryPictureSpecimen,
     EntryScene: EntrySceneSpecimen,
+    InviteCard: InviteCardSpecimen,
     FormDialog: FormDialogSpecimen,
     FormDrawer: FormDrawerSpecimen,
     LibraryShelf: LibraryShelfSpecimen,

package/dist/showcase/specimens/index.d.ts

@@ -155,7 +155,9 @@ export declare const SPECIMENS: {
     CollectionPage: () => import("react").JSX.Element;
     CollectionToolbar: () => import("react").JSX.Element;
     ConfirmDialog: () => import("react").JSX.Element;
+    EntryPicture: () => import("react").JSX.Element;
     EntryScene: () => import("react").JSX.Element;
+    InviteCard: () => import("react").JSX.Element;
     FormDialog: () => import("react").JSX.Element;
     FormDrawer: () => import("react").JSX.Element;
     LibraryShelf: () => import("react").JSX.Element;

package/dist/showcase/specimens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/showcase/specimens/index.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAYiB,CAAC"}

package/dist/showcase/usage.generated.d.ts

@@ -1,4 +1,4 @@
-export type UsageName = "ActivityFeed" | "AgentProfileCard" | "CatalogDrawer" | "CollectionFilters" | "CollectionPage" | "CollectionToolbar" | "ConfirmDialog" | "EntryScene" | "FormDialog" | "FormDrawer" | "LibraryShelf" | "ObjectPage" | "ObjectSection" | "OverviewPage" | "PageHeader" | "RecordList" | "RecordSheet" | "RowEditForm" | "SettingsPage" | "SettingsSection" | "Button" | "ButtonGroup" | "ButtonLink" | "CopyButton" | "LoadMoreButton" | "PageActions" | "Calendar" | "ClearableInput" | "CollectionSearch" | "Field" | "Form" | "Input" | "InputGroup" | "InputOTP" | "Label" | "NativeSelect" | "SettingsField" | "SettingsRows" | "Slider" | "Textarea" | "Checkbox" | "ChoiceboxGroup" | "CollectionSort" | "Combobox" | "ModelSelect" | "MultiSelect" | "RadioGroup" | "SegmentedChoice" | "SegmentedControl" | "Select" | "Switch" | "ThemeModeSegments" | "ThemeModeSwitcher" | "Toggle" | "ToggleGroup" | "ActionStatus" | "AgentOrb" | "AppMark" | "ArchIcon" | "Avatar" | "Badge" | "BrandWordmark" | "CheckCounts" | "FileTypeIcon" | "IdentityMark" | "ModelIdentity" | "ModelMark" | "ObjectFactValue" | "PlatformMark" | "ProgressChecklist" | "RecordIdentity" | "StatusBadge" | "Tag" | "AgentListRow" | "Breadcrumb" | "CommandDialog" | "Footer" | "PortalSidebarFrame" | "ScopeSwitcher" | "Sidebar" | "SidebarBrand" | "SidebarFind" | "SidebarFrame" | "SidebarMenuChevron" | "SidebarSections" | "Tabs" | "TabsNav" | "textLinkVariants" | "AgentCard" | "Card" | "CardRow" | "CodeBlock" | "DataTable" | "DiffCount" | "DisclosureRow" | "FileDiff" | "Gauge" | "Item" | "Kbd" | "MiddleTruncate" | "ObjectFacts" | "PairingCode" | "Progress" | "QrCode" | "RecordTime" | "RunTimeline" | "SettingsFactsSection" | "Snippet" | "Table" | "TableCard" | "TableValue" | "TextWithCopyButton" | "UsageMeter" | "Alert" | "EmptyState" | "EntryProgress" | "EntryStageList" | "HoverCard" | "MessageNotice" | "NoticeBanner" | "PendingLabel" | "Skeleton" | "SkeletonRegion" | "Toaster" | "Tooltip" | "UpdateCard" | "WaitingLine" | "AccountMenu" | "ActionContextMenu" | "ActionMenu" | "AlertDialog" | "ContextMenu" | "Dialog" | "Drawer" | "DropdownMenu" | "GlassControl" | "MenuChoiceRow" | "Popover" | "Sheet" | "SiteMenu" | "ThemeModeMenu" | "ActivityCalendar" | "ChartAreaStacked" | "ChartBarHorizontal" | "ChartBarMultiple" | "ChartBarStacked" | "ChartCard" | "ChartContainer" | "ChartRanking" | "ChartSparkline" | "DateRangeControl" | "KpiCard" | "TrendBadge" | "createEntityColorMap" | "Accordion" | "AspectRatio" | "BrandField" | "Collapsible" | "CompanyCard" | "Disclosure" | "HiveScene" | "NadiaPresence" | "NumberedSteps" | "Prose" | "ReadingColumn" | "ResizablePanelGroup" | "ScrollArea" | "Separator" | "ToolIcon";
+export type UsageName = "ActivityFeed" | "AgentProfileCard" | "CatalogDrawer" | "CollectionFilters" | "CollectionPage" | "CollectionToolbar" | "ConfirmDialog" | "EntryPicture" | "EntryScene" | "FormDialog" | "FormDrawer" | "InviteCard" | "LibraryShelf" | "ObjectPage" | "ObjectSection" | "OverviewPage" | "PageHeader" | "RecordList" | "RecordSheet" | "RowEditForm" | "SettingsPage" | "SettingsSection" | "Button" | "ButtonGroup" | "ButtonLink" | "CopyButton" | "LoadMoreButton" | "PageActions" | "Calendar" | "ClearableInput" | "CollectionSearch" | "Field" | "Form" | "Input" | "InputGroup" | "InputOTP" | "Label" | "NativeSelect" | "SettingsField" | "SettingsRows" | "Slider" | "Textarea" | "Checkbox" | "ChoiceboxGroup" | "CollectionSort" | "Combobox" | "ModelSelect" | "MultiSelect" | "RadioGroup" | "SegmentedChoice" | "SegmentedControl" | "Select" | "Switch" | "ThemeModeSegments" | "ThemeModeSwitcher" | "Toggle" | "ToggleGroup" | "ActionStatus" | "AgentOrb" | "AppMark" | "ArchIcon" | "Avatar" | "Badge" | "BrandWordmark" | "CheckCounts" | "FileTypeIcon" | "IdentityMark" | "ModelIdentity" | "ModelMark" | "ObjectFactValue" | "PlatformMark" | "ProgressChecklist" | "RecordIdentity" | "StatusBadge" | "Tag" | "AgentListRow" | "Breadcrumb" | "CommandDialog" | "Footer" | "PortalSidebarFrame" | "ScopeSwitcher" | "Sidebar" | "SidebarBrand" | "SidebarFind" | "SidebarFrame" | "SidebarMenuChevron" | "SidebarSections" | "Tabs" | "TabsNav" | "textLinkVariants" | "AgentCard" | "Card" | "CardRow" | "CodeBlock" | "DataTable" | "DiffCount" | "DisclosureRow" | "FileDiff" | "Gauge" | "Item" | "Kbd" | "MiddleTruncate" | "ObjectFacts" | "PairingCode" | "Progress" | "QrCode" | "RecordTime" | "RunTimeline" | "SettingsFactsSection" | "Snippet" | "Table" | "TableCard" | "TableValue" | "TextWithCopyButton" | "UsageMeter" | "Alert" | "EmptyState" | "EntryProgress" | "EntryStageList" | "HoverCard" | "MessageNotice" | "NoticeBanner" | "PendingLabel" | "Skeleton" | "SkeletonRegion" | "Toaster" | "Tooltip" | "UpdateCard" | "WaitingLine" | "AccountMenu" | "ActionContextMenu" | "ActionMenu" | "AlertDialog" | "ContextMenu" | "Dialog" | "Drawer" | "DropdownMenu" | "GlassControl" | "MenuChoiceRow" | "Popover" | "Sheet" | "SiteMenu" | "ThemeModeMenu" | "ActivityCalendar" | "ChartAreaStacked" | "ChartBarHorizontal" | "ChartBarMultiple" | "ChartBarStacked" | "ChartCard" | "ChartContainer" | "ChartRanking" | "ChartSparkline" | "DateRangeControl" | "KpiCard" | "TrendBadge" | "createEntityColorMap" | "Accordion" | "AspectRatio" | "BrandField" | "Collapsible" | "CompanyCard" | "Disclosure" | "HiveScene" | "NadiaPresence" | "NumberedSteps" | "Prose" | "ReadingColumn" | "ResizablePanelGroup" | "ScrollArea" | "Separator" | "ToolIcon";
 export type UsageFamily = "Compositions" | "Actions" | "Inputs" | "Choices" | "Status" | "Navigation" | "Data" | "Feedback" | "Menus" | "Charts" | "Other";
 export type ComponentUsage = {
     name: UsageName;

package/dist/showcase/usage.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"usage.generated.d.ts","sourceRoot":"","sources":["../../src/showcase/usage.generated.ts"],"names":[],"mappings":"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"}

package/dist/showcase/usage.generated.js

@@ -91,6 +91,17 @@ export const USAGE = [
         words: '"`title` is Title Case, `Verb + Noun`, a statement — never a question. `Delete Project`, not `Delete this project?`." (https://vercel.com/geist/destructive-action-modal) "`description` is sentence case, names the consequence, and interpolates the specific resource when relevant. `<b>my-project</b> and all its deployments will be permanently deleted.` reads stronger than `This project and all its deployments will be deleted.`." (https://vercel.com/geist/destructive-action-modal) "`confirmLabel` matches the title 1:1. Never generic (`Confirm`, `OK`, `Continue`), never a bare verb (`Delete`)." (https://vercel.com/geist/destructive-action-modal) "`cancelLabel` defaults to `Cancel`. Override when Cancel is ambiguous, such as `Keep Turn Running` when the primary action is itself a cancellation." (https://vercel.com/geist/destructive-action-modal) "`verificationPhrase`: for entity deletes, type the **resource name itself** (`my-project`) and pair with `verificationLabel="project name"` so the prompt reads `To confirm, type the project name "my-project"`. That\'s the canonical signal that the user knows which thing they\'re acting on. Fall back to a lowercase verb phrase (`disable vercel authentication`) only when there\'s no entity to name." (https://vercel.com/geist/destructive-action-modal) "`irreversibleDescription` names the specific action and resource and ends with `cannot be undone.` — `Deleting my-project cannot be undone.` rather than the generic `This cannot be undone.`. Omit the prop entirely for reversible actions; the prop\'s absence is the signal, not a falsy value." (https://vercel.com/geist/destructive-action-modal) "`error` surfaces the API failure verbatim in Vercel voice: `Couldn\'t save settings. Try again.`. Never dump a raw error object." (https://vercel.com/geist/destructive-action-modal) "Pair the post-confirm success toast verb 1:1 with the primary button: `Delete Project` button, `Project deleted` toast. Never `Project removed`." (https://vercel.com/geist/destructive-action-modal) "Close irreversible bodies with `This cannot be undone.`; close cascade-only bodies with `Some effects cannot be undone.`. Don’t claim full irreversibility for a partial cascade." (https://vercel.com/geist/modal) Ours: the title is sentence case and names the record, "Remove pec@acme.it", and the confirm repeats the verb and the noun, "Remove mailbox", so the two share a verb and not every word; its success toast uses the same verb ("Mailbox removed"). The description names the record in medium weight.',
         access: '"The verification input is associated with its prompt via `aria-labelledby` + `htmlFor`. Screen readers announce the full prompt (`To confirm, type "delete my-project"`) on focus." (https://vercel.com/geist/destructive-action-modal) "The Warning icon in the irreversibility band is `aria-hidden`; the sentence carries the meaning so nothing is announced twice." (https://vercel.com/geist/destructive-action-modal) "Focus stays inside the modal across an `error` transition so the user can retry without losing context. After success, return focus to the trigger." (https://vercel.com/geist/destructive-action-modal) "Set `aria-labelledby` to the `Modal.Title` id so screen readers announce the title on open." (https://vercel.com/geist/modal) "Keep the Cancel button literally `Cancel` so screen-reader users hear a stable dismissal label across destructive flows." (https://vercel.com/geist/modal) Ours: `role="alertdialog"` named by its title and described by its consequence; the note is `role="note"` with its icon hidden. Focus starts on Cancel, or in the field with `verify`.',
     },
+    {
+        name: "EntryPicture",
+        module: "entry-picture",
+        family: "Compositions",
+        summary: "The art-directed cut-out an entry page stands beside its centred column.",
+        when: "A whole-page moment with a picture, at the window's left edge: a sign-in handed to Nadia, an invitation, an invite to a company's Alveare.",
+        instead: "A failure page centres its picture above the words (\"Failure surfaces\"). A first use's picture is `EmptyState`'s. Nadia's desktop entry screens are `EntryScene` and Alveare's are `HiveScene`.",
+        behaviour: "One whole cut-out fixed to the window's floor at the left edge, so a page taller than the window never cuts its feet. It keeps its own shape and is never wider than half its pixels, the width it stays sharp at on a DPR 2 screen, nor than the room left of the centred `column`, nor taller than 85 % of the window. It shows only from `lg`: below, the task keeps the screen and the browser does not fetch it. A page draws it only in the state the picture is about, so a page that cannot go on never shows one welcoming the person.",
+        words: "None: the picture carries no caption.",
+        access: "Decorative and inert: hidden from assistive technology, never focused or clicked.",
+    },
     {
         name: "EntryScene",
         module: "entry-scene",
@@ -124,6 +135,17 @@ export const USAGE = [
         words: '"Title is Title Case and names the entity (`Deployment Details`, `Member Profile`), not the page action." (https://vercel.com/geist/sheet) "Body is read-mostly: sentence case prose with Title Case sub-headings. Action buttons are optional; when present, follow `Verb + Noun`." (https://vercel.com/geist/sheet) Ours: the title is sentence case and names the job and its object: "Connect Telegram", "Add a skill". The step reads "Step N of M". The primary says what it does: "Connect", "Continue", never "OK".',
         access: '"Trap focus inside the sheet while it’s open and return focus to the trigger row on close so keyboard users keep their place in the list." (https://vercel.com/geist/sheet) "Provide a visible close button labeled `Close` (or an icon button with `aria-label="Close"`) since clicking outside doesn’t dismiss." (https://vercel.com/geist/sheet) "Announce the sheet with `aria-labelledby` pointing at the title; pair it with `aria-describedby` only when the body is short and load-bearing." (https://vercel.com/geist/sheet) Ours: a modal dialog named by its title; focus returns to the opener on close, or to `finalFocus` when the opener is gone. The step is read before the title.',
     },
+    {
+        name: "InviteCard",
+        module: "invite-card",
+        family: "Compositions",
+        summary: "A link that opens an app: the app's mark, the invite's words, the action that opens it, the installers for a computer without the app, and the code that opens the same link on a phone.",
+        when: "The page an invite link opens: Alveare's invite to a company. It stands centred on an entry page, with `EntryPicture` at the window's left edge.",
+        instead: "An invitation to a role the person accepts in the Portal is the Portal's invitation card. Downloads with formats and steps is the Portal's Downloads page. A code the phone takes to sign in is `QrCode` in Nadia's pairing drawer.",
+        behaviour: "The mark, the title and the one line are centred; the open action fills the card's width under them, and the phone's code, as large as a phone scans from across a desk, comes next as the other way to open the same link. The installers are one row per computer, each with its mark, its name, its size and its download, so every row lines up whatever its words; the computer the reader is on carries the `suggested` badge. The installers show from `md` and the phone's code from `lg`, because a phone neither installs a computer's app nor scans its own screen. A link that holds no invite passes the title and the line alone.",
+        words: "The title says what the person joins: *Join your company on Alveare*. The line says what happens and what to do if it does not. Each download is *Download*, named for its computer to assistive technology; the phone's line says what the code opens and how: *Open this invite on your phone*, *Point your phone's camera at the code*.",
+        access: "The title is the page's level-1 heading and the installers a list under its own heading. The mark is decorative; the code is an image named by what it opens.",
+    },
     {
         name: "LibraryShelf",
         module: "library-shelf",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/ui",
-  "version": "12.1.169",
+  "version": "12.1.171",
   "type": "module",
   "imports": {
     "#jsx": "./src/jsx/index.ts",
@@ -72,7 +72,7 @@
     "@base-ui/react": "^1.9.0",
     "@iconify-icons/logos": "^2.0.3",
     "@iconify/react": "^6.0.2",
-    "@nadicodeai/design-system": "12.1.169",
+    "@nadicodeai/design-system": "12.1.171",
     "@tanstack/react-table": "^9.3.1",
     "@vgpu/wgsl": "0.6.0",
     "class-variance-authority": "^0.7.1",