@nanisoft/prism-ui 0.13.0 → 0.15.0

package/dist/blocks/services-01/services.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle } from '../../components/ui/card.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Section, SectionHeading, childLevel } from '../../components/ui/section.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * What the product does, as a set of engagements: a title, a body, a list of what
+ * the reader gets, and an outcome, optionally numbered.
+ *
+ * **The NaniSoft framing is in this JSDoc and in the Demo, and nowhere in the
+ * Block.** What these engagements are is the work of a system that runs: read the
+ * estate, capture the market as it moves, decide what changed, and hand the
+ * finding to an agent that can act on it. That is a sequence, which is why the
+ * `numbered` variant exists and why the Demo uses it, and it is four `title`s,
+ * four `body`s and four deliverables lists at the call site. A Block that shipped
+ * them would put one company's way of working into every consumer's services page,
+ * and a services page is the page a reader is most likely to believe.
+ *
+ * **The ordinal is derived from the position, never taken from the item, and that
+ * is the whole of why it is safe to show at all.** A list that carried its own
+ * numbers is a list whose numbers can disagree with its order after a sort, a
+ * filter, a CMS re-publish or an insertion, and nothing in the rendering would
+ * catch it: the cards would read `03, 01, 02`. Rendering from the index means the
+ * numbers and the order cannot come apart, because they are the same value. The
+ * cost of deriving it is that a caller who wants the sequence to start at zero, or
+ * to skip a retired engagement, cannot, and the honest way to express that is to
+ * filter the list before it reaches the Block, which is a decision a consumer can
+ * see in its own data rather than one buried in a `number` field.
+ *
+ * **It is opt-in because a number on a card claims the set is a sequence, and a
+ * set of capabilities usually is not.** An engagement a reader buys is a sequence
+ * they can follow, and a page listing four capabilities is a set they are
+ * comparing. Numbering the second makes a reader look for the one they are missing
+ * and for a reason the numbering does not carry. So `plain` is the default, the
+ * numbers are the caller's decision, and the mono face is the same annotation the
+ * rest of this system uses for a machine value, which is what a position in a
+ * list is.
+ *
+ * **`deliverables` renders as a real list, and an empty array renders nothing.**
+ * A `<ul>` rather than a stack of paragraphs, because a reader checks the set off
+ * against their own situation and a list is what can be checked off; the marker is
+ * suppressed so the list reads as a set of terms under a heading rather than as
+ * bullets competing with the body above it. The empty case is worth stating
+ * because the alternative is a heading with nothing under it: an array of zero is a
+ * caller who has nothing to promise, and the honest rendering of that is absence
+ * rather than a titled gap.
+ *
+ * **The body, the deliverables and the outcome are three elements and not one,
+ * because a reader comparing two engagements reads them in that order and at
+ * different speeds.** The body says what the work is, the deliverables say what
+ * arrives, and the outcome says what it is for. Merging them gives a card whose
+ * last paragraph has to carry the effect as well as the description, and a reader
+ * scanning for the effect has to read the description to find it. The cost of
+ * three is that a caller with one paragraph to say has to choose which element it
+ * is, and choosing is the right pressure.
+ *
+ * A grid of engagements is three across, so a card holds a title, a body of two or
+ * three lines, a list and one line of outcome. A card that needs a fifth element
+ * is a page, and `PageHeader01` and this Block composed together is the honest
+ * arrangement for it.
+ *
+ * A service's title is a heading one step below the section, derived rather than
+ * written, so a Block embedded one level deeper carries its card titles with it.
+ *
+ * It is a server Component: no hook, no state and no client code.
+ */
+export function Services01({ eyebrow, title, description, services, variant = 'plain', headingLevel = 'h2', className, }) {
+    // A service's title is a heading one step below the section that introduces the
+    // set, so four titles under one heading read as four children of it rather than
+    // as four competing sections.
+    const Title = childLevel(headingLevel);
+    const numbered = variant === 'numbered';
+    return (_jsxs(Section, { children: [title ? (_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-12" })) : null, _jsx("ul", { "data-slot": "services-01", "data-variant": variant, className: cn('grid gap-6 sm:grid-cols-2 lg:grid-cols-3', className), children: services.map((service, index) => (_jsx("li", { "data-slot": "services-01-item", className: "h-full", children: _jsxs(Card, { className: "h-full gap-4 py-6", children: [_jsxs(CardHeader, { children: [numbered ? (_jsx("span", { "data-slot": "services-01-ordinal", className: "text-muted-foreground font-mono text-xs tabular-nums", children: String(index + 1).padStart(2, '0') })) : null, service.icon ? (_jsx("span", { "data-slot": "services-01-icon", className: "bg-accent text-accent-foreground mb-2 flex size-10 items-center justify-center rounded-lg", children: _jsx(service.icon, { className: "size-5" }) })) : null, _jsx(CardTitle, { children: _jsx(Title, { children: service.title }) }), _jsx("p", { className: "text-muted-foreground text-pretty text-sm", children: service.body })] }), _jsxs(CardContent, { className: "flex flex-col gap-4", children: [service.deliverables && service.deliverables.length > 0 ? (_jsx("ul", { "data-slot": "services-01-deliverables", 
+                                        // The markers are suppressed on purpose. A deliverables list is
+                                        // a set of terms under the engagement, and the reader is
+                                        // checking it against their own situation rather than reading
+                                        // a bulleted argument, so the bullets would compete with the
+                                        // body above them for the same attention.
+                                        className: "flex flex-col gap-1.5 text-sm [&>li]:list-none", children: service.deliverables.map((deliverable) => (_jsx("li", { "data-slot": "services-01-deliverable", className: "text-muted-foreground text-pretty", children: deliverable }, deliverable))) })) : null, service.outcome ? (_jsx("p", { "data-slot": "services-01-outcome", className: "border-border border-t pt-4 text-pretty text-sm font-medium", children: service.outcome })) : null, service.href !== undefined ? (_jsx(CtaLink, { href: service.href, newTab: service.newTab, variant: "ghost", size: "sm", className: "self-start", children: service.hrefLabel })) : null] })] }) }, service.id))) })] }));
+}
+export default Services01;

package/dist/blocks/settings-integrations-01/index.d.ts

@@ -0,0 +1,3 @@
+export { SettingsIntegrations01, default } from './settings-integrations.js';
+export type { SettingsIntegrations01Props, SettingsIntegrationsItem, SettingsIntegrationsState, } from './settings-integrations.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/settings-integrations-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-integrations-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAKzE,YAAY,EACV,2BAA2B,EAC3B,wBAAwB,EACxB,yBAAyB,GAC1B,MAAM,yBAAyB,CAAA"}

package/dist/blocks/settings-integrations-01/index.js

@@ -0,0 +1 @@
+export { SettingsIntegrations01, default } from './settings-integrations.js';

package/dist/blocks/settings-integrations-01/settings-integrations.d.ts

@@ -0,0 +1,246 @@
+import { type ReactNode } from 'react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * Where a connection stands, and the four answers that are true.
+ *
+ * `needs-attention` is the member of this set that a two-state design system does
+ * not have, and the Block's JSDoc argues for it at length: an integration that is
+ * connected and wrong is the common case, not the exception, and a system offering
+ * only connected and available leaves a consumer with exactly one way to render
+ * it, which is to draw it as available. That is a lie the reader acts on.
+ */
+export type SettingsIntegrationsState = 'connected' | 'available' | 'needs-attention' | 'unavailable';
+/**
+ * One system a workspace connects to, and everything a reader needs to decide
+ * what to do about it.
+ *
+ * The mark is a slot and Prism ships no vendor marks, for the two reasons
+ * `integration-01` states in full: a vendor's mark is a licensed asset with terms
+ * attached, and a set of marks in a design system is a set of marks that will be
+ * wrong within a year.
+ */
+export type SettingsIntegrationsItem = {
+    /** A stable key for the row, passed back to `onConnect`, and carried as `data-integration`. */
+    id: string;
+    /** The system's own name, as the system spells it. */
+    name: string;
+    /**
+     * One line about what connecting it gets a reader.
+     *
+     * A capability and not a description. "Reads process values from every site" is
+     * a fact a reader can check by trying it; "a powerful integration for your team"
+     * is a sentence about the product, and one of those on every row is a list of
+     * sentences.
+     */
+    capability: string;
+    /** Where the connection stands. Required, because a row with no state cannot be acted on. */
+    state: SettingsIntegrationsState;
+    /**
+     * The words for the state, in the product's own vocabulary.
+     *
+     * Required whenever `state` is given, which is always, and a thrown diagnostic
+     * rather than a silent absence, for the reason `Status` states in full: the
+     * tone is a colour and the words are the information, and a row of states with
+     * no words is a row of coloured dots that a reader who cannot separate the tones
+     * cannot read and a screen reader cannot read at all. A product whose vocabulary
+     * says "Reconnect" where another's says "Needs attention" cannot be given one
+     * word by a design system.
+     */
+    stateLabel?: string;
+    /**
+     * The system's own mark, composed by the caller.
+     *
+     * A slot, and one that draws no frame of its own. See the Block's JSDoc for why
+     * that is a decision rather than an omission: a mark in this position is very
+     * often a `PackSwatch`, which is a fully rounded element carrying a `data-pack`
+     * boundary, and a frame with a radius utility around it pins the swatch inside a
+     * second shape.
+     */
+    mark?: ReactNode;
+    /**
+     * When the connection was made, in whichever of the two forms the caller already
+     * has it.
+     *
+     * A moment rather than a reading, and the reading is `connectedSinceLabel`. The
+     * Block prints the value exactly as passed when no formatter is given, which is
+     * the arrangement `compliance-01` and `member-list-01` both take and the same
+     * cost applies to.
+     */
+    connectedSince?: number | string;
+    /**
+     * The words for the connection date, given the moment.
+     *
+     * A function because the honest reading is a localised sentence, which is what
+     * `relative-time` hands back and what no Block in this package prints on its own.
+     */
+    connectedSinceLabel?: (value: number | string) => string;
+    /**
+     * Where the connection is managed, which is the destination a reader wants
+     * before they want to reconnect anything.
+     */
+    href?: string;
+    /**
+     * The words on that link. Required whenever `href` is set, and a thrown
+     * diagnostic rather than a silent absence: a link announced by its address is a
+     * link no reader can tell from its neighbour.
+     */
+    hrefLabel?: string;
+    /**
+     * The caller's own control for this row, in place of the Block's connect
+     * control.
+     *
+     * A slot and not a variant, because the four states want four different
+     * controls and a connected integration usually needs a disconnect or a fix
+     * rather than a connect. See the Block's JSDoc for which states draw the
+     * Block's own control and which draw this.
+     */
+    action?: ReactNode;
+    /**
+     * The group this integration belongs in, for `groupBy="category"`. Omit it and
+     * the integration is not grouped, which is the same state as passing
+     * `groupBy="none"`.
+     */
+    category?: string;
+};
+/**
+ * The props a SettingsIntegrations01 takes.
+ *
+ * Every string is a prop and the Block ships none. There is no integration list,
+ * no vendor name, no capability, no state word, no mark, no connect sentence and
+ * not one of the four sentences a connection surface is most tempted to ship.
+ */
+export type SettingsIntegrations01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: ReactNode;
+    /** The section title. Required, because a list of connections with no heading is a fragment. */
+    title: ReactNode;
+    /** One or two sentences under the title. */
+    description?: ReactNode;
+    /** The integrations, in the order a reader should meet them. Order is the caller's. */
+    integrations: readonly SettingsIntegrationsItem[];
+    /**
+     * Called when a reader presses the connect control on an available integration.
+     *
+     * A request and not a mutation, for the reason `settings-notifications-01` and
+     * `settings-members-01` both take: the row's state comes from the data, so a
+     * control that moved and rolled back would show a reader a connection the
+     * product did not make.
+     */
+    onConnect?: (id: string) => void;
+    /**
+     * The words on the connect control, given the integration.
+     *
+     * Required whenever `onConnect` is set, and a function because the honest
+     * sentence usually names the system and sometimes qualifies the action, so a
+     * record of one string per state would be the wrong shape. The sentence also
+     * has to be distinct per row, because a column of four controls all announced
+     * as "Connect" is a column a screen reader user cannot act on.
+     */
+    connectLabel?: (integration: {
+        id: string;
+        name: string;
+    }) => string;
+    /**
+     * Whether the integrations are gathered into the groups they named.
+     *
+     * @defaultValue 'none'
+     */
+    groupBy?: 'none' | 'category';
+    /**
+     * What the surface shows when there are no integrations.
+     *
+     * Required, and the reason is the one `settings-members-01` gives: a workspace
+     * that has connected to nothing and a workspace whose connections failed to load
+     * are not the same page, and a Block that chose between them would be choosing
+     * between a true sentence and a false one.
+     */
+    empty: ReactNode;
+    /** Heading level for the section title. @defaultValue 'h2' */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Block. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * The systems a workspace connects to, one row each, with the state that tells a
+ * reader whether anything needs doing and one control that matches that state.
+ *
+ * **`needs-attention` is the state that makes this Block worth shipping, and the
+ * argument is that a two-state design system cannot help a consumer tell the
+ * truth.** The common case in every product with integrations is a connection
+ * that was made, and has since stopped being right: the token expired, the scope
+ * was narrowed, the account was renamed, the vendor changed its API and the
+ * integration kept working until it did not. That is not an edge case and it is not
+ * a fault, it is the ordinary life of a connection. A design system offering only
+ * connected and available gives a consumer exactly one way to draw it, and the one
+ * way on offer is `available`, which says to the reader that nothing is wrong and
+ * that they may carry on. The reader acts on that: they do not go and look, and the
+ * failure they were one click from finding arrives later, in somebody else's part
+ * of the product, with no connection to this page. So the state exists here as a
+ * first-class member rather than as a tone somebody applies by hand, and the words
+ * beside it are the caller's because "Reconnect", "Needs attention" and "Token
+ * expired" are three products' honest answers to the same tone.
+ *
+ * **The tone for it is `warning` and not `destructive`, and that is a judgement
+ * about the reader rather than about the severity.** A token that expired last
+ * Tuesday is work waiting to be done, and `destructive` on a settings page is the
+ * tone for something the reader broke. A page of red connections is a page of
+ * alarms that means nothing, and the reader who sees it learns to stop reading the
+ * row, which is the opposite of what a state exists to achieve. `unavailable` is
+ * `neutral` for the same reason from the other side: a capability that is not
+ * offered in this region is not in dispute, and drawing it as though it were turns
+ * a commercial fact into an error.
+ *
+ * **The Block draws a connect control on an available row and nothing on the
+ * other three, and the `action` slot is where the other three put theirs.** A
+ * control that cannot work is worse than no control: a connect button on an
+ * unavailable row is a promise the product will break, and a connect button on a
+ * needs-attention row names the wrong action, because the reader does not want to
+ * connect a second time, they want to fix a first one. So the Block offers exactly
+ * the control its own state implies and hands the rest to the caller, which is
+ * why `action` is a slot and not a `variant` string. The cost is stated rather
+ * than hidden: a consumer who wants a uniform control down the whole column draws
+ * it in the slot for three rows out of four, and the Block will not pretend the
+ * fourth is the same.
+ *
+ * **The mark slot draws no frame, no surface and no radius, and that is a
+ * decision about a specific Component.** A mark in this position is very often a
+ * `PackSwatch`, which is a fully rounded element carrying a `data-pack` boundary,
+ * and the token build resolves the whole radius scale beneath that boundary: a
+ * pack changes the corners of everything under it, which is the point. A frame
+ * with a radius utility drawn around the slot would pin the swatch inside a second
+ * shape, so six packs in a row would show six different silhouettes and the reader
+ * comparing them would be comparing the frame rather than the pack. A tinted
+ * background is refused for the same reason one shade lighter: it says the mark is
+ * a picture, and a swatch is a preview rather than a picture, and the words beside
+ * it are already the identity. A caller who wants a framed logo puts a frame in
+ * the slot.
+ *
+ * **A connected row shows when it was connected rather than a control, because
+ * the question a reader has about a working connection is how long it has been
+ * working.** The alternative was a row of identical management controls down the
+ * whole list, which tells a reader nothing they did not know and pushes the row
+ * that needs them further down. The date is printed exactly as passed, with
+ * `connectedSinceLabel` offered for the caller who has a formatter, and the honest
+ * relative reading is a `relative-time` the caller composes. The cost is the one
+ * `compliance-01` states for a review date: a caller who passes a raw timestamp
+ * gets a raw timestamp, which is honest and rarely what was wanted.
+ *
+ * **A grouped list still shows the integrations the caller did not group.** They
+ * are drawn last, under no title, and the count is on the list element as
+ * `data-ungrouped`, because dropping them is the one simplification that produces
+ * the worst support question a component can produce: a reader who counted eleven
+ * and found ten.
+ *
+ * It is a client Component, and the directive is unconditional: a surface that
+ * attaches a handler owns the JavaScript that carries it, and the directive is on
+ * the module rather than in a leaf so a consumer composing a server page gets the
+ * boundary in one place they can see. The cost is that with `onConnect` omitted the
+ * module is still in the client graph, which was judged worth one boundary rather
+ * than two arrangements of the same surface.
+ */
+export declare function SettingsIntegrations01({ eyebrow, title, description, integrations, onConnect, connectLabel, groupBy, empty, headingLevel, className, }: SettingsIntegrations01Props): import("react").JSX.Element;
+export default SettingsIntegrations01;
+//# sourceMappingURL=settings-integrations.d.ts.map

package/dist/blocks/settings-integrations-01/settings-integrations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-integrations.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-integrations-01/settings-integrations.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,OAAO,EAIL,KAAK,YAAY,EAClB,MAAM,6BAA6B,CAAA;AAIpC;;;;;;;;GAQG;AACH,MAAM,MAAM,yBAAyB,GACjC,WAAW,GACX,WAAW,GACX,iBAAiB,GACjB,aAAa,CAAA;AA2BjB;;;;;;;;GAQG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,+FAA+F;IAC/F,EAAE,EAAE,MAAM,CAAA;IACV,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;OAOG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB,6FAA6F;IAC7F,KAAK,EAAE,yBAAyB,CAAA;IAChC;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAChC;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAA;IACxD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAiDD;;;;;;GAMG;AACH,MAAM,MAAM,2BAA2B,GAAG;IACxC,+EAA+E;IAC/E,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,gGAAgG;IAChG,KAAK,EAAE,SAAS,CAAA;IAChB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,uFAAuF;IACvF,YAAY,EAAE,SAAS,wBAAwB,EAAE,CAAA;IACjD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAA;IACpE;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,CAAA;IAC7B;;;;;;;OAOG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAmDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,OAAO,EACP,KAAK,EACL,WAAW,EACX,YAAY,EACZ,SAAS,EACT,YAAY,EACZ,OAAgB,EAChB,KAAK,EACL,YAAmB,EACnB,SAAS,GACV,EAAE,2BAA2B,+BA4K7B;AAED,eAAe,sBAAsB,CAAA"}

package/dist/blocks/settings-integrations-01/settings-integrations.js

@@ -0,0 +1,213 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/ui/button.js';
+import { CtaLink } from '../../components/ui/cta-link.js';
+import { Section, SectionHeading, childLevel, } from '../../components/ui/section.js';
+import { Status } from '../../components/ui/status.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The tone each state is drawn in, from the semantic contract and no other.
+ *
+ * Mapped here rather than passed, for the reason `Status` gives for refusing to
+ * pick a tone itself: the tone is a judgement about urgency and only the caller
+ * can make it, but the mapping from a state to a tone is a judgement this Block
+ * can make once and every consumer would otherwise make the same way. So the
+ * mapping is stated and the words are not.
+ *
+ * `needs-attention` is `warning` and not `destructive`, and the reason is the one
+ * `member-list-01` gives for a colleague who is away: a token that expired last
+ * Tuesday is work waiting to be done, not a fault, and `destructive` on a settings
+ * page is the tone for something the reader broke. A page of red integrations is a
+ * page of alarms that means nothing, and the reader who sees it learns to skip the
+ * row. `unavailable` is `neutral` rather than `destructive` for the same reason
+ * from the other side: a capability that is not offered in this region is not in
+ * dispute, and drawing it as though it were turns a commercial fact into an error.
+ */
+const STATE_TONE = {
+    connected: 'success',
+    available: 'info',
+    'needs-attention': 'warning',
+    unavailable: 'neutral',
+};
+/**
+ * The caller's integrations, gathered into the groups they named.
+ *
+ * First appearance sets the order rather than an alphabet, on the same argument
+ * every list in this package takes: order is a claim about what matters first,
+ * and an alphabetically sorted set of categories is a claim this Block would be
+ * making for the caller about a taxonomy the Block has never seen. A category
+ * whose name was passed by two rows that are not adjacent is one group, because
+ * grouping by name is the only thing that can be right.
+ */
+function groupOf(integrations) {
+    const groups = [];
+    const byName = new Map();
+    for (const integration of integrations) {
+        if (integration.category === undefined)
+            continue;
+        const existing = byName.get(integration.category);
+        if (existing !== undefined) {
+            existing.items.push(integration);
+            continue;
+        }
+        const group = {
+            id: integration.category,
+            name: integration.category,
+            items: [integration],
+        };
+        byName.set(integration.category, group);
+        groups.push(group);
+    }
+    const loose = integrations.filter((integration) => integration.category === undefined);
+    if (loose.length > 0) {
+        groups.push({ id: 'ungrouped', items: loose });
+    }
+    return groups;
+}
+/**
+ * The refusals, so that a connections surface never renders a control or a word
+ * it cannot justify.
+ *
+ * A state with no words, a link with no name, a connect handler with no sentence
+ * on the control, and a sentence on a control whose handler is not there. Each is
+ * a caller's mistake rather than a request.
+ */
+function assertProps(props) {
+    const { integrations, onConnect, connectLabel } = props;
+    if (onConnect !== undefined && connectLabel === undefined) {
+        throw new Error('SettingsIntegrations01: onConnect was passed with no connectLabel, so every control would be announced ' +
+            'by the same word and a reader would be told which system to press by nothing. Pass the function that ' +
+            'names the system.');
+    }
+    if (onConnect === undefined && connectLabel !== undefined) {
+        throw new Error('SettingsIntegrations01: connectLabel was passed with no onConnect, so the sentences would be composed ' +
+            'and then discarded, which is a caller who believes they have named the controls on a surface that has ' +
+            'none.');
+    }
+    for (const integration of integrations) {
+        if (integration.stateLabel === undefined || integration.stateLabel.trim() === '') {
+            throw new Error(`SettingsIntegrations01: the integration ${JSON.stringify(integration.name)} declares a state and no ` +
+                'words for it, so the row would be a coloured dot with nothing to read beside it. Pass stateLabel in ' +
+                'the vocabulary your product uses, which is not this Block to choose.');
+        }
+        if (integration.href !== undefined && (integration.hrefLabel === undefined || integration.hrefLabel.trim() === '')) {
+            throw new Error(`SettingsIntegrations01: the integration ${JSON.stringify(integration.name)} carries an href with no ` +
+                'hrefLabel, so the link would be announced by its address, which is punctuation rather than a name.');
+        }
+    }
+}
+/**
+ * The systems a workspace connects to, one row each, with the state that tells a
+ * reader whether anything needs doing and one control that matches that state.
+ *
+ * **`needs-attention` is the state that makes this Block worth shipping, and the
+ * argument is that a two-state design system cannot help a consumer tell the
+ * truth.** The common case in every product with integrations is a connection
+ * that was made, and has since stopped being right: the token expired, the scope
+ * was narrowed, the account was renamed, the vendor changed its API and the
+ * integration kept working until it did not. That is not an edge case and it is not
+ * a fault, it is the ordinary life of a connection. A design system offering only
+ * connected and available gives a consumer exactly one way to draw it, and the one
+ * way on offer is `available`, which says to the reader that nothing is wrong and
+ * that they may carry on. The reader acts on that: they do not go and look, and the
+ * failure they were one click from finding arrives later, in somebody else's part
+ * of the product, with no connection to this page. So the state exists here as a
+ * first-class member rather than as a tone somebody applies by hand, and the words
+ * beside it are the caller's because "Reconnect", "Needs attention" and "Token
+ * expired" are three products' honest answers to the same tone.
+ *
+ * **The tone for it is `warning` and not `destructive`, and that is a judgement
+ * about the reader rather than about the severity.** A token that expired last
+ * Tuesday is work waiting to be done, and `destructive` on a settings page is the
+ * tone for something the reader broke. A page of red connections is a page of
+ * alarms that means nothing, and the reader who sees it learns to stop reading the
+ * row, which is the opposite of what a state exists to achieve. `unavailable` is
+ * `neutral` for the same reason from the other side: a capability that is not
+ * offered in this region is not in dispute, and drawing it as though it were turns
+ * a commercial fact into an error.
+ *
+ * **The Block draws a connect control on an available row and nothing on the
+ * other three, and the `action` slot is where the other three put theirs.** A
+ * control that cannot work is worse than no control: a connect button on an
+ * unavailable row is a promise the product will break, and a connect button on a
+ * needs-attention row names the wrong action, because the reader does not want to
+ * connect a second time, they want to fix a first one. So the Block offers exactly
+ * the control its own state implies and hands the rest to the caller, which is
+ * why `action` is a slot and not a `variant` string. The cost is stated rather
+ * than hidden: a consumer who wants a uniform control down the whole column draws
+ * it in the slot for three rows out of four, and the Block will not pretend the
+ * fourth is the same.
+ *
+ * **The mark slot draws no frame, no surface and no radius, and that is a
+ * decision about a specific Component.** A mark in this position is very often a
+ * `PackSwatch`, which is a fully rounded element carrying a `data-pack` boundary,
+ * and the token build resolves the whole radius scale beneath that boundary: a
+ * pack changes the corners of everything under it, which is the point. A frame
+ * with a radius utility drawn around the slot would pin the swatch inside a second
+ * shape, so six packs in a row would show six different silhouettes and the reader
+ * comparing them would be comparing the frame rather than the pack. A tinted
+ * background is refused for the same reason one shade lighter: it says the mark is
+ * a picture, and a swatch is a preview rather than a picture, and the words beside
+ * it are already the identity. A caller who wants a framed logo puts a frame in
+ * the slot.
+ *
+ * **A connected row shows when it was connected rather than a control, because
+ * the question a reader has about a working connection is how long it has been
+ * working.** The alternative was a row of identical management controls down the
+ * whole list, which tells a reader nothing they did not know and pushes the row
+ * that needs them further down. The date is printed exactly as passed, with
+ * `connectedSinceLabel` offered for the caller who has a formatter, and the honest
+ * relative reading is a `relative-time` the caller composes. The cost is the one
+ * `compliance-01` states for a review date: a caller who passes a raw timestamp
+ * gets a raw timestamp, which is honest and rarely what was wanted.
+ *
+ * **A grouped list still shows the integrations the caller did not group.** They
+ * are drawn last, under no title, and the count is on the list element as
+ * `data-ungrouped`, because dropping them is the one simplification that produces
+ * the worst support question a component can produce: a reader who counted eleven
+ * and found ten.
+ *
+ * It is a client Component, and the directive is unconditional: a surface that
+ * attaches a handler owns the JavaScript that carries it, and the directive is on
+ * the module rather than in a leaf so a consumer composing a server page gets the
+ * boundary in one place they can see. The cost is that with `onConnect` omitted the
+ * module is still in the client graph, which was judged worth one boundary rather
+ * than two arrangements of the same surface.
+ */
+export function SettingsIntegrations01({ eyebrow, title, description, integrations, onConnect, connectLabel, groupBy = 'none', empty, headingLevel = 'h2', className, }) {
+    assertProps({ integrations, onConnect, connectLabel });
+    // A group is a group inside the section, so its name is one level below the
+    // section's own heading. The rows carry no headings of their own: a row's name
+    // is a label on a record rather than a section of the page, and eight headings
+    // in a list of connections is eight entries for a reader navigating by heading
+    // who expected sections.
+    const GroupTitle = childLevel(headingLevel);
+    if (integrations.length === 0) {
+        return (_jsxs(Section, { className: className, "data-slot": "settings-integrations", children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description }), _jsx("p", { "data-slot": "settings-integrations-empty", className: "text-muted-foreground text-pretty text-sm", children: empty })] }));
+    }
+    const groups = groupBy === 'category'
+        ? groupOf(integrations)
+        : [{ id: 'all', items: [...integrations] }];
+    // The one control the Block draws itself, and the one state it draws it on. The
+    // other three states hand the row to the caller, for the reason the Block
+    // JSDoc gives.
+    const connectable = (state) => state === 'available';
+    return (_jsxs(Section, { className: className, "data-slot": "settings-integrations", children: [_jsx(SectionHeading, { as: headingLevel, align: "left", eyebrow: eyebrow, title: title, description: description, className: "mb-10" }), _jsx("div", { "data-slot": "settings-integrations-list", "data-ungrouped": groupBy === 'category' && integrations.some((one) => one.category === undefined)
+                    ? integrations.filter((one) => one.category === undefined).length
+                    : undefined, className: cn('flex flex-col gap-10', className), children: groups.map((group) => (_jsxs("section", { "data-slot": "settings-integrations-group", "data-group": group.name, className: "flex flex-col gap-4", children: [group.name === undefined ? null : (_jsx(GroupTitle, { "data-slot": "settings-integrations-group-title", className: "border-border text-muted-foreground border-t pt-4 text-sm font-semibold tracking-wide uppercase", children: group.name })), _jsx("ul", { "data-slot": "settings-integrations-rows", className: "flex flex-col", children: group.items.map((integration) => (_jsxs("li", { "data-slot": "settings-integrations-row", "data-integration": integration.id, "data-state": integration.state, className: "border-border flex flex-wrap items-center gap-x-4 gap-y-3 border-b py-4 first:border-t", children: [integration.mark === undefined ? null : (
+                                    /*
+                                      No frame, no surface and no radius around the mark, and the
+                                      reason is in the Block JSDoc: a `PackSwatch` in this slot is a
+                                      fully rounded element carrying a `data-pack` boundary, and the
+                                      token build resolves the radius scale beneath it. A frame here
+                                      would pin six packs inside six different silhouettes.
+                                    */
+                                    _jsx("span", { "aria-hidden": true, "data-slot": "settings-integrations-mark", className: "flex shrink-0 items-center", children: integration.mark })), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("span", { className: "text-sm font-semibold", children: integration.name }), _jsx("span", { className: "text-muted-foreground text-pretty text-sm", children: integration.capability })] }), _jsx(Status, { "data-slot": "settings-integrations-state", size: "sm", tone: STATE_TONE[integration.state], label: integration.stateLabel, className: "shrink-0" }), integration.state === 'connected' &&
+                                        integration.connectedSince !== undefined ? (_jsx("span", { "data-slot": "settings-integrations-since", className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: integration.connectedSinceLabel === undefined
+                                            ? integration.connectedSince
+                                            : integration.connectedSinceLabel(integration.connectedSince) })) : null, integration.href === undefined ? null : (_jsx(CtaLink, { "data-slot": "settings-integrations-href", href: integration.href, size: "sm", variant: "ghost", className: "shrink-0", children: integration.hrefLabel })), integration.action === undefined ? null : (_jsx("span", { "data-slot": "settings-integrations-action", className: "flex shrink-0 items-center gap-2", children: integration.action })), integration.action === undefined &&
+                                        connectable(integration.state) &&
+                                        onConnect !== undefined &&
+                                        connectLabel !== undefined ? (_jsx(Button, { "data-slot": "settings-integrations-connect", size: "sm", variant: "outline", onClick: () => onConnect(integration.id), className: "shrink-0", children: connectLabel({ id: integration.id, name: integration.name }) })) : null] }, integration.id))) })] }, group.id))) })] }));
+}
+export default SettingsIntegrations01;

package/dist/blocks/settings-members-01/index.d.ts

@@ -0,0 +1,3 @@
+export { SettingsMembers01, default } from './settings-members.js';
+export type { SettingsMembers01Props, SettingsMembersColumn, SettingsMembersInvitation, SettingsMembersMember, SettingsMembersRole, } from './settings-members.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/blocks/settings-members-01/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/blocks/settings-members-01/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAK/D,YAAY,EACV,sBAAsB,EACtB,qBAAqB,EACrB,yBAAyB,EACzB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,oBAAoB,CAAA"}

package/dist/blocks/settings-members-01/index.js

@@ -0,0 +1 @@
+export { SettingsMembers01, default } from './settings-members.js';