@crewlethq/icons 0.2.0 → 0.4.0

package/README.md

@@ -1,8 +1,91 @@
 # @crewlethq/icons
 
-Crewlet signature icon set, including the illustrated agent variants such as `agent-reading` (crewlet reading a book). SVG sources live in `svg/`. The build compiles each one into a typed React component and re-exports them through a single `<Icon name="..." />` API.
+Everything a Crewlet surface draws that is not text: the Material Symbols glyph set, the marks of the applications the platform integrates with, and the Crewlet signature illustrations.
 
-## Use it
+All three are React components compiled from SVG files that ship in the package. Nothing here fetches a font, a sprite or an image from another host, so a closed network draws exactly what an open one does.
+
+| What | Import from | Looks like |
+| ---- | ----------- | ---------- |
+| Glyphs (105 Material Symbols) | `@crewlethq/icons/glyphs` | `<CloseGlyph size="md" />` |
+| A glyph chosen from a value | `@crewlethq/icons/glyphs/registry` | `glyphByName(name)` |
+| Vendor marks | `@crewlethq/icons` | `<VendorMark vendor="slack" />` |
+| Signature illustrations | `@crewlethq/icons` | `<AgentReading />`, `<Icon name="AgentReading" />` |
+| The Crewlet character | `@crewlethq/icons` | `<CrewletFigure motion="wave" />` |
+
+## Glyphs
+
+```tsx
+import { CloseGlyph, KeyboardArrowDownGlyph } from '@crewlethq/icons/glyphs';
+
+<CloseGlyph size="md" />
+<CloseGlyph size="lg" title="Close" />
+```
+
+Material Symbols Outlined, weight 400, grade 0, vendored at the 20 px and 24 px optical sizes from `google/material-design-icons`. [`symbols/README.md`](./symbols/README.md) records the provenance, the checksums and how to add or replace one.
+
+| Prop | Type | Default | Purpose |
+| ---- | ---- | ------- | ------- |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` (12, 14, 16, 20, 24), a number of px, or any CSS length | `'1em'` | How big it draws. |
+| `title` | string | none | Names the glyph for assistive technology. Without one the glyph is `aria-hidden` and unfocusable, which is right wherever a label sits beside it. |
+| `opsz` | `20 \| 24` | follows `size` | Which vendored drawing to use. |
+
+Every SVG attribute passes through, and `className` is added to the component's own `crewlet-glyph`.
+
+**Names carry a `Glyph` suffix** because the bare words collide: `Timeline`, `List`, `Menu`, `Tag`, `Link` and `Code` are all `@crewlethq/ui` components, and a glyph taking one of those names would shadow the component at every import site that wanted both. `close` is `CloseGlyph`, `keyboard_arrow_down` is `KeyboardArrowDownGlyph`, `check_circle-fill` is `CheckCircleFillGlyph`.
+
+**A filled state is its own name**, not a `fill` attribute: a Material Symbol is a filled path already, so `fill` paints the outline's own shape rather than solidifying it. Five glyphs ship both drawings — `check_circle` / `check_circle-fill`, `error` / `error-fill`, `info` / `info-fill`, `star` / `star-fill` and `warning` / `warning-fill` — so a surface that toggles a state swaps the component rather than a prop.
+
+`GLYPH_NAMES` lists every vendored name and `GlyphName` is the union of them, so a name the package does not ship is a compile error.
+
+### The optical size
+
+The optical size axis is a different drawing, not a scaled one: the 20 px `close` is a 51-unit stroke on the 960 unit grid and the 24 px one is 56. `Glyph` takes the 20 px drawing at and below 20 px and the 24 px drawing above it, which it can work out whenever `size` says how many px it is.
+
+It cannot when `size` is left at `1em` and an ancestor's `font-size` decides, because CSS has no way to hand a computed font size back to the component that would have to choose. The default there is the 20 px drawing, on the grounds that a glyph inheriting a font size sits in body text or a control label, every step of which is at or below 20 px. A surface that sets a larger font size passes `opsz={24}`.
+
+### Choosing a glyph from a value
+
+```ts
+import { glyphByName } from '@crewlethq/icons/glyphs/registry';
+```
+
+**This entry pulls in every glyph**, because a lookup by name is a lookup over all of them. That is the right trade where the name really is data (a navigation table, an event category, a configured integration kind) and the wrong one everywhere else, which is why it is a separate entry: code that imports one glyph never reaches it.
+
+## Vendor marks
+
+```tsx
+import { VendorMark } from '@crewlethq/icons';
+
+<VendorMark vendor="slack" size={24} />
+<VendorMark vendor="datadog" size={24} muted />
+```
+
+| Prop | Type | Default | Purpose |
+| ---- | ---- | ------- | ------- |
+| `vendor` | `Vendor`: `'atlassian' \| 'clickup' \| 'datadog' \| 'discord' \| 'figma' \| 'github' \| 'gitlab' \| 'mattermost' \| 'microsoft-teams' \| 'notion' \| 'slack' \| 'telegram'` | required | Which mark. |
+| `size` | as `Glyph` | `'1em'` | How big it draws. |
+| `title` | string | none | Names the mark. Without one it is `aria-hidden`. |
+| `muted` | boolean | `false` | Drains the colour, for an application that is available but not connected. |
+
+**This is the one place the design system draws somebody else's colours.** Colour here carries state and never identity, and a third-party application's mark is the deliberate exception: identity is exactly what a mark is for, and a recoloured Slack mark is not Slack's. No hue in `svg/vendor/` is a token, nothing reads state from a mark, and a mark appears only beside the name of the application it belongs to.
+
+GitHub's and Notion's marks are monochrome by design and take the current text colour, so they read on either theme. That is each vendor's own instruction rather than an exemption: both publish one mark, black on a light ground and white on a dark one, so a fixed hex would be wrong in one theme whichever was picked.
+
+A mark keeps its own viewBox, so one that is not square (Figma's is 2:3) is drawn to fit the square `size` and centred in it, at the aspect ratio the vendor draws.
+
+The marks and the terms on which they may be used are in [`TRADEMARKS.md`](./TRADEMARKS.md), which ships in the package. The Mattermost, Datadog, Notion, Discord, ClickUp, Telegram and Microsoft Teams drawings are Simple Icons' renderings, whose path data is CC0 1.0.
+
+`VENDORS` lists every mark the package carries.
+
+## Signature illustrations
+
+```tsx
+import { AgentReading, CrewletIcon } from '@crewlethq/icons';
+
+<AgentReading style={{ fontSize: 32 }} />
+```
+
+Each illustration is a named export, and a bundler keeps only the one that is imported. There is also a by-name component:
 
 ```tsx
 import { Icon } from '@crewlethq/icons';
@@ -10,11 +93,9 @@ import { Icon } from '@crewlethq/icons';
 <Icon name="AgentReading" size="lg" title="Documentation" />
 ```
 
-`size` accepts `'sm' | 'md' | 'lg' | 'xl'`, a number (px), or any CSS length string. `title` makes the icon accessible to screen readers; without it, the icon is marked `aria-hidden`.
-
-`name` is typed as the `IconName` union, so TypeScript rejects a name the package does not ship. Plain JavaScript gets no such check, and `<Icon>` renders nothing for an unknown name, so search for a name across the whole project when an icon is renamed. `ICON_NAMES` lists every name in file-name order; treat it as a set and never index it by position, because adding or renaming an icon shifts the order.
+`size` accepts `'sm' | 'md' | 'lg' | 'xl'` (16, 20, 24 and 32 px), a number of px, or any CSS length. `title` exposes the icon to assistive technology with `role="img"`; without it the icon is `aria-hidden`. `name` is typed as `IconName`, so a name the package does not ship is a compile error; `ICON_NAMES` lists them in file-name order, and it is a set rather than a sequence, because adding or renaming an illustration shifts the order.
 
-Each icon is also exported as its own component through the `Icons` namespace (`<Icons.AgentReading />`).
+**`Icon` carries every illustration into the bundle**, which is most of half a megabyte, nearly all of it `crewlet-reading`. A lookup by name is a lookup over all of them, so use it where the name really is data and import the component everywhere else.
 
 ### Raw SVG files
 
@@ -24,7 +105,24 @@ The source SVGs ship in the package and are exported as `@crewlethq/icons/svg/*`
 import markUrl from '@crewlethq/icons/svg/crewlet-icon.svg';
 ```
 
-A bundler resolves the import to a URL. Outside a bundler, resolve the same specifier with `import.meta.resolve('@crewlethq/icons/svg/crewlet-icon.svg')` to get the file on disk.
+A bundler resolves the import to a URL. Outside a bundler, resolve the same specifier with `import.meta.resolve('@crewlethq/icons/svg/crewlet-icon.svg')` to get the file on disk. The vendored glyph drawings are exported the same way, as `@crewlethq/icons/symbols/20/close.svg`.
+
+### Favicons
+
+An icon slot is square and the mark is 3:2, so the mark sits in a band across the middle of a tab whichever file is linked: framing cannot make a wide drawing fill a square. What `favicon/` carries instead is a square SOURCE, which is what a raster pipeline and a search engine both ask for. Google considers a favicon candidate only if it is square and larger than 48px, and every generator that renders PNGs from the mark takes the padding from its viewBox rather than inventing it. The square frame is also the wide file's own side margins trimmed off, so the same paths draw about 8 percent larger in the same slot.
+
+| File | For |
+| ---- | --- |
+| `favicon/crewlet.svg` | Any product's `<link rel="icon">`. The mark, framed square. |
+| `favicon/crewlet-admin.svg` | An operator console, in a red that tells a superadmin tab from a tenant tab at a glance. |
+| `favicon/crewlet.ico` | The raster fallback, at 16, 32 and 48 px, for a browser or a bookmark that asks for one. |
+
+```html
+<link rel="icon" type="image/svg+xml" href="/crewlet.svg" />
+<link rel="icon" sizes="any" href="/favicon.ico" />
+```
+
+All three are one drawing: the square files are `svg/crewlet-icon.svg` path for path, and differ only in the viewBox that frames them and the fill. `test/brand.test.mjs` holds that, because four products each kept their own copy of the mark and copies of one drawing drift silently. It also measures the frame against the drawing inside it, so a square viewBox that crops the mark, parks it off centre or leaves it swimming in air fails rather than shipping: a favicon is the one asset nobody looks at closely enough to catch that by eye.
 
 ### CrewletFigure
 
@@ -40,24 +138,36 @@ import { CrewletFigure } from '@crewlethq/icons';
 | ---- | ---- | ------- | ------- |
 | `motion` | `CrewletMotion`: `'idle' \| 'dance' \| 'wave' \| 'jump' \| 'walk' \| 'spin'` | `'idle'` | The looping motion. |
 | `delay` | number (seconds) | `0` | Phase offset, so several figures do not move in lockstep. |
-| `color` | CSS colour | `'#7c56ff'` | Body fill. |
+| `color` | CSS colour | `--color-brand-mark`, falling back to the crewlet purple | Body fill. |
 | `fillGaps` | boolean | `true` | Backs each joint with body, so a moving limb never uncovers a gap. `false` renders the plain trim, where the pieces meet with visible seams. |
 
-The figure is sized in `em` like the icons (set `font-size` or pass `width` and `height`) and is `aria-hidden`; give the surrounding element an accessible name when the figure carries meaning. Every motion stops when the user prefers reduced motion. The geometry lives in `src/crewletParts.ts`.
+The figure is sized in `em` like the icons (set `font-size` or pass `width` and `height`) and is `aria-hidden`; give the surrounding element an accessible name when the figure carries meaning. Every motion stops when the user prefers reduced motion. The geometry lives in `src/crewletParts.ts` and the motions in `src/CrewletFigure.css`, which the component imports.
+
+## Stylesheets
+
+Two components carry rules, and each imports its own stylesheet as a side effect, so a bundler emits the CSS beside the JavaScript and a consumer gets it without being told to. Nothing here depends on `@crewlethq/tokens`: a rule that wants a token reads it with the literal value as a fallback.
 
-## Add an icon
+Loading the built entry in plain Node, with no bundler, therefore fails on the stylesheet import. That is the same contract `@crewlethq/ui` has.
 
-1. Drop `<your-icon>.svg` into `svg/`. File names become PascalCase component names (for example, `agent-celebrating.svg` -> `AgentCelebrating`).
+## Add an illustration
+
+1. Drop `<your-icon>.svg` into `svg/`. File names become PascalCase component names (for example, `agent-celebrating.svg` becomes `AgentCelebrating`).
 2. Run `npm run build`.
-3. The new icon is auto-exported from `@crewlethq/icons` and appears in `ICON_NAMES`.
+3. The new illustration is exported from `@crewlethq/icons` and appears in `ICON_NAMES`.
+
+A vendor mark goes into `svg/vendor/` instead, and is added to the `VENDORS` list and the `Vendor` union in `src/VendorMark.tsx`. A glyph is vendored rather than drawn; see [`symbols/README.md`](./symbols/README.md).
 
 ## Conventions for source SVGs
 
-Three families coexist in this package:
+Four families coexist in this package:
 
 **Brand artwork**: `crewlet-icon` (the Crewlet mark) and `crewlet-reading` (a full-colour illustration of the Crewlet character reading a newspaper), together with `CrewletFigure`. Filled artwork on its own viewBox; render it as supplied. `crewlet-reading` is a large, detailed illustration (about 670 KB of SVG), so reserve it for hero and empty-state surfaces rather than inline icon slots. The Crewlet name, mark and character are trademarks that the MIT License does not cover; see [TRADEMARKS.md](./TRADEMARKS.md) before using them outside an official Crewlet product.
 
-**Feature illustrations** (80x80): `hierarchy`, `human-in-loop` and `company-as-code`. Self-contained artwork with its own gradients and background disc, so it does not inherit `currentColor`. The build prefixes every `id` in a file with that file's name, because inline SVGs share the page's id space; keep gradient and other `id` references inside the file that defines them.
+**Feature illustrations** (80x80): `hierarchy`, `company-as-code`, `turn-engine`, `code-sandbox`, `knowledge` and `human-in-loop`. One per capability the platform leads with, so a reader arriving from the README, the marketing site or the docs meets the same six marks. Self-contained artwork with its own gradients and background disc, so it does not inherit `currentColor`. The build prefixes every `id` in a file with that file's name, because inline SVGs share the page's id space; keep gradient and other `id` references inside the file that defines them.
+
+A gradient in one of these **must** declare `gradientUnits="userSpaceOnUse"` and span the 80x80 canvas. Left to the SVG default, `objectBoundingBox`, a gradient is measured from the box of each shape that paints with it, and a horizontal or vertical stroke has a box with no area: the gradient degenerates and the shape does not paint at all. Several strokes in this set are exactly that, and the failure is silent, so `test/gradients.test.mjs` holds the rule over every file in `svg/`. It stops at `svg/vendor/`, where a gradient is the vendor's own and respanning it would repaint somebody else's logo; what the marks are held to instead is the failure, that no axis-aligned shape there paints from a box-measured gradient.
+
+The gradient stops in these files carry their colour in a `style` attribute, as the drawings were authored. Rendered through the React component it is a `style` prop, which React writes through the CSSOM and `style-src` does not govern, and an SVG referenced as an image is its own document outside the page's policy either way. Inlining one of the raw files into a page served with a strict `style-src` is the case that loses the colours, so inline the component rather than the file.
 
 **Signature illustrations** (32x32): the crewlet "agent" character in different contexts (`agent-idle`, `agent-working`, `agent-thinking`, `agent-reading`, `agent-greeting`, `agent-success`, `agent-error` and `agent-loading`). The set reads as one character through a shared line style and scale rather than an identical outline: the head and shoulders move, shrink or give way to a torso when the pose needs room for a prop (a book, a desk, a thought bubble). Name new variants `agent-<pose>.svg`.
 
@@ -68,6 +178,12 @@ Signature illustrations follow these rules so they recolor from CSS and sit on o
 - `stroke-linecap="round"` and `stroke-linejoin="round"`.
 - No hard-coded width or height attributes (the build strips them).
 
+**Vendor marks** (`svg/vendor/`): each application's own drawing in its own colours, on its own viewBox. The root element declares the fill it wants, because the build only supplies `currentColor` where a source declares none.
+
 ## License
 
-MIT. The license text is in [`LICENSE`](./LICENSE), which ships in the package. The license covers copyright only: the Crewlet name, logo and character are trademarks, and [`TRADEMARKS.md`](./TRADEMARKS.md), which also ships in the package, says how they may be used.
+MIT AND Apache-2.0.
+
+The package's own code and artwork are MIT; the license text is in [`LICENSE`](./LICENSE), which ships in the package. The vendored Material Symbols drawings in `symbols/` are Google's, under the Apache License 2.0, whose text and attribution are in [`symbols/LICENSE`](./symbols/LICENSE) and [`symbols/NOTICE`](./symbols/NOTICE) and ship beside them.
+
+Both licenses cover copyright only. The Crewlet name, logo and character are trademarks, and so are the third-party marks in `svg/vendor/`. [`TRADEMARKS.md`](./TRADEMARKS.md), which also ships in the package, says how each may be used.

package/TRADEMARKS.md

@@ -20,7 +20,20 @@ These files in the repository carry the Crewlet logo or character:
 - `packages/icons/svg/crewlet-reading.svg`
 - `packages/icons/src/crewletParts.ts`
 - `packages/icons/src/CrewletFigure.tsx`
+- `packages/icons/src/CrewletFigure.css`
 
 The `CrewletIcon`, `CrewletReading` and `CrewletFigure` components that the `@crewlethq/icons` package builds from them are covered in the same way.
 
+## Third-party marks
+
+`@crewlethq/icons` also ships the marks of the applications a Crewlet product integrates with, or offers as an integration, in `packages/icons/svg/vendor/`, drawn by the `VendorMark` component. Atlassian, ClickUp, Datadog, Discord, Figma, GitHub, GitLab, Mattermost, Microsoft Teams, Notion, Slack and Telegram are trademarks of their respective owners, none of whom are affiliated with Crewlet and none of whom have endorsed it.
+
+They are here for nominative use: naming the application a feature connects to, so that a reader recognises it. That means a mark appears beside that application's own name, identifies only that application, and is never used to suggest a partnership, a sponsorship or an endorsement. Each owner's own brand guidelines apply on top of this page, and where the two differ the owner's win.
+
+Crewlet claims no rights in these marks. They are excluded from the MIT License's grant for the same reason the Crewlet marks are: that license covers copyright, and a trademark is not copyright.
+
+## The glyph set
+
+The Material Symbols drawings in `packages/icons/symbols/` are Google's, under the Apache License 2.0. That license grants a copyright license and explicitly grants no trademark rights, so the drawings may be used and redistributed while "Material Symbols" and "Google" remain Google's marks. `packages/icons/symbols/LICENSE` and `NOTICE` carry the terms and ship in the package.
+
 For any use this page does not allow, ask the maintainers first by opening an issue in this repository.

package/dist/CrewletFigure-4PMMCAFG.css

@@ -0,0 +1,85 @@
+/*
+ * The crewlet figure's motions.
+ *
+ * A stylesheet rather than a <style> element inside the SVG, which is what
+ * this was: a style element inside an inline SVG applies to the WHOLE
+ * document, and a strict Content-Security-Policy refuses it outright, so on a
+ * page with one the figure lost every motion and its default colour with them.
+ *
+ * Every class, keyframe and custom property is namespaced under
+ * crewlet-figure, because these rules now really are the page's. To add a
+ * motion: extend CrewletMotion, add its .crewlet-figure--<name> rules and
+ * @keyframes here, and list it in the Storybook catalog.
+ */
+
+.crewlet-figure {
+  /* The brand mark colour where a consumer ships the tokens, and the brand's
+     own value where it does not: this package depends on no other. */
+  color: var(--color-brand-mark, #7c56ff);
+}
+
+.crewlet-figure__all, .crewlet-figure__arm-l, .crewlet-figure__arm-r, .crewlet-figure__leg-l, .crewlet-figure__leg-r { transform-box: view-box; animation-delay: var(--crewlet-figure-delay, 0s); }
+.crewlet-figure__all { transform-origin: 761px 869px; }
+.crewlet-figure__arm-l { transform-origin: 384px 473px; }
+.crewlet-figure__arm-r { transform-origin: 1128px 475px; }
+.crewlet-figure__leg-l { transform-origin: 588px 730px; }
+.crewlet-figure__leg-r { transform-origin: 939px 733px; }
+
+.crewlet-figure--idle .crewlet-figure__arm-l { animation: crewlet-figure-idle-arm-l 3.4s ease-in-out infinite; }
+.crewlet-figure--idle .crewlet-figure__arm-r { animation: crewlet-figure-idle-arm-r 3.4s ease-in-out infinite; }
+
+.crewlet-figure--dance .crewlet-figure__all { animation: crewlet-figure-bob 0.8s ease-in-out infinite; }
+.crewlet-figure--dance .crewlet-figure__arm-l { animation: crewlet-figure-arm-l-dance 0.8s ease-in-out infinite; }
+.crewlet-figure--dance .crewlet-figure__arm-r { animation: crewlet-figure-arm-r-dance 0.8s ease-in-out infinite; }
+.crewlet-figure--dance .crewlet-figure__leg-l { animation: crewlet-figure-leg-l-dance 0.8s ease-in-out infinite; }
+.crewlet-figure--dance .crewlet-figure__leg-r { animation: crewlet-figure-leg-r-dance 0.8s ease-in-out infinite; }
+
+.crewlet-figure--wave .crewlet-figure__arm-r { animation: crewlet-figure-wave-arm 0.8s ease-in-out infinite; }
+.crewlet-figure--wave .crewlet-figure__arm-l { animation: crewlet-figure-idle-arm-l 3.4s ease-in-out infinite; }
+
+.crewlet-figure--jump .crewlet-figure__all { animation: crewlet-figure-jump 1.15s ease-in-out infinite; }
+.crewlet-figure--jump .crewlet-figure__arm-l { animation: crewlet-figure-jump-arm-l 1.15s ease-in-out infinite; }
+.crewlet-figure--jump .crewlet-figure__arm-r { animation: crewlet-figure-jump-arm-r 1.15s ease-in-out infinite; }
+
+.crewlet-figure--walk .crewlet-figure__all { animation: crewlet-figure-walk-body 0.5s ease-in-out infinite; }
+.crewlet-figure--walk .crewlet-figure__arm-l { animation: crewlet-figure-walk-arm-l 0.5s ease-in-out infinite; }
+.crewlet-figure--walk .crewlet-figure__arm-r { animation: crewlet-figure-walk-arm-r 0.5s ease-in-out infinite; }
+.crewlet-figure--walk .crewlet-figure__leg-l { animation: crewlet-figure-walk-leg-l 0.5s ease-in-out infinite; }
+.crewlet-figure--walk .crewlet-figure__leg-r { animation: crewlet-figure-walk-leg-r 0.5s ease-in-out infinite; }
+
+.crewlet-figure--spin .crewlet-figure__all { animation: crewlet-figure-spin 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
+.crewlet-figure--spin .crewlet-figure__arm-l { animation: crewlet-figure-idle-arm-l 1.1s ease-in-out infinite; }
+.crewlet-figure--spin .crewlet-figure__arm-r { animation: crewlet-figure-idle-arm-r 1.1s ease-in-out infinite; }
+
+@keyframes crewlet-figure-idle-arm-l { 0%, 100% { transform: rotate(2deg); } 50% { transform: rotate(-3deg); } }
+@keyframes crewlet-figure-idle-arm-r { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
+@keyframes crewlet-figure-arm-l-dance { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-12deg); } }
+@keyframes crewlet-figure-arm-r-dance { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(12deg); } }
+@keyframes crewlet-figure-leg-l-dance { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
+@keyframes crewlet-figure-leg-r-dance { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }
+@keyframes crewlet-figure-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
+@keyframes crewlet-figure-wave-arm { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(-20deg); } }
+@keyframes crewlet-figure-jump {
+  0%, 100% { transform: translateY(0) scale(1, 1); }
+  12% { transform: translateY(22px) scale(1.05, 0.9); }
+  45% { transform: translateY(-124px) scale(0.95, 1.06); }
+  72% { transform: translateY(0) scale(1.03, 0.96); }
+}
+@keyframes crewlet-figure-jump-arm-l { 0%, 100% { transform: rotate(3deg); } 45% { transform: rotate(-16deg); } }
+@keyframes crewlet-figure-jump-arm-r { 0%, 100% { transform: rotate(-3deg); } 45% { transform: rotate(16deg); } }
+@keyframes crewlet-figure-walk-body { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
+@keyframes crewlet-figure-walk-leg-l { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
+@keyframes crewlet-figure-walk-leg-r { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
+@keyframes crewlet-figure-walk-arm-l { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
+@keyframes crewlet-figure-walk-arm-r { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-12deg); } }
+@keyframes crewlet-figure-spin {
+  0% { transform: rotate(0) translateY(0); }
+  25% { transform: rotate(90deg) translateY(-40px); }
+  50% { transform: rotate(180deg) translateY(0); }
+  75% { transform: rotate(270deg) translateY(-40px); }
+  100% { transform: rotate(360deg) translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-figure__all, .crewlet-figure__arm-l, .crewlet-figure__arm-r, .crewlet-figure__leg-l, .crewlet-figure__leg-r { animation: none !important; }
+}

package/dist/Glyph-kbRsfe3S.d.ts

@@ -0,0 +1,57 @@
+import { SVGProps } from 'react';
+
+/** The size steps, in px. The type scale's own steps, not a new scale. */
+declare const GLYPH_SIZES: {
+    readonly xs: 12;
+    readonly sm: 14;
+    readonly md: 16;
+    readonly lg: 20;
+    readonly xl: 24;
+};
+type GlyphSizeStep = keyof typeof GLYPH_SIZES;
+type GlyphSize = GlyphSizeStep | number | (string & {});
+/**
+ * Which drawing to use. The optical size axis is a different drawing rather
+ * than a scaled one: the 20 px `close` is a 51-unit stroke on the 960 grid and
+ * the 24 px one is 56, so the wrong drawing reads as the wrong weight beside
+ * anything drawing the right one.
+ */
+type GlyphOpticalSize = 20 | 24;
+interface GlyphProps extends Omit<SVGProps<SVGSVGElement>, 'title'> {
+    /** A step, a number of px, or any CSS length. Defaults to `1em`. */
+    size?: GlyphSize;
+    /**
+     * Names the glyph for assistive technology. Without one the glyph is
+     * decoration, which is what it almost always is: the meaning is carried by
+     * the label beside it.
+     */
+    title?: string;
+    /**
+     * Which vendored drawing to render. It follows `size` whenever `size` says
+     * how many px that is, so pass this only when it cannot: a glyph left at the
+     * default `1em` inside a surface whose own stylesheet sets a font size above
+     * 20 px wants `opsz={24}`. CSS cannot hand a computed font size back to the
+     * component that would have to choose, so the choice is a prop.
+     */
+    opsz?: GlyphOpticalSize;
+}
+/**
+ * The px a size resolves to, or null when it does not resolve to one. `1em`,
+ * `2rem` and `100%` each depend on something only the document knows, so they
+ * answer null and leave the optical size to its default.
+ */
+declare function glyphPixels(size: GlyphSize | undefined): number | null;
+/** The drawing a rendered size asks for. */
+declare function glyphOpticalSize(size: GlyphSize | undefined): GlyphOpticalSize;
+/**
+ * The CSS length a size prop means, `1em` when it says nothing.
+ *
+ * Shared with VendorMark, which sits on the same steps because it sits beside
+ * glyphs, and PUBLISHED for the same reason: a drawing that is not a Glyph at
+ * all (the Crewlet figure, a vendor's own SVG) is sized by a consumer who is
+ * choosing between it and a glyph, and a second reading of what `sm` is worth
+ * is how one of them stops matching the other.
+ */
+declare function cssLength(size: GlyphSize | undefined): string;
+
+export { type GlyphProps as G, GLYPH_SIZES as a, type GlyphOpticalSize as b, type GlyphSize as c, type GlyphSizeStep as d, cssLength as e, glyphPixels as f, glyphOpticalSize as g };

package/dist/VendorMark-AGZRLMVT.css

@@ -0,0 +1,32 @@
+/*
+ * A vendor mark draws the app's own colours, so the muted state cannot be a
+ * colour: it drains the one the mark already has. That keeps "available but
+ * not connected" readable without inventing a second palette for somebody
+ * else's brand, and it leaves the drawing recognisable, which a flat tint
+ * would not.
+ *
+ * A rule rather than a style attribute, because a strict Content-Security-
+ * Policy that allows a stylesheet still refuses an inline style.
+ */
+
+.crewlet-vendor-mark {
+  display: inline-block;
+  flex: none;
+  vertical-align: middle;
+}
+
+.crewlet-vendor-mark--muted {
+  filter: grayscale(1);
+  opacity: 0.55;
+}
+
+/*
+ * Forced colours drop filters and repaint everything from the user's own
+ * palette, so the muted mark would come back at full strength and read as
+ * connected. Opacity survives, and carries the distinction on its own.
+ */
+@media (forced-colors: active) {
+  .crewlet-vendor-mark--muted {
+    opacity: 0.4;
+  }
+}

package/dist/chunk-CUOUFELK.js

@@ -0,0 +1,49 @@
+import { jsx } from 'react/jsx-runtime';
+
+// src/Glyph.tsx
+var GLYPH_SIZES = { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 };
+var THRESHOLD = 20;
+function glyphPixels(size) {
+  if (size === void 0) return null;
+  if (typeof size === "number") return Number.isFinite(size) ? size : null;
+  if (size in GLYPH_SIZES) return GLYPH_SIZES[size];
+  const px = /^(\d+(?:\.\d+)?)px$/.exec(size.trim());
+  return px === null ? null : Number(px[1]);
+}
+function glyphOpticalSize(size) {
+  const pixels = glyphPixels(size);
+  return pixels !== null && pixels > THRESHOLD ? 24 : 20;
+}
+function cssLength(size) {
+  if (size === void 0) return "1em";
+  if (typeof size === "number") return `${size}px`;
+  if (size in GLYPH_SIZES) return `${GLYPH_SIZES[size]}px`;
+  return size;
+}
+function Glyph({
+  drawing,
+  size,
+  title,
+  opsz,
+  className,
+  ...rest
+}) {
+  const dimension = cssLength(size);
+  const semantics = title ? { role: "img", "aria-label": title } : { "aria-hidden": true, focusable: false };
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 -960 960 960",
+      width: dimension,
+      height: dimension,
+      fill: "currentColor",
+      ...semantics,
+      className: className === void 0 ? "crewlet-glyph" : `crewlet-glyph ${className}`,
+      ...rest,
+      children: /* @__PURE__ */ jsx("path", { d: drawing[opsz ?? glyphOpticalSize(size)] })
+    }
+  );
+}
+
+export { GLYPH_SIZES, Glyph, cssLength, glyphOpticalSize, glyphPixels };