@021.is/brand-studio 0.6.0 → 0.6.7

package/dist/{BrandStudio-D1QR4hIC.d.ts → BrandStudio-ksHBhiX3.d.ts}

@@ -20,7 +20,10 @@ type BrandStudioProps = {
     animatedLogo?: ReactNode;
     /** Host app's own glyphs for the Icons section. The lib ships none. */
     icons?: BrandIcon[];
+    /** Real wordmark lockups: Overview headline + Download previews. */
+    wordmark?: ReactNode;
+    wordmarkDark?: ReactNode;
 };
-declare function BrandStudio({ config, route, basePath, staticLogo, staticLogoDark, animatedLogo, icons, }: BrandStudioProps): react_jsx_runtime.JSX.Element;
+declare function BrandStudio({ config, route, basePath, staticLogo, staticLogoDark, animatedLogo, icons, wordmark, wordmarkDark, }: BrandStudioProps): react_jsx_runtime.JSX.Element;
 
 export { type BrandIcon as B, BrandStudio as a, type BrandStudioProps as b };

package/dist/app/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BrandIcon, a as BrandStudio, b as BrandStudioProps } from '../BrandStudio-D1QR4hIC.js';
+export { B as BrandIcon, a as BrandStudio, b as BrandStudioProps } from '../BrandStudio-ksHBhiX3.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { c as BrandStudioSection } from '../types-BycZ2igw.js';

package/dist/app/index.js

@@ -1,5 +1,5 @@
 "use client";
-export { BrandStudio, Navigation, buildNavigation } from '../chunk-JGLPUAM6.js';
+export { BrandStudio, Navigation, buildNavigation } from '../chunk-H3LCFXCK.js';
 import '../chunk-YDZA26YU.js';
 import '../chunk-MDTU2JR5.js';
 export { contrastBadge, contrastRatio, relativeLuminance } from '../chunk-JQV3ASME.js';

package/dist/{chunk-JGLPUAM6.js → chunk-H3LCFXCK.js}

@@ -10,7 +10,6 @@ var ITEMS = [
   { section: BrandStudioSection.Colors, label: "Colors" },
   { section: BrandStudioSection.Typography, label: "Type" },
   { section: BrandStudioSection.Icons, label: "Icons" },
-  { section: BrandStudioSection.Motion, label: "Motion" },
   { section: BrandStudioSection.Download, label: "Download" }
 ];
 function buildNavigation(basePath) {
@@ -30,7 +29,7 @@ function Navigation({ current, basePath, renderLink }) {
         gap: "1.5rem",
         listStyle: "none",
         margin: 0,
-        padding: "0 0 0.75rem 0",
+        padding: 0,
         fontFamily: "var(--bs-mono, ui-monospace, monospace)",
         fontSize: "0.78rem",
         letterSpacing: "0.12em",
@@ -182,7 +181,9 @@ var WORDMARK_HEIGHTS = [32, 48, 64, 96, 128];
 function DownloadSection({
   config,
   staticLogo,
-  staticLogoDark
+  staticLogoDark,
+  wordmark,
+  wordmarkDark
 }) {
   const iconLightRef = useRef(null);
   const iconDarkRef = useRef(null);
@@ -204,7 +205,12 @@ function DownloadSection({
   const iconDark = findEntry(downloads, DownloadKind.Icon, DownloadMode.Dark, iconSize);
   const logoLight = findEntry(downloads, DownloadKind.Logo, DownloadMode.Light, wmHeight);
   const logoDark = findEntry(downloads, DownloadKind.Logo, DownloadMode.Dark, wmHeight);
-  function downloadIcon(mode) {
+  async function downloadIcon(mode) {
+    const entry = mode === "light" ? iconLight : iconDark;
+    if (entry) {
+      await fetchAndSave(entry.url, entry.filename ?? lastSegment(entry.url));
+      return;
+    }
     const ref = mode === "light" ? iconLightRef : iconDarkRef;
     const svg = ref.current?.querySelector("svg");
     if (!svg) return;
@@ -218,6 +224,11 @@ function DownloadSection({
     );
   }
   async function downloadWordmark(mode) {
+    const entry = mode === "light" ? logoLight : logoDark;
+    if (entry) {
+      await fetchAndSave(entry.url, entry.filename ?? lastSegment(entry.url));
+      return;
+    }
     await document.fonts?.ready;
     const text = measureRef.current?.querySelector("text");
     if (!text) return;
@@ -265,7 +276,9 @@ function DownloadSection({
         style: {
           display: "grid",
           gap: "1.5rem",
-          gridTemplateColumns: "repeat(auto-fit, minmax(20rem, 1fr))"
+          // min(20rem, 100%) so the 20rem floor never exceeds the container on
+          // narrow viewports (which would force horizontal overflow).
+          gridTemplateColumns: "repeat(auto-fit, minmax(min(20rem, 100%), 1fr))"
         },
         children: [
           /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
@@ -308,8 +321,8 @@ function DownloadSection({
           /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
             /* @__PURE__ */ jsx("p", { style: eyebrowStyle, children: "Wordmark \xB7 logo text" }),
             /* @__PURE__ */ jsxs("div", { style: previewRow, children: [
-              /* @__PURE__ */ jsx(PreviewPane, { bg: lightBg, label: "Light", labelColor: lightLabel, children: /* @__PURE__ */ jsx(WordmarkPreview, { name: config.name, sans, color: lightInk }) }),
-              /* @__PURE__ */ jsx(PreviewPane, { bg: darkBg, label: "Dark", labelColor: darkLabel, children: /* @__PURE__ */ jsx(WordmarkPreview, { name: config.name, sans, color: darkInk }) })
+              /* @__PURE__ */ jsx(PreviewPane, { bg: lightBg, label: "Light", labelColor: lightLabel, children: wordmark ?? /* @__PURE__ */ jsx(WordmarkPreview, { name: config.name, sans, color: lightInk }) }),
+              /* @__PURE__ */ jsx(PreviewPane, { bg: darkBg, label: "Dark", labelColor: darkLabel, children: wordmarkDark ?? wordmark ?? /* @__PURE__ */ jsx(WordmarkPreview, { name: config.name, sans, color: darkInk }) })
             ] }),
             /* @__PURE__ */ jsx(
               Dropdown,
@@ -404,6 +417,23 @@ function triggerBlobDownload(svgString, filename) {
   a.remove();
   window.setTimeout(() => URL.revokeObjectURL(url), 1e3);
 }
+async function fetchAndSave(url, filename) {
+  try {
+    const res = await fetch(url, { cache: "no-store" });
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    const blob = await res.blob();
+    const objectUrl = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = objectUrl;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1e3);
+  } catch {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+}
 function UrlPair({ light, dark }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -423,12 +453,40 @@ function UrlPair({ light, dark }) {
 function UrlRow({ label, entry }) {
   const [copied, setCopied] = useState(false);
   const url = entry?.url ?? null;
-  function onCopy() {
-    if (!url || typeof navigator === "undefined" || !navigator.clipboard) return;
-    navigator.clipboard.writeText(toAbsolute(url)).then(() => {
+  async function onCopy() {
+    if (!url || typeof window === "undefined") return;
+    const text = toAbsolute(url);
+    let ok = false;
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      try {
+        await navigator.clipboard.writeText(text);
+        ok = true;
+      } catch {
+        ok = false;
+      }
+    }
+    if (!ok) {
+      try {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.setAttribute("readonly", "");
+        ta.style.position = "fixed";
+        ta.style.top = "0";
+        ta.style.left = "0";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.focus();
+        ta.select();
+        ok = document.execCommand("copy");
+        document.body.removeChild(ta);
+      } catch {
+        ok = false;
+      }
+    }
+    if (ok) {
       setCopied(true);
-      window.setTimeout(() => setCopied(false), 1200);
-    });
+      window.setTimeout(() => setCopied(false), 1600);
+    }
   }
   const disabled = !url;
   const downloadName = entry?.filename ?? lastSegment(url ?? "");
@@ -477,12 +535,15 @@ function UrlRow({ label, entry }) {
             type: "button",
             onClick: onCopy,
             disabled,
-            title: "Copy URL",
+            title: copied ? "URL copied" : "Copy URL",
+            "aria-live": "polite",
             style: {
               ...copyButtonStyle,
+              background: copied ? "var(--md-primary)" : copyButtonStyle.background,
+              color: copied ? "var(--md-on-primary)" : copyButtonStyle.color,
               cursor: disabled ? "not-allowed" : "pointer"
             },
-            children: copied ? "Copied" : "Copy"
+            children: copied ? "\u2713 Copied" : "Copy"
           }
         )
       ]
@@ -621,7 +682,11 @@ var cardStyle = {
   border: "1px solid var(--md-outline-variant)",
   borderRadius: "0.85rem",
   padding: "1.25rem",
-  background: "var(--md-surface-container-low)"
+  background: "var(--md-surface-container-low)",
+  // Grid items default to min-width:auto (won't shrink below content min-content),
+  // so the URL row's truncating <a> can't shrink and the row overflows the card.
+  // minWidth:0 lets the card shrink and the ellipsis do its job.
+  minWidth: 0
 };
 var eyebrowStyle = {
   fontFamily: "var(--bs-mono, ui-monospace, monospace)",
@@ -747,7 +812,7 @@ function IconsSection({ staticLogo, icons }) {
           gap: "1.5rem"
         },
         children: [
-          staticLogo ? /* @__PURE__ */ jsx(Tile, { label: "logo", children: staticLogo }) : null,
+          staticLogo && items.length === 0 ? /* @__PURE__ */ jsx(Tile, { label: "logo", children: staticLogo }) : null,
           items.map((it, i) => /* @__PURE__ */ jsx(Tile, { label: it.label, children: it.node }, it.label ?? `icon-${i}`))
         ]
       }
@@ -890,128 +955,13 @@ var eyebrow4 = {
   color: "var(--md-primary)",
   margin: 0
 };
-var PRIMITIVES = [
-  ["Sweep", "Wipe a highlight across a mark"],
-  ["Drift", "Gentle idle float"],
-  ["PulseLoop", "Scale + fade breathing"],
-  ["RingDraw", "Stroke a ring into place"],
-  ["Wobble", "Playful rotate-settle"],
-  ["AppearGrow", "Pop in from nothing"],
-  ["Sequence", "Compose steps, persist + loop"],
-  ["Strikethrough", "Draw a line through"]
-];
-function MotionPlaygroundSection({
-  animatedLogo
+function OverviewSection({
+  config,
+  lockup
 }) {
   return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsxs("header", { children: [
-      /* @__PURE__ */ jsx("p", { style: eyebrow4, children: "Motion" }),
-      /* @__PURE__ */ jsx(
-        "h2",
-        {
-          style: {
-            fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
-            letterSpacing: "-0.02em",
-            margin: "0.4rem 0 0",
-            fontWeight: 600,
-            color: "var(--md-on-surface)"
-          },
-          children: "Loading."
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "p",
-        {
-          style: { maxWidth: "56ch", color: "var(--md-on-surface-variant)", marginTop: "0.75rem" },
-          children: [
-            "The brand mark as a loading state. Pass your own animated mark via",
-            " ",
-            /* @__PURE__ */ jsx("code", { style: { fontFamily: "var(--bs-mono)" }, children: "animatedLogo" }),
-            "; otherwise a neutral spinner stands in."
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          marginTop: "2rem",
-          display: "flex",
-          justifyContent: "center",
-          padding: "3rem",
-          borderRadius: "0.75rem",
-          background: "var(--md-surface-container)",
-          border: "1px solid var(--md-outline-variant)",
-          color: "var(--md-primary)"
-        },
-        children: animatedLogo ?? /* @__PURE__ */ jsx(SpinnerLoadingMark, { size: 220, foreground: "var(--md-primary)" })
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { style: { marginTop: "2.5rem" }, children: [
-      /* @__PURE__ */ jsx("p", { style: { ...eyebrow4, fontSize: "0.7rem", marginBottom: "1rem" }, children: "Motion primitives" }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            display: "grid",
-            gap: "0.6rem",
-            gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))"
-          },
-          children: PRIMITIVES.map(([name, desc]) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                padding: "0.9rem 1.1rem",
-                borderRadius: "0.6rem",
-                border: "1px solid var(--md-outline-variant)",
-                background: "var(--md-surface-container-low)"
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    style: {
-                      margin: 0,
-                      fontFamily: "var(--bs-mono)",
-                      fontSize: "0.82rem",
-                      color: "var(--md-on-surface)"
-                    },
-                    children: name
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "p",
-                  {
-                    style: {
-                      margin: "0.3rem 0 0",
-                      fontSize: "0.8rem",
-                      color: "var(--md-on-surface-variant)"
-                    },
-                    children: desc
-                  }
-                )
-              ]
-            },
-            name
-          ))
-        }
-      )
-    ] })
-  ] });
-}
-var eyebrow5 = {
-  fontFamily: "var(--bs-mono)",
-  fontSize: "0.72rem",
-  letterSpacing: "0.18em",
-  textTransform: "uppercase",
-  color: "var(--md-primary)",
-  margin: 0
-};
-function OverviewSection({ config }) {
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsx("p", { style: eyebrow5, children: "Brand kit" }),
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("p", { style: eyebrow4, children: "Brand kit" }),
+    lockup ? /* @__PURE__ */ jsx("div", { style: { margin: "1.25rem 0 0", maxWidth: "22rem" }, children: lockup }) : /* @__PURE__ */ jsxs(
       "h1",
       {
         style: {
@@ -1040,7 +990,7 @@ function OverviewSection({ config }) {
       }
     ) : null,
     config.voice && config.voice.length > 0 ? /* @__PURE__ */ jsxs("div", { style: { marginTop: "2.5rem" }, children: [
-      /* @__PURE__ */ jsx("p", { style: { ...eyebrow5, fontSize: "0.7rem", letterSpacing: "0.16em" }, children: "Voice" }),
+      /* @__PURE__ */ jsx("p", { style: { ...eyebrow4, fontSize: "0.7rem", letterSpacing: "0.16em" }, children: "Voice" }),
       /* @__PURE__ */ jsx(
         "ul",
         {
@@ -1222,7 +1172,6 @@ function resolveSection(route) {
     case BrandStudioSection.Colors:
     case BrandStudioSection.Typography:
     case BrandStudioSection.Icons:
-    case BrandStudioSection.Motion:
     case BrandStudioSection.Download:
       return head;
     default:
@@ -1236,7 +1185,9 @@ function BrandStudio({
   staticLogo,
   staticLogoDark,
   animatedLogo,
-  icons
+  icons,
+  wordmark,
+  wordmarkDark
 }) {
   const section = resolveSection(route);
   const scheme = config.scheme ?? generateScheme(config.color);
@@ -1253,11 +1204,13 @@ function BrandStudio({
     {
       href,
       style: {
+        display: "inline-block",
         color: isActive ? "var(--md-primary)" : "var(--md-on-surface-variant)",
         textDecoration: "none",
         fontWeight: isActive ? 600 : 400,
         borderBottom: isActive ? "2px solid var(--md-primary)" : "2px solid transparent",
-        paddingBottom: "0.4rem"
+        paddingBottom: "0.6rem",
+        marginBottom: "-1px"
       },
       children
     }
@@ -1281,18 +1234,19 @@ function BrandStudio({
         /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: cssText } }),
         /* @__PURE__ */ jsx(Navigation, { current: section, basePath, renderLink: link }),
         /* @__PURE__ */ jsxs("div", { style: { marginTop: "3rem" }, children: [
-          section === BrandStudioSection.Overview && /* @__PURE__ */ jsx(OverviewSection, { config }),
+          section === BrandStudioSection.Overview && /* @__PURE__ */ jsx(OverviewSection, { config, lockup: wordmark }),
           section === BrandStudioSection.Logo && /* @__PURE__ */ jsx(LogoSection, { config, staticLogo, animatedLogo }),
           section === BrandStudioSection.Colors && /* @__PURE__ */ jsx(ColorsSection, { scheme }),
           section === BrandStudioSection.Typography && /* @__PURE__ */ jsx(TypographySection, { config }),
           section === BrandStudioSection.Icons && /* @__PURE__ */ jsx(IconsSection, { staticLogo, icons }),
-          section === BrandStudioSection.Motion && /* @__PURE__ */ jsx(MotionPlaygroundSection, { animatedLogo, staticLogo }),
           section === BrandStudioSection.Download && /* @__PURE__ */ jsx(
             DownloadSection,
             {
               config,
               staticLogo,
-              staticLogoDark
+              staticLogoDark,
+              wordmark,
+              wordmarkDark
             }
           )
         ] }),
@@ -1316,7 +1270,6 @@ function BrandStudio({
                 "Powered by ",
                 /* @__PURE__ */ jsx("span", { style: { color: "var(--md-primary)" }, children: "@021.is/brand-studio" })
               ] }),
-              config.operator ? /* @__PURE__ */ jsx("span", { children: config.operator }) : null,
               config.domain ? /* @__PURE__ */ jsx("span", { children: config.domain }) : null
             ]
           }

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { B as BrandConfig, a as BrandDownload, b as BrandDownloads, c as BrandSt
 export { B as BrandScheme, C as ColorScheme, a as ColorSpec, H as Hex, R as ROLE, b as ROLE_GROUPS, c as ROLE_ORDER, d as Role, S as SchemeVariant, g as generateScheme } from './generateScheme-BDDcIzA3.js';
 export { cssVarName, schemeToCssText, schemeVars } from './color/index.js';
 export { C as ContrastTier, c as contrastBadge, a as contrastRatio, r as relativeLuminance } from './contrast-TVW3pzdd.js';
-export { a as BrandStudio, b as BrandStudioProps } from './BrandStudio-D1QR4hIC.js';
+export { a as BrandStudio, b as BrandStudioProps } from './BrandStudio-ksHBhiX3.js';
 export { STANDARD_ICON_SIZES, STANDARD_LOGO_SIZES, StandardDownloadsInput, buildStandardDownloads, defineBrand, slugify } from './define/index.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/index.js

@@ -2,7 +2,7 @@
 export { Disc, Ring, Squircle } from './chunk-LJ4HZCAP.js';
 export { AppearGrow, Drift, PulseLoop, RingDraw, Sequence, SequenceStep, Strikethrough, Sweep, Wobble } from './chunk-7325RQRP.js';
 export { LoadingMark, PulseLoadingMark, RingLoadingMark } from './chunk-F4CFQDS7.js';
-export { BrandStudio } from './chunk-JGLPUAM6.js';
+export { BrandStudio } from './chunk-H3LCFXCK.js';
 export { SpinnerLoadingMark } from './chunk-YDZA26YU.js';
 export { STANDARD_ICON_SIZES, STANDARD_LOGO_SIZES, buildStandardDownloads, defineBrand, slugify } from './chunk-6J2NFZLN.js';
 export { BrandStudioSection, DownloadFormat, DownloadKind, DownloadMode, LoadingVariant, MotionState } from './chunk-MDTU2JR5.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@021.is/brand-studio",
-  "version": "0.6.0",
-  "description": "Generic MD3 brand-kit toolkit: seed → full light + dark role set, composable SVG shapes + motion + loading marks, mountable <BrandStudio> /brand page, mandatory icon + logo download-URL contract. Ships no brand content — every app supplies its own logo, icons, and seed colour.",
+  "version": "0.6.7",
+  "description": "Generic MD3 brand-kit toolkit: seed \u2192 full light + dark role set, composable SVG shapes + motion + loading marks, mountable <BrandStudio> /brand page, mandatory icon + logo download-URL contract. Ships no brand content \u2014 every app supplies its own logo, icons, and seed colour.",
   "license": "MIT",
   "author": {
     "name": "edvone",
@@ -30,7 +30,12 @@
   "private": false,
   "type": "module",
   "sideEffects": false,
-  "files": ["dist", "LICENSE", "README.md", "AGENTS.md"],
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "AGENTS.md"
+  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",