@nadicodeai/ui 12.1.62 → 12.1.63

package/AGENTS.md

@@ -12,9 +12,11 @@ package is kept.
 - **Styling.** A component uses the semantic roles and the generated tokens, and
   nothing else: no raw colour, no `dark:` utility, no mode branch, no second
   token vocabulary. A new value is added to `DESIGN.md` first.
-- **Placement.** This package holds what at least two products use; what one
-  product alone needs lives in that product. A component admitted without a
-  consumer, or left unconsumed after the migration it was built for, is removed.
+- **Placement.** Every reusable component lives here, even while one product
+  alone uses it, so each product draws the design system from one source; a
+  product keeps only its own pages, data, routing and copy. A component admitted
+  without a consumer, or left unconsumed after the migration it was built for,
+  is removed.
 - **Boundaries.** The package owns presentation. Apps own routing, auth, data,
   server actions, runtime adapters, permissions and copy. Apps change a
   component's appearance only through its typed variants and slots; a new
@@ -24,14 +26,18 @@ package is kept.
   primitive base: no Radix or vaul, and `cmdk` only for the stock Command. A
   shadcn block named in a task (`dashboard-01`, `login-02`) is used as that
   registry item. Auth screens start from their shadcn block in the app; this
-  package ships no auth abstraction.
+  package ships no auth abstraction. A value or function an app's server code
+  calls lives in a module without `"use client"`, and only the Portal's
+  production build (`npm run build -w @nadicodeai/portal`) proves it.
 - **Agents.** `@nadicodeai/ui/agents` re-exports assistant-ui and our reviewed
   compositions; `@nadicodeai/ui/agent-orb` is the React-free entry a native
   startup screen paints an orb with before React loads.
-- **Brand marks** are generated, never drawn or edited by hand: add a brand to
-  the allow-list in `scripts/build-brand-icons.mjs` and run
-  `npm run generate:brand-icons -w @nadicodeai/ui`. Every upstream travels with
-  its licence in `LICENSES/` and `NOTICE`.
+- **Brand marks** come by name from the catalogue each kind belongs to, never
+  drawn or listed here: an app's logo is the URL Composio gives its toolkit
+  (`composioLogo`), a model maker's mark is LobeHub's set looked up by the
+  maker's name (`model-mark.tsx` holds the one table of names that differ), and
+  an operating system, a messaging channel or a sign-in provider is its icon in
+  Iconify's `logos` set (`platform-mark.tsx`).
 - **Charts** are stock shadcn registry items; the deliberate deviations are held
   by `tests/guards/chart-kit.test.ts`. A chart the kit lacks is pulled from
   `https://ui.shadcn.com/r/styles/new-york-v4/<name>.json`.

package/NOTICE

@@ -8,8 +8,8 @@ Licensed under the MIT License; the full text ships as
 LICENSES/THINKING-ORBS-MIT.txt. The copy in src/internal/agent-orb.ts keeps each
 dot's lane through the depth sort, so Nadia's striped ribbon holds its stripes.
 
-@nadicodeai/ui includes model-maker and model-family marks from the LobeHub icon
-set, generated from @lobehub/icons-static-svg 1.95.1.
+@nadicodeai/ui includes the model-maker and model-family marks of the LobeHub
+icon set, from @lobehub/icons-static-svg.
 
 LobeHub
 Copyright (c) 2023 LobeHub
@@ -17,15 +17,9 @@ Copyright (c) 2023 LobeHub
 Licensed under the MIT License; the full text ships as
 LICENSES/LOBEHUB-ICONS-MIT.txt.
 
-The marks name the maker of a model the product reports, and nothing else. They
-are generated by scripts/build-brand-icons.mjs into src/components/brand-icons/,
-so a hand edit there is lost; the allow-list in that script names the marks the
-package ships.
-
-@nadicodeai/ui also includes six published model-identity assets whose exact
-source URLs and nominative-use terms are recorded in
-LICENSES/MODEL-IDENTITY-ASSETS-NOTICE.txt. They identify the author or model
-family reported by the product and do not imply endorsement or partnership.
+The marks name the maker of a model the product reports, and nothing else.
+scripts/build-model-marks.mjs writes every mark of the set into
+dist/model-marks/, one module per mark, when the package is built.
 
 @nadicodeai/ui includes a modified CalendarHeatmap from shadcn-heatmap.
 

package/README.md

@@ -71,23 +71,15 @@ form-control family.
 
 ## Icons as files
 
-The same icons ship as SVG files for a consumer that renders without React:
-
-| What | Path |
-| --- | --- |
-| Third-party brand marks | `@nadicodeai/ui/assets/brand/<slug>.svg` |
-| Their index, with each mark's aliases | `@nadicodeai/ui/assets/brand/index.json` |
-| Lucide under the house render, and the house's three icons | `@nadicodeai/design-system/icons/<name>.svg` |
-
-To resolve an app name the way `AppMark` does, lowercase it and keep letters and
-digits, take an exact alias match, and otherwise the longest alias the name
-contains. A name that matches nothing has no mark: show its initial.
-
-`AppMark` carries every mark in its module. A client component that can draw any
-app takes `LazyAppMark` from `@nadicodeai/ui/components/app-mark-lazy` instead:
-in the browser each mark's module loads on first use, and outside it (the
-package's `browser` export condition decides) the mark is drawn at once, so
-server-rendered HTML already holds it and hydration keeps it on screen.
+Lucide under the house render, and the house's three icons, ship as SVG files
+for a consumer that renders without React:
+`@nadicodeai/design-system/icons/<name>.svg`.
+
+## Brand marks
+
+`AppMark` draws a Composio toolkit's logo from Composio's own address, so a
+page that shows one allows `https://logos.composio.dev` in its `img-src`.
+`ModelMark` and `PlatformMark` ship their artwork in the package.
 
 ## Build
 

package/dist/components/agent-profile.d.ts

@@ -0,0 +1,86 @@
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import type { ComponentProps, ReactNode, Ref } from "react";
+import type { AgentOrbSize } from "./agent-orb.js";
+import { type PageActionsProps } from "./page-actions.js";
+import { RadioGroup } from "./radio-group.js";
+import { type StatusBadgeTone } from "./status-badge.js";
+/** A fact on the card whose label stays in place when its value is missing. */
+export type AgentProfileFact = {
+    label: string;
+    value?: string | null;
+    missingLabel: string;
+};
+export type AgentProfileCardProps = {
+    /** Draws the Agent's orb at the size the card gives it. */
+    orb: (size: AgentOrbSize) => ReactNode;
+    name: string;
+    /** What she does, in one line: her description. */
+    description?: string;
+    descriptionMissingLabel: string;
+    /**
+     * The ghost pencil beside her name, which opens the product's edit drawer.
+     * Absent where the person cannot change her name or description.
+     */
+    edit?: {
+        label: string;
+        onClick: () => void;
+        ref?: Ref<HTMLButtonElement>;
+    } | undefined;
+    state: {
+        label: string;
+        tone: StatusBadgeTone;
+        text: string;
+    };
+    /** When she last did something the product can see, already worded. */
+    activity: AgentProfileFact;
+    /** The Agent template she was made from. */
+    origin: AgentProfileFact;
+    /** The right column: her model and her reasoning. */
+    settings?: ReactNode;
+    /** The card's Save, in its footer; a card with nothing to save has no footer. */
+    footer?: ReactNode;
+    footerHint?: ReactNode;
+    /**
+     * The page's commands where the product's chrome has no place for them, at
+     * the trailing edge of her name's row.
+     */
+    actions?: PageActionsProps | undefined;
+    /** Her name is the page's h1, with these attributes. */
+    headingProps?: Omit<ComponentProps<"h1">, "children">;
+};
+/**
+ * The card an Agent's Profile opens with in every product (DESIGN.md, "Page
+ * compositions"): on the left her orb at 64, her name with the pencil that
+ * edits it, her description and her facts; on the right her model and her
+ * reasoning, saved from the card's footer. Each product brings its own data,
+ * fields and words; the shape, sizes and order are this component's.
+ */
+export declare function AgentProfileCard({ orb, name, description, descriptionMissingLabel, edit, state, activity, origin, settings, footer, footerHint, actions, headingProps, }: AgentProfileCardProps): import("react").JSX.Element;
+export type ModelSelectProps = Omit<ComponentProps<typeof SelectPrimitive.Trigger>, "children" | "value" | "onChange"> & {
+    /** The chosen model's id; `null` until one is chosen. */
+    value: string | null;
+    /** The model ids offered, each read with its maker's mark. */
+    options: readonly string[];
+    onValueChange: (model: string) => void;
+    /** What the trigger reads while no model is chosen. */
+    placeholder: string;
+};
+/**
+ * A model chosen from a list: the trigger and every option read the model the
+ * way every surface does, with its maker's mark (`ModelIdentity`).
+ */
+export declare function ModelSelect({ value, options, onValueChange, placeholder, disabled, className, ...props }: ModelSelectProps): import("react").JSX.Element;
+export type SegmentedChoiceProps<Choice extends string> = Omit<ComponentProps<typeof RadioGroup>, "children" | "defaultValue" | "onValueChange" | "value"> & {
+    value: Choice | null;
+    options: readonly {
+        value: Choice;
+        label: string;
+    }[];
+    onValueChange: (value: Choice) => void;
+};
+/**
+ * One choice among a few short levels, drawn as segments that share a row,
+ * such as an Agent's reasoning: Default, Low, Medium, High.
+ */
+export declare function SegmentedChoice<Choice extends string>({ value, options, onValueChange, disabled, className, ...props }: SegmentedChoiceProps<Choice>): import("react").JSX.Element;
+//# sourceMappingURL=agent-profile.d.ts.map

package/dist/components/agent-profile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agent-profile.d.ts","sourceRoot":"","sources":["../../src/components/agent-profile.tsx"],"names":[],"mappings":"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"}

package/dist/components/agent-profile.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { Select as SelectPrimitive } from "@base-ui/react/select";
+import { PencilIcon } from "lucide-react";
+import { FooterStrip } from "../internal/footer-strip.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./button.js";
+import { Card, CardContent } from "./card.js";
+import { ModelIdentity } from "./model-identity.js";
+import { PageActionsRow } from "./page-actions.js";
+import { RadioGroup } from "./radio-group.js";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger } from "./select.js";
+import { StatusBadge } from "./status-badge.js";
+import { TableValue } from "./table-value.js";
+import { toggleVariants } from "./toggle.js";
+const AGENT_PROFILE_ORB_SIZE = 64;
+/**
+ * The card an Agent's Profile opens with in every product (DESIGN.md, "Page
+ * compositions"): on the left her orb at 64, her name with the pencil that
+ * edits it, her description and her facts; on the right her model and her
+ * reasoning, saved from the card's footer. Each product brings its own data,
+ * fields and words; the shape, sizes and order are this component's.
+ */
+export function AgentProfileCard({ orb, name, description, descriptionMissingLabel, edit, state, activity, origin, settings, footer, footerHint, actions, headingProps, }) {
+    const facts = [
+        { label: state.label, value: _jsx(StatusBadge, { label: state.text, tone: state.tone }) },
+        {
+            label: activity.label,
+            value: _jsx(TableValue, { missingLabel: activity.missingLabel, value: activity.value }),
+        },
+        {
+            label: origin.label,
+            value: _jsx(TableValue, { missingLabel: origin.missingLabel, value: origin.value }),
+        },
+    ];
+    const text = description?.trim();
+    return (_jsxs(Card, { className: "@container/agent-profile min-w-0", render: _jsx("section", { "aria-labelledby": headingProps?.id }), "data-slot": "agent-profile", children: [_jsxs(CardContent, { className: "grid min-w-0 gap-nadicode-lg @3xl/agent-profile:grid-cols-[minmax(0,1fr)_minmax(18rem,22rem)] @3xl/agent-profile:gap-nadicode-xl", children: [_jsxs("div", { className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-start gap-nadicode-md", children: [_jsx("div", { className: "shrink-0", children: orb(AGENT_PROFILE_ORB_SIZE) }), _jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-1 gap-y-nadicode-sm", children: [_jsx("h1", { ...headingProps, className: cn("min-w-0 text-2xl leading-8 font-semibold break-words text-foreground outline-none", headingProps?.className), children: name }), edit ? (_jsx(Button, { "aria-label": edit.label, onClick: edit.onClick, ref: edit.ref, size: "icon", title: edit.label, type: "button", variant: "ghost", children: _jsx(PencilIcon, { "aria-hidden": "true", "data-icon": true }) })) : null, actions ? (_jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2 pl-nadicode-sm", "data-slot": "agent-profile-actions", children: _jsx(PageActionsRow, { ...actions }) })) : null] }), _jsx("p", { className: "line-clamp-2 min-w-0 text-sm text-muted-foreground", title: text, children: _jsx(TableValue, { missingLabel: descriptionMissingLabel, value: text }) }), _jsx("dl", { className: "mt-nadicode-sm flex min-w-0 flex-wrap gap-x-nadicode-lg gap-y-nadicode-sm", "data-slot": "agent-profile-facts", children: facts.map((fact) => (_jsxs("div", { className: "grid min-w-0 gap-1", children: [_jsx("dt", { className: "text-xs text-muted-foreground", children: fact.label }), _jsx("dd", { className: "flex min-h-6 min-w-0 items-center text-sm", children: fact.value })] }, fact.label))) })] })] }), settings ? (_jsx("div", { className: "grid min-w-0 content-start gap-nadicode-md border-t border-border pt-nadicode-md @3xl/agent-profile:border-t-0 @3xl/agent-profile:border-l @3xl/agent-profile:pt-0 @3xl/agent-profile:pl-nadicode-lg", "data-slot": "agent-profile-settings", children: settings })) : null] }), _jsx(FooterStrip, { hint: footerHint, hintSlot: "agent-profile-hint", children: footer })] }));
+}
+/**
+ * A model chosen from a list: the trigger and every option read the model the
+ * way every surface does, with its maker's mark (`ModelIdentity`).
+ */
+export function ModelSelect({ value, options, onValueChange, placeholder, disabled, className, ...props }) {
+    return (_jsxs(Select, { disabled: disabled, onValueChange: (model) => {
+            if (typeof model === "string")
+                onValueChange(model);
+        }, value: value, children: [_jsx(SelectTrigger, { className: cn("w-full min-w-0", className), ...props, children: _jsx(SelectPrimitive.Value, { className: "flex min-w-0 flex-1 items-center gap-1.5 text-left", "data-slot": "select-value", children: (model) => model ? (_jsx(ModelIdentity, { className: "min-w-0", markSize: 20, model: model })) : (_jsx("span", { className: "text-placeholder", children: placeholder })) }) }), _jsx(SelectContent, { align: "start", alignItemWithTrigger: false, children: _jsx(SelectGroup, { children: options.map((model) => (_jsx(SelectItem, { value: model, children: _jsx(ModelIdentity, { markSize: 20, model: model }) }, model))) }) })] }));
+}
+/**
+ * One choice among a few short levels, drawn as segments that share a row,
+ * such as an Agent's reasoning: Default, Low, Medium, High.
+ */
+export function SegmentedChoice({ value, options, onValueChange, disabled, className, ...props }) {
+    return (_jsx(RadioGroup, { className: cn("flex h-control-height w-full gap-nadicode-xxs rounded-md bg-muted p-0.5", className), disabled: disabled, onValueChange: (next) => {
+            const chosen = options.find((option) => option.value === next);
+            if (chosen)
+                onValueChange(chosen.value);
+        }, value: value, ...props, children: options.map((option) => (_jsx(RadioPrimitive.Root, { className: cn(toggleVariants(), "h-full min-w-0 flex-auto rounded-sm px-2 text-muted-foreground data-checked:bg-card data-checked:text-foreground data-checked:nc-elevation-resting"), "data-slot": "segmented-choice-item", value: option.value, children: _jsx("span", { className: "min-w-0 truncate", children: option.label }) }, option.value))) }));
+}

package/dist/components/alert-dialog.js

@@ -17,7 +17,7 @@ function AlertDialogOverlay({ className, ...props }) {
     return (_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-overlay", className: cn("fixed inset-0 isolate z-50 bg-scrim/scrim", overlayBackdropMotion, className), ...props }));
 }
 function AlertDialogContent({ className, size = "default", ...props }) {
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-md border-0 bg-popover p-nadicode-lg text-popover-foreground nc-elevation-modal outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", modalOverlayMotion, className), ...props })] }));
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", "data-size": size, className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-nadicode-md rounded-lg border-0 bg-popover p-nadicode-lg text-popover-foreground nc-elevation-modal outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm", modalOverlayMotion, className), ...props })] }));
 }
 function AlertDialogHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className), ...props }));

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

@@ -1,21 +1,39 @@
 import type * as React from "react";
-import { appInitial, type AppMarkProps } from "./app-mark-frame.js";
-import { type BrandIconProps } from "./brand-icons.js";
-type BrandMark = React.ComponentType<BrandIconProps>;
+import { type PlatformName } from "./platform-mark.js";
+/** An app's logo as its catalogue draws it for a light ground and for a dark one. */
+type AppLogo = {
+    light: string;
+    dark: string;
+};
+/** The logo Composio's catalogue gives a toolkit: its `meta.logo`, and the drawing it serves for a dark theme. */
+declare function composioLogo(toolkit: string): AppLogo;
+/** What the tile draws: the logo its catalogue gives, a platform's mark, or neither and the initial. */
+type AppMarkGlyph = {
+    /** The logo the app's catalogue gives, such as `composioLogo(toolkit)`. */
+    logo?: AppLogo;
+    platform?: never;
+} | {
+    logo?: never;
+    /** A platform, such as a messaging channel, drawn by its mark. */
+    platform?: PlatformName;
+};
+type AppMarkProps = Omit<React.ComponentProps<"span">, "children"> & AppMarkGlyph & {
+    /** The app's slug or name, which the initial is taken from when there is no mark. */
+    app: string;
+    /** The tile's box in CSS pixels; the glyph scales with it. Defaults to 28. */
+    size?: number;
+    /**
+     * The mark's accessible name. Beside the app's name it needs none, and a
+     * bare mark stays decorative until one arrives.
+     */
+    label?: string;
+};
 /**
- * The generated mark for a connector, under any spelling it arrives with, or
- * `undefined` when the set has none.
+ * An app, a channel or anything else a record connects, in the tile every
+ * such mark shares: the catalogue's logo, the platform's mark, or the initial
+ * when there is neither. Never a guessed logo.
  */
-declare function appMarkFor(app: string): BrandMark | undefined;
-/**
- * An app an Agent connects to, in the same tile as a model's maker: the
- * generated mark in its official colours, or the app's initial when the set
- * has no mark for it. Never an invented logo and never a fetched favicon.
- *
- * Every mark in the set comes with this module. A client component that can
- * show any of them takes `LazyAppMark`, which fetches only the ones it draws.
- */
-declare function AppMark(props: AppMarkProps): React.JSX.Element;
-export { AppMark, appInitial, appMarkFor };
-export type { AppMarkProps };
+declare function AppMark({ app, logo, platform, size, label, className, style, ...props }: AppMarkProps): React.JSX.Element;
+export { AppMark, composioLogo };
+export type { AppLogo, AppMarkProps };
 //# sourceMappingURL=app-mark.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-mark.d.ts","sourceRoot":"","sources":["../../src/components/app-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAgB,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAC/E,OAAO,EA2CL,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,KAAK,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;AAqDrD;;;GAGG;AACH,iBAAS,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAGtD;AAED;;;;;;;GAOG;AACH,iBAAS,OAAO,CAAC,KAAK,EAAE,YAAY,qBAGnC;AAED,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"app-mark.d.ts","sourceRoot":"","sources":["../../src/components/app-mark.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAgB,KAAK,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAOlE,qFAAqF;AACrF,KAAK,OAAO,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAE/C,kHAAkH;AAClH,iBAAS,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAG9C;AAYD,wGAAwG;AACxG,KAAK,YAAY,GACb;IACE,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACE,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,kEAAkE;IAClE,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB,CAAC;AAEN,KAAK,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAChE,YAAY,GAAG;IACb,qFAAqF;IACrF,GAAG,EAAE,MAAM,CAAC;IACZ,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEJ;;;;GAIG;AACH,iBAAS,OAAO,CAAC,EACf,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,IAAoB,EACpB,KAAK,EACL,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,YAAY,qBAoDd;AAED,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;AACjC,YAAY,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/app-mark.js

@@ -1,75 +1,39 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { appMarkSlug } from "./app-mark-aliases.js";
-import { AppMarkFrame, appInitial } from "./app-mark-frame.js";
-import { AirtableIcon, AppleIcon, AsanaIcon, AtlassianIcon, ClaudeIcon, DatadogIcon, DiscordIcon, FigmaIcon, GeminiIcon, GithubIcon, GitlabIcon, GmailIcon, GoogleCalendarIcon, GoogleDriveIcon, HuggingFaceIcon, IntercomIcon, JiraIcon, LinearIcon, MattermostIcon, MicrosoftTeamsIcon, N8nIcon, NetlifyIcon, NotionIcon, OpenaiIcon, PaypalIcon, PostgresqlIcon, SentryIcon, SignalIcon, SlackIcon, SpotifyIcon, SquareIcon, StripeIcon, SupabaseIcon, TelegramIcon, TodoistIcon, UnrealEngineIcon, VercelIcon, WebflowIcon, WhatsappIcon, YoutubeIcon, YuanbaoIcon, ZapierIcon, } from "./brand-icons.js";
-/*
- * The generated mark each brand slug is drawn by. Which connector spelling
- * reaches which slug is the alias table in `app-mark-aliases.ts`, which the
- * published `assets/brand/index.json` carries too; the artwork itself is
- * generated. Both tables are product mapping over generated marks.
- */
-const MARKS_BY_SLUG = {
-    airtable: AirtableIcon,
-    apple: AppleIcon,
-    asana: AsanaIcon,
-    atlassian: AtlassianIcon,
-    claude: ClaudeIcon,
-    datadog: DatadogIcon,
-    discord: DiscordIcon,
-    figma: FigmaIcon,
-    gemini: GeminiIcon,
-    github: GithubIcon,
-    gitlab: GitlabIcon,
-    gmail: GmailIcon,
-    "google-calendar": GoogleCalendarIcon,
-    "google-drive": GoogleDriveIcon,
-    huggingface: HuggingFaceIcon,
-    intercom: IntercomIcon,
-    jira: JiraIcon,
-    linear: LinearIcon,
-    mattermost: MattermostIcon,
-    "microsoft-teams": MicrosoftTeamsIcon,
-    n8n: N8nIcon,
-    netlify: NetlifyIcon,
-    notion: NotionIcon,
-    openai: OpenaiIcon,
-    paypal: PaypalIcon,
-    postgresql: PostgresqlIcon,
-    sentry: SentryIcon,
-    signal: SignalIcon,
-    slack: SlackIcon,
-    spotify: SpotifyIcon,
-    square: SquareIcon,
-    stripe: StripeIcon,
-    supabase: SupabaseIcon,
-    telegram: TelegramIcon,
-    todoist: TodoistIcon,
-    "unreal-engine": UnrealEngineIcon,
-    vercel: VercelIcon,
-    webflow: WebflowIcon,
-    whatsapp: WhatsappIcon,
-    youtube: YoutubeIcon,
-    yuanbao: YuanbaoIcon,
-    zapier: ZapierIcon,
-};
-/**
- * The generated mark for a connector, under any spelling it arrives with, or
- * `undefined` when the set has none.
- */
-function appMarkFor(app) {
-    const slug = appMarkSlug(app);
-    return slug ? MARKS_BY_SLUG[slug] : undefined;
+import { cn } from "../lib/utils.js";
+import { PlatformMark } from "./platform-mark.js";
+const APP_MARK_SIZE = 28;
+/** The glyph's share of the tile, the same ratio as `ModelMark`. */
+const APP_MARK_GLYPH_RATIO = 0.62;
+/** The logo Composio's catalogue gives a toolkit: its `meta.logo`, and the drawing it serves for a dark theme. */
+function composioLogo(toolkit) {
+    const logo = `https://logos.composio.dev/api/${encodeURIComponent(toolkit)}`;
+    return { light: logo, dark: `${logo}?theme=dark` };
+}
+/** The letter an app without a mark is drawn with: its first letter or digit, or a question mark. */
+function appInitial(app) {
+    return (app
+        .trim()
+        .match(/[a-z0-9]/i)?.[0]
+        ?.toUpperCase() ?? "?");
 }
 /**
- * An app an Agent connects to, in the same tile as a model's maker: the
- * generated mark in its official colours, or the app's initial when the set
- * has no mark for it. Never an invented logo and never a fetched favicon.
- *
- * Every mark in the set comes with this module. A client component that can
- * show any of them takes `LazyAppMark`, which fetches only the ones it draws.
+ * An app, a channel or anything else a record connects, in the tile every
+ * such mark shares: the catalogue's logo, the platform's mark, or the initial
+ * when there is neither. Never a guessed logo.
  */
-function AppMark(props) {
-    const Mark = appMarkFor(props.app);
-    return _jsx(AppMarkFrame, { ...props, glyph: Mark ? (size) => _jsx(Mark, { size: size }) : undefined });
+function AppMark({ app, logo, platform, size = APP_MARK_SIZE, label, className, style, ...props }) {
+    const named = Boolean(label?.trim() || props["aria-label"]?.trim() || props["aria-labelledby"]?.trim());
+    const labelling = !named
+        ? { "aria-hidden": true }
+        : label?.trim()
+            ? { role: "img", "aria-label": label }
+            : {};
+    const glyph = Math.round(size * APP_MARK_GLYPH_RATIO);
+    return (_jsx("span", { "data-slot": "app-mark", "data-app": app, "data-mark": logo || platform ? "brand" : "monogram", className: cn("inline-flex shrink-0 items-center justify-center rounded-md border border-border bg-background text-foreground", className), style: { width: size, height: size, ...style }, ...props, ...labelling, children: platform ? (_jsx(PlatformMark, { platform: platform, size: glyph })) : logo ? (_jsx("span", { "aria-hidden": "true", className: "block", "data-slot": "app-mark-logo", style: {
+                width: glyph,
+                height: glyph,
+                "--app-mark-logo": `url("${logo.light}")`,
+                "--app-mark-logo-dark": `url("${logo.dark}")`,
+            } })) : (_jsx("span", { "aria-hidden": "true", className: "font-semibold leading-none text-muted-foreground", "data-slot": "app-mark-monogram", style: { fontSize: Math.max(8, Math.round(size * 0.4)) }, children: appInitial(app) })) }));
 }
-export { AppMark, appInitial, appMarkFor };
+export { AppMark, composioLogo };

package/dist/components/card.js

@@ -5,8 +5,8 @@ import { cn } from "../lib/utils.js";
 function Card({ className, render, size = "default", surface = "resting", variant = "default", ...props }) {
     const structure = cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden bg-card py-(--card-spacing) text-sm text-card-foreground [--card-spacing:var(--spacing-nadicode-lg)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:var(--spacing-nadicode-md)] data-[size=sm]:has-data-[slot=card-footer]:pb-0", variant === "interactive" && "cursor-pointer", variant === "link" && "nc-transition-paint");
     const surfaceClassName = surface === "outlined"
-        ? cn(structure, "rounded-md border border-border", className)
-        : cn(structure, "rounded-md border-0 *:[img:first-child]:rounded-t-md *:[img:last-child]:rounded-b-md", surface === "resting" && "nc-elevation-resting", surface === "raised" && "nc-elevation-raised", className);
+        ? cn(structure, "rounded-lg border border-border", className)
+        : cn(structure, "rounded-lg border-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg", surface === "resting" && "nc-elevation-resting", surface === "raised" && "nc-elevation-raised", className);
     return useRender({
         defaultTagName: "div",
         props: mergeProps({ className: surfaceClassName }, props),
@@ -20,7 +20,7 @@ function CardHeader({ className, ...props }) {
         // `minmax(0,1fr)`, not `1fr`, because a `1fr` track never shrinks below
         // its content and a long title or an unbreakable figure would push the
         // action past the card's edge, where the card's clipping cuts it.
-        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-md px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] *:data-[slot=card-description]:col-start-1 *:data-[slot=card-title]:col-start-1 [.border-b]:pb-(--card-spacing)", className), ...props }));
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] *:data-[slot=card-description]:col-start-1 *:data-[slot=card-title]:col-start-1 [.border-b]:pb-(--card-spacing)", className), ...props }));
 }
 function CardTitle({ className, focusTarget = false, ...props }) {
     return (_jsx("div", { "data-slot": "card-title", "data-focus-target": focusTarget || undefined, className: cn("text-base font-medium group-data-[size=sm]/card:text-sm", focusTarget && "rounded-sm", className), ...props }));

package/dist/components/checkbox.js

@@ -4,6 +4,6 @@ import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox";
 import { cn } from "../lib/utils.js";
 import { CheckIcon } from "lucide-react";
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-md border border-input transition-colors group-has-disabled/field:opacity-50 after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4 shrink-0 items-center justify-center rounded-sm border border-input transition-colors group-has-disabled/field:opacity-50 after:absolute after:top-1/2 after:left-1/2 after:size-touch-target after:-translate-x-1/2 after:-translate-y-1/2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground [@media(hover:hover)_and_(pointer:fine)]:after:hidden", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
 }
 export { Checkbox };

package/dist/components/collection-filters.d.ts

@@ -12,6 +12,11 @@ export type CollectionFilter = {
     onValueChange: (value: string) => void;
     options: readonly CollectionFilterOption[];
     selectedIcon?: React.ReactNode;
+    /**
+     * Values the collection is most often narrowed to. While the facet is unset,
+     * each one waits as a dashed chip that applies it in one click.
+     */
+    suggested?: readonly string[];
 };
 export type CollectionFilterCopy = {
     add: string;

package/dist/components/collection-filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-filters.d.ts","sourceRoot":"","sources":["../../src/components/collection-filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAgHF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,IAAI,GACL,EAAE;IACD,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,IAAI,EAAE,oBAAoB,CAAC;CAC5B,4BAiDA"}
+{"version":3,"file":"collection-filters.d.ts","sourceRoot":"","sources":["../../src/components/collection-filters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,SAAS,sBAAsB,EAAE,CAAC;IAC3C,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAgHF,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EACN,IAAI,GACL,EAAE;IACD,MAAM,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACpC,IAAI,EAAE,oBAAoB,CAAC;CAC5B,4BAqFA"}

package/dist/components/collection-filters.js

@@ -50,5 +50,19 @@ export function CollectionFilters({ facets, copy, }) {
                                 facet.onValueChange("");
                                 addTrigger.current?.focus();
                             }, children: _jsx(X, { "aria-hidden": "true" }) })] }, facet.label));
-            })] }));
+            }), facets
+                .filter((facet) => !facet.value)
+                .flatMap((facet) => (facet.suggested ?? []).flatMap((value) => {
+                const option = facet.options.find((item) => item.value === value);
+                return option
+                    ? [
+                        _jsxs(Button, { variant: "outline", "data-slot": "collection-filter-suggestion", "aria-label": `${copy.add}: ${facet.label} ${option.label}`, className: "max-w-64 border-dashed text-muted-foreground", onClick: () => {
+                                facet.onValueChange(value);
+                                addTrigger.current?.focus();
+                            }, children: [option.icon, _jsxs("span", { className: "truncate", children: [facet.label, " ", _jsx("span", { className: option.mono
+                                                ? "text-foreground nc-type-label-mono"
+                                                : "font-medium text-foreground", children: option.label })] })] }, `${facet.label}:${value}`),
+                    ]
+                    : [];
+            }))] }));
 }

package/dist/components/collection-search.d.ts

@@ -0,0 +1,10 @@
+export type CollectionSearchProps = {
+    /** What the search finds, read as its name and shown while it is empty: "Find a skill". */
+    label: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    disabled?: boolean;
+};
+/** The search a collection toolbar fills its row with. */
+export declare function CollectionSearch({ label, value, onValueChange, disabled }: CollectionSearchProps): import("react").JSX.Element;
+//# sourceMappingURL=collection-search.d.ts.map

package/dist/components/collection-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-search.d.ts","sourceRoot":"","sources":["../../src/components/collection-search.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,qBAAqB,GAAG;IAClC,2FAA2F;IAC3F,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,0DAA0D;AAC1D,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,qBAAqB,+BAgBhG"}

package/dist/components/collection-search.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search } from "lucide-react";
+import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group.js";
+/** The search a collection toolbar fills its row with. */
+export function CollectionSearch({ label, value, onValueChange, disabled }) {
+    return (_jsxs(InputGroup, { "data-slot": "collection-search", children: [_jsx(InputGroupAddon, { children: _jsx(Search, { "aria-hidden": "true" }) }), _jsx(InputGroupInput, { "aria-label": label, disabled: disabled, onChange: (event) => onValueChange(event.target.value), placeholder: label, type: "search", value: value })] }));
+}

package/dist/components/collection-sort.d.ts

@@ -0,0 +1,18 @@
+export type CollectionSortOption = {
+    value: string;
+    label: string;
+};
+export type CollectionSortProps = {
+    /** What the control orders, read before the current order: "Sort by". */
+    label: string;
+    value: string;
+    options: readonly CollectionSortOption[];
+    onValueChange: (value: string) => void;
+};
+/**
+ * The order a collection's rows are read in, at the toolbar's trailing edge
+ * before the collection's actions. The trigger names the order in force; the
+ * menu offers the others.
+ */
+export declare function CollectionSort({ label, value, options, onValueChange }: CollectionSortProps): import("react").JSX.Element | null;
+//# sourceMappingURL=collection-sort.d.ts.map

package/dist/components/collection-sort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-sort.d.ts","sourceRoot":"","sources":["../../src/components/collection-sort.tsx"],"names":[],"mappings":"AAeA,MAAM,MAAM,oBAAoB,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,yEAAyE;IACzE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,mBAAmB,sCAgC3F"}

package/dist/components/collection-sort.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowUpDown } from "lucide-react";
+import { Button } from "./button.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+/**
+ * The order a collection's rows are read in, at the toolbar's trailing edge
+ * before the collection's actions. The trigger names the order in force; the
+ * menu offers the others.
+ */
+export function CollectionSort({ label, value, options, onValueChange }) {
+    const current = options.find((option) => option.value === value) ?? options[0];
+    if (!current)
+        return null;
+    return (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { "aria-label": `${label}: ${current.label}`, "data-slot": "collection-sort", render: _jsx(Button, { variant: "outline" }), children: [_jsx(ArrowUpDown, { "data-icon": "inline-start", "aria-hidden": "true" }), current.label] }), _jsx(DropdownMenuContent, { align: "end", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: label }), _jsx(DropdownMenuRadioGroup, { value: current.value, onValueChange: (next) => {
+                                if (typeof next === "string" && next !== current.value)
+                                    onValueChange(next);
+                            }, children: options.map((option) => (_jsx(DropdownMenuRadioItem, { value: option.value, children: option.label }, option.value))) })] }) })] }));
+}