@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/composables/useDragScroll.js

@@ -0,0 +1,73 @@
+/**
+ * Drag-to-scroll for a horizontal row (the variant swatch strips).
+ *
+ * Terazar kept `variantContainers` as a plain object of raw elements keyed by
+ * variant-type id, plus startDrag/doDrag/stopDrag. Three changes:
+ *
+ *  - pointer events instead of mouse events, so a stylus and touch work
+ *  - the move/up listeners live on the element, not the component, so a drag
+ *    that ends outside the row still releases (the old one left
+ *    isDragScrolling true and the row stayed "stuck" to the cursor)
+ *  - a small movement threshold, so a click on a swatch isn't swallowed as a
+ *    drag — the original fired preventDefault on every move, including the 1px
+ *    jitter of a normal click
+ */
+const DRAG_THRESHOLD = 4;
+
+export function useDragScroll() {
+  const containers = ref({});
+  const dragging = ref(null);
+
+  let startX = 0;
+  let startScroll = 0;
+  let moved = false;
+
+  /** :ref="(el) => setRef(el, type.id)" */
+  function setRef(el, id) {
+    if (el) containers.value[id] = el;
+    else delete containers.value[id];
+  }
+
+  function onPointerDown(event, id) {
+    const el = containers.value[id];
+    if (!el || el.scrollWidth <= el.clientWidth) return;
+
+    dragging.value = id;
+    moved = false;
+    startX = event.pageX;
+    startScroll = el.scrollLeft;
+    el.setPointerCapture?.(event.pointerId);
+  }
+
+  function onPointerMove(event, id) {
+    if (dragging.value !== id) return;
+    const el = containers.value[id];
+    if (!el) return;
+
+    const walk = event.pageX - startX;
+    if (!moved && Math.abs(walk) < DRAG_THRESHOLD) return;
+
+    moved = true;
+    event.preventDefault();
+    el.scrollLeft = startScroll - walk * 2;
+  }
+
+  function onPointerUp(event, id) {
+    if (dragging.value !== id) return;
+    containers.value[id]?.releasePointerCapture?.(event.pointerId);
+    dragging.value = null;
+  }
+
+  /** True right after a drag — let the click handler bail instead of selecting. */
+  const wasDragged = () => moved;
+
+  return {
+    containers,
+    dragging,
+    setRef,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    wasDragged,
+  };
+}

package/app/composables/useFooterSocials.js

@@ -0,0 +1,107 @@
+/**
+ * Footer social links: the list, and how each item is displayed.
+ *
+ * Shared by SiteFooter (which needs the count to decide whether a column or a
+ * bottom-bar zone renders at all) and FooterSocials (which renders the list).
+ * Without this the two would each resolve the list and could disagree.
+ *
+ * The important rule here: CONTENT and STYLING are independent.
+ *
+ *   showIcon / showText  come from FOOTER_SOCIAL_DISPLAY only
+ *   iconStyle            comes from FOOTER_SOCIAL_ICON_STYLE only
+ *
+ * Picking a circle or a square must never remove the glyph. The previous
+ * template gated the <svg> on a computed that mixed the two, so a shape change
+ * could blank the icons.
+ */
+export function useFooterSocials() {
+  const settings = useThemeGroup("FOOTER");
+  const social = useThemeGroup("SOCIAL_MEDIA");
+  const { store } = useStorefront();
+
+  // Platform keys match SOCIAL_ICON_PATHS in FooterSocials.vue, so every
+  // filled slot renders a real glyph rather than the generic fallback mark.
+  const SOCIAL_SLOTS = [
+    "instagram",
+    "facebook",
+    "tiktok",
+    "twitter",
+    "youtube",
+    "pinterest",
+    "linkedin",
+  ];
+
+  const themeSocials = computed(() =>
+    SOCIAL_SLOTS.map((platform) => ({
+      id: `theme-${platform}`,
+      platform,
+      url: String(settings.value[`FOOTER_SOCIAL_${platform.toUpperCase()}_URL`] ?? "").trim(),
+    })).filter((social) => social.url)
+  );
+
+  // The theme's store-wide "Social media" accounts (Shopify-style), used when
+  // the footer has none of its own.
+  const accountSocials = computed(() =>
+    [...SOCIAL_SLOTS, "snapchat", "whatsapp"]
+      .map((platform) => ({
+        id: `account-${platform}`,
+        platform,
+        url: String(social.value[`SOCIAL_${platform.toUpperCase()}_URL`] ?? "").trim(),
+      }))
+      .filter((s) => s.url)
+  );
+
+  // Each source wins as a set: footer slots, then the theme's accounts, then
+  // the store record. Merging per platform would mean a merchant who deletes a
+  // link silently gets an old one back.
+  const socials = computed(() =>
+    themeSocials.value.length
+      ? themeSocials.value
+      : accountSocials.value.length
+        ? accountSocials.value
+        : store.value?.social_medias ?? []
+  );
+
+  const display = computed(() =>
+    String(settings.value.FOOTER_SOCIAL_DISPLAY ?? "TEXT").toUpperCase()
+  );
+  const showIcon = computed(() => display.value === "ICONS" || display.value === "ICON_TEXT");
+  const showText = computed(() => display.value === "TEXT" || display.value === "ICON_TEXT");
+
+  // Shape and fill are separate settings and resolved separately, the same way
+  // showIcon and iconStyle are. PLAIN has no box, so the background has nothing
+  // to draw on and the component ignores it.
+  const iconStyle = computed(() =>
+    String(settings.value.FOOTER_SOCIAL_ICON_STYLE ?? "PLAIN").toLowerCase()
+  );
+
+  const iconBackground = computed(() =>
+    String(settings.value.FOOTER_SOCIAL_ICON_BACKGROUND ?? "FILLED").toLowerCase()
+  );
+
+  const iconSize = computed(() => {
+    const n = Number(settings.value.FOOTER_SOCIAL_ICON_SIZE);
+    return Number.isFinite(n) && n > 0 ? n : 18;
+  });
+
+  const iconColor = computed(() => settings.value.FOOTER_SOCIAL_ICON_COLOR || null);
+
+  const enabled = computed(
+    () => settings.value.FOOTER_SHOW_SOCIAL !== false && socials.value.length > 0
+  );
+
+  const position = computed(() => settings.value.FOOTER_SOCIAL_POSITION || "OWN_COLUMN");
+
+  return {
+    socials,
+    enabled,
+    position,
+    display,
+    showIcon,
+    showText,
+    iconStyle,
+    iconBackground,
+    iconSize,
+    iconColor,
+  };
+}

package/app/composables/useInputStyle.js

@@ -0,0 +1,45 @@
+import { INPUT_STYLES, color, compact, has, pick, px, shadow } from "#osi/theme/controls";
+
+/**
+ * A section's INPUT_* settings -> one field's overrides (--in-*).
+ *
+ * The field must carry `osi-input` (and live inside an `osi-field` if it has
+ * a label). Anything left empty here falls through to the theme's Inputs
+ * group, exactly like useButtonStyle does for buttons.
+ *
+ *   const inputStyle   = useInputStyle(() => s.value)
+ *   const inputClasses = useInputClasses(() => s.value)
+ */
+export function useInputStyle(settings, options = {}) {
+  const { prefix = "INPUT" } = options;
+  return computed(() => inputVars(toValue(settings) ?? {}, prefix));
+}
+
+export function inputVars(s, prefix = "INPUT") {
+  const get = (key) => s?.[`${prefix}_${key}`];
+  const size = get("SIZE") ?? get("FONT_SIZE");
+  return compact({
+    "--in-bg": color(get("BG_COLOR")),
+    "--in-fg": color(get("TEXT_COLOR")),
+    "--in-border-color": color(get("BORDER_COLOR")),
+    "--in-focus": color(get("FOCUS_COLOR")),
+    "--in-placeholder": color(s?.PLACEHOLDER_COLOR ?? get("PLACEHOLDER_COLOR")),
+    "--in-error": color(s?.ERROR_COLOR ?? get("ERROR_COLOR")),
+    "--in-radius": px(get("RADIUS")),
+    "--in-border-w": px(get("BORDER_WIDTH")),
+    "--in-shadow": has(get("SHADOW")) ? shadow(get("SHADOW"), get("SHADOW_COLOR")) : undefined,
+    "--in-pad-y": px(get("PADDING_Y")),
+    "--in-pad-x": px(get("PADDING_X")),
+    "--in-pad-y-mobile": px(get("PADDING_Y_MOBILE")),
+    "--in-pad-x-mobile": px(get("PADDING_X_MOBILE")),
+    "--in-fs": px(size),
+  });
+}
+
+export function useInputClasses(settings, options = {}) {
+  const { prefix = "INPUT" } = options;
+  return computed(() => {
+    const style = pick(toValue(settings)?.[`${prefix}_STYLE`], INPUT_STYLES);
+    return ["osi-input", style && `osi-input--${style.toLowerCase()}`].filter(Boolean);
+  });
+}

package/app/composables/useLayoutShell.js

@@ -0,0 +1,114 @@
+/**
+ * Scroll and viewport state for the layout chrome.
+ *
+ * Replaces the `handleScroll` / `scrolled` / `isMobile` block that Terazar's
+ * two layouts each carried a copy of. Three behaviours, one listener:
+ *
+ *  - `scrolled`     past the fold, for the header's condensed state
+ *  - `scrollingUp`  drives HEADER_STICKY = ON_SCROLL_UP
+ *  - `isMobile`     matchMedia, not a resize handler — resize fires on every
+ *                   mobile URL-bar show/hide, and on iOS that means a reflow
+ *                   storm while the user is just scrolling
+ *
+ * The listener is passive and reads through rAF, so it never blocks scrolling.
+ */
+const MOBILE_QUERY = "(max-width: 1023px)";
+const SCROLLED_AFTER = 100;
+const UP_THRESHOLD = 8; // ignore sub-pixel jitter and rubber-banding
+// ON_SCROLL_UP: how far the user must keep scrolling DOWN before the header
+// slides away. Any upward scroll resets it. Raise to make it linger longer.
+const HIDE_AFTER = 250;
+
+export function useLayoutShell() {
+  const scrollY = ref(0);
+  const scrolled = ref(false);
+  const scrollingUp = ref(true);
+  const atTop = ref(true);
+  const isMobile = ref(false);
+
+  let lastY = 0;
+  let downDistance = 0;
+  let ticking = false;
+  let stopLockWatch = null;
+
+  function read() {
+    // A drawer / popup is holding the page (or just let go): not the visitor
+    // scrolling. Leave the header exactly as it was.
+    if (scrollLocked.value) {
+      ticking = false;
+      return;
+    }
+    const y = window.scrollY || document.documentElement.scrollTop || 0;
+
+    scrollY.value = y;
+    atTop.value = y <= 0;
+    scrolled.value = y > SCROLLED_AFTER;
+
+    const delta = y - lastY;
+    if (Math.abs(delta) > UP_THRESHOLD) {
+      if (delta < 0) {
+        scrollingUp.value = true;
+        downDistance = 0;
+      } else {
+        downDistance += delta;
+        if (downDistance >= HIDE_AFTER) scrollingUp.value = false;
+      }
+      lastY = y;
+    }
+
+    ticking = false;
+  }
+
+  function onScroll() {
+    if (ticking) return;
+    ticking = true;
+    requestAnimationFrame(read);
+  }
+
+  if (import.meta.client) {
+    const media = window.matchMedia(MOBILE_QUERY);
+    const onMediaChange = (event) => {
+      isMobile.value = event.matches;
+    };
+
+    onMounted(() => {
+      isMobile.value = media.matches;
+      lastY = window.scrollY || 0;
+      downDistance = 0;
+      read();
+
+      window.addEventListener("scroll", onScroll, { passive: true });
+      // After a lock: measure from wherever the page is now, so the restore
+      // isn't taken for a scroll down that hides the header.
+      stopLockWatch = watch(scrollLocked, (locked) => {
+        if (!locked) {
+          lastY = window.scrollY || 0;
+          downDistance = 0;
+        }
+      });
+      media.addEventListener("change", onMediaChange);
+    });
+
+    onBeforeUnmount(() => {
+      window.removeEventListener("scroll", onScroll);
+      stopLockWatch?.();
+      media.removeEventListener("change", onMediaChange);
+    });
+  }
+
+  /**
+   * Whether the header should be pinned right now.
+   * @param {string|Ref<string>} mode  NONE | ALWAYS | ON_SCROLL_UP
+   */
+  function headerPinned(mode) {
+    return computed(() => {
+      const value = unref(mode) ?? "ON_SCROLL_UP";
+      if (value === "NONE") return false;
+      if (value === "ALWAYS") return true;
+      // ON_SCROLL_UP: pinned at the top of the page, then only while going up.
+      return atTop.value || scrollingUp.value;
+    });
+  }
+
+  return { scrollY, scrolled, scrollingUp, atTop, isMobile, headerPinned };
+}

package/app/composables/useLazyVideo.js

@@ -0,0 +1,36 @@
+export function useLazyVideo() {
+  const videoEl = ref(null);
+  let observer = null;
+
+  const bindVideoRef = (el) => {
+    if (!el) return;
+    videoEl.value = el;
+
+    el.muted = true;
+    el.volume = 0;
+
+    if (typeof window !== "undefined" && "IntersectionObserver" in window) {
+      observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              if (!el.src && el.dataset.src) {
+                el.src = el.dataset.src;
+                el.load();
+              }
+              el.play().catch(() => {});
+            } else {
+              el.pause();
+            }
+          });
+        },
+        { threshold: 0.25 }
+      );
+      observer.observe(el);
+    }
+  };
+
+  const unbind = () => observer?.disconnect();
+
+  return { bindVideoRef, unbind };
+}

package/app/composables/useMediaTypes.js

@@ -0,0 +1,66 @@
+export const useMediaTypes = () => {
+  const imageExtensions = [
+    "jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "tiff", "tif",
+    "ico", "avif", "heic", "heif", "jfif", "pjpeg", "pjp", "apng",
+  ];
+
+  const videoExtensions = [
+    "mp4", "webm", "ogg", "mov", "avi", "mkv", "flv", "wmv", "m4v",
+    "3gp", "3g2", "ogv", "ts", "m2ts", "mts", "vob", "rm", "rmvb",
+    "asf", "amv", "mpg", "mpeg", "mp2", "mpe", "mpv", "m2v",
+  ];
+
+  const audioExtensions = [
+    "mp3", "wav", "ogg", "aac", "flac", "m4a", "wma", "aiff", "aif",
+    "opus", "oga", "mid", "midi", "ra", "rm", "amr",
+  ];
+
+  const documentExtensions = [
+    "pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx", "odt", "ods",
+    "odp", "txt", "rtf", "csv", "tsv", "epub", "pages", "numbers", "key",
+  ];
+
+  const archiveExtensions = [
+    "zip", "rar", "7z", "tar", "gz", "bz2", "xz", "tgz", "tar.gz",
+    "tar.bz2", "tar.xz", "cab", "iso", "dmg",
+  ];
+
+  const codeExtensions = [
+    "js", "ts", "jsx", "tsx", "html", "css", "scss", "sass", "less",
+    "json", "xml", "yaml", "yml", "md", "py", "java", "php", "rb",
+    "go", "rs", "c", "cpp", "h", "cs", "swift", "kt", "sh", "bash",
+    "sql", "graphql", "vue", "svelte",
+  ];
+
+  const getMediaType = (path) => {
+    if (!path || typeof path !== "string") return null;
+
+    const ext = path.split(".").pop()?.toLowerCase();
+
+    if (imageExtensions.includes(ext)) return "image";
+    if (videoExtensions.includes(ext)) return "video";
+    if (audioExtensions.includes(ext)) return "audio";
+    if (documentExtensions.includes(ext)) return "document";
+    if (archiveExtensions.includes(ext)) return "archive";
+    if (codeExtensions.includes(ext)) return "code";
+
+    return "unknown";
+  };
+
+  const isImage = (path) => getMediaType(path) === "image";
+  const isVideo = (path) => getMediaType(path) === "video";
+  const isAudio = (path) => getMediaType(path) === "audio";
+  const isDocument = (path) => getMediaType(path) === "document";
+  const isArchive = (path) => getMediaType(path) === "archive";
+  const isCode = (path) => getMediaType(path) === "code";
+
+  return {
+    getMediaType,
+    isImage,
+    isVideo,
+    isAudio,
+    isDocument,
+    isArchive,
+    isCode,
+  };
+};

package/app/composables/useMediaUrl.js

@@ -0,0 +1,71 @@
+/**
+ * Absolute URL for a media path returned by the API.
+ *
+ * Replaces `import.meta.env.VITE_BASE_URL` — that was a build-time constant, and
+ * one Nuxt process serves every tenant here, so it cannot be baked in. The value
+ * comes from the same `base-url` state that useStoreInit() populates and
+ * getBaseUrl() reads, so media and API calls can never disagree about the host.
+ *
+ * Read via useState rather than useStoreInit(): useStoreInit() calls
+ * useRequestHeaders() in its body, which needs the Nuxt instance. This one is
+ * safe to call from anywhere, including inside a computed.
+ *
+ * Accepts every shape the API hands back:
+ *   "media/x.jpg" | "/media/x.jpg" | { path } | { media: { path } }
+ */
+export function useMediaUrl() {
+  const baseUrl = useState("base-url", () => "");
+
+  /** Pull the path out of a media object, a nested one, or a plain string. */
+  function toPath(input) {
+    if (!input) return "";
+    if (typeof input === "string") return input;
+    return (
+      input.logo_url ||
+      input.logo?.logo_url ||
+      input.logo ||
+      input.media?.path ||
+      input.path ||
+      ""
+    );
+  }
+
+  /**
+   * @param {string|object} input   path, media object, or { media: {...} }
+   * @param {string} [fallback]     returned when there's nothing to resolve
+   */
+  function mediaUrl(input, fallback = "") {
+    const path = toPath(input);
+    if (!path) return fallback;
+
+    // Already absolute, a data URI, or a blob — hand it back untouched.
+    if (/^(https?:)?\/\//i.test(path) || /^(data|blob):/i.test(path)) return path;
+
+    const base = baseUrl.value;
+    // No base yet (bootstrap still in flight): a root-relative path still
+    // resolves correctly against the current origin, so don't return "".
+    if (!base) return path.startsWith("/") ? path : `/${path}`;
+
+    return `${base.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+  }
+
+  /**
+   * Swap a file's extension. The video sections need this to derive poster and
+   * per-codec source URLs from a single stored path.
+   */
+  function mediaUrlAs(input, extension, fallback = "") {
+    const path = toPath(input);
+    if (!path) return fallback;
+    return mediaUrl(path.replace(/\.[^/.]+$/, `.${extension}`), fallback);
+  }
+
+  /** `-poster.jpg` sibling of a video path, unless an explicit poster exists. */
+  function posterUrl(input, explicitPoster = null, fallback = "") {
+    if (explicitPoster) return mediaUrl(explicitPoster, fallback);
+    const path = toPath(input);
+    if (!path) return fallback;
+    return mediaUrl(path.replace(/\.[^/.]+$/, "-poster.jpg"), fallback);
+  }
+
+  return { baseUrl, mediaUrl, mediaUrlAs, posterUrl, toPath };
+}

package/app/composables/useMenu.js

@@ -0,0 +1,100 @@
+/**
+ * Menus, normalized to something a template can render without guarding.
+ *
+ * Menu items reference a category, collection, page, or product by relation, or
+ * carry a raw URL. The href each one produces has to match the backend's
+ * `resolve_path()` exactly — a path the storefront links to but the backend
+ * doesn't recognise falls through to NOT_FOUND and renders the wrong template
+ * while looking otherwise fine.
+ *
+ * The route table, from builder's resolve_path():
+ *
+ *   /                       INDEX
+ *   /categories/<slug>      CLASSIFICATION  (resource.type = CATEGORY)
+ *   /collections/<slug>     CLASSIFICATION  (resource.type = COLLECTION)
+ *   /products/<slug>        PRODUCT
+ *   /pages/<handle>         PAGE
+ *   /search                 SEARCH
+ *   /cart                   CART
+ *   /account                ACCOUNT
+ *
+ * Note `/products/<slug>` — Terazar used `/<category>/<product>`, which this
+ * backend does not resolve. Every product link in the storefront uses the flat
+ * form; the category a product was browsed through is not in the URL.
+ */
+export function useMenu() {
+  const { menu } = useStorefront();
+  const t = useT();
+
+  /** Href for one item, in the order the backend's resolver would match it. */
+  function itemUrl(item) {
+    if (!item) return "/";
+
+    // Backend may pre-resolve. Trust it when it does.
+    if (item.url) return item.url;
+
+    const relation = item.relations ?? item;
+
+    if (relation.category?.slugified_name) {
+      return `/categories/${relation.category.slugified_name}`;
+    }
+    if (relation.collection?.slugified_name) {
+      return `/collections/${relation.collection.slugified_name}`;
+    }
+    if (relation.product?.slugified_name) {
+      return `/products/${relation.product.slugified_name}`;
+    }
+    if (relation.page?.handle) {
+      return `/pages/${relation.page.handle}`;
+    }
+
+    return "/";
+  }
+
+  /**
+   * Recursively normalize to { id, title, url, external, children }.
+   *
+   * Ids without one from the payload come from the item's place in the tree
+   * ("m.2.0" = first child of the third item), unique across every level. They
+   * used to be `${url}-${index}`, so a parent and its first child linking to
+   * the same page (the backend's "View all" row) shared an id — and opening a
+   * sibling in the mobile menu then closed the parent, because "close the
+   * other submenus" closed that id.
+   */
+  function normalizeItems(items = [], parentId = "m") {
+    return items.map((item, index) => {
+      const url = itemUrl(item);
+      const id = item.id ?? `${parentId}.${index}`;
+      return {
+        id,
+        title: t(item.title) || t(item.label) || "",
+        url,
+        external: /^https?:\/\//i.test(url),
+        // A category's / collection's image (menu payload), for the sidebar.
+        image: item.image ?? null,
+        children: normalizeItems(item.children ?? item.items ?? [], id),
+      };
+    });
+  }
+
+  /**
+   * @param {string|Ref<string>} handle
+   * @returns {ComputedRef<{handle, title, items}>} always a valid shape,
+   *   including for a handle the merchant deleted.
+   */
+  function useMenuByHandle(handle) {
+    return computed(() => {
+      const key = unref(handle);
+      if (!key) return { handle: "", title: "", items: [] };
+
+      const found = menu(key);
+      return {
+        handle: found.handle,
+        title: t(found.title) || "",
+        items: normalizeItems(found.items),
+      };
+    });
+  }
+
+  return { useMenuByHandle, itemUrl, normalizeItems };
+}