* only source of that geometry, so nothing here is optional. This list is the

 * exact structure consumed by `OpenAgentsWeb.UI`. */

@import "../vendor/basecoat/base/base.css";

@import "../vendor/basecoat/components/breadcrumb.css";

@import "../vendor/basecoat/components/button.css";

@import "../vendor/basecoat/components/button-group.css";

@import "../vendor/basecoat/components/input.css";

 * surface and inverse control invert on their own when the ink flips — that is

 * the whole point of deriving them rather than listing them twice.

 *

 * Values are Linear's, taken from a saved copy of their docs: neutral to

 * faintly cool, never blue. The previous palette was tinted (chroma ~.03-.07

 * around hue 263) which read as blue on every surface.

 * The ramp is neutral to faintly cool, never blue. The previous palette was

 * tinted (chroma ~.03-.07 around hue 263), which read as blue on every

 * surface -- borders, muted text, and each of the three ink rungs.

 */

:root {

  color-scheme: dark;

  /* PRIMITIVES — Linear's dark ramp, verbatim.

     void #08090a is their --color-bg-primary, surface #0f1011 their level-1

     panel, raised #141516 their level-2. Raised is LIGHTER than void; light

     mode keeps that direction rather than flipping it. */

  /* PRIMITIVES — the dark ramp.

     Three surface rungs, each a small step up in lightness: page and sidebar on

     void, the working canvas on surface, elevated components on raised. Raised

     is LIGHTER than void; light mode keeps that direction rather than flipping

     it, so a card reads as nearer the reader in both themes. */

  --ink-void: #08090a; /* darkest: page, sidebar */

  --ink-surface: #0f1011; /* +1: canvas, chrome */

  --ink-raised: #141516; /* +2: elevated components */

  --text-ink: #f7f8f8; /* the one text/icon/wash ink (their --color-fg-primary) */

  /* The single accent. Linear's brand indigo, used only for the primary action

     and links; every other surface is neutral.

  /* The single accent, used only for the primary action and links; every other

     surface is neutral.

     NAME COLLISION, deliberate: Basecoat's base.css also defines --accent, but

     as shadcn does — a subtle hover background paired with --accent-foreground,

     not a brand color. Ours is defined later at equal specificity so it wins.

  --warning: #d4b144;

  --danger: #eb5757;

  /* DERIVATIONS — text tiers. Literals are Linear's fg ramp; the percentages

     beside them are the equivalent alpha step, kept so the ladder stays legible

     if a later theme wants to derive rather than list. */

  /* DERIVATIONS — text tiers. The percentages beside each literal are the

     equivalent alpha step, kept so the ladder stays legible if a later theme

     wants to derive these rather than list them. */

  --text-primary: color-mix(in oklab, var(--text-ink) 100%, transparent); /* 100% */

  --text-body: #d0d6e0; /* their fg-secondary */

  --text-muted: #8a8f98; /* their fg-tertiary */

  --control-inverse-bg: var(--text-primary);

  --control-inverse-fg: var(--ink-void);

  /* Borders. Linear's border ramp. */

  /* Borders. Two rungs: a resting hairline and a stronger edge for controls. */

  --line: #23252a; /* their --color-border-primary */

  --line-soft: color-mix(in oklab, var(--text-ink) 8%, transparent); /* 8% */

  --line-faint: color-mix(in oklab, var(--text-ink) 4%, transparent); /* 4% */

/* LIGHT.

 *

 * Linear publishes no light palette (their site is dark-only), so this is

 * derived in the same language rather than copied: the same neutral hue

 * discipline, the same surface-ladder direction (raised is lighter than void),

 * and the same ink flipped to their darkest value.

 * Derived from the dark ramp rather than authored separately: the same neutral

 * hue discipline, the same surface-ladder direction (raised is lighter than

 * void), and the ink flipped to the darkest rung.

 *

 * Only the primitives and the four literal exceptions are restated. The icon

 * tiers, washes, hover surface and inverse control are all derived from

    }

  }

}

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */

/* Basecoat supplies the list structure; this supplies the voice. The trail is

 * quiet by default and only the hovered ancestor brightens -- a breadcrumb is

 * orientation, not a call to action, so it should not compete with the page. */

@layer components {

  .breadcrumb {

    font-size: 0.8125rem;

    line-height: 1.25rem;

    color: var(--text-dim);

  }

  .breadcrumb > ol {

    gap: 6px;

  }

  .breadcrumb li {

    gap: 6px;

  }

  .breadcrumb__separator {

    color: var(--line-strong);

    user-select: none;

  }

  .breadcrumb__link {

    color: var(--text-muted);

    text-decoration: none;

    transition: color var(--motion-fast) var(--ease);

  }

  @media (hover: hover) {

    .breadcrumb__link:hover {

      color: var(--text-primary);

    }

  }

  .breadcrumb__link:focus-visible {

    outline: 2px solid var(--ring);

    outline-offset: 2px;

  }

  .breadcrumb__current {

    color: var(--text-body);

  }

}

/* ── Docs header ──────────────────────────────────────────────────────────── */

/* Breadcrumb on the left, controls pushed right by the trail's own growth

 * rather than a fixed width, so a long component name never collides with the

 * controls -- it truncates instead. */

@layer components {

  .docs-column {

    display: flex;

    flex: 1;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

  }

  .docs-header {

    display: flex;

    flex: none;

    align-items: center;

    gap: 12px;

    min-height: 52px;

    padding-inline: 32px;

    border-bottom: 1px solid var(--line);

    background: var(--ink-void);

  }

  .docs-header .breadcrumb {

    min-width: 0;

    margin-right: auto;

  }

  .docs-header .breadcrumb__current {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  .docs-header__controls {

    display: flex;

    flex: none;

    align-items: center;

    gap: 8px;

  }

}

/* ── Copy button ──────────────────────────────────────────────────────────── */

@layer components {

  .copy-button {

    gap: 6px;

  }

  /* One glyph is shown at a time; both occupy the flow so the control does not

     resize when it flips, which would nudge everything beside it. */

  .copy-button__done {

    display: none;

  }

  .copy-button[data-copied="true"] .copy-button__idle {

    display: none;

  }

  .copy-button[data-copied="true"] .copy-button__done {

    display: inline-flex;

    color: var(--success);

  }

}

```

**This is directly compatible with the palette this repo just adopted.**

`assets/css/app.css` now carries Linear's neutral ramp (`#08090a` → `#f7f8f8`)

with a single indigo accent. Unit's structure — a long neutral ramp plus sparse

`assets/css/app.css` now carries a neutral ramp (`#08090a` → `#f7f8f8`) with a

single indigo accent. Unit's structure — a long neutral ramp plus sparse

semantic accents, with links a shade darker than fills — maps onto our existing

tokens without introducing a third palette, which `UI-003` forbids

(`INVARIANTS.md:1520`: "not introduce a third palette").

          source: "OpenAgentsWeb.UI.field/1",

          summary: "Wrapper that stacks a label, control, and validation message."

        },

        %{

          slug: "openagents-breadcrumb",

          title: "Breadcrumb",

          icon: "compass",

          source: "OpenAgentsWeb.UI.breadcrumb/1",

          summary: "Ancestor trail ending in the current page, which is not a link."

        },

        %{

          slug: "openagents-copy-button",

          title: "Copy button",

          icon: "copy",

          source: "OpenAgentsWeb.UI.copy_button/1",

          summary: "Copies text and confirms it, so the reader is not left guessing."

        },

        %{

          slug: "openagents-header",

          title: "Header",

    </nav>

  </aside>

  <main class="docs-main">

    <.flash_group flash={@flash} />

    {@inner_content}

  </main>

  <div class="docs-column">

    <%!-- The header spans the content column, not the sidebar: the trail names

    where you are within the library, and the controls act on the page you are

    reading. Same arrangement as the docs surface it is modelled on. --%>

    <header class="docs-header">

      <UI.breadcrumb label="Component library">

        <:item navigate={~p"/components"}>Components</:item>

        <:item :if={assigns[:section_title]}>{@section_title}</:item>

        <:item :if={assigns[:item]}>{@item.title}</:item>

      </UI.breadcrumb>

      <div class="docs-header__controls">

        <Layouts.theme_toggle />

        <UI.copy_button

          :if={assigns[:item]}

          id="copy-component-source"

          text={@item.source}

          label="Copy source"

          copied_label="Copied"

        />

      </div>

    </header>

    <main class="docs-main">

      <.flash_group flash={@flash} />

      {@inner_content}

    </main>

  </div>

</div>

    """

  end

  @doc """

  A trail of ancestor links ending in the current page.

  The last item is the current page: it renders as `aria-current="page"` and is

  not a link, because linking a page to itself is a dead control that still

  looks live. Separators carry `aria-hidden` so assistive technology reads the

  trail as a list of places rather than a stream of glyphs.

  """

  attr :class, :any, default: nil

  attr :label, :string, default: "Breadcrumb"

  attr :rest, :global

  slot :item, required: true do

    attr :navigate, :string

    attr :patch, :string

    attr :href, :string

  end

  def breadcrumb(assigns) do

    assigns = assign(assigns, :last_index, length(assigns.item) - 1)

    ~H"""

    <nav class={["breadcrumb", @class]} aria-label={@label} {@rest}>

      <ol>

        <li :for={{item, index} <- Enum.with_index(@item)}>

          <span :if={index > 0} class="breadcrumb__separator" aria-hidden="true">/</span>

          <.link

            :if={index < @last_index}

            navigate={item[:navigate]}

            patch={item[:patch]}

            href={item[:href]}

            class="breadcrumb__link"

          >

            {render_slot(item)}

          </.link>

          <span :if={index == @last_index} aria-current="page" class="breadcrumb__current">

            {render_slot(item)}

          </span>

        </li>

      </ol>

    </nav>

    """

  end

  @doc """

  A control that copies text to the clipboard and reports that it did.

  The confirmation is the point. A copy button that changes nothing on click

  leaves the reader unsure whether it worked, so this flips `data-copied` and

  swaps the glyph for a tick, then returns. The state lives on the element

  rather than in the LiveView because it is presentational and per-visitor.

  """

  attr :id, :string, required: true

  attr :text, :string, required: true, doc: "the text placed on the clipboard"

  attr :label, :string, default: "Copy"

  attr :copied_label, :string, default: "Copied"

  attr :class, :any, default: nil

  attr :rest, :global

  def copy_button(assigns) do

    ~H"""

    <button

      id={@id}

      type="button"

      class={["btn copy-button", @class]}

      data-variant="secondary"

      data-size="sm"

      data-copied="false"

      data-copy-text={@text}

      data-copied-label={@copied_label}

      aria-label={@label}

      phx-hook=".CopyToClipboard"

      {@rest}

    >

      <.icon name="copy" class="copy-button__idle" />

      <.icon name="check" class="copy-button__done" />

      <span class="copy-button__label">{@label}</span>

    </button>

    <script :type={Phoenix.LiveView.ColocatedHook} name=".CopyToClipboard">

      export default {

        mounted() {

          this.el.addEventListener("click", async () => {

            try {

              await navigator.clipboard.writeText(this.el.dataset.copyText)

            } catch (_error) {

              return

            }

            const label = this.el.querySelector(".copy-button__label")

            const original = label && label.textContent

            this.el.dataset.copied = "true"

            if (label) label.textContent = this.el.dataset.copiedLabel

            clearTimeout(this.resetTimer)

            this.resetTimer = setTimeout(() => {

              this.el.dataset.copied = "false"

              if (label) label.textContent = original

            }, 1600)

          })

        },

        destroyed() {

          clearTimeout(this.resetTimer)

        }

      }

    </script>

    """

  end

  @doc """

  One glyph from the governed two-tier icon set.

     socket

     |> assign(:page_title, "Components")

     |> assign(:active_component, :index)

     |> assign(:section_title, nil)

     |> assign(:item, nil)}

  end

         socket

         |> assign(:page_title, item.title)

         |> assign(:active_component, item.slug)

         |> assign(:section_title, section_title_for(item.slug))

         |> assign(:item, item)}

    end

  end

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "openagents-breadcrumb"}} = assigns) do

    ~H"""

    <div class="space-y-6">

      <div class="space-y-2">

        <p class="text-sm text-base-content/60">

          A full trail. The last item is the current page, so it is text rather than a

          link — a link to the page you are already on is a dead control that still

          looks live.

        </p>

        <UI.breadcrumb>

          <:item navigate={~p"/"}>OpenAgents</:item>

          <:item navigate={~p"/components"}>Components</:item>

          <:item>Breadcrumb</:item>

        </UI.breadcrumb>

      </div>

      <div class="space-y-2">

        <p class="text-sm text-base-content/60">Two levels, and a lone root.</p>

        <UI.breadcrumb>

          <:item navigate={~p"/components"}>Components</:item>

          <:item>Badge</:item>

        </UI.breadcrumb>

        <UI.breadcrumb>

          <:item>OpenAgents</:item>

        </UI.breadcrumb>

      </div>

    </div>

    """

  end

  defp component_demo(%{item: %{slug: "openagents-copy-button"}} = assigns) do

    ~H"""

    <div class="space-y-3">

      <p class="text-sm text-base-content/60">

        Click it. The glyph becomes a tick and the label changes for a moment, then

        returns — a copy control that changes nothing leaves you unsure it worked.

      </p>

      <UI.copy_button

        id="demo-copy-button"

        text="OpenAgentsWeb.UI.copy_button/1"

        label="Copy source"

      />

    </div>

    """

  end

  # The breadcrumb names the section a component lives in, so the trail matches

  # the sidebar the reader navigated through.

  defp section_title_for(slug) do

    Enum.find_value(ComponentCatalog.sections(), fn section ->

      if Enum.any?(section.items, &(&1.slug == slug)), do: section.title

    end)

  end

end