@engineio/ui 0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Engine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,274 @@
+# @engineio/ui
+
+The Engine design system: tokens, the brand face, and twenty Svelte primitives,
+published once and consumed by every Engine product.
+
+Gallery — <https://engineio.github.io/ui>
+
+```bash
+bun add @engineio/ui
+```
+
+Public on npmjs, so that is the whole of it — no registry configuration, no
+token, no `.npmrc`. Published from CI by npm trusted publishing, so every
+version carries provenance linking it back to the commit and workflow run that
+built it.
+
+```css
+/* app.css */
+@import "tailwindcss";
+@import "@engineio/ui/styles";
+@source "../node_modules/@engineio/ui/dist";
+```
+
+```svelte
+<script>
+  import { Button, Card, CardHeader, CardTitle } from "@engineio/ui"
+</script>
+
+<Card>
+  <CardHeader><CardTitle>Accelerate Growth.</CardTitle></CardHeader>
+  <Button>Publish Game</Button>
+</Card>
+```
+
+**That `@source` line is not optional.** Tailwind 4 does not scan
+`node_modules`, so without it the utility classes the primitives are written
+against never get generated. Adjust the relative path to wherever
+`node_modules` sits from the importing stylesheet — it resolves relative to the
+CSS file that declares it.
+
+The failure mode is nastier than "nothing renders", which is why it is worth
+getting right first time: the tokens still land (they are plain custom property
+declarations), and any class that *also* appears somewhere in your own source
+still works. So you get a page that is half-styled — magenta fills present,
+`rounded-control` and `border-grey-600` missing — which reads like a component
+bug rather than a build-config one. In a test consumer, omitting the line took
+the stylesheet from 30KB to 6KB with no error at all.
+
+---
+
+## What this is, and what it is not
+
+This package owns **brand rules**: colour, type, shape, motion, focus, and the
+twenty primitives that carry them. Change it when the brand changes.
+
+It does not own **product behaviour**. Engine Studio's approval queue, rgs's
+operator picker, a `play` button variant — those live in the products. The
+package is deliberately small so it can stay stable.
+
+Consumers are **never auto-upgraded**. Cutting a release only makes a version
+available; engine and rgs pick it up when someone bumps the dependency and opens
+a PR. That is the point of publishing rather than sharing source — the upgrade
+is a reviewable diff on the consumer's own schedule.
+
+## Extending a component
+
+Every variant map is exported. Add product variants without forking the
+component or waiting on a release here:
+
+```ts
+// $lib/components/ui/button-variants.ts — in YOUR repo
+import { buttonVariants } from "@engineio/ui"
+import { tv } from "tailwind-variants"
+
+export const appButtonVariants = tv({
+  extend: buttonVariants,
+  variants: {
+    variant: {
+      tab: "bg-transparent text-grey-300 hover:bg-white/6 hover:text-foreground",
+      play: "bg-primary text-primary-foreground hover:bg-primary-press",
+    },
+  },
+})
+```
+
+Brand rules (shape, weight, motion, focus ring) come from the package. Product
+variants stay in the product. If you find yourself wanting to upstream a variant
+that only one product uses, that is the signal to extend instead.
+
+`buttonVariants`, `badgeVariants` and `alertVariants` are all exported for
+this. Every primitive also passes `class` through `cn`, so
+`<Button class="w-full" />` works without `!important`.
+
+## What ships
+
+**Tokens** — `styles/tokens.css` as a Tailwind 4 `@theme` block. Three brand
+colours, three status colours, a twelve-step neutral ramp, radii by role, two
+shadows, three easings.
+
+**The brand face** — Proxima Nova, seven cuts, referenced by relative path so
+your bundler fingerprints them out of `node_modules`. You do not need a copy in
+`static/fonts`.
+
+**Marks** — `EngineWordmark` and `EngineIcon`, vector, in the two sanctioned
+colourways (`variant="primary"` white, `variant="secondary"` Off Black). Size
+by height alone. The wordmark is artwork, not type — with the vector in the
+package there is no reason to typeset "engine" in Proxima Nova again.
+
+**Primitives** — Alert, Badge, Button, Card, Checkbox, Dialog, Input, Label,
+Popover, Progress, RadioGroup, Select, Separator, Skeleton, Switch, Table, Tabs,
+Textarea, Tooltip.
+
+Badge and Tag were merged into one chip. There is no `Tag`: the soft
+repository-label treatment it carried is now what `Badge` looks like, and the
+name `Badge` survived because it is the one in use — 35 call sites in the engine
+repo, against zero for `Tag`.
+
+Deliberately excluded: `form`, `data-table`, `drawer`, `resizable`, `carousel`
+and `chart` — heavy dependencies and product-specific APIs. Copy those from the
+engine repo into your product if you need them. `sonner` was excluded because
+toasts need success and error colours that did not exist; now that they do, it
+is a candidate for the next release.
+
+## Development
+
+```bash
+bun install
+bun run dev            # the gallery, on :3100
+bun run check          # svelte-check
+bun run build          # svelte-package -> dist, then publint
+bun run build:gallery  # the gallery -> build/
+```
+
+CI enforces what review forgets: no raw hex literals, no Tailwind stock palette,
+no retired sub-brand colours, no emoji. Those four checks exist because all four
+happened in the products.
+
+## Releasing
+
+**Every push to `main` releases.** semantic-release reads the conventional
+commits since the last tag, works out the version, tags it, writes the GitHub
+release notes and publishes to GitHub Packages — one run, no release PR, no
+approval step. A push with nothing releasable in it (`docs:`, `chore:`, `ci:`)
+is a no-op rather than a failure.
+
+| Commit type | Bump |
+| --- | --- |
+| `feat:`, `tokens:` | minor |
+| `fix:`, `perf:`, `style:`, `refactor:` | patch |
+| `docs:`, `test:`, `build:`, `ci:`, `chore:` | none |
+| any `!` / `BREAKING CHANGE:` | minor, while under 1.0.0 |
+
+Use `tokens:` for token changes so they land in their own release-notes
+section.
+
+**Two things are deliberately not tracked in git.** `package.json`'s version is
+the placeholder `0.0.0-development` — tags are the source of truth, and
+semantic-release writes the real version in the runner just before publishing.
+And there is no `CHANGELOG.md`; the release notes are the changelog, generated
+from the same commits. Both follow from `main` requiring pull requests: the
+usual setup commits the bump and changelog back to the release branch, which
+would need a bypass no CI job should hold.
+
+We are on `0.x` on purpose. Semver means something the moment two repos depend
+on you, and the token layer is still moving — breaking changes are cheap and
+expected until it settles. That is enforced by `breaking → minor` in
+`.releaserc.json`; deleting that rule is the deliberate act that cuts `1.0.0`
+and starts the promises.
+
+## Known gaps
+
+Stated rather than designed around. Most are inherited from the brand; the
+first is a decision made here that the brand documents have not caught up with.
+
+1. **The status palette is a local decision the brand documents do not yet
+   know about.** Success `#00C46A`, warning `#FFB020` and danger `#FF3B30` now
+   exist in `tokens.css`, commissioned at the repo owner's direction to close
+   what was previously this list's worst gap. `--color-destructive` aliases
+   danger, so Alert, the Button's destructive variant and Input's
+   `aria-invalid` state all resolve to a real red instead of to magenta.
+
+   Every value clears 4.5:1 three ways — Off Black as ink on the fill, and the
+   colour as text on both the page and its own 12% tint. **Ink on a status
+   fill is always Off Black**; white fails on all three.
+
+   The outstanding work is documentary, not technical: `ENGINE-BRAND.md` §10
+   and `ENGINE-DESIGN-SYSTEM.md` §12 in the engine repo still state that no
+   status palette exists and that one must not be invented. Those sections
+   need updating and the values want brand-team ratification. Until that
+   happens, this package and the brand documents disagree — and by this repo's
+   own rule (see Source of truth) the documents win, so treat these three as
+   provisional.
+
+   One judgement call inside the palette: warning sits ΔE 28.7 from Partner
+   Yellow `#FFDD00` — visibly amber beside that pure yellow, but not
+   dramatically. It does not matter while Partner Yellow is unused; if Engine
+   Integration adopts it, a warning chip next to a Partner badge on one surface
+   wants another look. And there is deliberately **no `info` colour**: the
+   obvious choice is a blue, and any blue would read as the retired Sportsbook
+   Blue returning. Use the neutral ramp for informational states.
+
+2. **Still no categorical palette.** `Badge` ships the soft repository-label
+   treatment — tinted fill, matching ink — in eight variants, four of which are
+   the functional status colours. A *categorical* palette (one hue per topic,
+   twenty of them) is a separate and still-unmade decision: eighteen accents on
+   one surface is the direct opposite of "one accent per surface, never two".
+   Do not press the status colours into that job — using `success` to mean
+   "slots" because green looked right spends the only signal the palette
+   carries. If a categorical palette is granted, declare it here once as a
+   named group rather than as one-off fills discovered in a diff later.
+
+3. **Two deliberate deviations from the brand document**, both at the repo
+   owner's direction, both leaving the code and the document in disagreement.
+
+   **Badge is one component where §6 specifies two.** The document defines
+   Badge and Tag separately, Badge as a filled pill with white ink. This
+   package ships a single soft chip, because the two-component rule only ever
+   generated arguments about which a given label was. It does resolve a
+   contradiction that used to sit in this list: the filled badge's
+   white-on-magenta at 11px measured 3.9:1, a documented AA failure, against
+   5.81:1 for the soft chip's `primary-300` ink on a magenta tint.
+
+   **Alert signals state with a coloured left-edge bar**, which the brand
+   prohibits — twice. Worth reading the wording precisely, because it is
+   narrower than it first looks: ENGINE-BRAND.md §2 bans "a coloured left-edge
+   accent **to signal which sub-brand a card belongs to**", and
+   ENGINE-DESIGN-SYSTEM.md §11 bans "a coloured left border **to indicate
+   category or ownership**". Both scope the prohibition to signalling
+   identity, and both give the same reason: the lockup does that job. A status
+   bar signals state, which no lockup can express. That is the reading this is
+   built on — a reading, not an exemption.
+
+   Either way, §6 and §11 need updating or these need reverting, and by this
+   repo's own source-of-truth rule the document nominally wins.
+
+4. **JetBrains Mono is not loaded.** The brand specifies it for all numerics,
+   keys, IDs, code and eyebrow labels. Neither engine nor rgs has ever shipped
+   the binary, so every monospace surface in both products renders in the
+   platform default. `--font-mono` falls back safely, but the brand face is
+   absent. It is OFL-licensed and free to redistribute: drop the `.woff2` files
+   into `src/lib/fonts/` and add the `@font-face` blocks to `styles/fonts.css`.
+
+5. **Proxima Nova is commercially licensed.** The seven cuts ship inside this
+   package, which is private and org-scoped — the same internal distribution as
+   the copies already sitting in engine's and rgs's `static/fonts`. Worth a
+   glance from whoever owns the licence before this goes anywhere less private.
+   Inter is the documented substitute where the licence does not reach.
+
+6. **Engine Integration's accent is unsettled.** Brand direction assigns it
+   Partner Yellow; every shipped surface is magenta and was deliberately
+   migrated there. `--color-partner-yellow` is declared and available; build
+   Integration in magenta until the call is made. A half-migrated accent is
+   worse than a consistent one.
+
+7. **No vector sub-brand artwork.** The wordmark and the figure mark are
+   vector and ship here. The 3x3 dot badges that precede a sub-brand name in a
+   lockup are raster extractions at roughly 29px and go soft above 24px, so
+   this package ships no `SubBrandLockup` at all. The originals are a
+   brand-team ask.
+
+8. **Layout and scrim tokens live only in the document.** `--space-*`,
+   `--page-max`, `--content-max` and `--scrim-bottom` are specified in the
+   design system document §2 and are not declared in `tokens.css`. Tailwind's
+   own 4px scale already produces every spacing step (`p-14` is 56px, `p-32`
+   is 128px), and the two page widths are carried as arbitrary values, so the
+   numbers are reachable but unnamed. The gallery's imagery section sets the
+   scrim inline for the same reason.
+
+## Source of truth
+
+`docs/brand/ENGINE-DESIGN-SYSTEM.md` in the engine repo is the written
+specification, and `docs/brand/ENGINE-BRAND.md` the brand guidelines. Where this
+package and those documents disagree, **the documents win and this package is
+wrong** — open an issue rather than changing the document to match the code.

package/dist/components/brand/engine-icon.svelte

@@ -0,0 +1,75 @@
+<script lang="ts" module>
+  /**
+   * The two sanctioned colourways, and the only two.
+   *
+   *   primary   — Pure White, for the dark surfaces the brand actually uses
+   *   secondary — Off Black, for print, letterhead and inverted brand panels
+   *
+   * These are named after the source artwork (Engine_Primary_Icon.svg /
+   * Engine_Secondary_Icon.svg) rather than after the colour, so the files and
+   * the code agree.
+   */
+  export type EngineMarkVariant = "primary" | "secondary"
+</script>
+
+<script lang="ts">
+  import { cn } from "../../utils.js"
+  import type { SVGAttributes } from "svelte/elements"
+
+  // The Engine figure mark. Vector, from the brand team's own artwork — which
+  // closes the gap the earlier marks had: every previous badge and lockup in
+  // this system was a raster extraction from deck page images at roughly 29px,
+  // and went soft above 24px. This scales.
+  //
+  // THE MARK IS ARTWORK, NOT AN ICON. The brand allows it in white or Off
+  // Black and nothing else — never outlined, stretched, skewed, or recoloured.
+  // That is why colour is a two-value `variant` rather than `currentColor`:
+  // with currentColor any ancestor's text colour silently becomes brand
+  // colour, and a magenta wordmark is one careless `text-primary` away. The
+  // variant makes the sanctioned choice the only reachable one.
+  //
+  // Sizing is by class, and height-only: `class="h-8"` with width following
+  // from the viewBox. Never set both — the brand forbids distortion, and the
+  // 810x1000 ratio is not one anybody reproduces by hand.
+
+  let {
+    ref = $bindable(null),
+    variant = "primary",
+    class: className,
+    title,
+    ...restProps
+    }: SVGAttributes<SVGSVGElement> & {
+    ref?: SVGSVGElement | null
+    variant?: EngineMarkVariant
+    /**
+     * Accessible name. Omit when the mark sits beside the word "Engine" or
+     * other naming text — then it is decorative and gets aria-hidden, so a
+     * screen reader does not announce the brand twice.
+     */
+    title?: string
+  } = $props()
+</script>
+
+<svg
+  bind:this={ref}
+  viewBox="0 0 810 1000"
+  xmlns="http://www.w3.org/2000/svg"
+  class={cn(
+    "h-8 w-auto shrink-0",
+    variant === "primary" ? "text-foreground" : "text-background",
+    className,
+  )}
+  role={title ? "img" : undefined}
+  aria-hidden={title ? undefined : "true"}
+  {...restProps}
+>
+  {#if title}
+    <title>{title}</title>
+  {/if}
+  <path
+    fill="currentColor"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M809.525 207.792H755.007C786.985 265.518 805.192 331.931 805.192 402.597C805.192 521.09 754 627.625 672.527 701.297C745.977 767.713 794.816 860.839 803.724 965.356C805.349 984.429 789.676 1000 770.534 1000H632.061C612.919 1000 597.724 984.35 594.357 965.507C578.074 874.372 498.414 805.195 402.597 805.195C306.78 805.195 227.121 874.372 210.837 965.507C207.47 984.35 192.275 1000 173.134 1000H34.6592C15.5177 1000 -0.154779 984.429 1.4707 965.356C10.3784 860.84 59.2162 767.714 132.665 701.298C51.192 627.626 3.5177e-05 521.09 0 402.597C0 180.249 180.249 0 402.597 0H809.525V207.792ZM402.597 207.793C295.009 207.793 207.792 295.01 207.792 402.598C207.792 510.185 295.009 597.402 402.597 597.402C510.184 597.402 597.401 510.185 597.401 402.598C597.401 295.01 510.184 207.793 402.597 207.793Z"
+  />
+</svg>

package/dist/components/brand/engine-icon.svelte.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The two sanctioned colourways, and the only two.
+ *
+ *   primary   — Pure White, for the dark surfaces the brand actually uses
+ *   secondary — Off Black, for print, letterhead and inverted brand panels
+ *
+ * These are named after the source artwork (Engine_Primary_Icon.svg /
+ * Engine_Secondary_Icon.svg) rather than after the colour, so the files and
+ * the code agree.
+ */
+export type EngineMarkVariant = "primary" | "secondary";
+import type { SVGAttributes } from "svelte/elements";
+type $$ComponentProps = SVGAttributes<SVGSVGElement> & {
+    ref?: SVGSVGElement | null;
+    variant?: EngineMarkVariant;
+    /**
+     * Accessible name. Omit when the mark sits beside the word "Engine" or
+     * other naming text — then it is decorative and gets aria-hidden, so a
+     * screen reader does not announce the brand twice.
+     */
+    title?: string;
+};
+declare const EngineIcon: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type EngineIcon = ReturnType<typeof EngineIcon>;
+export default EngineIcon;

package/dist/components/brand/engine-wordmark.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { cn } from "../../utils.js"
+  import type { SVGAttributes } from "svelte/elements"
+  import type { EngineMarkVariant } from "./engine-icon.svelte"
+
+  // The Engine wordmark. Vector, from the brand team's artwork.
+  //
+  // "The engine wordmark is a custom soft-rounded face, not Proxima Nova. It is
+  // artwork. Never set the wordmark in type, never approximate it in a
+  // lookalike, never outline, stretch, skew or recolour it beyond white / Off
+  // Black." That rule is the reason this component exists. With the vector in
+  // the package there is no longer any excuse to typeset "engine" in Proxima
+  // Nova and hope.
+  //
+  // Colour is the same two-value variant as EngineIcon, for the same reason:
+  // `currentColor` would let any ancestor's text colour become brand colour.
+  //
+  // THE viewBox IS NOT THE ARTWORK'S BOUNDING BOX, AND MUST NOT BE "FIXED".
+  //
+  // The paths occupy 0..449 vertically: the letters sit on a baseline at
+  // 361.532 and the g descends 87.468 below it. That box centres on 224.5,
+  // while the word itself centres on 180.766. Anything vertically centring
+  // this mark, such as a flex header or a table cell, put the word 43.734
+  // units too high and left the descender doing the balancing. At h-7 that is
+  // most of 3px, which is plainly visible beside adjacent text.
+  //
+  // So the box is padded above the letters by exactly the descender depth,
+  // 87.468. The artwork is untouched; the box is now symmetric about the word,
+  // its centre (180.766) lands on the word's centre, and `items-center` is
+  // correct with no per-call-site nudging.
+  //
+  // The cost is that height now buys 536.468 units instead of 449, so the
+  // letters render ~16% smaller for a given `h-*` than they did before. That
+  // is the trade for a box that centres: one step up the scale restores it.
+  //
+  // Sizing is height-only by class. At 2000x536.468, `class="h-6"` gives a
+  // ~89px-wide wordmark. Check the small end, because the counters in the two
+  // "e"s and the "g" close up before the shape stops being legible.
+  // Master-brand surfaces carry this; a sub-brand surface carries a lockup
+  // (wordmark plus the sub-brand name), which this package does not ship
+  // because the badge artwork is still raster.
+
+  let {
+    ref = $bindable(null),
+    variant = "primary",
+    class: className,
+    title = "Engine",
+    ...restProps
+    }: SVGAttributes<SVGSVGElement> & {
+    ref?: SVGSVGElement | null
+    variant?: EngineMarkVariant
+    /**
+     * Accessible name, defaulting to "Engine". Unlike the icon, a wordmark
+     * carries the company name as its content, so it is almost never
+     * decorative. Pass `title={undefined}` to hide it from screen readers when
+     * it sits next to naming text.
+     */
+    title?: string | undefined
+  } = $props()
+</script>
+
+<svg
+  bind:this={ref}
+  viewBox="0 -87.468 2000 536.468"
+  xmlns="http://www.w3.org/2000/svg"
+  class={cn(
+    "h-6 w-auto shrink-0",
+    variant === "primary" ? "text-foreground" : "text-background",
+    className,
+  )}
+  role={title ? "img" : undefined}
+  aria-hidden={title ? undefined : "true"}
+  {...restProps}
+>
+  {#if title}
+    <title>{title}</title>
+  {/if}
+  <g fill="currentColor">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1124.28 93.2987H1099.82C1114.16 119.218 1122.33 149.036 1122.33 180.765C1122.33 233.968 1099.36 281.802 1062.82 314.881C1095.77 344.704 1117.68 386.522 1121.67 433.456C1122.4 442.013 1115.38 448.999 1106.8 449H1044.66C1036.08 449 1029.27 441.978 1027.76 433.524C1020.46 392.599 984.73 361.532 941.748 361.532C898.765 361.532 863.032 392.599 855.733 433.524C854.225 441.978 847.414 449 838.835 449H776.699C768.119 449 761.096 442.013 761.823 433.456C765.816 386.523 787.723 344.704 820.671 314.881C784.127 281.802 761.163 233.968 761.163 180.765C761.164 80.9315 842.013 0.000368566 941.745 0H1124.28V93.2987ZM941.748 93.2987C893.491 93.2994 854.371 132.459 854.37 180.765C854.37 229.071 893.49 268.232 941.748 268.233C990.005 268.233 1029.13 229.071 1029.13 180.765C1029.13 132.459 990.005 93.2987 941.748 93.2987Z"
+    />
+    <path
+      d="M557.281 3.88776C656.366 3.88775 736.812 83.771 737.853 182.71H737.865V345.983C737.865 354.57 730.909 361.532 722.33 361.532H660.194C651.615 361.531 644.661 354.57 644.661 345.983V184.652L644.631 182.395C643.435 135.132 604.785 97.1865 557.281 97.1865C509.777 97.1869 471.127 135.132 469.931 182.395L469.903 184.652V345.983C469.903 354.57 462.949 361.531 454.371 361.532H392.234C383.656 361.532 376.7 354.57 376.699 345.983V182.71H376.711C377.753 83.7712 458.196 3.88812 557.281 3.88776Z"
+    />
+    <path
+      d="M1225.24 0C1233.82 0.00063118 1240.78 6.9616 1240.78 15.5485V345.981C1240.78 354.568 1233.82 361.531 1225.24 361.532H1163.11C1154.53 361.531 1147.57 354.567 1147.57 345.978V15.551C1147.57 6.96271 1154.53 0.00051524 1163.11 0H1225.24Z"
+    />
+    <path
+      d="M1444.66 3.88776C1543.75 3.88775 1624.19 83.7707 1625.23 182.71H1625.24V345.983C1625.24 354.57 1618.29 361.532 1609.71 361.532H1547.58C1539 361.532 1532.04 354.57 1532.04 345.983V184.652L1532.01 182.395C1530.81 135.132 1492.16 97.1865 1444.66 97.1865C1397.16 97.1869 1358.51 135.132 1357.31 182.395L1357.28 184.652V345.983C1357.28 354.57 1350.33 361.531 1341.75 361.532H1279.61C1271.03 361.532 1264.08 354.57 1264.08 345.983V182.71H1264.09C1265.13 83.7709 1345.57 3.88812 1444.66 3.88776Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M180.582 3.88776C279.667 3.88775 360.113 83.771 361.154 182.71H361.166V198.258C361.166 206.846 354.212 213.809 345.633 213.809H100.481C113.966 244.699 144.753 266.288 180.582 266.288C201.923 266.288 221.478 258.63 236.652 245.909C242.288 241.184 250.272 239.768 256.639 243.448L312.403 275.674C320.364 280.275 322.649 290.798 316.601 297.727C283.498 335.638 234.834 359.587 180.582 359.587C82.7983 359.586 3.17237 281.787 0.097158 184.652H0C3.50508e-06 183.679 0.00958911 182.707 0.0249123 181.737C0.00958911 180.767 3.50462e-06 179.796 0 178.822H0.097158C3.17237 81.687 82.7983 3.88812 180.582 3.88776ZM180.582 97.1865C147.053 97.1867 117.94 116.093 103.289 143.835H257.875C243.224 116.093 214.111 97.1865 180.582 97.1865Z"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1819.42 3.88776C1918.5 3.88775 1998.95 83.771 1999.99 182.71H2000V198.258C2000 206.846 1993.05 213.809 1984.47 213.809H1739.32C1752.8 244.699 1783.59 266.288 1819.42 266.288C1840.76 266.288 1860.31 258.63 1875.49 245.909C1881.12 241.184 1889.11 239.768 1895.47 243.448L1951.24 275.674C1959.2 280.275 1961.48 290.798 1955.43 297.727C1922.33 335.638 1873.67 359.587 1819.42 359.587C1721.63 359.586 1642.01 281.787 1638.93 184.652H1638.83C1638.83 183.679 1638.84 182.707 1638.86 181.737C1638.84 180.767 1638.83 179.796 1638.83 178.822H1638.93C1642.01 81.687 1721.63 3.88812 1819.42 3.88776ZM1819.42 97.1865C1785.89 97.1867 1756.77 116.093 1742.12 143.835H1896.71C1882.06 116.093 1852.94 97.1865 1819.42 97.1865Z"
+    />
+  </g>
+</svg>

package/dist/components/brand/engine-wordmark.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { SVGAttributes } from "svelte/elements";
+import type { EngineMarkVariant } from "./engine-icon.svelte";
+type $$ComponentProps = SVGAttributes<SVGSVGElement> & {
+    ref?: SVGSVGElement | null;
+    variant?: EngineMarkVariant;
+    /**
+     * Accessible name, defaulting to "Engine". Unlike the icon, a wordmark
+     * carries the company name as its content, so it is almost never
+     * decorative. Pass `title={undefined}` to hide it from screen readers when
+     * it sits next to naming text.
+     */
+    title?: string | undefined;
+};
+declare const EngineWordmark: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type EngineWordmark = ReturnType<typeof EngineWordmark>;
+export default EngineWordmark;

package/dist/components/brand/index.d.ts

@@ -0,0 +1,3 @@
+import EngineIcon, { type EngineMarkVariant } from "./engine-icon.svelte";
+import EngineWordmark from "./engine-wordmark.svelte";
+export { EngineIcon, EngineWordmark, type EngineMarkVariant };

package/dist/components/brand/index.js

@@ -0,0 +1,3 @@
+import EngineIcon, {} from "./engine-icon.svelte";
+import EngineWordmark from "./engine-wordmark.svelte";
+export { EngineIcon, EngineWordmark };

package/dist/components/ui/alert/alert-description.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  // 13px on the grey ramp, one step under the title. Never tinted to match the
+  // bar — the panel stays neutral so the bar is the only signal.
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  class={cn("mt-1 text-[13px] leading-[1.45] text-grey-300", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui/alert/alert-description.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const AlertDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type AlertDescription = ReturnType<typeof AlertDescription>;
+export default AlertDescription;

package/dist/components/ui/alert/alert-title.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { WithElementRef } from "../../../utils.js"
+  import { cn } from "../../../utils.js"
+  import type { HTMLAttributes } from "svelte/elements"
+
+  // Bold 15px Pure White. The title carries the message — the bar only says
+  // which kind of message it is, so the words have to work with the colour
+  // ignored entirely. "Upload failed." not "Error."
+  let {
+    ref = $bindable(null),
+    class: className,
+    level = 5,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6
+  } = $props()
+</script>
+
+<div
+  role="heading"
+  aria-level={level}
+  bind:this={ref}
+  class={cn(
+    "text-[15px] leading-[1.2] font-bold tracking-[-0.01em] text-foreground",
+    className,
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui/alert/alert-title.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+declare const AlertTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertTitle = ReturnType<typeof AlertTitle>;
+export default AlertTitle;