@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/blocks/services-01/services.d.ts

@@ -0,0 +1,159 @@
+import type { ReactNode } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { type HeadingLevel } from '../../components/ui/section.js';
+/**
+ * The link arm and the no-link arm of one engagement, as a union.
+ *
+ * The same agreement `CaseStudies01`, `Careers01` and `Industries01` make, for the
+ * same reason: the words that say what following a link does are a claim about
+ * the destination, so they belong to whoever wrote it.
+ */
+export type ServiceLink = {
+    /** Where the engagement's own page is. Present makes the card carry a link. */
+    href: string;
+    /** The words on the link, and what following it does. */
+    hrefLabel: string;
+    /** Opens the destination in a new browsing context, with the matching `rel`. */
+    newTab?: boolean;
+} | {
+    href?: never;
+    hrefLabel?: never;
+    newTab?: never;
+};
+/**
+ * One engagement or capability: what it is called, what it does, what the reader
+ * gets, and what it is for.
+ *
+ * `deliverables` is a `string[]` and not a node, and the reason is that a
+ * deliverables list is a set of short noun phrases the reader is checking off
+ * against their own situation. A node would let a caller put a paragraph in one
+ * entry, and one paragraph in a five-item list is a list the reader stops
+ * scanning. The order is the caller's because it is a claim about what arrives
+ * first, and an empty array renders nothing at all rather than an empty heading
+ * and an empty list.
+ *
+ * `outcome` is separate from `body` for the same reason the deliverables are
+ * separate: a body says what the work is and an outcome says what came of it, and
+ * a reader comparing two engagements needs the second without reading past the
+ * first. `icon` is optional and additive, and a card that reserves room for a mark
+ * that is not there is a hole.
+ */
+export type Service = {
+    /** A stable key for the engagement. */
+    id: string;
+    /** What the engagement is called. */
+    title: string;
+    /** What the work is, in a few sentences. */
+    body: ReactNode;
+    /** What the reader gets, as short noun phrases. Omit it, or pass an empty array. */
+    deliverables?: string[];
+    /** What it is for, stated as an effect rather than as a feature. */
+    outcome?: ReactNode;
+    /** The engagement's mark, from the icon set this system uses. */
+    icon?: LucideIcon;
+} & ServiceLink;
+/**
+ * The props a Services01 takes.
+ *
+ * Every string, every deliverable and every outcome is a prop and the Block ships
+ * none: no engagement, no ordinal, no deliverable and no default set of services.
+ * A list that hardcoded its engagements would hand every consumer a menu of
+ * somebody else's work.
+ */
+export type Services01Props = {
+    /** Optional label above the section title. See the No-Default-Eyebrow Rule. */
+    eyebrow?: string;
+    /** The section title. Omit it for a set composed under its own heading. */
+    title?: string;
+    /** One or two sentences under the title. */
+    description?: string;
+    /**
+     * The engagements, in the order a reader should meet them. Order is the
+     * caller's, and it is load-bearing twice over: it is the order the work is
+     * offered in, and in the `numbered` variant it is the order the ordinals are
+     * derived from.
+     */
+    services: Service[];
+    /**
+     * Whether each engagement is numbered or not.
+     *
+     * `numbered` is opt-in for the reason `FeatureGrid01` states for the same prop
+     * and for the same claim, read here from the other side: a number on a card is
+     * a claim that the set is a sequence. Engagements and capabilities are usually
+     * a set, and a set with numbers on it is read as a set with an order, which
+     * makes a reader who disagrees with the order argue with the numbering rather
+     * than with the content. So the numbers are the caller's decision.
+     */
+    variant?: 'numbered' | 'plain';
+    /** Heading level for the section title. See `HeadingLevel`. */
+    headingLevel?: HeadingLevel;
+    /**
+     * Layout only, exactly as on every Block. Changing a Prism-owned visual
+     * property from here is prohibited.
+     */
+    className?: string;
+};
+/**
+ * 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 declare function Services01({ eyebrow, title, description, services, variant, headingLevel, className, }: Services01Props): import("react").JSX.Element;
+export default Services01;
+//# sourceMappingURL=services.d.ts.map

package/dist/blocks/services-01/services.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"services.d.ts","sourceRoot":"","sources":["../../../src/blocks/services-01/services.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAI9C,OAAO,EAAuC,KAAK,YAAY,EAAE,MAAM,6BAA6B,CAAA;AAGpG;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAA;IACZ,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAA;IACjB,gFAAgF;IAChF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,GAAG;IACF,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,SAAS,CAAC,EAAE,KAAK,CAAA;IACjB,MAAM,CAAC,EAAE,KAAK,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,OAAO,GAAG;IACpB,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAA;IACV,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,IAAI,EAAE,SAAS,CAAA;IACf,oFAAoF;IACpF,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,oEAAoE;IACpE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB,GAAG,WAAW,CAAA;AAEf;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;OAKG;IACH,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAA;IAC9B,+DAA+D;IAC/D,YAAY,CAAC,EAAE,YAAY,CAAA;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAiB,EACjB,YAAmB,EACnB,SAAS,GACV,EAAE,eAAe,+BAqGjB;AAED,eAAe,UAAU,CAAA"}

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"}