@nadicodeai/ui 12.1.102 → 12.1.104

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

@@ -1,21 +1,79 @@
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import { type ButtonLinkProps } from "./button.js";
+import type { PresentContent } from "../internal/present-content.js";
 /**
- * A preview of a few facts about something named in a dense row.
+ * A card of a few facts about something named in a dense row, shown on hover or focus.
  *
  * @family Feedback
- * @when A preview of a few facts about something named in a dense row: the exact moment behind a
- * relative time, a record's summary.
- * @instead For one phrase use `Tooltip`. For anything to edit or keep open use a `Sheet` or the
- * record's page. Never the only way to an action.
- * @behaviour Opens on hover and on focus, below by default, 4 px off; stays while the pointer is on
- * it. Solid floating surface, 12 px padding.
- * @words Facts, not prose: the date in words, the time with its zone, the machine timestamp. The
- * trigger keeps its verb sentence: *Updated 3 hours ago*.
- * @access The trigger is a real element with its own name (a `time` with its `datetime` for a
- * moment), so the facts never depend on hover. Keyboard opening is tested, not assumed.
+ * @when "Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a
+ * project, an API key." "The trigger is usually a name link or avatar in dense data."
+ * (https://vercel.com/geist/context-card)
+ * Ours: `Context Card` is `HoverCard`. The exact moment behind a relative time is also a card. An
+ * entity's card is a `HoverCardSummary`.
+ * @instead "For a one-line "why" without metadata rows, use `Tooltip`." "For long-form content, edit
+ * forms, or persistent navigation, route to a `Drawer` or a detail page." "Don’t use Context Card to
+ * surface destructive actions; the panel can dismiss on cursor exit before the user commits." "Don’t
+ * nest a Context Card inside a Tooltip or another Context Card; the second layer steals focus and
+ * traps keyboard users." (https://vercel.com/geist/context-card)
+ * Ours: `Drawer` is `Sheet`. A card is never the only way to an action.
+ * @behaviour "Context Card opens on hover and keyboard focus and closes on cursor exit or blur."
+ * "Preserve the ~150ms entry delay so it doesn’t flash on a fast mouse sweep." "Cap interactive
+ * content at one primary action (`View Project`, `Open Settings`)." "More than one CTA reads as a
+ * menu and belongs in `Menu`." "Use `align` to position the card at the start, center, or end of the
+ * trigger." "Use `render` to set the trigger as a custom element, such as a link, button, or badge."
+ * (https://vercel.com/geist/context-card)
+ * Ours: the card stays open while the pointer is on it and opens above by default with a stem
+ * pointing at the trigger. `HoverCardContent` requires its facts as children. Colour: one neutral
+ * surface with no hue; the only accent a card carries is its link, in the outline button.
+ * @words "Lead with the entity name as a Title Case heading and one identifying line in sentence
+ * case underneath (team slug, owner, deployment URL)." "Follow with 2–4 metadata rows of `Label:
+ * value`." "Keys are Title Case noun phrases (`Last Active`, `Created`, `Plan`); values follow the
+ * same formatting rules as table cells." "Use the em-dash character `—` for unknown values, never
+ * `N/A` or `null`." "Don’t restate what the trigger already showed." "If the row already renders the
+ * deployment URL, don’t repeat it as the first card line." (https://vercel.com/geist/context-card)
+ * Ours: the name and the keys are in sentence case (*Last active*). A time's card leads with the
+ * relative label, and its trigger keeps its verb sentence: *Updated 3 hours ago*.
+ * @access "The trigger keeps its own accessible name; the card is supplementary and shouldn’t
+ * replace it." "Card content is reachable by keyboard once the trigger has focus; Escape closes the
+ * card and returns focus to the trigger." (https://vercel.com/geist/context-card)
+ * Ours: the trigger is a real element (a `time` with its `datetime` for a moment), so the facts
+ * never depend on hover. Keyboard opening is tested, not assumed.
  */
 declare function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props): import("react").JSX.Element;
-declare function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props): import("react").JSX.Element;
-declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, ...props }: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+declare function HoverCardTrigger({ delay, ...props }: PreviewCardPrimitive.Trigger.Props): import("react").JSX.Element;
+declare function HoverCardContent({ className, side, sideOffset, align, alignOffset, children, ...props }: PreviewCardPrimitive.Popup.Props & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset"> & {
+    /** The facts of the card; a card without any does not compile. */
+    children: PresentContent;
+}): import("react").JSX.Element;
+export type HoverCardFact = {
+    label: string;
+    /** `null` is a value not known: drawn as a dash that `missingLabel` names to a screen reader. */
+    value: string | null;
+};
+type HoverCardFacts = readonly [HoverCardFact, HoverCardFact] | readonly [HoverCardFact, HoverCardFact, HoverCardFact] | readonly [HoverCardFact, HoverCardFact, HoverCardFact, HoverCardFact];
+export type HoverCardSummaryProps = Omit<React.ComponentProps<"div">, "children"> & {
+    /** The entity's name. */
+    name: string;
+    /** The one line that identifies it, such as a team slug, an owner or a URL. */
+    detail: string;
+    /** Two to four label and value rows. */
+    facts: HoverCardFacts;
+    /** What an unknown value means, read to a screen reader behind its dash: "Not reported". */
+    missingLabel: string;
+    /**
+     * The one way onward, a link, so it can never be destructive. `render` is the product's router
+     * link, so the card navigates without a page reload.
+     */
+    action?: {
+        label: string;
+        href: string;
+        render?: ButtonLinkProps["render"];
+    };
+};
+/**
+ * The content of a `HoverCardContent` that previews an entity: its name, the line that identifies
+ * it, two to four facts and at most one link.
+ */
+declare function HoverCardSummary({ name, detail, facts, missingLabel, action, className, ...props }: HoverCardSummaryProps): import("react").JSX.Element;
+export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardSummary };
 //# sourceMappingURL=hover-card.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../src/components/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAKlF;;;;;;;;;;;;;;GAcG;AACH,iBAAS,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,+BAE/D;AAED,iBAAS,gBAAgB,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,+BAEzE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,GACjC,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,+BAuB7F;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../src/components/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGlF,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEvE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAMjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,+BAE/D;AAED,iBAAS,gBAAgB,CAAC,EACxB,KAAwB,EACxB,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,OAAO,CAAC,KAAK,+BAEpC;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAY,EACZ,UAAe,EACf,KAAgB,EAChB,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,KAAK,CAAC,KAAK,GACjC,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,CAAC,GAAG;IAC7F,kEAAkE;IAClE,QAAQ,EAAE,cAAc,CAAC;CAC1B,+BAyBF;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,iGAAiG;IACjG,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,cAAc,GACf,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC,GACvC,SAAS,CAAC,aAAa,EAAE,aAAa,EAAE,aAAa,CAAC,GACtD,SAAS,CAAC,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC;AAE1E,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAClF,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,KAAK,EAAE,cAAc,CAAC;IACtB,4FAA4F;IAC5F,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;KAAE,CAAC;CAC9E,CAAC;AAEF;;;GAGG;AACH,iBAAS,gBAAgB,CAAC,EACxB,IAAI,EACJ,MAAM,EACN,KAAK,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,+BA8BvB;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/components/hover-card.js

@@ -1,30 +1,64 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card";
+import { Fragment } from "react";
+import { ButtonLink } from "./button.js";
+import { TableValue } from "./table-value.js";
 import { anchoredOverlayMotion } from "../lib/motion.js";
 import { cn } from "../lib/utils.js";
+const HOVER_CARD_DELAY = 150;
 /**
- * A preview of a few facts about something named in a dense row.
+ * A card of a few facts about something named in a dense row, shown on hover or focus.
  *
  * @family Feedback
- * @when A preview of a few facts about something named in a dense row: the exact moment behind a
- * relative time, a record's summary.
- * @instead For one phrase use `Tooltip`. For anything to edit or keep open use a `Sheet` or the
- * record's page. Never the only way to an action.
- * @behaviour Opens on hover and on focus, below by default, 4 px off; stays while the pointer is on
- * it. Solid floating surface, 12 px padding.
- * @words Facts, not prose: the date in words, the time with its zone, the machine timestamp. The
- * trigger keeps its verb sentence: *Updated 3 hours ago*.
- * @access The trigger is a real element with its own name (a `time` with its `datetime` for a
- * moment), so the facts never depend on hover. Keyboard opening is tested, not assumed.
+ * @when "Use Context Card to reveal entity metadata on hover or focus: a user, a deployment, a
+ * project, an API key." "The trigger is usually a name link or avatar in dense data."
+ * (https://vercel.com/geist/context-card)
+ * Ours: `Context Card` is `HoverCard`. The exact moment behind a relative time is also a card. An
+ * entity's card is a `HoverCardSummary`.
+ * @instead "For a one-line "why" without metadata rows, use `Tooltip`." "For long-form content, edit
+ * forms, or persistent navigation, route to a `Drawer` or a detail page." "Don’t use Context Card to
+ * surface destructive actions; the panel can dismiss on cursor exit before the user commits." "Don’t
+ * nest a Context Card inside a Tooltip or another Context Card; the second layer steals focus and
+ * traps keyboard users." (https://vercel.com/geist/context-card)
+ * Ours: `Drawer` is `Sheet`. A card is never the only way to an action.
+ * @behaviour "Context Card opens on hover and keyboard focus and closes on cursor exit or blur."
+ * "Preserve the ~150ms entry delay so it doesn’t flash on a fast mouse sweep." "Cap interactive
+ * content at one primary action (`View Project`, `Open Settings`)." "More than one CTA reads as a
+ * menu and belongs in `Menu`." "Use `align` to position the card at the start, center, or end of the
+ * trigger." "Use `render` to set the trigger as a custom element, such as a link, button, or badge."
+ * (https://vercel.com/geist/context-card)
+ * Ours: the card stays open while the pointer is on it and opens above by default with a stem
+ * pointing at the trigger. `HoverCardContent` requires its facts as children. Colour: one neutral
+ * surface with no hue; the only accent a card carries is its link, in the outline button.
+ * @words "Lead with the entity name as a Title Case heading and one identifying line in sentence
+ * case underneath (team slug, owner, deployment URL)." "Follow with 2–4 metadata rows of `Label:
+ * value`." "Keys are Title Case noun phrases (`Last Active`, `Created`, `Plan`); values follow the
+ * same formatting rules as table cells." "Use the em-dash character `—` for unknown values, never
+ * `N/A` or `null`." "Don’t restate what the trigger already showed." "If the row already renders the
+ * deployment URL, don’t repeat it as the first card line." (https://vercel.com/geist/context-card)
+ * Ours: the name and the keys are in sentence case (*Last active*). A time's card leads with the
+ * relative label, and its trigger keeps its verb sentence: *Updated 3 hours ago*.
+ * @access "The trigger keeps its own accessible name; the card is supplementary and shouldn’t
+ * replace it." "Card content is reachable by keyboard once the trigger has focus; Escape closes the
+ * card and returns focus to the trigger." (https://vercel.com/geist/context-card)
+ * Ours: the trigger is a real element (a `time` with its `datetime` for a moment), so the facts
+ * never depend on hover. Keyboard opening is tested, not assumed.
  */
 function HoverCard({ ...props }) {
     return _jsx(PreviewCardPrimitive.Root, { "data-slot": "hover-card", ...props });
 }
-function HoverCardTrigger({ ...props }) {
-    return _jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props });
+function HoverCardTrigger({ delay = HOVER_CARD_DELAY, ...props }) {
+    return _jsx(PreviewCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", delay: delay, ...props });
 }
-function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
-    return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn("pointer-events-auto", "z-50 w-64 rounded-lg border-0 bg-popover p-control-padding-inline text-sm text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props }) }) }));
+function HoverCardContent({ className, side = "top", sideOffset = 14, align = "center", alignOffset = 0, children, ...props }) {
+    return (_jsx(PreviewCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(PreviewCardPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: _jsx(PreviewCardPrimitive.Popup, { "data-slot": "hover-card-content", className: cn("pointer-events-auto", "z-50 w-fit max-w-max rounded-sm border-0 bg-popover p-control-padding-inline text-body-md text-popover-foreground nc-elevation-floating outline-hidden", anchoredOverlayMotion, className), ...props, children: children }) }) }));
 }
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+/**
+ * The content of a `HoverCardContent` that previews an entity: its name, the line that identifies
+ * it, two to four facts and at most one link.
+ */
+function HoverCardSummary({ name, detail, facts, missingLabel, action, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "hover-card-summary", className: cn("grid gap-3", className), ...props, children: [_jsxs("div", { className: "grid gap-0.5", children: [_jsx("p", { className: "text-heading-compact", children: name }), _jsx("p", { className: "text-body-sm text-muted-foreground", children: detail })] }), _jsx("dl", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-body-sm", children: facts.map((fact) => (_jsxs(Fragment, { children: [_jsx("dt", { className: "text-muted-foreground", children: fact.label }), _jsx("dd", { className: "min-w-0 break-words", children: _jsx(TableValue, { missingLabel: missingLabel, value: fact.value }) })] }, fact.label))) }), action ? (_jsx(ButtonLink, { href: action.href, render: action.render, size: "sm", variant: "outline", className: "justify-self-start", children: action.label })) : null] }));
+}
+export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardSummary };

package/dist/components/identity-mark.d.ts

@@ -28,6 +28,11 @@ export type IdentityMarkProps = {
 } & AppMarkGlyph) | {
     kind: "company";
     name: string;
+    /**
+     * The company's logo: the white ink Sofia kept from its site, drawn on a dark tile in every
+     * theme, or a square icon in its own colours (an SVG tile), which fills the tile as it is.
+     */
+    logo?: string;
 } | {
     kind: "person";
     name: string;
@@ -38,6 +43,8 @@ export type IdentityMarkProps = {
     icon: IconComponent;
     /** A catalogue kind's ground; neutral is the ringed card ground. */
     tone?: "neutral" | "skill" | "plugin" | "teal";
+    /** The record's own object picture, a transparent image drawn on its kind's ground in place of the icon. */
+    picture?: string;
 });
 /**
  * What says which thing a record is, at a fixed size at the start of its row,
@@ -47,7 +54,7 @@ export type IdentityMarkProps = {
  * @family Status
  * @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): wherever it tells a person which thing they are looking at.
  * @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`.
- * @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her orb from the orb engine, 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 on the white tile; a company is two initials on the ringed card tile; a person is their picture, then their initials; a record with no picture of its own takes its kind's navigation icon, on the purple ground for a skill and the blue one for a plugin.
+ * @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her orb from the orb engine, 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 on the white tile; a company is its logo: the one white ink Sofia kept from its site on a black tile in both themes, as the company's card stamps it, or a square SVG icon in its own colours filling the tile, as Vercel shows a project's favicon; its two initials on the ringed card tile until a logo is found, or when the stored logo does not load; a person is their picture, then their initials; 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 navigation icon, on the purple ground for a skill and the blue one for a plugin.
  * @words None of its own: the record's name stands beside it. Initials are the first letters of the name's first two words.
  * @access Decorative beside the record's name. Alone, as in a narrow rail, `label` names it.
  */

package/dist/components/identity-mark.d.ts.map

@@ -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;AAInE,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;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACjC;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;CAChD,CACJ,CAAC;AAqEF;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAoDhE"}
+{"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;AAKnE,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;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,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;AA6FF;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAyEhE"}

package/dist/components/identity-mark.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AgentOrb, } from "./agent-orb.js";
 import { AppMark } from "./app-mark.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
+import { CompanyLogo } from "../internal/company-logo.js";
 import { cn } from "../lib/utils.js";
 const MEASURES = {
     20: { orb: 20, icon: 12, initials: 8 },
@@ -17,6 +18,26 @@ const TONES = {
     plugin: "bg-info-soft text-info-soft-foreground",
     teal: "bg-category-teal text-category-teal-foreground",
 };
+const SVG_DATA = "data:image/svg+xml";
+/**
+ * Whether the logo is a square icon in its own colours: an SVG data URL whose box is square. The
+ * logos Sofia keeps are a raster white ink, never SVG, so everything else is ink for the dark tile.
+ */
+function logoIsColourTile(logo) {
+    if (!logo.startsWith(SVG_DATA))
+        return false;
+    const comma = logo.indexOf(",");
+    let svg;
+    try {
+        const body = logo.slice(comma + 1);
+        svg = logo.slice(0, comma).endsWith(";base64") ? atob(body) : decodeURIComponent(body);
+    }
+    catch {
+        return false;
+    }
+    const box = /viewBox\s*=\s*["']\s*[-\d.]+[\s,]+[-\d.]+[\s,]+([\d.]+)[\s,]+([\d.]+)/i.exec(svg);
+    return box !== null && box[1] === box[2];
+}
 function identityInitials(name) {
     return name
         .split(/\s+/)
@@ -31,6 +52,9 @@ function naming(label) {
         ? { role: "img", "aria-label": label }
         : { "aria-hidden": true };
 }
+function avatarName(label) {
+    return label ? { label } : { decorative: true };
+}
 function Tile({ kind, label, size, tone, children, }) {
     return (_jsx("span", { className: cn("inline-flex shrink-0 items-center justify-center", size >= 40 ? "rounded-md" : "rounded-sm", TONES[tone]), "data-kind": kind, "data-slot": "identity-mark", style: { width: size, height: size }, ...naming(label), children: children }));
 }
@@ -42,7 +66,7 @@ function Tile({ kind, label, size, tone, children, }) {
  * @family Status
  * @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): wherever it tells a person which thing they are looking at.
  * @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`.
- * @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her orb from the orb engine, 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 on the white tile; a company is two initials on the ringed card tile; a person is their picture, then their initials; a record with no picture of its own takes its kind's navigation icon, on the purple ground for a skill and the blue one for a plugin.
+ * @behaviour Static, except an Agent's orb, which moves with her state. An Agent is always her orb from the orb engine, 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 on the white tile; a company is its logo: the one white ink Sofia kept from its site on a black tile in both themes, as the company's card stamps it, or a square SVG icon in its own colours filling the tile, as Vercel shows a project's favicon; its two initials on the ringed card tile until a logo is found, or when the stored logo does not load; a person is their picture, then their initials; 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 navigation icon, on the purple ground for a skill and the blue one for a plugin.
  * @words None of its own: the record's name stands beside it. Initials are the first letters of the name's first two words.
  * @access Decorative beside the record's name. Alone, as in a narrow rail, `label` names it.
  */
@@ -57,10 +81,12 @@ export function IdentityMark(props) {
         case "app":
             return props.platform ? (_jsx(AppMark, { app: props.app, label: props.label, platform: props.platform, size: size })) : (_jsx(AppMark, { app: props.app, label: props.label, logo: props.logo, size: size }));
         case "person":
-            return (_jsxs(Avatar, { "data-kind": "person", "data-slot": "identity-mark", style: { width: size, height: size }, ...naming(props.label), children: [props.image ? _jsx(AvatarImage, { alt: "", src: props.image }) : null, _jsx(AvatarFallback, { style: { fontSize: measures.initials }, children: identityInitials(props.name) })] }));
-        case "company":
-            return (_jsx(Tile, { kind: "company", label: props.label, size: size, tone: "neutral", children: _jsx("span", { "aria-hidden": "true", className: "leading-none font-semibold", style: { fontSize: measures.initials }, children: identityInitials(props.name) }) }));
+            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: identityInitials(props.name) })] }));
+        case "company": {
+            const initials = (_jsx(Tile, { kind: "company", label: props.label, size: size, tone: "neutral", children: _jsx("span", { "aria-hidden": "true", className: "leading-none font-semibold", style: { fontSize: measures.initials }, children: identityInitials(props.name) }) }));
+            return props.logo ? (_jsx(CompanyLogo, { colourTile: logoIsColourTile(props.logo), fallback: initials, logo: props.logo, naming: naming(props.label), size: size })) : (initials);
+        }
         case "record":
-            return (_jsx(Tile, { kind: "record", label: props.label, size: size, tone: props.tone ?? "neutral", children: _jsx(props.icon, { "aria-hidden": "true", size: measures.icon }) }));
+            return (_jsx(Tile, { kind: "record", 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 })) }));
     }
 }

package/dist/components/input-group.d.ts

@@ -1,35 +1,58 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-import { Button } from "./button.js";
+import { type AccessibleName, type TextButtonProps } from "./button.js";
+import { InputBox, type FieldSize } from "../internal/input-box.js";
 /**
  * One input box with something fixed inside it: a mark, a prefix, a button.
  *
  * @family Inputs
- * @when A single-line value with something fixed inside the box: a search mark, a clear button, a
- * prefix like *https://*, a copy button.
- * @instead A collection's search is `CollectionSearch`, never a hand-built group. A plain value is
- * `Input`. Many known values to filter is `Combobox`.
- * @behaviour The group draws the edge and the focus outline for the input inside it. The clear
- * button empties the value and puts focus back in the box. Escape clears only while the box holds
- * the interaction and has a value; otherwise it closes the overlay as usual.
+ * @when A single-line value with a button inside the box: a copy button, a block addon, a textarea
+ * with a toolbar, a server-given value (a project ID) shown read-only in mono beside its copy
+ * button, with no Save.
+ * @instead A prefix or suffix of text or an icon (*https://*, *.com*), in a cell or plain, is the
+ * `prefix`, `suffix` and `look` props of `Input`. A value that clears itself is `ClearableInput`; a
+ * collection's search is `CollectionSearch`, never a hand-built group. Many known values to filter
+ * is `Combobox`.
+ * @behaviour The group draws the edge and the focus halo for the input inside it, so the ring
+ * wraps the addons too, and takes the sizes of `Input`: the input follows the group's. An addon is
+ * a `segment` (a filled cell with a divider, the look of `Input`'s prefix and suffix) or `plain`
+ * (a mark on the box's own fill, flush against the text). An icon button in an addon fills the
+ * row, sits flush against the edge, is muted until hovered and never fills on hover or press.
+ * A disabled input steps the whole group down in fill and text, never in opacity, an icon button
+ * included; a button in an addon that is held, such as a send button waiting for text, leaves the
+ * box as it is.
+ * Colour sits where it does on `Input`: only an error reddens the ring; a suffix reads in the text
+ * colour in both looks, a prefix in the muted grey. `rounded` makes the group a pill. The group's own
+ * `size` is the only place a size is set.
  * @words Prefix and suffix are literal text, never the label. An inline button names what it does:
- * *Clear search*, *Copy address*.
- * @access `role="group"` around the box. The input inside keeps its own label. Inline buttons are
- * named: *Clear search*, *Copy address*.
+ * *Copy address*.
+ * @access `role="group"` around the box. The input inside is named by `aria-label` or
+ * `aria-labelledby`. "For icon-only affordances inside a row of inputs, use `<Button shape="circle"
+ * svgOnly aria-label="…">` rather than an unlabeled icon." (https://vercel.com/geist/input) Ours:
+ * an inline button carries its `aria-label`.
  */
-declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function InputGroup({ className, size, rounded, ...props }: React.ComponentProps<"div"> & {
+    size?: FieldSize;
+    /** A pill: the box and its cells take the full corner. */
+    rounded?: boolean;
+}): React.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+    look?: "plain" | "segment" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
-declare const inputGroupButtonVariants: (props?: ({
-    size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size" | "type"> & VariantProps<typeof inputGroupButtonVariants> & {
+declare function InputGroupAddon({ className, align, look, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+type InputGroupButtonBase = Omit<TextButtonProps, "size" | "type" | "loading" | "loadingLabel"> & {
     type?: "button" | "submit" | "reset";
-}): React.JSX.Element;
+};
+type InputGroupButtonProps = (InputGroupButtonBase & {
+    size?: "xs" | "sm";
+}) | (Omit<InputGroupButtonBase, "prefix" | "suffix"> & AccessibleName & {
+    size: "icon";
+});
+declare function InputGroupButton({ className, type, variant, size, ...props }: InputGroupButtonProps): React.JSX.Element;
 declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
-declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
-declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
+declare function InputGroupControl({ className, ...props }: Omit<React.ComponentProps<typeof InputBox>, "size">): React.JSX.Element;
+declare function InputGroupInput(props: React.ComponentProps<typeof InputGroupControl> & AccessibleName): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea"> & AccessibleName): React.JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupControl, InputGroupInput, InputGroupTextarea, };
 //# sourceMappingURL=input-group.d.ts.map

package/dist/components/input-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/components/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAI7C;;;;;;;;;;;;;;;GAeG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAYvE;AAED,QAAA,MAAM,uBAAuB;;8EAiB5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAkB5E;AAED,QAAA,MAAM,wBAAwB;;8EAY5B,CAAC;AAEH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,GAC3D,YAAY,CAAC,OAAO,wBAAwB,CAAC,GAAG;IAC9C,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,qBAUF;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAU5E;AAED,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,qBAW9E;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,qBAWpF;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,kBAAkB,GACnB,CAAC"}
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../src/components/input-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,EAAU,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAExF,OAAO,EAA+B,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AA2B7F;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,qBAaA;AAED,QAAA,MAAM,uBAAuB;;;8EA6B5B,CAAC;AAEF,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAsB,EACtB,IAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,uBAAuB,CAAC,qBAmB5E;AAkBD,KAAK,oBAAoB,GAAG,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,cAAc,CAAC,GAAG;IAChG,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;CACtC,CAAC;AAEF,KAAK,qBAAqB,GACtB,CAAC,oBAAoB,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;CAAE,CAAC,GAC/C,CAAC,IAAI,CAAC,oBAAoB,EAAE,QAAQ,GAAG,QAAQ,CAAC,GAAG,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAE1F,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,IAAe,EACf,OAAiB,EACjB,IAAW,EACX,GAAG,KAAK,EACT,EAAE,qBAAqB,qBAUvB;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,qBAU5E;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,MAAM,CAAC,qBAarD;AAED,iBAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAAG,cAAc,qBAE9F;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,GAAG,cAAc,qBAWnD;AAED,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,eAAe,EACf,kBAAkB,GACnB,CAAC"}

package/dist/components/input-group.js

@@ -1,44 +1,88 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../lib/utils.js";
 import { Button } from "./button.js";
-import { Input } from "./input.js";
 import { Textarea } from "./textarea.js";
+import { fieldGroupStates, fieldRing, InputBox } from "../internal/input-box.js";
+const InputGroupSizeContext = React.createContext("default");
+const inputGroupVariants = cva([
+    "group/input-group relative flex min-h-touch-target w-full min-w-0 items-center overflow-hidden bg-(--nc-field,var(--background)) has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:bg-accent",
+    "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 [@media(hover:hover)_and_(pointer:fine)]:min-h-0",
+    fieldRing,
+    fieldGroupStates,
+], {
+    variants: {
+        size: {
+            sm: "h-nadicode-control-height-sm rounded-sm [--input-group-radius:var(--radius-sm)]",
+            default: "h-control-height rounded-sm [--input-group-radius:var(--radius-sm)]",
+            lg: "h-nadicode-control-height-lg rounded-md [--input-group-radius:var(--radius-md)]",
+        },
+        rounded: {
+            true: "rounded-full [--input-group-radius:var(--radius-full)]",
+            false: "",
+        },
+    },
+    defaultVariants: { size: "default", rounded: false },
+});
 /**
  * One input box with something fixed inside it: a mark, a prefix, a button.
  *
  * @family Inputs
- * @when A single-line value with something fixed inside the box: a search mark, a clear button, a
- * prefix like *https://*, a copy button.
- * @instead A collection's search is `CollectionSearch`, never a hand-built group. A plain value is
- * `Input`. Many known values to filter is `Combobox`.
- * @behaviour The group draws the edge and the focus outline for the input inside it. The clear
- * button empties the value and puts focus back in the box. Escape clears only while the box holds
- * the interaction and has a value; otherwise it closes the overlay as usual.
+ * @when A single-line value with a button inside the box: a copy button, a block addon, a textarea
+ * with a toolbar, a server-given value (a project ID) shown read-only in mono beside its copy
+ * button, with no Save.
+ * @instead A prefix or suffix of text or an icon (*https://*, *.com*), in a cell or plain, is the
+ * `prefix`, `suffix` and `look` props of `Input`. A value that clears itself is `ClearableInput`; a
+ * collection's search is `CollectionSearch`, never a hand-built group. Many known values to filter
+ * is `Combobox`.
+ * @behaviour The group draws the edge and the focus halo for the input inside it, so the ring
+ * wraps the addons too, and takes the sizes of `Input`: the input follows the group's. An addon is
+ * a `segment` (a filled cell with a divider, the look of `Input`'s prefix and suffix) or `plain`
+ * (a mark on the box's own fill, flush against the text). An icon button in an addon fills the
+ * row, sits flush against the edge, is muted until hovered and never fills on hover or press.
+ * A disabled input steps the whole group down in fill and text, never in opacity, an icon button
+ * included; a button in an addon that is held, such as a send button waiting for text, leaves the
+ * box as it is.
+ * Colour sits where it does on `Input`: only an error reddens the ring; a suffix reads in the text
+ * colour in both looks, a prefix in the muted grey. `rounded` makes the group a pill. The group's own
+ * `size` is the only place a size is set.
  * @words Prefix and suffix are literal text, never the label. An inline button names what it does:
- * *Clear search*, *Copy address*.
- * @access `role="group"` around the box. The input inside keeps its own label. Inline buttons are
- * named: *Clear search*, *Copy address*.
+ * *Copy address*.
+ * @access `role="group"` around the box. The input inside is named by `aria-label` or
+ * `aria-labelledby`. "For icon-only affordances inside a row of inputs, use `<Button shape="circle"
+ * svgOnly aria-label="…">` rather than an unlabeled icon." (https://vercel.com/geist/input) Ours:
+ * an inline button carries its `aria-label`.
  */
-function InputGroup({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn("group/input-group relative flex h-control-height min-h-touch-target w-full min-w-0 items-center rounded-sm border border-input bg-background transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit has-disabled:bg-input/50 has-disabled:opacity-50 not-in-data-[slot=combobox-content]:has-[[data-slot=input-group-control]:focus-visible]:nc-focus-outline has-[[data-slot=input-group-control]:focus-visible]:outline-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:nc-focus-outline has-[[data-slot][aria-invalid=true]]:outline-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [@media(hover:hover)_and_(pointer:fine)]:min-h-0", className), ...props }));
+function InputGroup({ className, size = "default", rounded = false, ...props }) {
+    return (_jsx(InputGroupSizeContext.Provider, { value: size, children: _jsx("div", { "data-slot": "input-group", "data-size": size, "data-rounded": rounded || undefined, role: "group", className: cn(inputGroupVariants({ size, rounded }), className), ...props }) }));
 }
-const inputGroupAddonVariants = cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+const inputGroupAddonVariants = cva("flex cursor-text items-center justify-center text-sm font-normal text-muted-foreground select-none group-has-[[data-slot=input-group-control]:disabled]/input-group:cursor-not-allowed [&>svg:not([class*='size-'])]:size-3.5", {
     variants: {
         align: {
-            "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
-            "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
-            "block-start": "order-first w-full justify-start px-control-padding-inline pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
-            "block-end": "order-last w-full justify-start px-control-padding-inline pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+            "inline-start": "order-first self-stretch px-control-padding-inline group-data-[size=sm]/input-group:px-2 has-[>button]:p-0",
+            "inline-end": "order-last self-stretch px-control-padding-inline text-foreground group-data-[size=sm]/input-group:px-2 has-[>button]:p-0",
+            "block-start": "order-first w-full justify-start gap-2 px-control-padding-inline py-1.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+            "block-end": "order-last w-full justify-start gap-2 px-control-padding-inline py-1.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+        },
+        look: {
+            plain: "",
+            segment: "bg-muted",
         },
     },
+    compoundVariants: [
+        { align: "inline-start", look: "plain", className: "pr-0" },
+        { align: "inline-start", look: "segment", className: "border-r border-input" },
+        { align: "inline-end", look: "segment", className: "border-l border-input" },
+    ],
     defaultVariants: {
         align: "inline-start",
+        look: "plain",
     },
 });
-function InputGroupAddon({ className, align = "inline-start", ...props }) {
-    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+function InputGroupAddon({ className, align = "inline-start", look = "plain", ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, "data-look": look, className: cn(inputGroupAddonVariants({ align, look }), className), onClick: (e) => {
             // SAFETY: a click reaches this handler only from the addon or a node inside it, and React reports a text node's parent element as the target (react-dom's getEventTarget), so the target is an Element in whichever document the addon renders.
             if (e.target.closest("button")) {
                 return;
@@ -46,13 +90,12 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
             e.currentTarget.parentElement?.querySelector("input")?.focus();
         }, ...props }));
 }
-const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none focus-visible:-outline-offset-2", {
     variants: {
         size: {
             xs: "h-6 gap-1 rounded-sm px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
             sm: "",
-            "icon-xs": "size-6 rounded-sm p-0 has-[>svg]:p-0",
-            "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+            icon: "h-full justify-center rounded-none px-2.5 text-base text-muted-foreground hover:bg-transparent hover:text-foreground active:bg-transparent aria-expanded:bg-transparent aria-expanded:text-foreground disabled:text-placeholder disabled:opacity-100 aria-disabled:not-aria-busy:text-placeholder aria-disabled:not-aria-busy:opacity-100 in-data-[align=inline-end]:last:rounded-r-[calc(var(--input-group-radius)-1px)] [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-10",
         },
     },
     defaultVariants: {
@@ -65,10 +108,14 @@ function InputGroupButton({ className, type = "button", variant = "ghost", size
 function InputGroupText({ className, ...props }) {
     return (_jsx("span", { className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
 }
-function InputGroupInput({ className, ...props }) {
-    return (_jsx(Input, { "data-slot": "input-group-control", className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:outline-none disabled:bg-transparent aria-invalid:outline-none", className), ...props }));
+function InputGroupControl({ className, ...props }) {
+    const size = React.useContext(InputGroupSizeContext);
+    return (_jsx(InputBox, { "data-slot": "input-group-control", size: size, className: cn("flex-1 rounded-none bg-transparent shadow-none focus-visible:outline-none disabled:bg-transparent aria-invalid:outline-none", className), ...props }));
+}
+function InputGroupInput(props) {
+    return _jsx(InputGroupControl, { ...props });
 }
 function InputGroupTextarea({ className, ...props }) {
-    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none focus-visible:outline-none disabled:bg-transparent aria-invalid:outline-none", className), ...props }));
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn("flex-1 resize-none rounded-none bg-transparent shadow-none focus-visible:outline-none disabled:bg-transparent aria-invalid:outline-none", className), ...props }));
 }
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupControl, InputGroupInput, InputGroupTextarea, };