npm - @chan.run/design - Versions diffs - 0.1.0 → 0.2.1 - Mend

@chan.run/design 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (236) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,195 @@
+# @chan.run/design
+Shared Chakra UI v3 theme and brand-asset library for the chan.run ecosystem. **Single source of truth** for tokens, components, product icons, wordmarks, and favicons. Every site, app, and product UI imports from this package — never inline an SVG, never copy a PNG.
+## Install
+The package is published to npm and pinned by every workspace consumer:
+```jsonc
+// package.json
+{
+  "dependencies": {
+    "@chakra-ui/react": "3.35.0",
+    "@chan.run/design": "^0.2.0",
+    "next-themes": "*",
+    "react": "19.2.4"
+  }
+}
+```
+`@chakra-ui/react`, `next-themes`, and `react` are peer deps — keep them aligned to the versions in this package's `peerDependencies` to avoid duplicate Chakra installs (which produce structural type errors when passing `system` between packages).
+## Theme + provider
+```tsx
+import { ChakraProvider } from "@chakra-ui/react";
+import { system } from "@chan.run/design";
+import { ThemeProvider } from "next-themes";
+<ChakraProvider value={system}>
+  <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    {children}
+  </ThemeProvider>
+</ChakraProvider>
+```
+Tokens live in the `chan.*` namespace (`chan.bg`, `chan.text`, `chan.orange`, …) — see [`src/theme.ts`](./src/theme.ts) and `lat.md/design-system.md` for the full taxonomy.
+## Brand marks
+Two flavors: the **chan.run umbrella brand** (`CHAN[•]RUN`, dot accent) and **per-product marks** (`SEA[M]`, `ENTROP[Y]`, …, last-letter accent). Rules locked per `lat.md/brand-marks.md`.
+### React components
+```tsx
+import {
+  Wordmark,                   // CHAN[•]RUN — umbrella brand
+  SeamIcon, SeamWordmark,
+  EntropyIcon, EntropyWordmark,
+  RestunnelIcon, RestunnelWordmark,
+  EnsureIcon, EnsureWordmark,
+  SlidesIcon, SlidesWordmark,
+  PRODUCT_ICONS,              // Record<name, ComponentType>
+  PRODUCT_WORDMARKS,
+} from "@chan.run/design";
+// Themed React component — switches with light/dark mode automatically
+<HStack gap="3">
+  <SeamIcon />
+  <SeamWordmark fontSize="22px" />
+</HStack>
+// Loop products from the registry
+{Object.entries(PRODUCT_ICONS).map(([name, Icon]) => <Icon key={name} />)}
+```
+`<Wordmark pulseDot />` opacity-cycles the dot via the `chan-pulse` keyframe — used by `Splash` for loading states.
+### Raw SVG assets
+When you need the SVG as an image (e.g. inside Chakra's `<Image>`):
+```tsx
+import seamIconUrl from "@chan.run/design/svg/seam-icon-dark.svg?url";
+import { Image } from "@chakra-ui/react";
+<Image src={seamIconUrl} alt="" boxSize="44px" />
+```
+Variants under `@chan.run/design/svg/`:
+| Pattern                                     | What                                         |
+| ------------------------------------------- | -------------------------------------------- |
+| `chan-wordmark-{dark,light}.svg`            | CHAN[•]RUN, dark or light text               |
+| `<name>-wordmark-{dark,light}.svg`          | Product wordmark (text-as-paths)             |
+| `<name>-icon-{dark,light}.svg`              | 176×176 squircle monogram                    |
+| `<name>-favicon.svg`                        | 32×32 single-letter favicon source           |
+Where `<name>` ∈ `chan` (wordmark only) | `ensure` | `entropy` | `restunnel` | `seam` | `slides`. SVGs use **path-converted text** (no font dependency) and survive `pnpm build` (live in `assets/`, not `dist/`).
+For theme-aware rendering, prefer the React component. The static `-dark`/`-light` SVGs are for surfaces where you can't use Chakra (Rust dashboards, native apps, README screenshots, etc.).
+## Favicons
+Each product ships a full favicon bundle (16/32/48 PNG, ICO, Apple touch, Android Chrome, Windows mstile, manifest, head snippet). Three ways to consume:
+### 1. Head component (drop-in)
+```tsx
+import { SeamFaviconHead } from "@chan.run/design";
+<head>
+  <SeamFaviconHead />
+  {/* opt into PWA: <SeamFaviconHead manifest /> */}
+</head>
+```
+Per-product components: `ChanFaviconHead`, `EnsureFaviconHead`, `EntropyFaviconHead`, `RestunnelFaviconHead`, `SeamFaviconHead`, `SlidesFaviconHead`. Each emits the full set of `<link>`/`<meta>` tags with hashed asset URLs the bundler emits at build time.
+### 2. Asset URL imports (raw URLs for custom wiring)
+```tsx
+import faviconIco from "@chan.run/design/favicons/seam/favicon.ico?url";
+import appleTouchIcon from "@chan.run/design/favicons/seam/apple-touch-icon.png?url";
+import manifestUrl from "@chan.run/design/favicons/seam/manifest.webmanifest?url";
+<link rel="icon" href={faviconIco} />
+```
+### 3. Asset-URL maps (programmatic)
+```tsx
+import { seamFaviconAssets } from "@chan.run/design";
+seamFaviconAssets.ico;        // bundler-emitted hashed URL
+seamFaviconAssets.png16;
+seamFaviconAssets.apple;
+seamFaviconAssets.android192;
+seamFaviconAssets.manifest;
+```
+### Browser extensions
+Vite-style `?url` imports don't work inside `wxt.config.ts` (it's loaded by Node, not Vite). Use `createRequire` to get a filesystem path, then let `@wxt-dev/auto-icons` downscale to the manifest sizes:
+```ts
+// wxt.config.ts
+import { createRequire } from 'node:module';
+import { defineConfig } from 'wxt';
+const require = createRequire(import.meta.url);
+const seamIconPath = require.resolve(
+  '@chan.run/design/favicons/seam/android-chrome-512x512.png',
+);
+export default defineConfig({
+  modules: ['@wxt-dev/module-react', '@wxt-dev/auto-icons'],
+  autoIcons: { baseIconPath: seamIconPath },
+});
+```
+See `products/seam/seam-extension/wxt.config.ts` for the working example.
+## Adding a new product mark
+1. Add to `src/products/<name>/<Name>Icon.tsx` and `<Name>Wordmark.tsx`. Use `ProductIcon` / `ProductWordmark` from `src/products/_internal.tsx` — they encode the locked visual rules so you only specify the letter splits.
+2. Register in `src/products/index.ts` (`PRODUCT_ICONS`, `PRODUCT_WORDMARKS`).
+3. Add an entry to `scripts/export-svg.ts` (`PRODUCTS` array) and `scripts/gen-favicons.ts` (`MARKS` array) so SVG/favicon variants are generated.
+4. Run `pnpm gen-brand` to produce the `assets/` outputs.
+5. Run `pnpm typecheck && pnpm exec biome check .` to confirm.
+See `lat.md/brand-marks.md` for the full hard-rules reference.
+## Repo layout
+```
+packages/design/
+├── src/
+│   ├── brand/            # CHAN[•]RUN umbrella wordmark
+│   ├── components/       # Splash, Topbar, slides, ColorModeButton, …
+│   ├── favicons/         # Per-product head components + asset URL maps
+│   ├── products/         # Per-product Icon + Wordmark components
+│   │   ├── _internal.tsx # Locked visual primitives (do not export)
+│   │   ├── <name>/       # ensure | entropy | restunnel | seam | slides
+│   │   └── index.ts      # Exports + PRODUCT_ICONS / PRODUCT_WORDMARKS
+│   ├── styled-system/    # Chakra typegen output (do not edit by hand)
+│   ├── theme.ts          # `system` — Chakra v3 theme config
+│   ├── TokenShowcase.tsx # Visual reference for all tokens
+│   └── index.ts
+├── scripts/
+│   ├── export-svg.ts     # Wordmarks/icons/favicon-source SVGs → assets/svg/
+│   └── gen-favicons.ts   # Per-product favicon bundles → assets/favicons/
+└── assets/               # Committed build outputs (subpath-exported)
+    ├── svg/
+    └── favicons/<name>/
+```
+## Scripts
+| Command                   | What                                                            |
+| ------------------------- | --------------------------------------------------------------- |
+| `pnpm build`              | Build TS bundle into `dist/` (consumed by published package)    |
+| `pnpm typecheck`          | `tsc --noEmit` for `src/` and `scripts/`                        |
+| `pnpm gen-brand`          | Regenerate all SVG and favicon assets into `assets/`            |
+| `pnpm export-svg`         | Just the SVGs                                                   |
+| `pnpm gen-favicons`       | Just the favicon bundles (depends on SVGs being generated)      |

package/assets/favicons/chan/android-chrome-144x144.png ADDED Viewed

Binary file

package/assets/favicons/chan/android-chrome-192x192.png ADDED Viewed

Binary file

package/assets/favicons/chan/android-chrome-256x256.png ADDED Viewed

Binary file

package/assets/favicons/chan/android-chrome-36x36.png ADDED Viewed

Binary file

package/assets/favicons/chan/android-chrome-384x384.png ADDED Viewed

Binary file

package/assets/favicons/chan/android-chrome-48x48.png ADDED Viewed

Binary file

package/assets/favicons/chan/android-chrome-512x512.png ADDED Viewed

Binary file

package/assets/favicons/chan/android-chrome-72x72.png ADDED Viewed

Binary file

package/assets/favicons/chan/android-chrome-96x96.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-1024x1024.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-114x114.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-120x120.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-144x144.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-152x152.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-167x167.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-180x180.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-57x57.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-60x60.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-72x72.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-76x76.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon-precomposed.png ADDED Viewed

Binary file

package/assets/favicons/chan/apple-touch-icon.png ADDED Viewed

Binary file

package/assets/favicons/chan/browserconfig.xml ADDED Viewed

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/mstile-70x70.png"/>
+      <square150x150logo src="/mstile-150x150.png"/>
+      <wide310x150logo src="/mstile-310x150.png"/>
+      <square310x310logo src="/mstile-310x310.png"/>
+      <TileColor>#0a0a08</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

package/assets/favicons/chan/favicon-16x16.png ADDED Viewed

Binary file

package/assets/favicons/chan/favicon-32x32.png ADDED Viewed

Binary file

package/assets/favicons/chan/favicon-48x48.png ADDED Viewed

Binary file

package/assets/favicons/chan/favicon.ico ADDED Viewed

Binary file

package/assets/favicons/chan/head-snippet.html ADDED Viewed

@@ -0,0 +1,25 @@
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
+<link rel="manifest" href="/manifest.webmanifest">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="theme-color" content="#ff4d00">
+<meta name="application-name" content="chan.run">
+<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
+<link rel="apple-touch-icon" sizes="1024x1024" href="/apple-touch-icon-1024x1024.png">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="chan">
+<meta name="msapplication-TileColor" content="#0a0a08">
+<meta name="msapplication-TileImage" content="/mstile-144x144.png">
+<meta name="msapplication-config" content="/browserconfig.xml">

package/assets/favicons/chan/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,68 @@
+{
+  "name": "chan.run",
+  "short_name": "chan",
+  "description": null,
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "/?homescreen=1",
+  "background_color": "#0a0a08",
+  "theme_color": "#ff4d00",
+  "icons": [
+    {
+      "src": "/android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}

package/assets/favicons/chan/mstile-144x144.png ADDED Viewed

Binary file

package/assets/favicons/chan/mstile-150x150.png ADDED Viewed

Binary file

package/assets/favicons/chan/mstile-310x150.png ADDED Viewed

Binary file

package/assets/favicons/chan/mstile-310x310.png ADDED Viewed

Binary file

package/assets/favicons/chan/mstile-70x70.png ADDED Viewed

Binary file

package/assets/favicons/ensure/android-chrome-144x144.png ADDED Viewed

Binary file

package/assets/favicons/ensure/android-chrome-192x192.png ADDED Viewed

Binary file

package/assets/favicons/ensure/android-chrome-256x256.png ADDED Viewed

Binary file

package/assets/favicons/ensure/android-chrome-36x36.png ADDED Viewed

Binary file

package/assets/favicons/ensure/android-chrome-384x384.png ADDED Viewed

Binary file

package/assets/favicons/ensure/android-chrome-48x48.png ADDED Viewed

Binary file

package/assets/favicons/ensure/android-chrome-512x512.png ADDED Viewed

Binary file

package/assets/favicons/ensure/android-chrome-72x72.png ADDED Viewed

Binary file

package/assets/favicons/ensure/android-chrome-96x96.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-1024x1024.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-114x114.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-120x120.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-144x144.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-152x152.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-167x167.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-180x180.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-57x57.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-60x60.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-72x72.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-76x76.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon-precomposed.png ADDED Viewed

Binary file

package/assets/favicons/ensure/apple-touch-icon.png ADDED Viewed

Binary file

package/assets/favicons/ensure/browserconfig.xml ADDED Viewed

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+  <msapplication>
+    <tile>
+      <square70x70logo src="/mstile-70x70.png"/>
+      <square150x150logo src="/mstile-150x150.png"/>
+      <wide310x150logo src="/mstile-310x150.png"/>
+      <square310x310logo src="/mstile-310x310.png"/>
+      <TileColor>#0a0a08</TileColor>
+    </tile>
+  </msapplication>
+</browserconfig>

package/assets/favicons/ensure/favicon-16x16.png ADDED Viewed

Binary file

package/assets/favicons/ensure/favicon-32x32.png ADDED Viewed

Binary file

package/assets/favicons/ensure/favicon-48x48.png ADDED Viewed

Binary file

package/assets/favicons/ensure/favicon.ico ADDED Viewed

Binary file

package/assets/favicons/ensure/head-snippet.html ADDED Viewed

@@ -0,0 +1,25 @@
+<link rel="icon" type="image/x-icon" href="/favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
+<link rel="manifest" href="/manifest.webmanifest">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="theme-color" content="#ff4d00">
+<meta name="application-name" content="ensure">
+<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
+<link rel="apple-touch-icon" sizes="1024x1024" href="/apple-touch-icon-1024x1024.png">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="ensure">
+<meta name="msapplication-TileColor" content="#0a0a08">
+<meta name="msapplication-TileImage" content="/mstile-144x144.png">
+<meta name="msapplication-config" content="/browserconfig.xml">

package/assets/favicons/ensure/manifest.webmanifest ADDED Viewed

@@ -0,0 +1,68 @@
+{
+  "name": "ensure",
+  "short_name": "ensure",
+  "description": null,
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "any",
+  "start_url": "/?homescreen=1",
+  "background_color": "#0a0a08",
+  "theme_color": "#ff4d00",
+  "icons": [
+    {
+      "src": "/android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any"
+    }
+  ]
+}