@chan.run/design 0.1.0 → 0.2.1

package/dist/index.mjs

@@ -1,7 +1,31 @@
 import { Badge, Box, Card, Center, Code, Flex, Grid, HStack, Heading, IconButton, Text, createSystem, defaultConfig, defineConfig, defineSlotRecipe, useSlotRecipe } from "@chakra-ui/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useTheme } from "next-themes";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/brand/Wordmark.tsx
+function Wordmark({ fontSize = "20px", color = "chan.text", pulseDot, ...rest }) {
+	const dotProps = pulseDot ? {
+		animation: "chan-pulse",
+		display: "inline-block"
+	} : {};
+	return /* @__PURE__ */ jsxs(Text, {
+		textStyle: "chan.wordmark",
+		fontSize,
+		color,
+		...rest,
+		children: [
+			"CHAN",
+			/* @__PURE__ */ jsx(Box, {
+				as: "span",
+				color: "chan.orange",
+				...dotProps,
+				children: "."
+			}),
+			"RUN"
+		]
+	});
+}
+//#endregion
 //#region src/components/ColorModeButton.tsx
 function ColorModeButton(props) {
 	const { resolvedTheme, setTheme } = useTheme();
@@ -12,7 +36,7 @@ function ColorModeButton(props) {
 	const isDark = resolvedTheme === "dark";
 	return /* @__PURE__ */ jsx(Flex, {
 		as: "button",
-		"aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
+		"aria-label": getAriaLabel(mounted, isDark),
 		onClick: () => setTheme(isDark ? "light" : "dark"),
 		w: "34px",
 		h: "34px",
@@ -36,6 +60,11 @@ function ColorModeButton(props) {
 		children: renderIcon(mounted, isDark)
 	});
 }
+function getAriaLabel(mounted, isDark) {
+	if (!mounted) return "Toggle color mode";
+	if (isDark) return "Switch to light mode";
+	return "Switch to dark mode";
+}
 function renderIcon(mounted, isDark) {
 	if (!mounted) return null;
 	if (isDark) return /* @__PURE__ */ jsx(MoonIcon, {});
@@ -821,30 +850,6 @@ function SlideViewer({ slides, currentSlide, onSlideChange, isPresenting = false
 	});
 }
 //#endregion
-//#region src/components/Wordmark.tsx
-function Wordmark({ fontSize = "20px", color = "chan.text", pulseDot, ...rest }) {
-	const dotProps = pulseDot ? {
-		animation: "chan-pulse",
-		display: "inline-block"
-	} : {};
-	return /* @__PURE__ */ jsxs(Text, {
-		textStyle: "chan.wordmark",
-		fontSize,
-		color,
-		...rest,
-		children: [
-			"CHAN",
-			/* @__PURE__ */ jsx(Box, {
-				as: "span",
-				color: "chan.orange",
-				...dotProps,
-				children: "."
-			}),
-			"RUN"
-		]
-	});
-}
-//#endregion
 //#region src/components/Topbar.tsx
 function HamburgerButton({ onClick }) {
 	return /* @__PURE__ */ jsxs(Flex, {
@@ -923,6 +928,263 @@ function Topbar({ onMenuOpen }) {
 	});
 }
 //#endregion
+//#region src/favicons/index.tsx
+function urls(name) {
+	const base = (file) => new URL(`../../assets/favicons/${name}/${file}`, import.meta.url).href;
+	return {
+		ico: base("favicon.ico"),
+		png16: base("favicon-16x16.png"),
+		png32: base("favicon-32x32.png"),
+		apple: base("apple-touch-icon.png"),
+		android192: base("android-chrome-192x192.png"),
+		android512: base("android-chrome-512x512.png"),
+		manifest: base("manifest.webmanifest")
+	};
+}
+function FaviconLinks({ assets, manifest }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("link", {
+			rel: "icon",
+			type: "image/x-icon",
+			href: assets.ico
+		}),
+		/* @__PURE__ */ jsx("link", {
+			rel: "icon",
+			type: "image/png",
+			sizes: "16x16",
+			href: assets.png16
+		}),
+		/* @__PURE__ */ jsx("link", {
+			rel: "icon",
+			type: "image/png",
+			sizes: "32x32",
+			href: assets.png32
+		}),
+		/* @__PURE__ */ jsx("link", {
+			rel: "apple-touch-icon",
+			sizes: "180x180",
+			href: assets.apple
+		}),
+		/* @__PURE__ */ jsx("link", {
+			rel: "icon",
+			type: "image/png",
+			sizes: "192x192",
+			href: assets.android192
+		}),
+		/* @__PURE__ */ jsx("link", {
+			rel: "icon",
+			type: "image/png",
+			sizes: "512x512",
+			href: assets.android512
+		}),
+		manifest && /* @__PURE__ */ jsx("link", {
+			rel: "manifest",
+			href: assets.manifest
+		}),
+		/* @__PURE__ */ jsx("meta", {
+			name: "theme-color",
+			content: "#ff4d00"
+		})
+	] });
+}
+const chanFaviconAssets = urls("chan");
+const ensureFaviconAssets = urls("ensure");
+const entropyFaviconAssets = urls("entropy");
+const restunnelFaviconAssets = urls("restunnel");
+const seamFaviconAssets = urls("seam");
+const slidesFaviconAssets = urls("slides");
+function ChanFaviconHead(props = {}) {
+	return /* @__PURE__ */ jsx(FaviconLinks, {
+		assets: chanFaviconAssets,
+		manifest: props.manifest
+	});
+}
+function EnsureFaviconHead(props = {}) {
+	return /* @__PURE__ */ jsx(FaviconLinks, {
+		assets: ensureFaviconAssets,
+		manifest: props.manifest
+	});
+}
+function EntropyFaviconHead(props = {}) {
+	return /* @__PURE__ */ jsx(FaviconLinks, {
+		assets: entropyFaviconAssets,
+		manifest: props.manifest
+	});
+}
+function RestunnelFaviconHead(props = {}) {
+	return /* @__PURE__ */ jsx(FaviconLinks, {
+		assets: restunnelFaviconAssets,
+		manifest: props.manifest
+	});
+}
+function SeamFaviconHead(props = {}) {
+	return /* @__PURE__ */ jsx(FaviconLinks, {
+		assets: seamFaviconAssets,
+		manifest: props.manifest
+	});
+}
+function SlidesFaviconHead(props = {}) {
+	return /* @__PURE__ */ jsx(FaviconLinks, {
+		assets: slidesFaviconAssets,
+		manifest: props.manifest
+	});
+}
+//#endregion
+//#region src/products/_internal.tsx
+const monogramLineStyles = {
+	fontFamily: "display",
+	fontWeight: 900,
+	fontSize: "17px",
+	textTransform: "uppercase",
+	letterSpacing: "-0.02em",
+	lineHeight: "0.82"
+};
+function ProductIcon({ top, bottom }) {
+	return /* @__PURE__ */ jsx(Flex, {
+		w: "44px",
+		h: "44px",
+		borderRadius: "22%",
+		bg: "chan.bg.soft",
+		border: "1px solid",
+		borderColor: "chan.border",
+		align: "center",
+		justify: "center",
+		flexShrink: 0,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				color: "chan.text",
+				...monogramLineStyles,
+				children: top
+			}), /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				color: "chan.orange",
+				...monogramLineStyles,
+				children: bottom
+			})]
+		})
+	});
+}
+function ProductWordmark({ fontSize = "24px", color = "chan.text", prefix, terminal, ...rest }) {
+	return /* @__PURE__ */ jsxs(Text, {
+		fontFamily: "display",
+		fontWeight: 900,
+		fontSize,
+		letterSpacing: "-0.02em",
+		textTransform: "uppercase",
+		lineHeight: 1,
+		color,
+		...rest,
+		children: [prefix, /* @__PURE__ */ jsx(Box, {
+			as: "span",
+			color: "chan.orange",
+			children: terminal
+		})]
+	});
+}
+//#endregion
+//#region src/products/ensure/EnsureIcon.tsx
+function EnsureIcon() {
+	return /* @__PURE__ */ jsx(ProductIcon, {
+		top: "EN",
+		bottom: "SU"
+	});
+}
+//#endregion
+//#region src/products/ensure/EnsureWordmark.tsx
+function EnsureWordmark(props) {
+	return /* @__PURE__ */ jsx(ProductWordmark, {
+		prefix: "ENSUR",
+		terminal: "E",
+		...props
+	});
+}
+//#endregion
+//#region src/products/entropy/EntropyIcon.tsx
+function EntropyIcon() {
+	return /* @__PURE__ */ jsx(ProductIcon, {
+		top: "EN",
+		bottom: "TR"
+	});
+}
+//#endregion
+//#region src/products/entropy/EntropyWordmark.tsx
+function EntropyWordmark(props) {
+	return /* @__PURE__ */ jsx(ProductWordmark, {
+		prefix: "ENTROP",
+		terminal: "Y",
+		...props
+	});
+}
+//#endregion
+//#region src/products/restunnel/RestunnelIcon.tsx
+function RestunnelIcon() {
+	return /* @__PURE__ */ jsx(ProductIcon, {
+		top: "RE",
+		bottom: "TU"
+	});
+}
+//#endregion
+//#region src/products/restunnel/RestunnelWordmark.tsx
+function RestunnelWordmark(props) {
+	return /* @__PURE__ */ jsx(ProductWordmark, {
+		prefix: "RESTUNNE",
+		terminal: "L",
+		...props
+	});
+}
+//#endregion
+//#region src/products/seam/SeamIcon.tsx
+function SeamIcon() {
+	return /* @__PURE__ */ jsx(ProductIcon, {
+		top: "SE",
+		bottom: "AM"
+	});
+}
+//#endregion
+//#region src/products/seam/SeamWordmark.tsx
+function SeamWordmark(props) {
+	return /* @__PURE__ */ jsx(ProductWordmark, {
+		prefix: "SEA",
+		terminal: "M",
+		...props
+	});
+}
+//#endregion
+//#region src/products/slides/SlidesIcon.tsx
+function SlidesIcon() {
+	return /* @__PURE__ */ jsx(ProductIcon, {
+		top: "SL",
+		bottom: "ID"
+	});
+}
+//#endregion
+//#region src/products/slides/SlidesWordmark.tsx
+function SlidesWordmark(props) {
+	return /* @__PURE__ */ jsx(ProductWordmark, {
+		prefix: "SLIDE",
+		terminal: "S",
+		...props
+	});
+}
+//#endregion
+//#region src/products/index.ts
+const PRODUCT_ICONS = {
+	ensure: EnsureIcon,
+	entropy: EntropyIcon,
+	restunnel: RestunnelIcon,
+	seam: SeamIcon,
+	slides: SlidesIcon
+};
+const PRODUCT_WORDMARKS = {
+	ensure: EnsureWordmark,
+	entropy: EntropyWordmark,
+	restunnel: RestunnelWordmark,
+	seam: SeamWordmark,
+	slides: SlidesWordmark
+};
+//#endregion
 //#region src/TokenShowcase.tsx
 function Swatch({ name, token, hex }) {
 	return /* @__PURE__ */ jsxs(Box, {
@@ -1766,6 +2028,9 @@ const system = createSystem(defaultConfig, defineConfig({
 				"chan.green": { value: "#3a8c5c" },
 				"chan.green.bg": { value: "rgba(58, 140, 92, 0.08)" },
 				"chan.green.border": { value: "rgba(58, 140, 92, 0.20)" },
+				"chan.teal": { value: "#2f9c9c" },
+				"chan.teal.bg": { value: "rgba(47, 156, 156, 0.08)" },
+				"chan.teal.border": { value: "rgba(47, 156, 156, 0.20)" },
 				"chan.yellow": { value: "#a88000" },
 				"chan.yellow.bg": { value: "rgba(200, 160, 0, 0.07)" },
 				"chan.yellow.border": { value: "rgba(200, 160, 0, 0.15)" },
@@ -2032,4 +2297,4 @@ const system = createSystem(defaultConfig, defineConfig({
 	}
 }));
 //#endregion
-export { ColorModeButton, DeckCard, SlideControls, SlideLayoutComponent as SlideLayout, SlideViewer, Splash, TokenShowcase, Topbar, Wordmark, getSlideComponents, system };
+export { ChanFaviconHead, ColorModeButton, DeckCard, EnsureFaviconHead, EnsureIcon, EnsureWordmark, EntropyFaviconHead, EntropyIcon, EntropyWordmark, PRODUCT_ICONS, PRODUCT_WORDMARKS, RestunnelFaviconHead, RestunnelIcon, RestunnelWordmark, SeamFaviconHead, SeamIcon, SeamWordmark, SlideControls, SlideLayoutComponent as SlideLayout, SlideViewer, SlidesFaviconHead, SlidesIcon, SlidesWordmark, Splash, TokenShowcase, Topbar, Wordmark, chanFaviconAssets, ensureFaviconAssets, entropyFaviconAssets, getSlideComponents, restunnelFaviconAssets, seamFaviconAssets, slidesFaviconAssets, system };

package/package.json

@@ -1,29 +1,36 @@
 {
   "name": "@chan.run/design",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Shared Chakra UI v3 theme and component library for chan.run",
   "license": "MIT",
   "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.mts"
-    }
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./favicons/*": "./assets/favicons/*",
+    "./svg/*": "./assets/svg/*"
   },
-  "main": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
   "files": [
-    "dist"
+    "dist",
+    "assets"
   ],
   "peerDependencies": {
-    "@chakra-ui/react": "3.34.0",
+    "@chakra-ui/react": "^3.35.0",
     "next-themes": "*",
-    "react": "19.2.4"
+    "react": "^19.0.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "3.34.0",
+    "@chakra-ui/cli": "3.35.0",
+    "@types/opentype.js": "^1.3.9",
     "@types/react": "19.2.14",
+    "favicons": "^7.2.0",
+    "opentype.js": "^1.3.4",
     "tsdown": "^0.21.7",
+    "tsx": "^4.21.0",
     "typescript": "5.9.3"
   },
   "repository": {
@@ -33,6 +40,9 @@
   },
   "scripts": {
     "build": "tsdown",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit && tsc -p scripts",
+    "export-svg": "tsx scripts/export-svg.ts",
+    "gen-favicons": "tsx scripts/gen-favicons.ts",
+    "gen-brand": "pnpm export-svg && pnpm gen-favicons"
   }
 }