juo 0.3.0-alpha.0 → 0.3.0-alpha.2

package/templates/dev/vite/theme-shell.ts.liquid

@@ -0,0 +1,267 @@
+// Dev-only theme shell. Lives outside the project's `src/` so the author's
+// source tree contains only their blocks. Vite serves this file directly (see
+// the <script> + import map injected in index.html); it never enters the built
+// blocks bundle (whose entry is `src/blocks/register.ts`).
+import "@juo/blocks/web-components/editor";
+{% if tailwind %}import "../src/tailwind.css";
+{% else %}import "../src/styles.css";
+{% endif %}
+import {
+  createBlockInstance,
+  createThemeState,
+  defineBlock,
+  effect,
+  injectContext,
+  isEditorPreview,
+  provideContext,
+  registerBlock,
+  serializeBlocks,
+  ThemeStateContext,
+  TranslationContext,
+  createTranslationService,
+  createOverlayService,
+  OverlayServiceContext,
+  untracked,
+} from "@juo/blocks";
+import { registerBlocks as registerProjectBlocks } from "../src/main";
+import { provideMockServices } from "./mock-services";
+// Native blocks shipped by @juo/blocks-extensions, loaded from CDN. Its bare
+// "@juo/blocks" import is bridged to the local instance via the index.html
+// import map (see vite/blocks-shim.ts).
+// @ts-expect-error Remote, untyped module
+import { blocks as nativeBlocks } from "https://cdn.juo.io/web/blocks/juo/{{ extensionsVersion }}/extensions.js";
+
+function hexToOklch(hex: string): { l: number; h: number; c: number } {
+  const r = parseInt(hex.slice(1, 3), 16) / 255;
+  const g = parseInt(hex.slice(3, 5), 16) / 255;
+  const b = parseInt(hex.slice(5, 7), 16) / 255;
+  const linearize = (v: number) =>
+    v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  const lr = linearize(r);
+  const lg = linearize(g);
+  const lb = linearize(b);
+  const lm = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const mm = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const sm = Math.cbrt(0.0883024619 * lr + 0.2220049178 * lg + 0.6896926208 * lb);
+  const L = 0.2104542553 * lm + 0.793617785 * mm - 0.0040720468 * sm;
+  const a = 1.9779984951 * lm - 2.428592205 * mm + 0.4505937099 * sm;
+  const bOk = 0.0259040371 * lm + 0.7827717662 * mm - 0.808675766 * sm;
+  const c = Math.sqrt(a * a + bOk * bOk);
+  const h = Math.atan2(bOk, a) * (180 / Math.PI);
+  return { l: L * 100, h: h < 0 ? h + 360 : h, c };
+}
+
+const homePageBlock = defineBlock("HomePage", {
+  displayName: "Home page",
+  group: "page",
+  schema: {
+    type: "object",
+    properties: {
+      props: {
+        type: "object",
+        properties: {},
+        additionalProperties: false,
+      },
+      slots: {
+        type: "object",
+        properties: { main: {} },
+        additionalProperties: false,
+      },
+    },
+    required: ["props", "slots"],
+    additionalProperties: false,
+  },
+  initialValue: () => ({
+    props: {},
+    slots: {
+      main: [
+        createBlockInstance("Banner"),
+        createBlockInstance("Header"),
+        createBlockInstance("RenewalSummary"),
+        createBlockInstance("UpcomingOrderItems"),
+        createBlockInstance("Starter Block"),
+        createBlockInstance("CustomerSubscriptions"),
+        createBlockInstance("OrderList"),
+      ],
+    },
+  }),
+  renderer() {
+    const page = document.createElement("juo-page");
+    page.setAttribute("name", "HomePage");
+    const extensionRoot = document.createElement("juo-extension-root");
+    extensionRoot.setAttribute("name", "main");
+    page.appendChild(extensionRoot);
+    return page;
+  },
+});
+
+function registerBlocks() {
+  Object.values(nativeBlocks).forEach((block) => registerBlock(block));
+  registerProjectBlocks();
+  registerBlock(homePageBlock);
+}
+
+async function setupEditorMode(root: HTMLElement) {
+  const editorModule = await import("@juo/blocks/editor");
+  const editor = editorModule.createEditorBridge();
+  const routerService = {
+    push: () => {},
+    subscribe: () => () => {},
+    getPages: () => [{ path: "/", block: "HomePage", title: "Home", routeNames: [] }],
+  };
+  const themeState = createThemeState({
+    resolve: (surface, path) => editor.requestThemeState(surface, path),
+    upsertState: (surface, path, blocks) =>
+      editor.upsertThemeState(surface, path, blocks),
+    translations: {
+      resolveTranslations: (locale) =>
+        editor.requestTranslationOverrides(locale),
+    },
+    routerService,
+  });
+  provideContext(root, ThemeStateContext, themeState);
+  const overlayService = createOverlayService(themeState);
+  provideContext(root, OverlayServiceContext, overlayService);
+  await editorModule.setupEditorMode({ routerService, themeState, overlayService });
+}
+
+function setupViewMode(root: HTMLElement) {
+  const themeState = createThemeState({
+    resolve: async () => ({
+      blocks: serializeBlocks([createBlockInstance("HomePage")]),
+    }),
+  });
+  provideContext(root, ThemeStateContext, themeState);
+  provideContext(root, OverlayServiceContext, createOverlayService(themeState));
+}
+
+async function initializeTheme() {
+  const root = document.querySelector("juo-context-root") as HTMLElement;
+
+  registerBlocks();
+
+  if (isEditorPreview()) {
+    await setupEditorMode(root);
+  } else {
+    setupViewMode(root);
+  }
+
+  const themeState = injectContext(root, ThemeStateContext);
+
+  effect(() => {
+    const styles = themeState.globalStyles.value;
+    const el = root;
+
+    el.setAttribute("data-volume", styles.volume);
+    el.setAttribute("data-style", styles.style);
+    el.setAttribute("data-corners", styles.corners);
+    el.setAttribute("data-button-corners", styles.buttonCorners);
+    el.setAttribute("data-thumbnail-corners", styles.thumbnailCorners);
+
+    const bg = styles.colors.background;
+    if (bg) {
+      el.style.setProperty("background-color", bg);
+    } else {
+      el.style.removeProperty("background-color");
+    }
+
+    const colorizableKeys = ["tint", "accent", "secondary", "callout"] as const;
+
+    if (styles.theme === "custom") {
+      for (const key of colorizableKeys) {
+        el.setAttribute(`data-${key}`, "custom");
+        const hex = styles.colors[key];
+        if (hex) {
+          const { l, h, c } = hexToOklch(hex);
+          el.style.setProperty(`--${key}-l`, `${l}%`);
+          el.style.setProperty(`--${key}-hue`, String(h));
+          el.style.setProperty(`--${key}-chroma`, String(c / 0.045));
+        }
+      }
+    } else {
+      el.setAttribute("data-tint", styles.themeType ?? "neutral");
+      el.removeAttribute("data-callout");
+
+      const customColorKeys = ["accent", "secondary"] as const;
+      for (const key of customColorKeys) {
+        const hex = styles.colors[key];
+        if (hex) {
+          el.setAttribute(`data-${key}`, "custom");
+          const { l, h, c } = hexToOklch(hex);
+          el.style.setProperty(`--${key}-l`, `${l}%`);
+          el.style.setProperty(`--${key}-hue`, String(h));
+          el.style.setProperty(`--${key}-chroma`, String(c / 0.045));
+        } else {
+          el.removeAttribute(`data-${key}`);
+          el.style.removeProperty(`--${key}-l`);
+          el.style.removeProperty(`--${key}-hue`);
+          el.style.removeProperty(`--${key}-chroma`);
+        }
+      }
+
+      el.style.removeProperty("--tint-l");
+      el.style.removeProperty("--tint-hue");
+      el.style.removeProperty("--tint-chroma");
+      el.style.removeProperty("--callout-l");
+      el.style.removeProperty("--callout-hue");
+      el.style.removeProperty("--callout-chroma");
+    }
+
+    const semanticColorMap = [
+      { themeKey: "success", cssPrefix: "success" },
+      { themeKey: "error", cssPrefix: "error" },
+      { themeKey: "information", cssPrefix: "info" },
+      { themeKey: "warning", cssPrefix: "warning" },
+    ] as const;
+
+    for (const { themeKey, cssPrefix } of semanticColorMap) {
+      const hex = styles.colors[themeKey];
+      if (hex) {
+        el.setAttribute(`data-${cssPrefix}`, "custom");
+        const { l, h, c } = hexToOklch(hex);
+        el.style.setProperty(`--${cssPrefix}-l`, `${l}%`);
+        el.style.setProperty(`--${cssPrefix}-hue`, String(h));
+        el.style.setProperty(`--${cssPrefix}-chroma`, String(c / 0.045));
+      } else {
+        el.removeAttribute(`data-${cssPrefix}`);
+        el.style.removeProperty(`--${cssPrefix}-l`);
+        el.style.removeProperty(`--${cssPrefix}-hue`);
+        el.style.removeProperty(`--${cssPrefix}-chroma`);
+      }
+    }
+  });
+
+  await themeState.locales.setLocale("en");
+  provideContext(
+    root,
+    TranslationContext,
+    createTranslationService(themeState.locales, {
+      async loadDefaultTranslations() {
+        return {};
+      },
+    }),
+  );
+
+  // Provide every blocks service (backed by mock adapters) so authored blocks
+  // have their service dependencies available in the dev preview.
+  provideMockServices(root, themeState);
+
+  void themeState.resolve("page", "/");
+
+  effect(() => {
+    const block = themeState.page.blocks.value.at(0);
+    untracked(() => {
+      if (block == null) {
+        document.querySelector("#app")?.replaceChildren();
+      } else {
+        document.querySelector("#app")?.replaceChildren(block.definition.render(block));
+      }
+    });
+  });
+}
+
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", () => void initializeTheme());
+} else {
+  void initializeTheme();
+}

package/templates/dev/vite/workflowOverlay.ts.liquid

@@ -0,0 +1,280 @@
+/**
+ * Workflow Overlay — ported from the reference theme's `lib/workflowOverlay.ts`
+ * (itself ported from customer-portal's WorkflowOverlay.vue).
+ *
+ * Renders the workflow UI in a modal or sidebar container using lit-html +
+ * Preact signals effects (consistent with the theme/blocks approach).
+ *
+ * Behaviour:
+ *   - Watches WorkflowService signals (state, currentStepInfo, isLoading)
+ *   - Determines layout (modal/sidebar) from the flow root block props
+ *   - Renders `<juo-workflow>` for step content
+ *   - Shows loading spinner, completed checkmark, error message
+ *   - Close button cancels the workflow
+ *
+ * Dev-only: lives in `vite/` and never enters the built blocks bundle.
+ */
+
+import { html, render, nothing } from "lit-html";
+import {
+  effect,
+  type WorkflowService,
+  type ThemeState,
+} from "@juo/blocks";
+
+// ============================================
+// SVG icons (inlined from customer portal)
+// ============================================
+
+const backArrowSvg = html`<svg width="18" height="8" viewBox="0 0 18 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.67634 7.71985C4.30281 8.09338 3.69719 8.09338 3.32366 7.71985L0.280146 4.67634C-0.093382 4.3028 -0.093382 3.69719 0.280146 3.32366L3.32366 0.280148C3.69719 -0.0933826 4.30281 -0.0933826 4.67634 0.280148C5.04987 0.653678 5.04987 1.25929 4.67634 1.63282L3.26564 3.04351H18V4.95648H3.26564L4.67634 6.36718C5.04987 6.74071 5.04987 7.34632 4.67634 7.71985Z" fill="currentColor"/>
+</svg>`;
+
+const closeSvg = html`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect opacity="0.5" width="24" height="24" rx="12" fill="#D9D9D9"/>
+  <path d="M16 14.959C15.9904 14.8523 15.94 14.7533 15.8488 14.6619L13.185 11.9945L15.8486 9.32734C15.9316 9.24429 15.9778 9.14942 15.9874 9.04271C15.9969 8.93601 15.967 8.84796 15.8978 8.77857L15.2117 8.09163C15.1424 8.02225 15.0545 7.99233 14.9479 8.00189C14.8414 8.01146 14.7466 8.05776 14.6637 8.14081L12.0001 10.808L9.3363 8.14065C9.25336 8.0576 9.15861 8.0113 9.05205 8.00174C8.94549 7.99218 8.85756 8.02209 8.78827 8.09148L8.10225 8.77842C8.03296 8.84781 8.00308 8.93585 8.01263 9.04256C8.02218 9.14926 8.06842 9.24414 8.15136 9.32718L10.8151 11.9945L8.1512 14.6621C8.05997 14.7534 8.00958 14.8524 8.00003 14.9591C7.99878 15.0575 8.0328 15.1414 8.10209 15.2108L8.78811 15.8978C8.85741 15.9672 8.94119 16.0012 9.03946 16C9.14602 15.9904 9.24491 15.94 9.33614 15.8486L12.0001 13.1811L14.6639 15.8484C14.7551 15.9398 14.854 15.9903 14.9605 15.9998C15.0588 16.0011 15.1426 15.967 15.2119 15.8976L15.8979 15.2107C15.9672 15.1413 16.0012 15.0574 16 14.959Z" fill="#2E3234"/>
+</svg>`;
+
+// ============================================
+// Shared styles (injected once)
+// ============================================
+
+const overlayStyles = `
+  @keyframes wf-spin {
+    to { transform: rotate(360deg); }
+  }
+  @keyframes wf-slide-in {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+  }
+  @keyframes wf-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  @keyframes wf-scale-in {
+    from { opacity: 0; transform: scale(0.95); }
+    to { opacity: 1; transform: scale(1); }
+  }
+`;
+
+// ============================================
+// Content templates
+// ============================================
+
+function loadingTemplate() {
+  return html`
+    <div style="display:flex;justify-content:center;align-items:center;min-height:200px">
+      <div style="width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:wf-spin 1s linear infinite"></div>
+    </div>
+  `;
+}
+
+function stepTemplate() {
+  return html`<div><juo-workflow></juo-workflow></div>`;
+}
+
+function completedTemplate() {
+  return html`
+    <div style="text-align:center;padding:24px 0">
+      <div style="width:48px;height:48px;margin:0 auto 16px;background:#22c55e;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px">&#x2713;</div>
+      <h3 style="font-weight:600;font-size:18px;line-height:21px;text-align:center">Completed successfully!</h3>
+    </div>
+  `;
+}
+
+function errorTemplate(errorMessage: string | null) {
+  return html`
+    <div style="text-align:center;padding:24px 0">
+      <p style="color:#ef4444;font-size:14px;line-height:22px">${errorMessage}</p>
+    </div>
+  `;
+}
+
+function closeButtonTemplate(handleClose: () => void) {
+  return html`
+    <div style="display:flex;justify-content:center;gap:24px;padding:16px 16px 24px">
+      <button
+        style="display:inline-flex;justify-content:center;align-items:center;border-radius:2px;font-size:14px;padding:8px 20px;border:1px solid #d1d5db;background:white;cursor:pointer;font-family:inherit"
+        @click=${handleClose}
+      >Close</button>
+    </div>
+  `;
+}
+
+// ============================================
+// Layout renderers
+// ============================================
+
+function renderSidebar(
+  contentTemplate: unknown,
+  terminalActions: unknown,
+  handleClose: () => void,
+) {
+  return html`
+    <style>${overlayStyles}</style>
+    <div style="position:fixed;inset:0;z-index:999999998;overflow:hidden">
+      <div style="width:100%;height:100%;overflow-x:hidden;overflow-y:auto">
+        <aside style="position:relative;min-height:100%;display:flex;flex-direction:column;margin-left:auto;width:520px;background:white;box-shadow:-7px 0 4px rgba(204,204,204,0.25);animation:wf-slide-in 0.3s ease-out">
+          <header style="position:sticky;top:0;padding:14px 24px;z-index:30;background:white;border-bottom:1px solid #d9d9d9">
+            <div style="display:flex">
+              <button style="display:block;max-width:80px;padding:8px 0;background:none;border:none;cursor:pointer" @click=${handleClose}>
+                ${backArrowSvg}
+                <span style="position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0">Close menu</span>
+              </button>
+            </div>
+          </header>
+          <div style="padding:14px 24px;flex-grow:1;display:flex;flex-direction:column">
+            ${contentTemplate}
+          </div>
+          ${terminalActions}
+        </aside>
+      </div>
+    </div>
+  `;
+}
+
+function renderModal(
+  contentTemplate: unknown,
+  terminalActions: unknown,
+  handleClose: () => void,
+  canAbort: boolean,
+  maxWidth: string,
+) {
+  return html`
+    <style>${overlayStyles}</style>
+    <div style="position:fixed;inset:0;z-index:999999999">
+      <div
+        style="position:fixed;inset:0;background:rgba(47,50,52,0.1);transition:opacity 0.3s ease-out;animation:wf-fade-in 0.3s ease-out"
+        @click=${handleClose}
+      ></div>
+      <div style="position:fixed;inset:0;z-index:10;overflow-y:auto">
+        <div style="display:flex;align-items:center;min-height:100%;justify-content:center;margin:auto;padding:0;text-align:center">
+          <div style="width:100%;overflow-y:auto;padding:16px 16px 20px;filter:drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1))">
+            <div
+              style="position:relative;overflow:hidden;border-radius:14px;background:white;text-align:left;padding:16px 0;margin:32px auto;width:100%;max-width:${maxWidth};animation:wf-scale-in 0.3s ease-out"
+              @click=${(e: Event) => e.stopPropagation()}
+            >
+              ${canAbort
+                ? html`
+                  <button
+                    style="position:absolute;top:10px;right:10px;background:none;border:none;cursor:pointer;padding:0"
+                    type="button"
+                    @click=${handleClose}
+                  >${closeSvg}</button>
+                `
+                : nothing}
+              <main style="padding:18px 32px 16px">
+                ${contentTemplate}
+              </main>
+              ${terminalActions}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// ============================================
+// Public API
+// ============================================
+
+/**
+ * Create and mount the workflow overlay.
+ * Appends a container element and reactively renders the overlay UI
+ * based on WorkflowService and ThemeState signals.
+ */
+export function createWorkflowOverlay(
+  container: HTMLElement,
+  workflowService: WorkflowService,
+  themeState: ThemeState,
+) {
+  const overlayEl = document.createElement("div");
+  overlayEl.id = "workflow-overlay";
+  container.appendChild(overlayEl);
+
+  // Cache layout so it persists after overlay blocks are cleared (on completion/error).
+  // Without caching, the layout would revert to "modal" default when blocks are emptied,
+  // causing a visible jump from sidebar → modal on flow completion.
+  let cachedLayout: "modal" | "sidebar" = "modal";
+
+  effect(() => {
+    const state = workflowService.state.value;
+    const stepInfo = workflowService.currentStepInfo.value;
+    const loading = workflowService.isLoading.value;
+    const overlayBlocks = themeState.overlay.blocks.value;
+
+    // Extract props from the flow root block
+    const flowRootBlock = overlayBlocks?.[0] ?? null;
+    const canAbort = Boolean(flowRootBlock?.props?.canAbort ?? true);
+    const layout = String(flowRootBlock?.props?.layout ?? "modal") as
+      | "modal"
+      | "sidebar";
+    const size = String(flowRootBlock?.props?.size ?? "md") as
+      | "sm"
+      | "md"
+      | "lg"
+      | "xl";
+
+    // Update cached layout when block is available
+    if (flowRootBlock) {
+      cachedLayout = layout;
+    }
+
+    // Reset cached layout when workflow returns to idle
+    if (state.status === "idle") {
+      cachedLayout = "modal";
+    }
+
+    // Map workflow size to modal max-width
+    const maxWidth = size === "xl" ? "576px" : "512px";
+
+    // Visible when the workflow is running AND we know the layout (blocks are set),
+    // or when showing a final state (completed/error).
+    // Gating on flowRootBlock during loading/active prevents the overlay from appearing
+    // before the layout is determined, which would cause a flash of the wrong container.
+    const isVisible = (() => {
+      const status = state.status;
+      if (status === "completed" || status === "error") return true;
+      if (status === "active" || status === "loading") {
+        return flowRootBlock != null;
+      }
+      return false;
+    })();
+
+    if (!isVisible) {
+      render(nothing, overlayEl);
+      return;
+    }
+
+    const handleClose = () => workflowService.cancel();
+
+    // Determine content based on workflow state
+    const content = (() => {
+      if (loading && !stepInfo) return loadingTemplate();
+      if (stepInfo) return stepTemplate();
+      if (state.status === "completed") return completedTemplate();
+      if (state.status === "error") return errorTemplate(state.error);
+      return nothing;
+    })();
+
+    // Show close button for terminal states (completed/error)
+    const terminalActions =
+      state.status === "error" || state.status === "completed"
+        ? closeButtonTemplate(handleClose)
+        : nothing;
+
+    // Render the appropriate layout
+    if (cachedLayout === "sidebar") {
+      render(
+        renderSidebar(content, terminalActions, handleClose),
+        overlayEl,
+      );
+    } else {
+      render(
+        renderModal(content, terminalActions, handleClose, canAbort, maxWidth),
+        overlayEl,
+      );
+    }
+  });
+}

package/templates/stories/{{block.clsName}}.stories.tsx.liquid

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { {{ block.clsName }} } from "../src/blocks/{{block.slug}}/{{ block.clsName }}";
 
+// The block's copy is rendered through <juo-text>, which resolves translations
+// at runtime and falls back to the values passed via args when rendered outside
+// a Blocks runtime (as in Storybook).
 const meta: Meta<typeof {{ block.clsName }}> = {
   title: "Blocks/{{ block.name }}",
   component: {{ block.clsName }},
@@ -15,10 +18,10 @@ type Story = StoryObj<typeof {{ block.clsName }}>;
 
 export const Default: Story = {
   args: {
-    title: "{{ block.framework | capitalize }} + Typescript",
+    title: "{{ block.framework | capitalize }} + TypeScript",
     subtitle: "Starter Block",
+    buttonVariant: "solid",
+    accentColor: "",
     initialCount: 0,
   },
 };
-
-

package/templates/tailwind/postcss.config.js.liquid

@@ -0,0 +1,6 @@
+import autoprefixer from "autoprefixer";
+import tailwindcss from "tailwindcss";
+
+export default {
+  plugins: [tailwindcss(), autoprefixer()],
+};

package/templates/tailwind/src/tailwind.css.liquid

@@ -1,4 +1,6 @@
-@import "tailwindcss";
 @import "@juo/customer-ui/design-tokens.css";
 @import "@juo/customer-ui/theme-modes.css";
-@import "@juo/customer-ui/tailwind-v4.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/templates/tailwind/tailwind.config.cjs.liquid

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [{ theme: { extend: require("@juo/customer-ui/tailwind-v3").theme } }],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: "var(--primary)",
+        muted: "var(--muted)",
+      },
+    },
+  },
+  plugins: [],
+};