@omniharmonic/openspace-cli 0.1.11 → 0.1.13

package/dist/{chunk-FPW2XAQ5.js → chunk-IXN2CNGL.js}

@@ -20415,7 +20415,15 @@ var HEADER_VARIANTS = [
   /** Navigation lives in a side drawer opened from the header. */
   "sidebar-drawer",
   /** Header overlays the first section (transparent until scrolled). */
-  "transparent-overlay"
+  "transparent-overlay",
+  /** Navigation on the left, logo centered, buttons and cart on the right. */
+  "nav-left-logo-center",
+  /**
+   * A column down the left on wide screens (logo, title, tagline, the navigation as a list),
+   * the page to its right; a top bar with a menu button on phones. Sidebar themes (WordPress
+   * Twenty Fifteen and the like).
+   */
+  "sidebar-left"
 ];
 var HeaderVariantSchema = external_exports.enum(HEADER_VARIANTS);
 var MOBILE_MENU_STYLES = ["slide", "fullscreen", "dropdown"];
@@ -24099,6 +24107,127 @@ var SiteConfigSchema = named(
   })
 );
 
+// ../schema/src/design-system.ts
+var DESIGN_SYSTEM_FILE = "content/design-system.json";
+var Text = (max) => external_exports.string().max(max);
+var DesignColorSchema = external_exports.strictObject({
+  /** `#rrggbb` (or any CSS colour the theme can read). */
+  value: Text(80),
+  role: external_exports.enum([...COLOR_ROLES, "brand", "secondary"]).optional(),
+  /** Where it is used ("labels and rules only"). */
+  usage: Text(200).optional()
+});
+var DesignFontSchema = external_exports.strictObject({
+  family: Text(80),
+  /** The full CSS stack as given (`'Lora', Georgia, serif`). */
+  stack: Text(200).optional(),
+  category: external_exports.enum(["serif", "sans-serif", "monospace", "display", "handwriting"]).optional(),
+  weights: external_exports.array(external_exports.int().min(100).max(900)).max(9).optional(),
+  /** Served by Google Fonts (so the site can self-host it). */
+  google: external_exports.boolean().optional()
+});
+var DesignTypeStepSchema = external_exports.strictObject({
+  size: external_exports.number().min(6).max(240).optional(),
+  sizeMobile: external_exports.number().min(6).max(200).optional(),
+  lineHeight: external_exports.number().min(0.6).max(4).optional(),
+  letterSpacing: external_exports.number().min(-0.5).max(2).optional(),
+  weight: external_exports.int().min(100).max(900).optional(),
+  case: external_exports.enum(["none", "uppercase", "lowercase", "capitalize"]).optional(),
+  font: external_exports.enum(["heading", "body", "label", "mono"]).optional()
+});
+var DesignTokensSchema = external_exports.strictObject({
+  colors: external_exports.record(Text(60), DesignColorSchema).optional(),
+  fonts: external_exports.strictObject({
+    heading: DesignFontSchema.optional(),
+    body: DesignFontSchema.optional(),
+    label: DesignFontSchema.optional(),
+    mono: DesignFontSchema.optional()
+  }).optional(),
+  /** Type scale by role (`display`, `h1`…`h4`, `lead`, `body`, `small`, `eyebrow`, `button`, `nav`). */
+  type: external_exports.record(Text(40), DesignTypeStepSchema).optional(),
+  /** Page rhythm and spacing steps in px. */
+  space: external_exports.strictObject({
+    contentWidth: external_exports.number().min(0).max(4e3).optional(),
+    narrowWidth: external_exports.number().min(0).max(4e3).optional(),
+    sectionPadding: external_exports.number().min(0).max(400).optional(),
+    sectionPaddingMobile: external_exports.number().min(0).max(400).optional(),
+    gutter: external_exports.number().min(0).max(400).optional(),
+    gutterMobile: external_exports.number().min(0).max(400).optional(),
+    scale: external_exports.record(Text(40), external_exports.number().min(0).max(2e3)).optional()
+  }).optional(),
+  /** Corner radii in px (`base`, `button`, `card`, `image`; 9999 = pill). */
+  radius: external_exports.record(Text(40), external_exports.number().min(0).max(1e4)).optional(),
+  shadow: external_exports.record(Text(40), Text(200)).optional()
+});
+var DESIGN_SOURCE_KINDS = [
+  "tokens",
+  "brand-kit",
+  "html",
+  "brand-doc",
+  "logo",
+  "photos",
+  "manual",
+  "template",
+  "claude"
+];
+var DesignSystemSchema = named(
+  "DesignSystem",
+  "content/design-system.json: the brief, brand material, distilled design tokens and how they map onto Site Styles (read by Claude's design skills).",
+  external_exports.strictObject({
+    $schema: external_exports.string().optional(),
+    version: external_exports.literal(1),
+    /** The person's own words about the site (Start with Claude). */
+    brief: external_exports.strictObject({
+      about: Text(2e3).optional(),
+      audience: Text(1e3).optional(),
+      /** How it should feel ("warm", "calm", "bold"…). */
+      feeling: external_exports.array(Text(40)).max(12).optional(),
+      /** Anything else they said (must-haves, places they love). */
+      notes: Text(2e3).optional()
+    }).optional(),
+    brand: external_exports.strictObject({
+      name: Text(120).optional(),
+      /** How the brand speaks (from a brand document, or Claude's notes). */
+      voice: Text(2e3).optional(),
+      /** Text of a brand document the owner brought (trimmed). */
+      guidelines: Text(2e4).optional(),
+      logo: MediaPathSchema.optional(),
+      /** Brand photos the owner brought (media paths). */
+      photos: external_exports.array(MediaPathSchema).max(24).optional(),
+      /** Files kept in the repository for reference (PDF brand books…), not published. */
+      documents: external_exports.array(external_exports.strictObject({ name: Text(120), path: Text(300) })).max(12).optional()
+    }).optional(),
+    tokens: DesignTokensSchema,
+    /** Design principles to keep ("Rust is for labels and rules only; never body text"). */
+    rules: external_exports.array(Text(300)).max(40).optional(),
+    /** How the tokens became Site Styles: plain sentences, contrast changes included. */
+    mapping: external_exports.strictObject({
+      notes: external_exports.array(Text(400)).max(40),
+      contrast: external_exports.array(
+        external_exports.strictObject({
+          theme: Text(40),
+          role: Text(40),
+          from: Text(40),
+          to: Text(40),
+          against: Text(40)
+        })
+      ).max(80).optional()
+    }).optional(),
+    /** Bespoke components and what each is for (kept in step with content/components). */
+    components: external_exports.record(Text(40), external_exports.strictObject({ purpose: Text(300), source: Text(200).optional() })).optional(),
+    sources: external_exports.array(
+      external_exports.strictObject({
+        kind: external_exports.enum(DESIGN_SOURCE_KINDS),
+        name: Text(200).optional(),
+        /** Token format (`dtcg`, `style-dictionary`, `tokens-studio`, `canva`, `plain`). */
+        format: Text(40).optional(),
+        at: Text(40).optional()
+      })
+    ).max(40).optional(),
+    updatedAt: Text(40).optional()
+  })
+);
+
 // ../schema/src/media.ts
 var MEDIA_KINDS = ["image", "video", "audio", "file"];
 var MAX_PLACEHOLDER_LENGTH = 1024;
@@ -24366,7 +24495,12 @@ var SiteDocumentSchema = named(
      * Custom components by name (`content/components/<name>.json`, ADR custom-components).
      * Optional: documents without components are unchanged.
      */
-    components: ComponentsSchema.optional()
+    components: ComponentsSchema.optional(),
+    /**
+     * The design-system record (`content/design-system.json`): brief, brand material, tokens and
+     * their Site Styles mapping, for Claude's design skills. Optional; never rendered.
+     */
+    designSystem: DesignSystemSchema.optional()
   }).superRefine((doc, ctx) => {
     const slugs = /* @__PURE__ */ new Map();
     const sectionIds = /* @__PURE__ */ new Map();
@@ -27580,7 +27714,9 @@ function StackBody({ section: section2 }) {
         "os-section__inner os-stack",
         `os-w-${layout.width ?? "content"}`,
         layout.align && `is-align-${layout.align}`,
-        cols.length > 1 && "is-multi"
+        cols.length > 1 && "is-multi",
+        // A full-width designer section draws its own edges (no side gutter).
+        layout.width === "full" && section2.blocks.length === 1 && section2.blocks[0]?.type.startsWith("component/") && "is-bleed"
       ),
       style: stackVars(layout),
       children: cols.map((blocks2, i) => {
@@ -28277,22 +28413,29 @@ function navFit(input2) {
   if (need(29) <= 1440 - 96) return "wide";
   return "collapse";
 }
-function Brand({ site, className }) {
+function Brand({
+  site,
+  className,
+  withTitle
+}) {
   const { basePath } = useRenderContext();
   const logo = site.logo;
-  return /* @__PURE__ */ jsx9("a", { className: cx("os-header__brand", className), href: `${normalizeBasePath(basePath)}/`, children: logo ? /* @__PURE__ */ jsx9(
-    Img,
-    {
-      src: logo.src,
-      alt: logo.alt || site.title,
-      ...logo.width ? { width: logo.width } : {},
-      ...logo.height ? { height: logo.height } : {},
-      sizes: "240px",
-      treatment: "none",
-      priority: true,
-      className: "os-header__logo"
-    }
-  ) : /* @__PURE__ */ jsx9("span", { className: "os-header__title", children: site.title }) });
+  return /* @__PURE__ */ jsxs6("a", { className: cx("os-header__brand", className), href: `${normalizeBasePath(basePath)}/`, children: [
+    logo ? /* @__PURE__ */ jsx9(
+      Img,
+      {
+        src: logo.src,
+        alt: withTitle ? "" : logo.alt || site.title,
+        ...logo.width ? { width: logo.width } : {},
+        ...logo.height ? { height: logo.height } : {},
+        sizes: "240px",
+        treatment: "none",
+        priority: true,
+        className: "os-header__logo"
+      }
+    ) : null,
+    !logo || withTitle ? /* @__PURE__ */ jsx9("span", { className: "os-header__title", children: site.title }) : null
+  ] });
 }
 function MenuIcon() {
   return /* @__PURE__ */ jsx9(
@@ -28352,7 +28495,8 @@ function Header({ site, page, heroTheme, cart }) {
   );
   const social3 = h.showSocial ? site.social ?? [] : [];
   const theme = h.overlay && heroTheme ? heroTheme : h.colorTheme ?? "light";
-  const fit = DRAWER_VARIANTS.includes(h.variant) ? "fits" : navFit({
+  const sidebar = h.variant === "sidebar-left";
+  const fit = DRAWER_VARIANTS.includes(h.variant) || sidebar ? "fits" : navFit({
     title: site.title,
     logo: site.logo,
     nav: nav.map((i) => ({ label: i.label, kind: i.kind })),
@@ -28396,7 +28540,15 @@ function Header({ site, page, heroTheme, cart }) {
       "data-os-behavior": "menu",
       children: [
         /* @__PURE__ */ jsxs6("div", { className: "os-header__bar", children: [
-          /* @__PURE__ */ jsx9(Brand, { site, className: split ? "os-header__brand--main" : void 0 }),
+          /* @__PURE__ */ jsx9(
+            Brand,
+            {
+              site,
+              ...split ? { className: "os-header__brand--main" } : {},
+              ...sidebar ? { withTitle: true } : {}
+            }
+          ),
+          sidebar && site.tagline ? /* @__PURE__ */ jsx9("p", { className: "os-header__tagline", children: site.tagline }) : null,
           desktopNav,
           actions,
           cart && /* @__PURE__ */ jsx9(CartButton, {}),
@@ -28646,6 +28798,7 @@ ${typeClasses}
 /* Stack mode: 1\u20134 columns, per-breakpoint ratios (--cols/--tcols/--mcols) and order (--to/--mo) */
 .os-stack{display:grid;max-inline-size:calc(var(--content-max) + 2 * ${v(T.section.gutter)});padding-inline:${v(T.section.gutter)};grid-template-columns:var(--mcols,minmax(0,1fr));row-gap:var(--gap,${v(T.section.blockGap)});column-gap:var(--gap,${v(T.space.xl)});align-items:start}
 .os-w-full.os-stack{max-inline-size:none}
+.os-stack.is-bleed{padding-inline:0}
 .os-stack.is-align-center{align-items:center}
 .os-stack.is-align-end{align-items:end}
 .os-stack.is-align-stretch{align-items:stretch}
@@ -28795,7 +28948,7 @@ ${button("tertiary")}
 .os-header__logo{height:var(--mlogo-h,2rem);width:auto;border-radius:0;background:none}
 .os-header__logo .os-img__img{height:100%;width:auto;object-fit:contain}
 .os-header__title{${typePreset("wordmark")};text-wrap:balance;overflow-wrap:break-word;max-inline-size:30ch}
-.os-header__brand--split,.os-nav{display:none}
+.os-header__brand--split,.os-nav,.os-header__tagline{display:none}
 .os-header__actions{display:none;align-items:center;gap:${v(T.space.xs)}}
 .os-header__actions .os-button{min-height:2.5rem;padding-block:0.5rem}
 .os-header__toggle,.os-header__cart,.os-menu__close{position:relative;display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:${v(T.radius.full)};background:transparent;color:inherit}
@@ -28858,6 +29011,24 @@ html:not(.os-js) .os-header__toggle{display:none}
 .os-header.os-header--split-nav .os-nav--split{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1.5rem,3vw,3rem)}
 .os-header--split-nav .os-nav__list--start{justify-content:flex-end}
 .os-header--split-nav .os-header__brand--split{display:inline-flex;margin:0}
+.os-header--nav-left-logo-center .os-header__bar{position:relative}
+.os-header--nav-left-logo-center .os-header__brand{position:absolute;inset-inline-start:50%;translate:-50% 0;margin:0;max-inline-size:34%}
+[dir=rtl] .os-header--nav-left-logo-center .os-header__brand{translate:50% 0}
+.os-header--nav-left-logo-center .os-nav{order:-1;margin-inline-end:auto;max-inline-size:33%}
+.os-header--nav-left-logo-center .os-nav__list{justify-content:flex-start}
+.os-page:has(>.os-header--sidebar-left){--sidebar-w:clamp(16rem,28vw,28rem);padding-inline-start:var(--sidebar-w)}
+.os-header.os-header--sidebar-left{position:fixed;inset-block:0;inset-inline-start:0;inline-size:var(--sidebar-w);overflow-y:auto;overscroll-behavior:contain}
+.os-header--sidebar-left .os-header__bar{flex-direction:column;align-items:flex-start;gap:${v(T.space.sm)};min-height:0;max-inline-size:none;margin:0;padding:clamp(2rem,4vw,4rem) clamp(1.5rem,3.5vw,3.5rem)}
+.os-header--sidebar-left .os-header__brand{flex-direction:column;align-items:flex-start;gap:0.75rem;margin:0}
+.os-header--sidebar-left .os-header__logo{height:auto;max-inline-size:min(100%,8rem)}
+.os-header.os-header--sidebar-left .os-header__title{white-space:normal;max-inline-size:none}
+.os-header--sidebar-left .os-header__tagline{display:block;margin:0;font-size:${v(T.type.small["font-size"])};line-height:${v(T.type.small["line-height"])};color:${v(c2["text-muted"])}}
+.os-header--sidebar-left .os-nav{inline-size:100%;margin-block-start:${v(T.space.sm)}}
+.os-header--sidebar-left .os-nav__list{flex-direction:column;align-items:stretch;row-gap:0}
+.os-header--sidebar-left .os-nav__link{display:flex;padding-block:0.55rem;border-bottom:1px solid ${v(c2.border)};white-space:normal}
+.os-header--sidebar-left .os-nav__link::after{display:none}
+.os-header--sidebar-left .os-nav .os-nav__sub{position:static;min-width:0;padding:0 0 0 1rem;background:none;box-shadow:none;color:inherit}
+.os-header--sidebar-left .os-header__actions{flex-direction:column;align-items:flex-start}
 .os-header--logo-center-nav-below,.os-header--stacked{--header-row:3rem}
 .os-header--logo-center-nav-below .os-header__bar{display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:". brand actions" "nav nav nav";row-gap:0;padding-bottom:0}
 .os-header--logo-center-nav-below .os-header__brand{grid-area:brand;margin:0}
@@ -43276,6 +43447,44 @@ var headerPresets = [
       colorTheme: theme
     })
   }),
+  defineHeaderPreset({
+    category: "header",
+    name: "logo-centered",
+    label: "Logo centred, menu left",
+    description: "The navigation on the left, a centred logo, buttons and cart on the right.",
+    tags: ["boutique", "centered", "shop"],
+    ai: {
+      purpose: "A fashion- and boutique-style header with the brand in the middle.",
+      whenToUse: "Shops and studios whose wordmark should sit centre stage.",
+      avoid: HEADER_AVOID
+    },
+    make: (theme) => ({
+      variant: "nav-left-logo-center",
+      sticky: false,
+      transparentOnHero: false,
+      mobileMenu: "fullscreen",
+      colorTheme: theme
+    })
+  }),
+  defineHeaderPreset({
+    category: "header",
+    name: "sidebar",
+    label: "Sidebar",
+    description: "Logo, title and the menu in a column down the left; the page beside it.",
+    tags: ["blog", "editorial", "sidebar"],
+    ai: {
+      purpose: "A blog- or journal-style layout with the site's identity always in view.",
+      whenToUse: "Writers, journals and foundations with a short menu and a strong colour.",
+      avoid: HEADER_AVOID
+    },
+    make: (theme) => ({
+      variant: "sidebar-left",
+      sticky: false,
+      transparentOnHero: false,
+      mobileMenu: "slide",
+      colorTheme: theme
+    })
+  }),
   defineHeaderPreset({
     category: "header",
     name: "logo-above",
@@ -52875,6 +53084,8 @@ export {
   componentInstances,
   expandComponent,
   SiteConfigSchema,
+  DESIGN_SYSTEM_FILE,
+  DesignSystemSchema,
   MediaMetaSchema,
   DENSITIES,
   SHAPES,
@@ -52890,7 +53101,9 @@ export {
   fallbackMobileRects,
   toJsonSchema,
   blockFieldsJsonSchema,
+  oklchToHex,
   parseColor,
+  isColor,
   toHex,
   deltaEOK,
   relativeLuminance,
@@ -52899,6 +53112,7 @@ export {
   TYPE_PAIRINGS,
   getPairing,
   pairingFamilies,
+  SPACE_SCALES,
   flattenDtcg,
   compileStyles,
   COMPONENT_PREVIEW_IDS,
@@ -53030,4 +53244,4 @@ lucide/dist/esm/lucide.mjs:
    * See the LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=chunk-FPW2XAQ5.js.map
+//# sourceMappingURL=chunk-IXN2CNGL.js.map