@charcuterie/ui 3.10.0 → 3.12.0

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcuterie/ui",
-  "version": "3.10.0",
+  "version": "3.12.0",
   "description": "The Charcuterie components. Tokens for look, @charcuterie/logic for state, ARIA that agents can actually drive.",
   "license": "MIT",
   "type": "module",

package/src/Card/Card.mdx

@@ -51,3 +51,24 @@ The header stacks below `--cq-sm` and sits on one row above it, and the containe
 cannot tell apart, and it is where the fleet's poster grids look wrong today.
 
 <Canvas of={CardStories.Responsive} />
+
+## The accent edge follows the corner
+
+`accentEdge` draws a coloured bar down the leading edge. `{ categorical: 3 }` is a colour a
+user picked, from the ten-wide contrast-audited family; `{ color }` is one the app computed,
+for the case where ten indices are not enough — Folio hashes a repo's name so a repo added
+tomorrow already has a hue and nobody maintains a palette.
+
+> **It is a pseudo-element, not a border, and that is the whole point.** Three apps grew this
+> shape independently and all three drew a straight border beside a rounded box, so the bar
+> ran past the curve and stopped square while the card was round. A border is painted on the
+> border box; it cannot follow a corner. The overlay here takes `border-radius: inherit`, so
+> the bar reads the radius off whatever card it is on and nobody states one twice.
+
+Two shapes this deliberately is not. **Not `box-shadow: inset` on the card itself** — `Card`
+carries `shadow-low` from the elevation scale, and a `box-shadow` at the call site outranks
+that utility and takes the elevation with it. **Not a 3px-wide pseudo-element with a rounded
+leading edge** — a `0.5rem` radius on a 3px box is clamped to fit, so it caps the bar instead
+of following the curve.
+
+<Canvas of={CardStories.AccentEdge} />

package/src/Card/Card.stories.tsx

@@ -13,12 +13,18 @@ import { IconButton } from "../IconButton/IconButton.tsx"
 import { SettingsIcon } from "../icons.storyHelpers.tsx"
 import { ProgressBar } from "../ProgressBar/ProgressBar.tsx"
 import { Card, ELEVATION_CLASS } from "./Card.tsx"
+import { ACCENT_EDGE_CATEGORICAL_CLASS } from "./cardAccentEdge.ts"
 
 const meta = {
   title: "Components/Layout/Card",
   component: Card,
   parameters: { layout: "padded" },
   argTypes: {
+    // An object union, so an object control is the right one — but
+    // it is stated rather than inferred, because docgen's fallback
+    // for a type it cannot read is also an object control and the
+    // two are indistinguishable in the panel.
+    accentEdge: { control: "object" },
     elevation: toStoryChoice(
       Object.keys(
         ELEVATION_CLASS,
@@ -205,3 +211,88 @@ export const Interactive: Story = {
     </div>
   ),
 }
+
+/**
+ * The leading edge, and the two answers the fleet has for what
+ * colour it is.
+ *
+ * A **categorical index** is a colour a user picked — Docket's
+ * project colours come from this ten-wide family, and every pair in
+ * it is contrast-audited. An explicit **colour** is one the app
+ * computed: Folio hashes a repo's name so a repo added tomorrow
+ * already has a hue and nobody maintains a palette, which is 360
+ * answers rather than ten.
+ *
+ * Both bars follow the card's own corner, because the treatment
+ * inherits its radius instead of naming one. Every app that grew
+ * this shape by hand drew it as a straight border beside a rounded
+ * box, and a border cannot follow a curve.
+ */
+export const AccentEdge: Story = {
+  args: { children: "Content" },
+  render: () => (
+    <StorySection title="A categorical index, and an app's own colour. Both take the card's radius.">
+      <StoryGrid columns={3}>
+        {(
+          Object.keys(
+            ACCENT_EDGE_CATEGORICAL_CLASS,
+          ) as unknown as (keyof typeof ACCENT_EDGE_CATEGORICAL_CLASS)[]
+        ).map((index) => (
+          <StoryCell
+            align="stretch"
+            key={index}
+            label={`categorical ${index}`}
+          >
+            <Card
+              accentEdge={{
+                categorical: Number(index) as 1,
+              }}
+              heading={`Project ${index}`}
+            >
+              <p className="text-content-secondary text-sm">
+                A colour the user picked.
+              </p>
+            </Card>
+          </StoryCell>
+        ))}
+
+        <StoryCell align="stretch" label="a hashed hue">
+          <Card
+            accentEdge={{ color: "hsl(287 55% 52%)" }}
+            heading="home-assistant"
+          >
+            <p className="text-content-secondary text-sm">
+              A hue hashed from the name, not an index.
+            </p>
+          </Card>
+        </StoryCell>
+
+        <StoryCell
+          align="stretch"
+          label="a rounder card, same rule"
+        >
+          <Card
+            accentEdge={{ color: "hsl(24 55% 52%)" }}
+            className="rounded-3xl"
+            heading="A wider radius"
+          >
+            <p className="text-content-secondary text-sm">
+              The bar reads the radius off the card rather
+              than naming one, so an override still lines
+              up.
+            </p>
+          </Card>
+        </StoryCell>
+
+        <StoryCell align="stretch" label="a link inside it">
+          <Card
+            accentEdge={{ categorical: 4 }}
+            heading="Still clickable"
+          >
+            <Button size="sm">Open</Button>
+          </Card>
+        </StoryCell>
+      </StoryGrid>
+    </StorySection>
+  ),
+}

package/src/Card/Card.test.tsx

@@ -6,7 +6,7 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Card.stories.tsx"
 
-const { AllStates, Default, Interactive } =
+const { AccentEdge, AllStates, Default, Interactive } =
   composeStories(stories)
 
 test("a heading turns the card into a named landmark", async () => {
@@ -54,3 +54,94 @@ test("region scoping disambiguates two identical buttons", async () => {
     }),
   ).toHaveAttribute("aria-valuenow", "40")
 })
+
+/**
+ * The bar overlays the entire card, links and buttons included, so
+ * `pointer-events: none` on it is the difference between a card you
+ * can use and one that swallows every click. Driven, not asserted
+ * off a class name — the class is what the fix looks like, and this
+ * is what it is for.
+ */
+test("the accent edge does not swallow a click", async () => {
+  const { canvas } = await mountStory(AccentEdge)
+
+  const open = expectAgentDrivable(canvas, {
+    name: "Open",
+    role: "button",
+  })
+
+  let isClicked = false
+
+  open.addEventListener("click", () => {
+    isClicked = true
+  })
+
+  open.click()
+
+  await expect(isClicked).toBe(true)
+})
+
+const readRadius = (card: Element, isBar: boolean) =>
+  globalThis.getComputedStyle(
+    card,
+    isBar ? "::before" : undefined,
+  ).borderTopLeftRadius
+
+/**
+ * The radius is INHERITED rather than restated, which is what lets
+ * one treatment sit on `rounded-lg`, on `rounded-3xl`, and on
+ * whatever an app overrides it to. Computed styles, because a class
+ * name is the thing that can be right while the paint is wrong.
+ */
+test("the bar takes the card's own radius, whatever it is", async () => {
+  const { canvas } = await mountStory(AccentEdge)
+
+  const wider = expectAgentDrivable(canvas, {
+    name: "A wider radius",
+    role: "region",
+  })
+
+  const stock = expectAgentDrivable(canvas, {
+    name: "Project 1",
+    role: "region",
+  })
+
+  await expect(readRadius(wider, true)).toBe(
+    readRadius(wider, false),
+  )
+  await expect(readRadius(stock, true)).toBe(
+    readRadius(stock, false),
+  )
+
+  // And the two cards genuinely differ, or the assertions above
+  // would pass on a component that hardcoded one radius.
+  await expect(readRadius(wider, false)).not.toBe(
+    readRadius(stock, false),
+  )
+})
+
+/**
+ * `Card` carries `shadow-low`. The accent edge is a second shadow,
+ * and the first version of this fix wrote it onto the card itself —
+ * where an unlayered rule outranks the utility and the elevation
+ * silently goes away.
+ */
+test("the accent edge leaves the card's elevation alone", async () => {
+  const { canvas } = await mountStory(AccentEdge)
+
+  const card = expectAgentDrivable(canvas, {
+    name: "Project 1",
+    role: "region",
+  })
+
+  const cardShadow =
+    globalThis.getComputedStyle(card).boxShadow
+  const barShadow = globalThis.getComputedStyle(
+    card,
+    "::before",
+  ).boxShadow
+
+  await expect(cardShadow).not.toBe("none")
+  await expect(cardShadow).not.toContain("inset")
+  await expect(barShadow).toContain("inset")
+})

package/src/Card/Card.tsx

@@ -9,6 +9,11 @@ import type {
 } from "react"
 
 import { toClassName } from "../toClassName.ts"
+import type { CardAccentEdge } from "./cardAccentEdge.ts"
+import {
+  getAccentEdgeClassName,
+  getAccentEdgeStyle,
+} from "./cardAccentEdge.ts"
 
 export type CardSurface = Extract<
   SurfaceRole,
@@ -18,6 +23,16 @@ export type CardSurface = Extract<
 export type CardPadding = "lg" | "md" | "none" | "sm"
 
 export type CardProps = ComponentPropsWithRef<"section"> & {
+  /**
+   * A coloured bar down the leading edge, following the card's own
+   * corners.
+   *
+   * `{ categorical: 3 }` for a colour a user picked; `{ color }`
+   * for one an app computed — a hue hashed from a repo's name, say,
+   * where ten indices are not enough. See `cardAccentEdge.ts` for
+   * why it is a pseudo-element and not a border.
+   */
+  accentEdge?: CardAccentEdge
   /** Buttons or a badge, laid out beside the heading. */
   actions?: ReactNode
   elevation?: ElevationStep
@@ -79,6 +94,7 @@ const PADDING_CLASS: Record<CardPadding, string> = {
  * a layout fact rather than a density one.
  */
 export const Card = ({
+  accentEdge,
   actions,
   children,
   className,
@@ -87,11 +103,25 @@ export const Card = ({
   heading,
   headingLevel = 2,
   padding = "md",
+  style,
   surface = "raised",
   ...sectionProps
 }: CardProps): ReactNode => {
   const headingId = useUniqueId()
 
+  // The caller's own `style` wins. An accent colour is one custom
+  // property, and silently dropping whatever else the call site set
+  // would be a worse trade than letting it override this one.
+  const accentEdgeStyle =
+    accentEdge == null
+      ? undefined
+      : getAccentEdgeStyle(accentEdge)
+
+  const mergedStyle =
+    accentEdgeStyle == null
+      ? style
+      : { ...accentEdgeStyle, ...style }
+
   const Heading = `h${headingLevel}` as const
 
   return (
@@ -108,8 +138,12 @@ export const Card = ({
         SURFACE_CLASS[surface],
         ELEVATION_CLASS[elevation],
         PADDING_CLASS[padding],
+        accentEdge == null
+          ? undefined
+          : getAccentEdgeClassName(accentEdge),
         className,
       )}
+      style={mergedStyle}
     >
       {heading || actions ? (
         <header className="flex flex-col gap-2 cq-sm:flex-row cq-sm:items-start cq-sm:justify-between">

package/src/Card/cardAccentEdge.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, test } from "vitest"
+
+import {
+  ACCENT_EDGE_BASE_CLASS,
+  ACCENT_EDGE_CATEGORICAL_CLASS,
+  ACCENT_EDGE_COLOR_CLASS,
+  ACCENT_EDGE_COLOR_PROPERTY,
+  getAccentEdgeClassName,
+  getAccentEdgeStyle,
+} from "./cardAccentEdge.ts"
+
+describe("getAccentEdgeClassName", () => {
+  test("reads a categorical index off the ten-wide family", () => {
+    const className = getAccentEdgeClassName({
+      categorical: 3,
+    })
+
+    expect(className).toContain(ACCENT_EDGE_BASE_CLASS)
+    expect(className).toContain(
+      ACCENT_EDGE_CATEGORICAL_CLASS[3],
+    )
+  })
+
+  test("threads an app's own colour through one literal", () => {
+    const className = getAccentEdgeClassName({
+      color: "hsl(210 55% 52%)",
+    })
+
+    expect(className).toContain(ACCENT_EDGE_BASE_CLASS)
+    expect(className).toContain(ACCENT_EDGE_COLOR_CLASS)
+  })
+
+  /**
+   * The bar overlays the whole card, links and buttons included, so
+   * this is the difference between a card you can click and one you
+   * cannot.
+   */
+  test("never eats a pointer", () => {
+    expect(
+      getAccentEdgeClassName({ categorical: 1 }),
+    ).toContain("before:pointer-events-none")
+  })
+
+  /**
+   * The card already has a radius; the bar must not restate it.
+   * `inherit` is what makes one component work on `rounded-lg`,
+   * `rounded-xl` and whatever an app overrides it to.
+   */
+  test("takes the card's own radius rather than naming one", () => {
+    expect(
+      getAccentEdgeClassName({ categorical: 1 }),
+    ).toContain("before:rounded-[inherit]")
+  })
+
+  /**
+   * `box-shadow` has no logical form. Without the `rtl:` twin the
+   * bar sits on the left of an Arabic page, which is the trailing
+   * edge there.
+   */
+  test("carries the bar to the other side under rtl", () => {
+    for (const className of [
+      ...Object.values(ACCENT_EDGE_CATEGORICAL_CLASS),
+      ACCENT_EDGE_COLOR_CLASS,
+    ]) {
+      expect(className).toContain("rtl:before:shadow-")
+      expect(className).toContain("inset_-3px")
+    }
+  })
+
+  /**
+   * Tailwind scans source text for COMPLETE class strings, so an
+   * interpolated index generates nothing, paints nothing and
+   * reports nothing. This is the cheap half of that guarantee;
+   * `tailwindCandidates.test.ts` is the half that compiles them.
+   */
+  test("names every categorical index in full", () => {
+    for (const [index, className] of Object.entries(
+      ACCENT_EDGE_CATEGORICAL_CLASS,
+    )) {
+      expect(className).toContain(
+        `var(--color-categorical-${index}-solid)`,
+      )
+    }
+  })
+})
+
+describe("getAccentEdgeStyle", () => {
+  test("writes one custom property for an app's own colour", () => {
+    expect(
+      getAccentEdgeStyle({ color: "hsl(210 55% 52%)" }),
+    ).toStrictEqual({
+      [ACCENT_EDGE_COLOR_PROPERTY]: "hsl(210 55% 52%)",
+    })
+  })
+
+  /**
+   * `undefined`, not `{}`, so a categorical card renders no `style`
+   * attribute at all.
+   */
+  test("writes nothing when the colour came from an index", () => {
+    expect(
+      getAccentEdgeStyle({ categorical: 7 }),
+    ).toBeUndefined()
+  })
+})

package/src/Card/cardAccentEdge.ts

@@ -0,0 +1,135 @@
+/**
+ * A coloured bar down a card's leading edge — and the reason it is
+ * a pseudo-element rather than a border.
+ *
+ * Three apps had grown this shape independently and all three drew
+ * it as a straight border beside a rounded box, so the bar ran past
+ * the curve and stopped square while the card it belonged to was
+ * round. Folio put `border-inline-start` on a WRAPPER around the
+ * card; mail-sifter puts `borderInlineStartWidth: 4` on a
+ * `rounded-xl` anchor; spoolbuddy writes `rounded-lg border-l-3`.
+ * A border is painted on the border box, so none of them can follow
+ * a corner — the notch is not a bug in any one app, it is what that
+ * technique does.
+ *
+ * A pseudo-element overlays the card and takes
+ * `border-radius: inherit`, so the bar follows whatever radius the
+ * card already has and nobody states a radius twice.
+ *
+ * ⚠️ **The shadow goes on the pseudo-element, never on the card.**
+ * `Card` carries `shadow-low` from the elevation scale, and an app
+ * stylesheet is unlayered while Tailwind's utilities sit in
+ * `@layer utilities` — so a `box-shadow` written at the call site
+ * outranks the utility and takes the card's elevation away with it.
+ * That is not hypothetical; it is the version of this fix that was
+ * written first.
+ *
+ * ⚠️ **Not a 3px-wide pseudo-element with a rounded leading edge.**
+ * A `border-radius` of `0.5rem` on a 3px-wide box is clamped by the
+ * browser to fit, so it caps the bar instead of following the
+ * card's curve.
+ *
+ * ⚠️ **`box-shadow` has no logical form**, so the offset is
+ * physical and the `rtl:` variant is what carries the bar to the
+ * other side. A single `inset 3px` would put it on the left of an
+ * Arabic page, which is the trailing edge there.
+ */
+
+import type { CategoricalIndex } from "@charcuterie/tokens"
+
+/**
+ * Which colour the bar takes.
+ *
+ * Two arms, because the fleet has two answers and neither is wrong.
+ * Docket picks a **categorical index** — a colour a user chose for
+ * a project, from the ten-wide contrast-audited family. Folio and
+ * mail-sifter derive a **hue from a name hash**, so a repo added
+ * tomorrow already has a colour and nobody maintains a palette;
+ * that is 360 answers, not ten, and it cannot be an index.
+ *
+ * `intent` is deliberately absent. An intent is a claim the design
+ * system makes — `danger` says what happens if you press the thing
+ * — and no card in this fleet wants its edge to make one. When one
+ * does, that is a third arm and a decision record, not a guess
+ * made here.
+ */
+export type CardAccentEdge =
+  | { categorical: CategoricalIndex; color?: never }
+  | { categorical?: never; color: string }
+
+/**
+ * The custom property an explicit colour is threaded through.
+ *
+ * A property rather than an inline `box-shadow`, because the shadow
+ * string has to stay a COMPLETE literal in the source for Tailwind
+ * to generate it at all. One literal reading one variable covers
+ * every colour an app can compute; interpolating the colour into
+ * the class name would generate nothing, paint nothing, and report
+ * nothing.
+ */
+export const ACCENT_EDGE_COLOR_PROPERTY =
+  "--charcuterie-accent-edge"
+
+/**
+ * The overlay itself. Colour arrives separately.
+ *
+ * `pointer-events: none` is load-bearing rather than tidy: this box
+ * covers the whole card, including every link and button in it.
+ */
+export const ACCENT_EDGE_BASE_CLASS =
+  "relative before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:content-['']"
+
+/**
+ * Ten indices, written out in full, for the reason
+ * `categoricalStyles.ts` opens with: Tailwind scans source text for
+ * COMPLETE class strings, so a template literal generates nothing
+ * at all and the bar renders invisible with no error and no failing
+ * test. `tailwindCandidates.test.ts` compiles every literal in this
+ * package through the real Tailwind, which is the something that
+ * checks.
+ */
+export const ACCENT_EDGE_CATEGORICAL_CLASS: Record<
+  CategoricalIndex,
+  string
+> = {
+  1: "before:shadow-[inset_3px_0_0_var(--color-categorical-1-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-1-solid)]",
+  2: "before:shadow-[inset_3px_0_0_var(--color-categorical-2-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-2-solid)]",
+  3: "before:shadow-[inset_3px_0_0_var(--color-categorical-3-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-3-solid)]",
+  4: "before:shadow-[inset_3px_0_0_var(--color-categorical-4-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-4-solid)]",
+  5: "before:shadow-[inset_3px_0_0_var(--color-categorical-5-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-5-solid)]",
+  6: "before:shadow-[inset_3px_0_0_var(--color-categorical-6-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-6-solid)]",
+  7: "before:shadow-[inset_3px_0_0_var(--color-categorical-7-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-7-solid)]",
+  8: "before:shadow-[inset_3px_0_0_var(--color-categorical-8-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-8-solid)]",
+  9: "before:shadow-[inset_3px_0_0_var(--color-categorical-9-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-9-solid)]",
+  10: "before:shadow-[inset_3px_0_0_var(--color-categorical-10-solid)] rtl:before:shadow-[inset_-3px_0_0_var(--color-categorical-10-solid)]",
+}
+
+/** The same bar, reading the caller's own colour. */
+export const ACCENT_EDGE_COLOR_CLASS =
+  "before:shadow-[inset_3px_0_0_var(--charcuterie-accent-edge)] rtl:before:shadow-[inset_-3px_0_0_var(--charcuterie-accent-edge)]"
+
+export const getAccentEdgeClassName = (
+  accentEdge: CardAccentEdge,
+): string =>
+  `${ACCENT_EDGE_BASE_CLASS} ${
+    accentEdge.categorical == null
+      ? ACCENT_EDGE_COLOR_CLASS
+      : ACCENT_EDGE_CATEGORICAL_CLASS[
+          accentEdge.categorical
+        ]
+  }`
+
+/**
+ * The inline style an explicit colour needs, and nothing when the
+ * colour came from an index.
+ *
+ * Returns `undefined` rather than `{}` so a card with a categorical
+ * edge and no `style` of its own renders no `style` attribute at
+ * all.
+ */
+export const getAccentEdgeStyle = (
+  accentEdge: CardAccentEdge,
+): Record<string, string> | undefined =>
+  accentEdge.color == null
+    ? undefined
+    : { [ACCENT_EDGE_COLOR_PROPERTY]: accentEdge.color }

package/src/CopyButton/CopyButton.mdx

@@ -0,0 +1,84 @@
+import { Canvas, Controls, Meta } from "@storybook/addon-docs/blocks";
+
+import * as CopyButtonStories from "./CopyButton.stories";
+
+<Meta of={CopyButtonStories} />
+
+# CopyButton
+
+**A button that puts a string on the clipboard and says so.** Press it, the label turns to
+`Copied`, and the caller is told whether that is true.
+
+<Canvas of={CopyButtonStories.Default} />
+
+## Props
+
+<Controls />
+
+## Where it came from
+
+Four repos spell this shape by hand, and no two agree:
+
+| Repo | How it copies | What it does when the clipboard says no |
+| --- | --- | --- |
+| mux-magic (`YamlModal`) | flips its own label on a `setTimeout` | nothing — the label still says `Copied!` |
+| spoolbuddy (`Settings`) | 15 lines inline, with the `execCommand` fallback | a toast |
+| bambuddy (`ArchivesPage`) | a menu item, twice in one file | a toast |
+| mail-sifter | a verification-code banner | **marks the mail done anyway** |
+
+The last row is why the failure path is a first-class state here rather than a `catch` that
+shrugs. That consumer files the mail away on a copy, so a copy that did not happen has to be
+distinguishable from one that did.
+
+## The confirmation is the button
+
+The press and the proof are the same object, so the eye does not travel. A toast is the
+right shape for something that happened **somewhere else** — a background job, another pane
+— and the wrong shape for the thing directly under the pointer. A consumer that wants a
+toast as well still gets one from `onCopy`.
+
+<Canvas of={CopyButtonStories.Confirmed} />
+
+## The label is a word, and so is the failure
+
+`Copy` → `Copied`, with the intent moving to `success` underneath it. The colour is not the
+message: a colour change alone is invisible to a screen reader, unreliable for a
+colour-blind reader, and this library [ships no icons](?path=/docs/guides-building-an-app--docs),
+so a tick glyph is not available to carry it either.
+
+The refusal says what to do next rather than only that something went wrong.
+
+<Canvas of={CopyButtonStories.Refused} />
+
+## Three routes to the clipboard
+
+`copyText.ts` tries them in order and never throws:
+
+1. **`navigator.clipboard.writeText`** — the real API, and it exists only in a *secure
+   context*. A `devshare` URL and `localhost` are secure; a plain `http://` dev server on
+   the LAN is not.
+2. **A hidden `<textarea>` and `document.execCommand("copy")`** — deprecated, kept because
+   it is the only thing that works in that insecure context, and because spoolbuddy already
+   carries this exact block inline.
+3. **Report the failure**, so the caller can hold on to whatever it was about to discard.
+
+`copy` is injectable, which is how the `Refused` story above exists and how a host with its
+own clipboard bridge — Electron, a kiosk shell — supplies it.
+
+## Own labels
+
+The labels are content. A surface that copies one specific thing should say which thing.
+
+<Canvas of={CopyButtonStories.OwnLabels} />
+
+<Canvas of={CopyButtonStories.AllAppearances} />
+
+## What it does not do
+
+**It does not own the value.** No `children`-as-value, no reading text out of a sibling
+node: the string is a prop, because the thing on screen is regularly not the thing worth
+copying (a masked key, a truncated URL, a code split across two spans).
+
+**It does not clear the timer for you and hope.** The confirmation timer is cancelled on
+unmount and on a re-press — two of the four hand-rolled copies set state on an unmounted
+component if you press and navigate away.