@omniharmonic/openspace-cli 0.1.13 → 0.1.14

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

@@ -24377,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(
@@ -28682,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 }),
@@ -28951,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}
@@ -29020,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)}}
@@ -29053,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"])}}
@@ -32991,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: [
@@ -33054,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)
         }
@@ -33070,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",
@@ -33134,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: [
             ": ",
@@ -34205,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" })
   },
@@ -34241,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)
@@ -34315,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)}
@@ -34563,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"],
@@ -34628,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,
@@ -34643,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}
@@ -53244,4 +53309,4 @@ lucide/dist/esm/lucide.mjs:
    * See the LICENSE file in the root directory of this source tree.
    *)
 */
-//# sourceMappingURL=chunk-IXN2CNGL.js.map
+//# sourceMappingURL=chunk-SY5NDWS2.js.map