npm - @osimart/create-storefront - Versions diffs - 0.0.0-stage → 1.0.1 - Mend

@osimart/create-storefront 0.0.0-stage → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (206) hide show

package/README.md +80 -2
package/THEME_DEV_API.md +80 -0
package/app/app.vue +154 -0
package/app/assets/css/osi-controls.css +824 -0
package/app/components/SectionRenderer.vue +46 -0
package/app/components/builder/BuilderOverlay.vue +582 -0
package/app/components/checkout/ExtraFees.vue +329 -0
package/app/components/checkout/PaymentHandoff.vue +388 -0
package/app/components/common/Banner.vue +35 -0
package/app/components/common/ConfirmDeleteModal.vue +117 -0
package/app/components/common/DropdownSelect.vue +432 -0
package/app/components/common/Loader.vue +32 -0
package/app/components/common/OsiField.vue +218 -0
package/app/components/common/PhoneNumInput.vue +434 -0
package/app/composables/UseBodyScrollLock.js +122 -0
package/app/composables/UseThemeGroup.js +575 -0
package/app/composables/useAddToCart.js +87 -0
package/app/composables/useAnalytics.js +15 -0
package/app/composables/useAnnouncements.js +29 -0
package/app/composables/useApiErrorToast.js +104 -0
package/app/composables/useAuth.js +99 -0
package/app/composables/useBanners.js +25 -0
package/app/composables/useBuilderPreview.js +320 -0
package/app/composables/useButtonStyle.js +107 -0
package/app/composables/useCarousel.js +160 -0
package/app/composables/useCart.js +109 -0
package/app/composables/useCheckout.js +76 -0
package/app/composables/useClassificationItems.js +269 -0
package/app/composables/useClassificationPage.js +545 -0
package/app/composables/useClassificationUrl.js +63 -0
package/app/composables/useColorScheme.js +44 -0
package/app/composables/useContactForm.js +53 -0
package/app/composables/useContentTree.js +770 -0
package/app/composables/useDragScroll.js +73 -0
package/app/composables/useFooterSocials.js +107 -0
package/app/composables/useInputStyle.js +45 -0
package/app/composables/useLayoutShell.js +114 -0
package/app/composables/useLazyVideo.js +36 -0
package/app/composables/useMediaTypes.js +66 -0
package/app/composables/useMediaUrl.js +71 -0
package/app/composables/useMenu.js +100 -0
package/app/composables/useNavStyle.js +219 -0
package/app/composables/usePlaceholders.js +294 -0
package/app/composables/usePolicies.js +26 -0
package/app/composables/useProductCardMedia.js +135 -0
package/app/composables/useProductCardStyle.js +132 -0
package/app/composables/useProductDetail.js +982 -0
package/app/composables/useProductGallery.js +166 -0
package/app/composables/useProductItems.js +270 -0
package/app/composables/useProductUrl.js +60 -0
package/app/composables/useProductVariants.js +210 -0
package/app/composables/useQuickShop.js +115 -0
package/app/composables/useRelatedProducts.js +186 -0
package/app/composables/useRenderContext.js +45 -0
package/app/composables/useScopedCss.js +106 -0
package/app/composables/useSearch.js +35 -0
package/app/composables/useSectionData.js +462 -0
package/app/composables/useSectionShell.js +113 -0
package/app/composables/useSidebar.js +69 -0
package/app/composables/useStoreData.js +57 -0
package/app/composables/useStoreInit.js +52 -0
package/app/composables/useStorefront.js +239 -0
package/app/composables/useT.js +21 -0
package/app/composables/useTextStyles.js +84 -0
package/app/composables/useThemeControls.js +34 -0
package/app/composables/useThemeSeo.js +91 -0
package/app/composables/useThemeTokens.js +171 -0
package/app/composables/useWishlist.js +66 -0
package/app/logic/components/AnnouncementBar.js +118 -0
package/app/logic/components/CardGrid.js +125 -0
package/app/logic/components/CardList.js +98 -0
package/app/logic/components/CartDrawer.js +273 -0
package/app/logic/components/CartItem.js +31 -0
package/app/logic/components/ClassificationBento.js +6 -0
package/app/logic/components/ClassificationCard.js +6 -0
package/app/logic/components/ClassificationCarousel.js +115 -0
package/app/logic/components/ClassificationEditorial.js +41 -0
package/app/logic/components/ClassificationFeatured.js +57 -0
package/app/logic/components/ClassificationGrid.js +6 -0
package/app/logic/components/ClassificationNav.js +61 -0
package/app/logic/components/ClassificationPart.js +72 -0
package/app/logic/components/FooterBlock.js +91 -0
package/app/logic/components/FooterSocials.js +60 -0
package/app/logic/components/HeaderDropdownList.js +29 -0
package/app/logic/components/HeaderIcon.js +68 -0
package/app/logic/components/HeaderLogo.js +39 -0
package/app/logic/components/HeaderNav.js +268 -0
package/app/logic/components/MobileMenu.js +280 -0
package/app/logic/components/ProductBuyButtons.js +66 -0
package/app/logic/components/ProductCard.js +160 -0
package/app/logic/components/ProductFilters.js +37 -0
package/app/logic/components/ProductGallery.js +19 -0
package/app/logic/components/ProductInfoBlock.js +411 -0
package/app/logic/components/ProductLightbox.js +12 -0
package/app/logic/components/ProductQuantity.js +31 -0
package/app/logic/components/ProductVariantPicker.js +125 -0
package/app/logic/components/QuickBuy.js +194 -0
package/app/logic/components/SearchOverlay.js +41 -0
package/app/logic/components/SidebarMenuItem.js +39 -0
package/app/logic/components/SiteFooter.js +476 -0
package/app/logic/components/SiteHeader.js +266 -0
package/app/logic/components/WhatsAppButton.js +75 -0
package/app/logic/layouts/default.js +66 -0
package/app/logic/sections/AnnouncementBarSection.js +6 -0
package/app/logic/sections/BlockCarousel.js +103 -0
package/app/logic/sections/ClassificationListSection.js +40 -0
package/app/logic/sections/ContactFormSection.js +294 -0
package/app/logic/sections/ContactInfoSection.js +419 -0
package/app/logic/sections/ContentNode.js +189 -0
package/app/logic/sections/CountdownSection.js +254 -0
package/app/logic/sections/CustomHtmlSection.js +51 -0
package/app/logic/sections/DividerSection.js +31 -0
package/app/logic/sections/FaqSection.js +53 -0
package/app/logic/sections/FeatureListSection.js +6 -0
package/app/logic/sections/FeaturedProductSection.js +40 -0
package/app/logic/sections/FooterSection.js +16 -0
package/app/logic/sections/FooterUtilitiesSection.js +24 -0
package/app/logic/sections/GallerySection.js +232 -0
package/app/logic/sections/HeaderSection.js +24 -0
package/app/logic/sections/HeroSection.js +24 -0
package/app/logic/sections/LogoListSection.js +6 -0
package/app/logic/sections/MainClassificationSection.js +473 -0
package/app/logic/sections/MainProductSection.js +211 -0
package/app/logic/sections/MainSearchSection.js +6 -0
package/app/logic/sections/MapSection.js +92 -0
package/app/logic/sections/MediaContentSection.js +38 -0
package/app/logic/sections/MediaWithTextSection.js +238 -0
package/app/logic/sections/NewsletterSection.js +126 -0
package/app/logic/sections/ProductHighlightSection.js +201 -0
package/app/logic/sections/ProductListSection.js +45 -0
package/app/logic/sections/ProductRecommendationsSection.js +113 -0
package/app/logic/sections/RichTextSection.js +6 -0
package/app/logic/sections/ScrollingTextSection.js +69 -0
package/app/logic/sections/SearchHeaderSection.js +22 -0
package/app/logic/sections/SlideshowSection.js +118 -0
package/app/logic/sections/SpacerSection.js +37 -0
package/app/logic/sections/SplitShowcaseSection.js +6 -0
package/app/logic/sections/TestimonialListSection.js +6 -0
package/app/logic/sections/VideoSection.js +235 -0
package/app/pages/[category]/[product].vue +196 -0
package/app/pages/__builder-preview.vue +38 -0
package/app/pages/categories/[slug].vue +208 -0
package/app/pages/checkout.vue +1972 -0
package/app/pages/forgot-password.vue +115 -0
package/app/pages/index.vue +64 -0
package/app/pages/login.vue +585 -0
package/app/pages/order-detail.vue +442 -0
package/app/pages/pages/[handle].vue +58 -0
package/app/pages/privacy-policy.vue +46 -0
package/app/pages/resetpassword.vue +138 -0
package/app/pages/resetverificationcode.vue +163 -0
package/app/pages/result.vue +203 -0
package/app/pages/return-policy.vue +50 -0
package/app/pages/search.vue +100 -0
package/app/pages/shipping-policy.vue +46 -0
package/app/pages/user-profile/components/AddAddressModal.vue +452 -0
package/app/pages/user-profile/components/Whishlist.vue +137 -0
package/app/pages/user-profile/components/left-bar.vue +233 -0
package/app/pages/user-profile/components/orders.vue +162 -0
package/app/pages/user-profile/components/profile-details.vue +566 -0
package/app/pages/user-profile/components/settings.vue +194 -0
package/app/pages/user-profile/index.vue +252 -0
package/app/pages/verificationcode.vue +188 -0
package/app/plugins/analytics.client.js +99 -0
package/app/plugins/geo.js +24 -0
package/app/plugins/reveal.client.js +53 -0
package/app/plugins/toast.js +10 -0
package/app/plugins/vue-query.js +5 -0
package/app/services/ApiServices.js +74 -0
package/app/services/AuthBus.js +162 -0
package/app/services/Authentication/AuthenticationService.js +133 -0
package/app/services/Authentication/TokenService.js +62 -0
package/app/services/CartServices.js +91 -0
package/app/services/CartToken.js +26 -0
package/app/services/CategoryServices.js +54 -0
package/app/services/CheckoutServices.js +113 -0
package/app/services/HomeServices.js +133 -0
package/app/services/NewsletterServices.js +29 -0
package/app/services/PaymentServices.js +71 -0
package/app/services/PoliciesServices.js +16 -0
package/app/services/ProductServices.js +79 -0
package/app/services/SearchServices.js +18 -0
package/app/services/UserServices.js +105 -0
package/app/services/UtilsServices.js +46 -0
package/app/services/WishlistServices.js +51 -0
package/app/services/storefront.service.js +57 -0
package/app/stores/userStore.js +13 -0
package/app/theme/categoryTree.js +68 -0
package/app/theme/controls.js +88 -0
package/app/theme/registry.js +56 -0
package/app/utils/analytics.js +864 -0
package/app/utils/device.js +50 -0
package/app/utils/eventBus.js +24 -0
package/app/utils/icon-presets.js +24 -0
package/app/utils/productOffers.js +118 -0
package/app/utils/requestCache.js +36 -0
package/app/utils/scrollToError.js +59 -0
package/app/utils/toPlainError.js +30 -0
package/bin/osimart-theme.mjs +282 -0
package/nuxt/osi-sections.ts +56 -0
package/nuxt.config.ts +60 -0
package/package.json +44 -4
package/public/css/input.css +29 -0
package/public/css/output.css +2716 -0
package/public/favicon-32x32.png +0 -0
package/public/robots.txt +2 -0

package/app/components/SectionRenderer.vue ADDED Viewed

@@ -0,0 +1,46 @@
+<script setup>
+import { resolveSection } from "#osi/theme/registry";
+/**
+ * Renders a template's sections in order.
+ *
+ * data-osi-section / data-osi-block are emitted in production too, not just in
+ * preview. They cost nothing, and forgetting them on one section type is an
+ * infuriating bug to chase later — click-to-select silently stops working for
+ * that section only.
+ */
+defineProps({
+  sections: { type: Array, default: () => [] },
+});
+// Hover / selection outlines are drawn by BuilderOverlay (pages/__builder-preview),
+// not here: a CSS outline gets clipped by overflow, can't carry a name tag or
+// buttons, and a nested block's outline would fight its section's.
+const { isPreview } = useBuilderPreview();
+</script>
+<template>
+  <div class="osi-sections">
+    <template v-for="(section, i) in sections" :key="section.key">
+      <component
+        :is="resolveSection(section.type)"
+        v-if="resolveSection(section.type)"
+        :section="section"
+        :index="i"
+        :data-osi-section="section.key"
+        :class="{ 'osi-preview-disabled': isPreview && section.disabled }"
+      />
+    </template>
+  </div>
+</template>
+<style scoped>
+.osi-sections > :deep(*) + :deep(*) {
+  margin-top: 0;
+}
+/* Editor only — never rendered on a live storefront. */
+.osi-preview-disabled {
+  opacity: 0.45;
+}
+</style>

package/app/components/builder/BuilderOverlay.vue ADDED Viewed

@@ -0,0 +1,582 @@
+<script setup>
+import {
+  findPreviewElements,
+  previewElements,
+  previewSelector,
+  resolvePreviewElement,
+} from "#osi/composables/useBuilderPreview";
+/**
+ * The editor's overlay inside the builder preview — Shopify-style.
+ *
+ *   hover      thin blue outline + a name tag with the block's parents
+ *              ("Rich text › Group › Text"), faint dashed outlines on those
+ *              parents so the nesting shows
+ *   copies     a block drawn more than once (a card part, once per item in a
+ *              list) gets its box on the copy under the pointer / the one
+ *              clicked, and a light border on every other copy — so it reads
+ *              "this, and all of these".
+ *   selected   2px blue border, the same tag with clickable crumbs (select a
+ *              parent), and a toolbar: move up / down, duplicate, delete
+ *   "+"        on the hovered (else selected) block, on the two edges along
+ *              its parent's direction — insert before / after; centred in an
+ *              empty group; "Add section" above / below a section
+ *
+ * One fixed layer over the page, never an outline on the blocks themselves:
+ * outlines get clipped by overflow, can't carry a tag or buttons, and a nested
+ * block's outline would fight its parents'. The layer ignores the pointer
+ * except on its own buttons ([data-osi-overlay] — useBuilderPreview skips
+ * those when tracking hover and clicks).
+ *
+ * Teleported to <body>, so no wrapper's stacking context can put the site's
+ * sticky header above it; name tags also stick just below such a header while
+ * their block is on screen (topInset / tagStyle).
+ *
+ * The dashboard clips this iframe to a rounded shell (PreviewFrame.vue). An
+ * outline that reaches the top / bottom of the frame rounds its corners to
+ * follow that curve (see boxStyle) instead of being cut off square. Name tags
+ * are left exactly as they are. The radius arrives in a FRAME message — see
+ * frameRadius.
+ *
+ * Positions come from getBoundingClientRect() in a requestAnimationFrame loop,
+ * so boxes follow scrolling, carousels, the marquee and re-renders without a
+ * listener per case. The loop only touches reactive state when a box moved.
+ *
+ * Hidden entirely while the dashboard's top-bar toggle is off (overlayOn).
+ *
+ * Talks to the dashboard through useBuilderPreview().send():
+ *   SECTION_CLICK { key, blockKey }        select (crumbs)
+ *   ACTION        { kind, key, action }    up | down | duplicate | delete
+ *   ADD_BLOCK     { section, parent, index, x, y }
+ *   ADD_SECTION   { index, area }         area: header | template | footer
+ */
+const { state, selectedKey, hoveredKey, labels, overlayOn, send, isPreview } = useBuilderPreview();
+/* ------------------------------------------------------------------ tree */
+/**
+ * Every section on the page: the header group's, the template's, the footer
+ * group's — each tagged with its area, positions counted within it.
+ */
+const allSections = computed(() => {
+  const s = state.value ?? {};
+  const tag = (list, area) => (list ?? []).map((section, position) => ({ section, area, position }));
+  return [
+    ...tag(s.groups?.header, "header"),
+    ...tag(s.sections, "template"),
+    ...tag(s.groups?.footer, "footer"),
+  ];
+});
+/** key -> { kind, section, parent, type } for every section and block. */
+const index = computed(() => {
+  const map = {};
+  allSections.value.forEach(({ section, area, position }) => {
+    map[section.key] = { kind: "SECTION", section: section.key, parent: null, type: section.type, position, area };
+    for (const block of section.blocks ?? []) {
+      map[block.key] = { kind: "BLOCK", section: section.key, parent: block.parent_key || null, type: block.type };
+    }
+  });
+  return map;
+});
+function sectionOf(key) {
+  return allSections.value.find((e) => e.section.key === index.value[key]?.section)?.section;
+}
+/** Keys of `parent`'s children (null = the section itself), in order. */
+function siblings(sectionKey, parent) {
+  const section = allSections.value.find((e) => e.section.key === sectionKey)?.section;
+  return (section?.blocks ?? []).filter((b) => (b.parent_key || null) === parent).map((b) => b.key);
+}
+/** [section, ...parents, key] — outermost first. */
+function chain(key) {
+  const info = index.value[key];
+  if (!info) return [];
+  if (info.kind === "SECTION") return [key];
+  const out = [key];
+  for (let p = info.parent, guard = 0; p && guard < 20; p = index.value[p]?.parent, guard++) out.unshift(p);
+  out.unshift(info.section);
+  return out;
+}
+function nameOf(key) {
+  const label = labels.value?.[key]?.label;
+  if (label) return label;
+  const type = index.value[key]?.type ?? "";
+  return type.charAt(0) + type.slice(1).toLowerCase().replace(/_/g, " ");
+}
+const hintOf = (key) => labels.value?.[key]?.hint || "";
+const isContainer = (key) => !!labels.value?.[key]?.container;
+// Static blocks (a static_blocks section): no move / duplicate / delete / "+".
+const isFixed = (key) => !!labels.value?.[key]?.fixed;
+// The page's main section (schema `required`): no delete.
+const isRequired = (key) => !!labels.value?.[key]?.required;
+/* --------------------------------------------------------------- measuring */
+const view = reactive({
+  hover: null, // { key, top, left, width, height, row }
+  selected: null,
+  parents: [], // rects of the hovered block's parents
+  // Other copies of the hovered / selected block (a card part is drawn once
+  // per item): a light border on each, so all of them read as one block.
+  twins: [],
+  // Bottom edge of a fixed / sticky header pinned to the top of the page, if
+  // any: name tags stick just below it instead of sliding underneath.
+  safeTop: 0,
+});
+/**
+ * How much of the top of the viewport a pinned header covers. Probes what's
+ * at the top centre (the overlay itself doesn't count — it ignores the
+ * pointer, so hit-testing skips it) and walks up to a fixed / sticky
+ * ancestor touching the top. No such header -> 0.
+ */
+function topInset() {
+  const toolbar = document.querySelector("[data-osi-toolbar]"); // however your toolbar is marked
+  if (!toolbar) return 0;
+  const r = toolbar.getBoundingClientRect();
+  return r.top <= 1 ? r.bottom : 0;
+}
+/** The on-screen box of one element, standing for `key`. */
+function rectOf(el, key, id = key) {
+  if (!el) return null;
+  const r = el.getBoundingClientRect();
+  if (!r.width && !r.height) return null;
+  // Which way its siblings run: the "+" buttons sit on the edges along it.
+  const parent = el.parentElement;
+  const cs = parent ? getComputedStyle(parent) : null;
+  const row = !!cs && cs.display.includes("flex") && cs.flexDirection.startsWith("row");
+  return { key, id, top: r.top, left: r.left, width: r.width, height: r.height, row };
+}
+const same = (a, b) =>
+  a === b ||
+  (!!a && !!b && a.id === b.id && a.row === b.row &&
+    Math.abs(a.top - b.top) < 0.5 && Math.abs(a.left - b.left) < 0.5 &&
+    Math.abs(a.width - b.width) < 0.5 && Math.abs(a.height - b.height) < 0.5);
+const sameList = (a, b) => a.length === b.length && a.every((x, i) => same(x, b[i]));
+/** Every other live copy of `key`, as boxes (the primary one excluded). */
+function twinsOf(key, primary) {
+  if (!key) return [];
+  const out = [];
+  findPreviewElements(key).forEach((el, i) => {
+    if (el === primary) return;
+    const box = rectOf(el, key, `${key}#${i}`);
+    if (box) out.push(box);
+  });
+  return out;
+}
+function measure() {
+  const inset = Math.round(topInset());
+  if (inset !== view.safeTop) view.safeTop = inset;
+  // The exact copies: the one clicked, the one under the pointer. Selected /
+  // hovered from the dashboard's layer tree there's no copy — the first one.
+  const selectedEl = resolvePreviewElement(selectedKey.value, previewElements.selected);
+  const selected = rectOf(selectedEl, selectedKey.value);
+  if (!same(view.selected, selected)) view.selected = selected;
+  const hoverEl = resolvePreviewElement(hoveredKey.value, previewElements.hover);
+  const hoverKey = hoveredKey.value && hoveredKey.value !== selectedKey.value ? hoveredKey.value : null;
+  const hover = hoverKey ? rectOf(hoverEl, hoverKey) : null;
+  if (!same(view.hover, hover)) view.hover = hover;
+  // Parents of the copy under the pointer — its own card, not card #1's.
+  const parents = hoveredKey.value
+    ? chain(hoveredKey.value)
+        .slice(0, -1)
+        .map((key) => rectOf(hoverEl?.closest(previewSelector(key)) ?? resolvePreviewElement(key), key))
+        .filter(Boolean)
+    : [];
+  if (!sameList(parents, view.parents)) view.parents = parents;
+  const twins = [
+    ...twinsOf(selectedKey.value, selectedEl),
+    ...(hoverKey ? twinsOf(hoverKey, hoverEl) : []),
+  ];
+  if (!sameList(twins, view.twins)) view.twins = twins;
+}
+let raf = 0;
+function loop() {
+  measure();
+  raf = requestAnimationFrame(loop);
+}
+onMounted(() => {
+  raf = requestAnimationFrame(loop);
+  window.addEventListener("message", onFrameMessage);
+  // The dashboard also pushes FRAME on READY, but this component may mount
+  // after that — ask again so the radius is never missed.
+  if (window.parent !== window) {
+    window.parent.postMessage({ protocol: PROTOCOL, type: "FRAME_REQUEST" }, "*");
+  }
+});
+onBeforeUnmount(() => {
+  cancelAnimationFrame(raf);
+  window.removeEventListener("message", onFrameMessage);
+});
+/* ---------------------------------------------------------- frame corners */
+/**
+ * The dashboard rounds and clips the preview (a rounded shell around this
+ * iframe). It can't be read from in here — cross-origin — so PreviewFrame
+ * sends the radius of the visible area: { radius } in px, 0 when the shell
+ * is square (phone-width dashboard).
+ */
+const PROTOCOL = "osimart-builder/1";
+const frameRadius = ref(0);
+function onFrameMessage(e) {
+  if (e.source !== window.parent) return;
+  const d = e.data;
+  if (!d || d.protocol !== PROTOCOL || d.type !== "FRAME") return;
+  const r = Number(d.payload?.radius);
+  frameRadius.value = Number.isFinite(r) && r > 0 ? r : 0;
+}
+/**
+ * boxStyle: the box's position plus rounded corners near the frame's corners.
+ * A box corner within `frameRadius` of both frame edges it's heading for
+ * (e.g. top + left) gets a radius that grows from 0 to the full frame radius
+ * as it closes in, so the outline eases into the curve as it nears the top
+ * and matches it exactly once touching. A corner that's scrolled past the
+ * edge is off screen, so it stays square.
+ */
+const EDGE = 1;
+function cornerRadius(dx, dy) {
+  const R = frameRadius.value;
+  if (R <= 0 || dx < -EDGE || dy < -EDGE) return 0;
+  return Math.max(0, R - Math.max(dx, dy, 0));
+}
+function boxStyle(box) {
+  const w = window.innerWidth;
+  const h = window.innerHeight;
+  const right = w - (box.left + box.width);
+  const bottom = h - (box.top + box.height);
+  const tl = cornerRadius(box.left, box.top);
+  const tr = cornerRadius(right, box.top);
+  const br = cornerRadius(right, bottom);
+  const bl = cornerRadius(box.left, bottom);
+  return {
+    top: `${box.top}px`,
+    left: `${box.left}px`,
+    width: `${box.width}px`,
+    height: `${box.height}px`,
+    borderRadius: `${tl}px ${tr}px ${br}px ${bl}px`,
+  };
+}
+/* ------------------------------------------------------------------ tags */
+const TAG_H = 22;
+/**
+ * Where a box's name tag goes, like Shopify's:
+ *   room above the box (below any pinned header)  -> sitting on the box's top
+ *     edge like a tab (overlapping the border, so no gap shows): only its top
+ *     corners are rounded
+ *   box top visible but no room above             -> at the box's top-left
+ *     corner
+ *   box top scrolled under the header / off screen -> stuck just below the
+ *     header, riding down with the box until the box's bottom pushes it up
+ *     — in both of these it hangs from the edge above it, so only its
+ *     bottom corners are rounded
+ * `border` is the box's outline width (1 hover, 2 selected). The tag is
+ * nudged 2px left of the box.
+ */
+const TAG_R = 4;
+function tagStyle(box, border = 1) {
+  const safe = view.safeTop;
+  let top;
+  let above = false;
+  if (box.top - TAG_H >= safe) { top = box.top - TAG_H + border; above = true; }
+  else if (box.top >= safe) top = box.top;
+  else top = Math.min(safe, box.top + box.height - TAG_H - 2);
+  return {
+    top: `${top}px`,
+    left: `${Math.max(0, Math.min(box.left, window.innerWidth - 60) - 2)}px`,
+    borderRadius: above ? `${TAG_R}px ${TAG_R}px 0 0` : `0 0 ${TAG_R}px ${TAG_R}px`,
+  };
+}
+const hoverCrumbs = computed(() => (view.hover ? chain(view.hover.key) : []));
+const selectedCrumbs = computed(() => (view.selected ? chain(view.selected.key) : []));
+const hoveringSelected = computed(() => !!selectedKey.value && hoveredKey.value === selectedKey.value);
+function selectKey(key) {
+  const info = index.value[key];
+  if (!info) return;
+  send("SECTION_CLICK", { key: info.section, blockKey: info.kind === "BLOCK" ? key : null });
+}
+function act(action) {
+  const key = view.selected?.key;
+  const info = index.value[key];
+  if (!info) return;
+  send("ACTION", { kind: info.kind, key, action });
+}
+/* ------------------------------------------------------------- "+" buttons */
+/** The box the "+" buttons belong to: the hovered one, else the selected one. */
+const active = computed(() => view.hover ?? view.selected);
+const plusButtons = computed(() => {
+  const box = active.value;
+  if (!box) return [];
+  const info = index.value[box.key];
+  if (!info) return [];
+  if (info.kind === "SECTION") {
+    const cx = box.left + box.width / 2;
+    return [
+      { id: "s-before", label: "Add section", wide: true, x: cx, y: box.top, add: () => send("ADD_SECTION", { index: info.position, area: info.area }) },
+      { id: "s-after", label: "Add section", wide: true, x: cx, y: box.top + box.height, add: () => send("ADD_SECTION", { index: info.position + 1, area: info.area }) },
+    ];
+  }
+  if (isFixed(box.key)) return [];
+  const at = siblings(info.section, info.parent).indexOf(box.key);
+  const addAt = (i, x, y) => send("ADD_BLOCK", { section: info.section, parent: info.parent, index: i, x, y });
+  const buttons = box.row
+    ? [
+        { id: "b-before", x: box.left, y: box.top + box.height / 2, add: (e) => addAt(at, e.clientX, e.clientY) },
+        { id: "b-after", x: box.left + box.width, y: box.top + box.height / 2, add: (e) => addAt(at + 1, e.clientX, e.clientY) },
+      ]
+    : [
+        { id: "b-before", x: box.left + box.width / 2, y: box.top, add: (e) => addAt(at, e.clientX, e.clientY) },
+        { id: "b-after", x: box.left + box.width / 2, y: box.top + box.height, add: (e) => addAt(at + 1, e.clientX, e.clientY) },
+      ];
+  // An empty group: "Add block" in the middle, into it.
+  if (isContainer(box.key) && !siblings(info.section, box.key).length) {
+    buttons.push({
+      id: "b-inside", label: "Add block", wide: true,
+      x: box.left + box.width / 2, y: box.top + box.height / 2,
+      add: (e) => send("ADD_BLOCK", { section: info.section, parent: box.key, index: 0, x: e.clientX, y: e.clientY }),
+    });
+  }
+  return buttons;
+});
+</script>
+<template>
+  <!-- On <body>, not inside the page: the layout's wrappers can form their own
+       stacking context, and then no z-index lifts the overlay above the
+       site's sticky header. -->
+  <Teleport to="body">
+    <!-- Off from the dashboard's top bar: the page shows exactly as customers
+         see it. Clicking a block still selects it. -->
+    <div v-if="isPreview && overlayOn" class="osi-ov" data-osi-overlay>
+      <!-- the hovered block's parents -->
+      <div v-for="p in view.parents" :key="`p-${p.key}`" class="osi-ov-box is-parent" :style="boxStyle(p)" />
+      <!-- the other copies of the hovered / selected block -->
+      <div v-for="tw in view.twins" :key="`t-${tw.id}`" class="osi-ov-box is-twin" :style="boxStyle(tw)" />
+      <!-- hover -->
+      <template v-if="view.hover">
+        <div class="osi-ov-box is-hover" :style="boxStyle(view.hover)" />
+        <div class="osi-ov-tag is-hover" :style="tagStyle(view.hover, 1)">
+          <template v-for="(key, i) in hoverCrumbs" :key="`h-${key}`">
+            <span v-if="i" class="osi-ov-sep">›</span>
+            <span :class="{ 'is-self': i === hoverCrumbs.length - 1 }">{{ nameOf(key) }}</span>
+          </template>
+          <!-- <span v-if="hintOf(view.hover.key)" class="osi-ov-hint">{{ hintOf(view.hover.key) }}</span> -->
+        </div>
+      </template>
+      <!-- selected -->
+      <template v-if="view.selected">
+        <div class="osi-ov-box is-selected" :style="boxStyle(view.selected)" />
+        <div v-if="hoveringSelected" class="osi-ov-tag is-selected" :style="tagStyle(view.selected, 2)">
+          <template v-for="(key, i) in selectedCrumbs" :key="`s-${key}`">
+            <span v-if="i" class="osi-ov-sep">›</span>
+            <button
+              v-if="i < selectedCrumbs.length - 1"
+              type="button"
+              class="osi-ov-crumb"
+              :title="`Select ${nameOf(key)}`"
+              @click.stop="selectKey(key)"
+            >{{ nameOf(key) }}</button>
+            <span v-else class="is-self">{{ nameOf(key) }}</span>
+          </template>
+          <span v-if="!isFixed(view.selected.key)" class="osi-ov-tools">
+            <button type="button" title="Move up" @click.stop="act('up')">
+              <svg viewBox="0 0 24 24"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
+            </button>
+            <button type="button" title="Move down" @click.stop="act('down')">
+              <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12l7 7 7-7" /></svg>
+            </button>
+            <button type="button" title="Duplicate" @click.stop="act('duplicate')">
+              <svg viewBox="0 0 24 24"><rect x="8" y="8" width="12" height="12" rx="2" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></svg>
+            </button>
+            <button
+              v-if="!isRequired(view.selected.key)"
+              type="button"
+              title="Delete"
+              class="is-danger"
+              @click.stop="act('delete')"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-[15px] shrink-0"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"></path></svg>
+            </button>
+          </span>
+        </div>
+      </template>
+      <!-- "+" -->
+      <button
+        v-for="b in plusButtons"
+        :key="b.id"
+        type="button"
+        class="osi-ov-plus"
+        :class="{ 'is-wide': b.wide }"
+        :style="{ top: `${b.y}px`, left: `${b.x}px` }"
+        :title="b.label || 'Add block'"
+        @click.stop="b.add($event)"
+      >
+        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" /></svg>
+        <span v-if="b.label">{{ b.label }}</span>
+      </button>
+    </div>
+  </Teleport>
+</template>
+<style scoped>
+.osi-ov {
+  --ov-blue: #2c6ecb;
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  pointer-events: none;
+  font: 500 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+.osi-ov-box {
+  position: fixed;
+  box-sizing: border-box;
+  pointer-events: none;
+}
+.osi-ov-box.is-parent {
+  border: 1px dashed rgba(44, 110, 203, 0.45);
+}
+.osi-ov-box.is-twin {
+  border: 1px solid rgba(44, 110, 203, 0.55);
+  background: rgba(44, 110, 203, 0.04);
+}
+.osi-ov-box.is-hover {
+  border: 1px solid var(--ov-blue);
+}
+.osi-ov-box.is-selected {
+  border: 2px solid var(--ov-blue);
+}
+.osi-ov-tag {
+  font-family: 'Poppins', sans-serif;
+  position: fixed;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  max-width: calc(100vw - 8px);
+  padding: 0 8px;
+  border-radius: 4px;
+  background: var(--ov-blue);
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+.osi-ov-tag.is-hover {
+  pointer-events: none;
+  opacity: 0.95;
+}
+.osi-ov-tag.is-selected {
+  pointer-events: auto;
+}
+.osi-ov-sep {
+  opacity: 0.6;
+}
+.osi-ov-tag .is-self {
+  font-weight: 600;
+}
+.osi-ov-hint {
+  margin-inline-start: 4px;
+  opacity: 0.75;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+}
+.osi-ov-crumb {
+  all: unset;
+  cursor: pointer;
+  opacity: 0.85;
+}
+.osi-ov-crumb:hover,
+.osi-ov-crumb:focus-visible {
+  opacity: 1;
+  text-decoration: underline;
+}
+.osi-ov-tools {
+  display: inline-flex;
+  gap: 2px;
+  margin-inline-start: 6px;
+  padding-inline-start: 6px;
+  border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
+}
+.osi-ov-tools button {
+  all: unset;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.osi-ov-tools button:hover,
+.osi-ov-tools button:focus-visible {
+  background: rgba(255, 255, 255, 0.2);
+}
+.osi-ov-tools button.is-danger:hover {
+  background: #d72c0d;
+}
+.osi-ov svg {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.osi-ov-plus {
+  font-family: 'Poppins', sans-serif !important;
+  all: unset;
+  position: fixed;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--ov-blue);
+  color: #fff;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+  transition: transform 0.12s ease;
+}
+.osi-ov-plus.is-wide {
+  width: auto;
+  padding: 0 10px 0 8px;
+}
+</style>