@omniharmonic/openspace-cli 0.1.12 → 0.1.14

package/dist/{chunk-O55O7EA5.js → chunk-SY5NDWS2.js}

@@ -24107,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;
@@ -24256,14 +24377,21 @@ var TypographyChoicesSchema = named(
 );
 var LayoutChoicesSchema = named(
   "LayoutChoices",
-  "Page rhythm: content width and narrow width (px), section padding (px at desktop and on phones), side gutter.",
+  "Page rhythm: content width and narrow width (px), section padding (px at desktop and on phones), side gutter, and an optional raised content card over a page background.",
   external_exports.strictObject({
     contentWidth: external_exports.int().min(480).max(2400).optional(),
     narrowWidth: external_exports.int().min(360).max(1600).optional(),
     sectionPadding: external_exports.int().min(0).max(320).optional(),
     sectionPaddingMobile: external_exports.int().min(0).max(240).optional(),
     gutter: external_exports.int().min(0).max(160).optional(),
-    gutterMobile: external_exports.int().min(0).max(80).optional()
+    gutterMobile: external_exports.int().min(0).max(80).optional(),
+    /**
+     * `card`: the page's sections sit on a raised panel over the page background (a blog
+     * theme's content card); absent or `none`: sections run edge to edge.
+     */
+    surface: external_exports.enum(["none", "card"]).optional(),
+    /** The page background around a `card` surface (absent: the light theme's muted surface). */
+    pageBackground: CssColorSchema.optional()
   })
 );
 var StyleChoicesSchema = named(
@@ -24374,7 +24502,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();
@@ -27588,7 +27721,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) => {
@@ -28554,12 +28689,18 @@ function PageView(props) {
   const heroTheme = visible[0]?.style.colorTheme ?? "light";
   const cart = doc.site.integrations?.stripeConnected ?? false;
   const logoVars = header.logoHeight ? responsiveVars("logo-h", header.logoHeight, (px) => `${px}px`) : void 0;
+  const pageBg = doc.styles.choices.layout?.pageBackground;
+  const pageVars = pageBg && doc.styles.choices.layout?.surface === "card" ? { ...logoVars ?? {}, "--page-bg": pageBg } : logoVars;
   const content = /* @__PURE__ */ jsx10(RenderContext.Provider, { value: { doc, page, mode, basePath, hubUrl }, children: /* @__PURE__ */ jsx10(ImageResolverContext.Provider, { value: imageMap, children: /* @__PURE__ */ jsxs7(
     "div",
     {
-      className: cx("os-page", header.overlay && !header.hidden && "has-overlay-header"),
+      className: cx(
+        "os-page",
+        header.overlay && !header.hidden && "has-overlay-header",
+        doc.styles.choices.layout?.surface === "card" && "has-surface-card"
+      ),
       "data-os-page": page.id,
-      style: logoVars,
+      style: pageVars,
       children: [
         /* @__PURE__ */ jsx10("a", { className: "os-skip-link", href: "#main", children: "Skip to content" }),
         /* @__PURE__ */ jsx10(AnnouncementBar, { announcement: doc.site.announcement }),
@@ -28670,6 +28811,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}
@@ -28822,6 +28964,8 @@ ${button("tertiary")}
 .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}
+/* A short label stays on one line beside narrow columns (it wraps on phones if it must). */
+@media (min-width:768px){.os-button{white-space:nowrap;flex-shrink:0}}
 .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}
 .os-header__toggle:hover,.os-header__cart:hover,.os-menu__close:hover{background:${v(c2.surface)}}
 html:not(.os-js) .os-header__toggle{display:none}
@@ -28891,7 +29035,7 @@ html:not(.os-js) .os-header__toggle{display:none}
 .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--sidebar-left .os-header__logo{height:var(--logo-h,auto);max-block-size:var(--logo-h,8rem);max-inline-size:100%;width:auto}
 .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)}}
@@ -28924,6 +29068,13 @@ html:not(.os-js) .os-header__toggle{display:none}
 @media (min-width:768px){.os-header__logo{height:var(--tlogo-h,2.5rem)}}
 @media (min-width:1200px){.os-header__logo{height:var(--logo-h,2.5rem)}}
 
+/* A raised content card over the page background (Site Styles \u2192 layout.surface "card"). */
+.os-page.has-surface-card{background:var(--page-bg,${v(c2.surface)})}
+@media (min-width:768px){
+.has-surface-card>.os-main{flex:none;margin:8.3333% 8.3333% 0;padding-block:8.3333% 0;background:${v(c2.background)};box-shadow:0 0 1px rgb(0 0 0 / 0.15)}
+.has-surface-card>.os-footer{margin:8.3333% 8.3333% 8.3333%;box-shadow:0 0 1px rgb(0 0 0 / 0.15)}
+}
+
 /* Footer */
 .os-footer{margin-top:auto}
 .os-footer .os-footer__section:not(.has-pad){padding-block:${v(T.space["2xl"])}}
@@ -32862,7 +33013,19 @@ var productBlock = defineBlock({
     }),
     quantity: f.boolean({ default: true, label: "Quantity picker" }),
     buttonLabel: f.text({ maxLength: 30, default: "Add to cart" }),
-    detailsLabel: f.text({ maxLength: 30, default: "View details" })
+    detailsLabel: f.text({ maxLength: 30, default: "View details" }),
+    showPrice: f.boolean({ optional: true, label: "Show the price", help: "On unless turned off" }),
+    showBuy: f.boolean({
+      optional: true,
+      label: "Show Add to cart",
+      help: "Off: just the picture and name, linking to the product's page (a shop grid)"
+    }),
+    imageAspect: f.select({
+      options: ASPECT_OPTIONS,
+      optional: true,
+      label: "Image shape",
+      help: "Crop for the product photo (default portrait 4:5)"
+    })
   },
   variants: ["card", "split", "minimal"],
   styleSlots: [
@@ -32925,7 +33088,7 @@ var productBlock = defineBlock({
         Img,
         {
           src: image3,
-          aspect: "4:5",
+          aspect: fields.imageAspect ?? "4:5",
           sizes: variant === "split" ? "(min-width: 768px) 50vw, 100vw" : "(min-width: 768px) 40vw, 100vw",
           className: cx("os-product__image", imageClass)
         }
@@ -32941,9 +33104,9 @@ var productBlock = defineBlock({
             children: /* @__PURE__ */ jsx22("a", { className: "os-product__link", href, children: fm.title })
           }
         ) : null,
-        price ? /* @__PURE__ */ jsx22("p", { className: "os-product__price", children: /* @__PURE__ */ jsx22(PriceText, { price }) }) : null,
+        price && fields.showPrice !== false ? /* @__PURE__ */ jsx22("p", { className: "os-product__price", children: /* @__PURE__ */ jsx22(PriceText, { price }) }) : null,
         fields.showDescription && fm.excerpt ? /* @__PURE__ */ jsx22("p", { className: "os-product__desc", children: fm.excerpt }) : null,
-        firstAvailable && !canSell ? /* @__PURE__ */ jsx22(
+        fields.showBuy === false ? null : firstAvailable && !canSell ? /* @__PURE__ */ jsx22(
           OpeningSoon,
           {
             kind: "store",
@@ -33005,7 +33168,7 @@ var productBlock = defineBlock({
             )
           ] })
         ] }) : options.length ? /* @__PURE__ */ jsx22("p", { className: "os-product__soldout", children: "Sold out" }) : /* @__PURE__ */ jsx22(EditorNotice, { children: "Give this product a SKU so it can be added to the cart." }),
-        fields.detailsLabel ? /* @__PURE__ */ jsxs18("a", { className: "os-product__details", href, children: [
+        fields.detailsLabel && fields.showBuy !== false ? /* @__PURE__ */ jsxs18("a", { className: "os-product__details", href, children: [
           fields.detailsLabel,
           /* @__PURE__ */ jsxs18("span", { className: "os-visually-hidden", children: [
             ": ",
@@ -34076,6 +34239,15 @@ var galleryBlock = defineBlock({
       display: "segmented",
       help: "Columns on wide screens (grid and masonry)"
     }),
+    fit: f.select({
+      options: [
+        { value: "cover", label: "Fill the frame" },
+        { value: "contain", label: "Show whole photos" }
+      ],
+      optional: true,
+      label: "Fit",
+      help: "Slideshows and carousels: crop each photo to the frame, or show it whole inside it"
+    }),
     lightbox: f.boolean({ default: true, help: "Open photos in a full-screen viewer" }),
     showCaptions: f.boolean({ default: false, label: "Show captions" })
   },
@@ -34112,7 +34284,15 @@ function Gallery({ id, fields, variant }) {
   const lightbox = fields.lightbox && fields.images.some((i) => !i.link);
   const carousel = variant === "carousel" || variant === "slideshow";
   const media2 = (item3, i) => {
-    const img = /* @__PURE__ */ jsx28(Img, { src: item3.image, sizes, aspect: crop ?? "original" });
+    const img = /* @__PURE__ */ jsx28(
+      Img,
+      {
+        src: item3.image,
+        sizes,
+        aspect: crop ?? "original",
+        ...fields.fit === "contain" && crop ? { fit: "contain" } : {}
+      }
+    );
     if (item3.link)
       return /* @__PURE__ */ jsx28(Link, { to: item3.link, className: "os-gallery__link", children: img });
     if (fields.lightbox)
@@ -34186,7 +34366,7 @@ var galleryCss = `
 .os-gallery--grid .os-gallery__items{display:grid;gap:var(--os-space-xs);grid-template-columns:repeat(2,minmax(0,1fr))}
 @container block (min-width:44rem){.os-gallery--grid .os-gallery__items{grid-template-columns:repeat(var(--g-tcols,3),minmax(0,1fr));gap:var(--os-space-sm)}}
 @container block (min-width:64rem){.os-gallery--grid .os-gallery__items{grid-template-columns:repeat(var(--g-cols,3),minmax(0,1fr))}}
-@container block (max-width:24rem){.os-gallery--grid .os-gallery__items{grid-template-columns:minmax(0,1fr)}}
+@container block (max-width:20rem){.os-gallery--grid .os-gallery__items{grid-template-columns:minmax(0,1fr)}}
 
 .os-gallery--masonry .os-gallery__items{columns:2;column-gap:var(--os-space-xs)}
 .os-gallery--masonry .os-gallery__item{break-inside:avoid;margin-bottom:var(--os-space-xs)}
@@ -34434,7 +34614,13 @@ var imageBlock = defineBlock({
     aspect: aspectField("4:5"),
     caption: f.text({ optional: true, maxLength: 200, ai: "Optional; one short sentence." }),
     link: f.link({ optional: true, help: "Make the whole image a link" }),
-    lightbox: f.boolean({ default: false, help: "Open a larger view when clicked" })
+    lightbox: f.boolean({ default: false, help: "Open a larger view when clicked" }),
+    size: f.select({
+      options: ["fill", "original"],
+      optional: true,
+      label: "Size",
+      help: "Fill the column, or show the picture no wider than its own size (a book cover, a small portrait)"
+    })
   },
   variants: ["default", "caption-overlay", "inset"],
   styleSlots: ["radius", "shadow", "imageTreatment", "align", "padding", "animation"],
@@ -34499,10 +34685,12 @@ function ImageView({ id, fields, variant }) {
       }
     );
   }
+  const natural = !grid2 && fields.size === "original" && fields.image.width ? fields.image.width : 0;
   return /* @__PURE__ */ jsxs24(
     "figure",
     {
-      className: cx("os-image", `os-image--${variant}`, grid2 && "is-fill"),
+      className: cx("os-image", `os-image--${variant}`, grid2 && "is-fill", natural && "is-natural"),
+      style: natural ? { "--image-max": `${natural}px` } : void 0,
       "data-os-behavior": !fields.link && fields.lightbox ? "lightbox" : void 0,
       children: [
         media2,
@@ -34514,7 +34702,13 @@ function ImageView({ id, fields, variant }) {
 var imageCss = `
 .os-image{position:relative;display:grid;gap:var(--os-space-2xs)}
 .os-image.is-fill{height:100%;grid-template-rows:minmax(0,1fr);grid-auto-rows:auto}
-.os-image.is-fill>.os-image__link{display:block;height:100%}
+.os-image.is-fill>.os-image.is-natural{max-inline-size:min(100%,var(--image-max))}
+.os-align-center .os-image.is-natural,.os-align-center>.os-image.is-natural{margin-inline:auto}
+.os-align-end .os-image.is-natural{margin-inline-start:auto}
+.os-image__link{display:block;height:100%}
+.os-image.is-natural{max-inline-size:min(100%,var(--image-max))}
+.os-align-center .os-image.is-natural,.os-align-center>.os-image.is-natural{margin-inline:auto}
+.os-align-end .os-image.is-natural{margin-inline-start:auto}
 .os-image__link{display:block;color:inherit;border-radius:var(--os-image-radius)}
 .os-image__caption{font-size:var(--os-type-small-font-size);line-height:var(--os-type-small-line-height);color:var(--os-color-text-muted)}
 .os-image--caption-overlay .os-image__caption{position:absolute;inset:auto 0 0 0;z-index:2;padding:var(--os-space-lg) var(--os-space-sm) var(--os-space-xs);color:var(--os-color-neutral-50);background:linear-gradient(to top,color-mix(in oklab,var(--os-color-neutral-950) 62%,transparent),color-mix(in oklab,var(--os-color-neutral-950) 0%,transparent));border-radius:0 0 var(--os-image-radius) var(--os-image-radius);pointer-events:none}
@@ -52955,6 +53149,8 @@ export {
   componentInstances,
   expandComponent,
   SiteConfigSchema,
+  DESIGN_SYSTEM_FILE,
+  DesignSystemSchema,
   MediaMetaSchema,
   DENSITIES,
   SHAPES,
@@ -52970,7 +53166,9 @@ export {
   fallbackMobileRects,
   toJsonSchema,
   blockFieldsJsonSchema,
+  oklchToHex,
   parseColor,
+  isColor,
   toHex,
   deltaEOK,
   relativeLuminance,
@@ -53111,4 +53309,4 @@ lucide/dist/esm/lucide.mjs:
    * See the LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=chunk-O55O7EA5.js.map
+//# sourceMappingURL=chunk-SY5NDWS2.js.map