@osimart/create-storefront 0.0.0-stage → 1.0.1

package/app/logic/sections/NewsletterSection.js

@@ -0,0 +1,126 @@
+import NewsletterServices from "#osi/services/NewsletterServices";
+
+export default function useLogic({ props }) {
+  const analytics = useAnalytics();
+
+  const { s, t, shellStyle, innerStyle, align, customClass, heading } =
+    useSectionShell(() => props.section);
+  const { showApiError } = useApiErrorToast();
+
+  function toNum(val, fallback) {
+    const n = typeof val === "string" ? parseFloat(val) : Number(val);
+    return Number.isFinite(n) ? n : fallback;
+  }
+  function toBool(val, fallback = false) {
+    if (val === undefined || val === null || val === "") return fallback;
+    if (typeof val === "string") return val.toLowerCase() === "true" || val === "1";
+    return !!val;
+  }
+
+  const email = ref("");
+  const consent = ref(false);
+  const submitting = ref(false);
+  const done = ref(false);
+  const error = ref("");
+
+  const requiresConsent = computed(() => !!s.value.SHOW_CONSENT);
+  const inline = computed(() => (s.value.LAYOUT ?? "INLINE") === "INLINE");
+  const gap = computed(() => toNum(s.value.GAP, 12));
+
+  // ── input + button styling ──
+  // Only what this section set is emitted; empty settings follow the theme's
+  // Inputs / Buttons groups (assets/css/osi-controls.css).
+  const inputStyle = useInputStyle(() => s.value);
+  const inputClasses = useInputClasses(() => s.value);
+  const buttonStyle = useButtonStyle(() => s.value);
+  const buttonClasses = useButtonClasses(() => s.value);
+
+  const headingStyle = computed(() => ({
+    fontSize: `${toNum(s.value.HEADING_TEXT_SIZE, 28)}px`,
+    fontWeight: s.value.HEADING_TEXT_WEIGHT || "600",
+    color: s.value.HEADING_TEXT_COLOR || undefined,
+    lineHeight: toNum(s.value.HEADING_TEXT_LINE_HEIGHT, 130) / 100,
+  }));
+  const descStyle = computed(() => ({
+    fontSize: `${toNum(s.value.TEXT_STYLE_SIZE, 15)}px`,
+    fontWeight: s.value.TEXT_STYLE_WEIGHT || "400",
+    color: s.value.TEXT_STYLE_COLOR || undefined,
+    lineHeight: toNum(s.value.TEXT_STYLE_LINE_HEIGHT, 130) / 100,
+    opacity: s.value.TEXT_STYLE_COLOR ? 1 : 0.8,
+  }));
+  const sectionLayout = computed(() => s.value.SECTION_LAYOUT || 'CENTERED');
+  const isSplit = computed(() => sectionLayout.value === 'SPLIT');
+  const headerWidth = computed(() => toNum(s.value.HEADER_WIDTH, 40));
+  const columnGap = computed(() => toNum(s.value.COLUMN_GAP, 48));
+  // ── raw custom CSS: scoped + injected via useHead ──
+  const uid = computed(() => `osi-nl-${props.section.key}`);
+
+  // Rewrites each top-level selector to be prefixed with this section
+  // instance's unique attribute. Deliberately simple (split on top-level
+  // `}`/`{`) rather than a full CSS parser — good enough for a handful of
+  // flat rules on one element; does NOT handle @media/@keyframes correctly.
+  function scopeCss(raw, scopeAttr) {
+    if (!raw) return "";
+    return raw
+      .split("}")
+      .map((rule) => rule.trim())
+      .filter(Boolean)
+      .map((rule) => {
+        const [selectorPart, body] = rule.split("{");
+        if (!body) return "";
+        const scopedSelectors = selectorPart
+          .split(",")
+          .map((sel) => `[data-osi-nl="${scopeAttr}"] ${sel.trim()}`)
+          .join(", ");
+        return `${scopedSelectors} { ${body.trim()} }`;
+      })
+      .join("\n");
+  }
+
+  const scopedButtonCss = computed(() => scopeCss(s.value.BUTTON_CUSTOM_CSS, uid.value));
+  const scopedInputCss = computed(() => scopeCss(s.value.INPUT_CUSTOM_CSS, uid.value));
+  const combinedCustomCss = computed(() =>
+    [scopedButtonCss.value, scopedInputCss.value].filter(Boolean).join("\n")
+  );
+
+  // SSR-safe, dedupes by key (so live-preview edits replace this tag instead
+  // of piling up new ones), reactive to setting changes.
+  useHead(() => ({
+    style: combinedCustomCss.value
+      ? [{ key: `${uid.value}-custom-css`, textContent: combinedCustomCss.value }]
+      : [],
+  }));
+
+  async function submit() {
+    error.value = "";
+
+    const value = email.value.trim();
+    if (!value) {
+      error.value = "Enter an email address.";
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+      error.value = "Enter a valid email address.";
+      return;
+    }
+    if (requiresConsent.value && !consent.value) {
+      error.value = "Please accept to continue.";
+      return;
+    }
+
+    submitting.value = true;
+    try {
+      await NewsletterServices.subscribe(value);
+      analytics.lead("newsletter");
+      done.value = true;
+      email.value = "";
+      consent.value = false;
+    } catch (err) {
+      error.value = showApiError(err, "Couldn't subscribe right now.");
+    } finally {
+      submitting.value = false;
+    }
+  }
+
+  return { analytics, s, t, shellStyle, innerStyle, align, customClass, heading, showApiError, toNum, toBool, email, consent, submitting, done, error, requiresConsent, inline, gap, inputStyle, inputClasses, buttonStyle, buttonClasses, headingStyle, descStyle, sectionLayout, isSplit, headerWidth, columnGap, uid, scopeCss, scopedButtonCss, scopedInputCss, combinedCustomCss, submit };
+}

package/app/logic/sections/ProductHighlightSection.js

@@ -0,0 +1,201 @@
+import ProductServices from "#osi/services/ProductServices";
+
+export default function useLogic({ props }) {
+  const { s, shellStyle, innerStyle, customClass } = useSectionShell(() => props.section);
+  const placeholders = usePlaceholders();
+  const { mediaUrl } = useMediaUrl();
+  const editing = computed(() => !!placeholders.allowed?.value);
+
+  /* ------------------------------------------------------------- the product */
+
+  const idOf = (v) => (v && typeof v === "object" ? v.id ?? null : v === "" || v == null ? null : v);
+  // The pick, wherever the payload carries it: the setting (an id, or the
+  // object the render endpoint may expand it into), or the resolved data.
+  const pickedId = computed(() => idOf(s.value.PRODUCT) ?? idOf(props.section.data?.product) ?? null);
+  // A product the render endpoint already resolved, used until our own fetch lands.
+  const preloaded = computed(() => {
+    const d = props.section.data ?? {};
+    const p = d.products?.[0] ?? (d.product && typeof d.product === "object" ? d.product : null);
+    return p?.name ? p : null;
+  });
+
+  /**
+   * The picked product, else the store's first one — on the live store too, not
+   * only in the editor, so what the merchant designed against is what shoppers
+   * see (Shopify fills an unpicked one the same way). Fetched in list shape (the
+   * card reads price ranges, variants, gallery).
+   */
+  const { data: fetched, refresh } = useAsyncData(
+    `osi-product-highlight-${props.section.id ?? props.section.key}`,
+    async () => {
+      if (pickedId.value != null) {
+        const res = await ProductServices.getProductsByIds([pickedId.value]).catch(() => null);
+        return (res?.results ?? res ?? [])[0] ?? null;
+      }
+      const res = await ProductServices.listProducts({ page_size: 1 }).catch(() => null);
+      return res?.results?.[0] ?? null;
+    },
+    { watch: [pickedId], default: () => null }
+  );
+  // A server render that couldn't reach the API leaves null in the payload,
+  // and useAsyncData won't fetch again on its own after hydration.
+  onMounted(() => {
+    if (!fetched.value) refresh();
+  });
+
+  const rows = computed(() => {
+    const product = fetched.value ?? preloaded.value;
+    return product ? [product] : placeholders.products([], 1);
+  });
+  const { items } = useProductItems(() => ({ settings: {} }), rows);
+  const item = computed(() => items.value[0] ?? null);
+
+  /* --------------------------------------------------------------- the blocks */
+
+  const PAD = Object.fromEntries(
+    ["TOP", "BOTTOM", "LEFT", "RIGHT"].flatMap((side) => [
+      [`PADDING_${side}`, 40],
+      [`PADDING_${side}_MOBILE`, 20],
+    ])
+  );
+  // The schema's default_blocks, for a section that has none.
+  const DEFAULT_BLOCKS = [
+    { key: "__media", type: "MEDIA", settings: { FIT: "COVER", RATIO: "PORTRAIT" } },
+    { key: "__card", type: "CARD", settings: { GAP: 8, HOVER: "NONE", ...PAD } },
+    { key: "__title", type: "CARD_TITLE", parent_key: "__card", settings: { PRESET: "CUSTOM", SIZE: 16, WEIGHT: "MEDIUM", LINES: 2 } },
+    { key: "__price", type: "CARD_PRICE", parent_key: "__card", settings: { PRESET: "CUSTOM", SIZE: 14, SHOW_COMPARE: true } },
+    { key: "__photo", type: "CARD_IMAGE", parent_key: "__card", settings: { RATIO: "NATURAL", SCREEN_HEIGHT: "CONTAIN" } },
+    { key: "__swatches", type: "CARD_SWATCHES", parent_key: "__card", settings: { SHOW: "COLOR" } },
+  ];
+
+  const effective = computed(() =>
+    (props.section.blocks ?? []).length ? props.section : { ...props.section, blocks: DEFAULT_BLOCKS }
+  );
+  // Root images fill their height: the media fills its half from tablets up.
+  const { tree } = useContentTree(effective, { fillRootImages: true, index: () => props.index });
+  const fallback = useContentTree(() => ({ settings: {}, blocks: DEFAULT_BLOCKS }));
+
+  const rawCard = computed(
+    () =>
+      tree.value.children.find((c) => c.type === "CARD") ??
+      fallback.tree.value.children.find((c) => c.type === "CARD")
+  );
+
+  /**
+   * The card as drawn: title and price moved into one row (price at the end,
+   * on the title's baseline), where the first of them sits; the photo shows the
+   * first photo only (no second image on hover).
+   */
+  const cardNode = computed(() => {
+    const card = rawCard.value;
+    if (!card) return null;
+    const isRowPart = (c) => c.type === "CARD_TITLE" || c.type === "CARD_PRICE";
+    const rowParts = card.children.filter(isRowPart);
+    const children = [];
+    for (const child of card.children) {
+      if (isRowPart(child)) {
+        if (child === rowParts[0]) children.push(rowOf(card.key, rowParts));
+        continue;
+      }
+      children.push(child.type === "CARD_IMAGE" ? { ...child, hoverImage: false, wishlist: false } : child);
+    }
+    return { ...card, children };
+  });
+
+  const NO_PADDING = Object.fromEntries(
+    ["t", "r", "b", "l"].flatMap((k) => [[`--cb-p${k}`, "0px"], [`--cb-p${k}-m`, "0px"]])
+  );
+  function rowOf(cardKey, parts) {
+    return {
+      key: `${cardKey}~row`,
+      type: "GROUP",
+      virtual: true,
+      s: {},
+      children: parts,
+      flexClasses: ["is-row"],
+      flexVars: {
+        "--cb-gap": "12px",
+        "--cb-gap-m": "12px",
+        "--cb-row-justify": "space-between",
+        "--cb-row-align": "baseline",
+        "--cb-text-align": "start",
+      },
+      sizeClasses: ["w-fill", "osi-ph-row"],
+      sizeVars: {},
+      box: NO_PADDING,
+      bg: null,
+      overlay: null,
+      link: null,
+      clip: false,
+    };
+  }
+
+  const rawMedia = computed(() => (effective.value.blocks ?? []).find((b) => b.type === "MEDIA" && !b.parent_key) ?? null);
+  const showMedia = computed(() => !!rawMedia.value && !rawMedia.value.disabled);
+  const mediaNode = computed(() => tree.value.children.find((c) => c.type === "MEDIA") ?? null);
+
+  /** Nothing picked in the Media block: one of the product's own photos. */
+  const MEDIA_RATIOS = { PORTRAIT: "4 / 5", SQUARE: "1 / 1", LANDSCAPE: "4 / 3", WIDE: "16 / 9" };
+  const fallbackMedia = computed(() => {
+    if (mediaNode.value?.src) return null;
+    const v = rawMedia.value?.settings ?? {};
+    const first = item.value?.image || "";
+    const second = (item.value?.raw?.gallery ?? [])
+      .map((g) => (g?.media ? mediaUrl(g.media) : ""))
+      .find((src) => src && src !== first);
+    return {
+      key: rawMedia.value?.id ?? rawMedia.value?.key,
+      // The product's second photo (the card shows the first), else the first.
+      src: second || first,
+      style: {
+        "--ph-fb-ratio": MEDIA_RATIOS[String(v.RATIO || "PORTRAIT").toUpperCase()] ?? "4 / 5",
+        "--ph-fb-fit": String(v.FIT || "COVER").toUpperCase() === "CONTAIN" ? "contain" : "cover",
+      },
+    };
+  });
+
+  /* --------------------------------------------------- photo held to the screen */
+
+  const photosNode = computed(() => cardNode.value?.children.find((c) => c.type === "CARD_IMAGE") ?? null);
+  const SHAPES = { SQUARE: 1, PORTRAIT_4_5: 0.8, PORTRAIT_3_4: 0.75, LANDSCAPE: 4 / 3, WIDE: 16 / 9 };
+  const shape = computed(() => String(photosNode.value?.s?.RATIO || "NATURAL").toUpperCase());
+  const screen = computed(() => {
+    if (!photosNode.value || shape.value === "FIXED") return "OFF";
+    return String(photosNode.value.s?.SCREEN_HEIGHT || "OFF").toUpperCase();
+  });
+
+  // The image's own shape: the photo, measured once it loads (1 until then).
+  const measured = ref(null);
+  const firstPhoto = computed(() => item.value?.image || "");
+  watch(
+    firstPhoto,
+    (src) => {
+      measured.value = null;
+      if (!import.meta.client || !src) return;
+      const img = new Image();
+      img.onload = () => {
+        if (firstPhoto.value === src && img.naturalWidth && img.naturalHeight) {
+          measured.value = img.naturalWidth / img.naturalHeight;
+        }
+      };
+      img.src = src;
+    },
+    { immediate: true }
+  );
+  const ratio = computed(() => SHAPES[shape.value] ?? measured.value ?? 1);
+
+  const productVars = computed(() => {
+    if (screen.value === "CONTAIN") {
+      return { "--ph-ratio": String(ratio.value), "--cb-ratio-override": String(ratio.value) };
+    }
+    if (screen.value === "COVER") {
+      return { "--cb-ratio-override": "auto", "--cb-h-override": "var(--ph-screen-h)" };
+    }
+    return {};
+  });
+
+  const visible = computed(() => !!item.value || editing.value);
+  const mediaEnd = computed(() => String(s.value.MEDIA_POSITION || "START").toUpperCase() === "END");
+
+  return { s, shellStyle, innerStyle, customClass, placeholders, mediaUrl, editing, idOf, pickedId, preloaded, fetched, refresh, rows, items, item, PAD, DEFAULT_BLOCKS, effective, tree, fallback, rawCard, cardNode, NO_PADDING, rowOf, rawMedia, showMedia, mediaNode, MEDIA_RATIOS, fallbackMedia, photosNode, SHAPES, shape, screen, measured, firstPhoto, ratio, productVars, visible, mediaEnd };
+}

package/app/logic/sections/ProductListSection.js

@@ -0,0 +1,45 @@
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, customClass } = useSectionShell(() => props.section);
+  const { products, loading } = useSectionData(() => props.section);
+  const { items } = useProductItems(() => props.section, products);
+  const { tree } = useContentTree(() => props.section, {
+    rootDefaults: { DIRECTION: "VERTICAL", GAP: 24 },
+    index: () => props.index,
+  });
+
+  // No Card block (an older section, or the Card was deleted): a default
+  // product card, so the list never disappears.
+  const fallback = useContentTree(() => ({
+    settings: {},
+    blocks: [
+      { key: "__card", type: "CARD", settings: { GAP: 6, HOVER: "NONE" } },
+      { key: "__image", type: "CARD_IMAGE", parent_key: "__card", settings: { RATIO: "PORTRAIT_3_4", RADIUS: 12 } },
+      { key: "__title", type: "CARD_TITLE", parent_key: "__card", settings: { PRESET: "CUSTOM", SIZE: 15, WEIGHT: "MEDIUM", LINES: 2 } },
+      { key: "__price", type: "CARD_PRICE", parent_key: "__card", settings: { PRESET: "CUSTOM", SIZE: 14 } },
+      { key: "__button", type: "CARD_BUTTON", parent_key: "__card", settings: { ACTION: "QUICK_BUY", QUICK_BUY_STYLE: "SHEET", WIDTH: "FILL", LABEL: "Add to cart", PLACEMENT: "ON_IMAGE", PLACEMENT_MOBILE: "IN_CARD", IMAGE_POSITION: "BOTTOM", REVEAL: "HOVER" } },
+    ],
+  }));
+
+  const cardNode = computed(() => tree.value.children.find((n) => n.type === "CARD") ?? null);
+  const template = computed(() => cardNode.value ?? fallback.tree.value.children[0]);
+
+  // Older sections: their HEADING, until they have blocks of their own.
+  const legacyHeading = computed(() =>
+    (props.section.blocks ?? []).some((b) => b.type !== "PRODUCT") ? "" : t(s.value.HEADING) || ""
+  );
+
+  /** The page, in block order; the list goes where the Card is (else last). */
+  const parts = computed(() => {
+    const out = tree.value.children.map((node) =>
+      node.type === "CARD" ? { kind: "list", key: "list" } : { kind: "block", key: node.key, node }
+    );
+    if (!cardNode.value) out.push({ kind: "list", key: "list" });
+    return out;
+  });
+
+  const scopeAttr = computed(() => `[data-osi-section="${props.section.id}"]`);
+  useScopedCss(() => s.value.CUSTOM_CSS, scopeAttr, `osi-section-css-${props.section.id}`);
+
+  return { s, t, shellStyle, innerStyle, customClass, products, loading, items, tree, fallback, cardNode, template, legacyHeading, parts, scopeAttr };
+}

package/app/logic/sections/ProductRecommendationsSection.js

@@ -0,0 +1,113 @@
+import { useProductDetail, useProductResource } from "#osi/composables/useProductDetail";
+import { useRelatedProducts } from "#osi/composables/useRelatedProducts";
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, align, customClass } = useSectionShell(
+    () => props.section
+  );
+
+  const has = (v) => v !== undefined && v !== null && v !== "";
+  const px = (v) => (has(v) && Number.isFinite(Number(v)) ? `${Number(v)}px` : undefined);
+  const compact = (o) => Object.fromEntries(Object.entries(o).filter(([, v]) => has(v)));
+
+  // Under MAIN_PRODUCT this is already resolved; standalone it resolves itself.
+  const detail = useProductDetail();
+  const fallback = detail ? null : useProductResource();
+  const product = computed(() => detail?.product.value ?? fallback?.product.value ?? null);
+
+  const limit = computed(() => Number(s.value.LIMIT) || 4);
+
+  /** Pinned picks: the PRODUCT blocks, in the merchant's order. */
+  const pinnedIds = computed(() =>
+    (props.section.blocks ?? [])
+      .filter((block) => !block.disabled && block.type === "PRODUCT")
+      .map((block) => {
+        const value = block.relations?.product ?? block.settings?.PRODUCT ?? null;
+        return value && typeof value === "object" ? value.id : value;
+      })
+      .filter(Boolean)
+  );
+
+  const { products } = useRelatedProducts({
+    product,
+    limit,
+    preloaded: () => props.section.data?.products ?? [],
+    settings: () => s.value,
+    pinnedIds,
+  });
+
+  const heading = computed(() => t(s.value.HEADING) || "You may also like");
+
+  const analytics = useAnalytics();
+  if (import.meta.client) {
+    watch(
+      products,
+      (list) => {
+        if (!list?.length) return;
+        analytics.viewItemList({
+          id: `related:${props.section.key ?? props.section.id ?? "recommendations"}`,
+          name: heading.value,
+          products: list,
+        });
+      },
+      { immediate: true, flush: "post" }
+    );
+  }
+  const isCarousel = computed(() => s.value.LAYOUT === "CAROUSEL");
+  const columns = computed(() => Number(s.value.COLUMNS) || 4);
+  const perView = computed(() => Number(s.value.SLIDES_PER_VIEW) || 4);
+  const cardSettings = computed(() => {
+    const out = { ...(s.value.CARD_OVERRIDES ?? {}) };
+    for (const key of ["CARD_IMAGE_RATIO", "CARD_TEXT_ALIGN", "CARD_TEXT_POSITION", "CARD_CTA_STYLE"]) {
+      if (s.value[key]) out[key] = s.value[key];
+    }
+    // The badges' look (CARD_BADGE_* / CARD_SALE_BADGE_* / CARD_SOLD_OUT_BADGE_*). 0 is a real value.
+    for (const [key, value] of Object.entries(s.value)) {
+      if (/^CARD_(SALE_|SOLD_OUT_)?BADGE_/.test(key) && value !== undefined && value !== null && value !== "") out[key] = value;
+    }
+    return out;
+  });
+
+  const headingStyle = useTextStyle(() => s.value, {
+    prefix: "HEADING_TEXT",
+    defaults: { size: 22, weight: "REGULAR", font: "HEADING", lineHeight: 120 },
+  });
+
+  const gridStyle = computed(() =>
+    compact({
+      "--rec-cols": columns.value,
+      "--rec-cols-mobile": Number(s.value.COLUMNS_MOBILE) || 2,
+      "--rec-gap-x": px(s.value.GRID_GAP_X),
+      "--rec-gap-y": px(s.value.GRID_GAP_Y),
+    })
+  );
+
+  const viewAll = computed(() => {
+    if (!s.value.SHOW_VIEW_ALL) return null;
+    const url = s.value.VIEW_ALL_URL || "/collections/all";
+    return { label: t(s.value.VIEW_ALL_LABEL) || "View all", url };
+  });
+
+  const { slides, onSwiper, onSlideChange, goPrev, goNext, isBeginning, isEnd } = useCarousel({
+    items: () => products.value,
+    loop: false,
+  });
+
+  const showArrows = computed(
+    () => s.value.SHOW_ARROWS !== false && products.value.length > perView.value
+  );
+
+  const breakpoints = computed(() => ({
+    0: { slidesPerView: Number(s.value.SLIDES_PER_VIEW_MOBILE) || 1.4, spaceBetween: 12 },
+    640: { slidesPerView: 2.2, spaceBetween: 16 },
+    1024: { slidesPerView: perView.value, spaceBetween: 16 },
+  }));
+
+  useScopedCss(
+    () => s.value.CUSTOM_CSS,
+    computed(() => `[data-osi-section="${props.section.id}"]`),
+    `osi-section-css-${props.section.id}`
+  );
+
+  return { s, t, shellStyle, innerStyle, align, customClass, has, px, compact, detail, fallback, product, limit, pinnedIds, products, heading, analytics, isCarousel, columns, perView, cardSettings, headingStyle, gridStyle, viewAll, slides, onSwiper, onSlideChange, goPrev, goNext, isBeginning, isEnd, showArrows, breakpoints };
+}

package/app/logic/sections/RichTextSection.js

@@ -0,0 +1,6 @@
+
+export default function useLogic() {
+  const ROOT_DEFAULTS = { DIRECTION: "VERTICAL", ALIGNMENT: "CENTER", POSITION: "CENTER", GAP: 16 };
+
+  return { ROOT_DEFAULTS };
+}

package/app/logic/sections/ScrollingTextSection.js

@@ -0,0 +1,69 @@
+
+export default function useLogic({ props }) {
+  const { s, t, shellStyle, innerStyle, customClass } = useSectionShell(() => props.section);
+  // imageHeight: an image in the strip is sized by height (the width follows
+  // the image) — 36px unless the block sets its own.
+  const { tree, editing, u } = useContentTree(() => props.section, {
+    index: () => props.index,
+    imageHeight: 36,
+  });
+  const { num, px, upper } = u;
+
+  const items = computed(() => tree.value.children);
+
+  const SEPARATORS = { DOT: "•", STAR: "✦", SLASH: "/", DIAMOND: "◆" };
+  const separator = computed(() => {
+    const kind = upper(s.value.SEPARATOR, "DOT");
+    if (kind === "NONE") return "";
+    if (kind === "CUSTOM") return t(s.value.SEPARATOR_TEXT) || "";
+    return SEPARATORS[kind] ?? "•";
+  });
+
+  /** One copy long enough to fill a wide screen, then that copy twice. */
+  const track = computed(() => {
+    const base = items.value;
+    if (!base.length) return [];
+    const repeat = Math.max(1, Math.ceil(10 / base.length));
+    const one = Array.from({ length: repeat }, (_, r) =>
+      base.map((node) => ({ node, key: `${node.key}-r${r}` }))
+    ).flat();
+    return [
+      ...one.map((i) => ({ ...i, key: `${i.key}-a`, clone: false })),
+      ...one.map((i) => ({ ...i, key: `${i.key}-b`, clone: true })),
+    ];
+  });
+
+  const ALIGN = { TOP: "flex-start", CENTER: "center", BOTTOM: "flex-end" };
+
+  const vars = computed(() => {
+    const v = s.value;
+    const count = Math.max(1, track.value.length / 2);
+    return {
+      "--mq-duration": `${count * num(v.MARQUEE_SPEED, 3)}s`,
+      "--mq-gap": px(v.ITEM_GAP) ?? "2.5rem",
+      "--mq-gap-mobile": px(v.ITEM_GAP_MOBILE) ?? px(v.ITEM_GAP) ?? "1.5rem",
+      "--mq-align": ALIGN[upper(v.ITEMS_ALIGN, "CENTER")] ?? "center",
+      "--mq-border": v.BORDER_COLOR || "var(--osi-border, #e5e5e5)",
+      "--mq-sep-color": v.SEPARATOR_COLOR || "currentColor",
+      "--mq-sep-size": px(v.SEPARATOR_SIZE) ?? "16px",
+    };
+  });
+
+  const fullWidth = computed(() => s.value.FULL_WIDTH !== false);
+
+  const rootClasses = computed(() => ({
+    "osi-mq--reverse": upper(s.value.MARQUEE_DIRECTION, "LEFT") === "RIGHT",
+    "osi-mq--pause": s.value.MARQUEE_PAUSE_ON_HOVER !== false,
+    "osi-mq--border-top": !!s.value.BORDER_TOP,
+    "osi-mq--border-bottom": !!s.value.BORDER_BOTTOM,
+  }));
+
+  const containerStyle = computed(() =>
+    fullWidth.value ? { maxWidth: "100%", marginInline: 0 } : innerStyle.value
+  );
+  const sectionStyle = computed(() =>
+    fullWidth.value ? { ...shellStyle.value, paddingLeft: 0, paddingRight: 0 } : shellStyle.value
+  );
+
+  return { s, t, shellStyle, innerStyle, customClass, tree, editing, u, num, px, upper, items, SEPARATORS, separator, track, ALIGN, vars, fullWidth, rootClasses, containerStyle, sectionStyle };
+}

package/app/logic/sections/SearchHeaderSection.js

@@ -0,0 +1,22 @@
+import { ClassificationPart } from "#components";
+
+export default function useLogic() {
+  const route = useRoute();
+  const terms = computed(() => String(route.query.q ?? "").trim());
+
+  provide("osiPlp", {
+    kind: computed(() => "SEARCH"),
+    terms,
+    title: terms,
+    description: computed(() => ""),
+    image: computed(() => ""),
+    breadcrumbs: computed(() => []),
+    navItems: computed(() => []),
+  });
+
+  const ROOT_DEFAULTS = { DIRECTION: "VERTICAL", ALIGNMENT: "CENTER", POSITION: "CENTER", GAP: 16 };
+  const CUSTOM = { SEARCH_TITLE: ClassificationPart, SEARCH_INPUT: ClassificationPart };
+  const CUSTOM_TEXT = { SEARCH_TITLE: "H2" };
+
+  return { route, terms, ROOT_DEFAULTS, CUSTOM, CUSTOM_TEXT };
+}