@drip-apex/sdk 0.1.0

package/src/editor/types.ts

@@ -0,0 +1,92 @@
+import type { Mutation } from "../types";
+
+export type ActiveEditorSession = {
+  sid: string;
+  bearer: string;
+  expiresAt: string;
+  shopId: string;
+  experimentId: string;
+  experimentName?: string | null;
+  initialVariationId: string;
+  targetUrl: string;
+  targetOrigin: string;
+  variations: Array<{ id: string; name?: string | null; slug?: string | null }>;
+};
+
+export type EditorArtifacts = {
+  mutations: Mutation[];
+  customCss: string;
+  customJs: string;
+};
+
+export type EditorVariation = {
+  id: string;
+  name: string;
+  artifactHash: string;
+  reviewStatus: string | null;
+};
+
+export type EditorBrowserCommand =
+  | "navigate"
+  | "reload"
+  | "back"
+  | "forward"
+  | "click"
+  | "type"
+  | "wait_for"
+  | "snapshot"
+  | "screenshot"
+  | "eval_readonly"
+  | "console_logs"
+  | "network_logs"
+  | "network_probe"
+  | "current_url"
+  | "select_element"
+  | "apply_artifacts";
+
+export type ClaimedEditorCommand = {
+  commandId: string;
+  command: EditorBrowserCommand;
+  args: Record<string, unknown>;
+  expiresAt: string | null;
+};
+
+export type EditorSaveState = "idle" | "saving" | "saved" | "conflict" | "error";
+
+export type EditorDeviceState = "closed" | "loading" | "active" | "blocked";
+
+export type EditorState = {
+  variation: EditorVariation | null;
+  artifacts: EditorArtifacts;
+  artifactsEnabled: boolean;
+  pickerActive: boolean;
+  selectedElement: Element | null;
+  selectedSelector: string | null;
+  saveState: EditorSaveState;
+  saveMessage: string | null;
+  dock: "top" | "bottom";
+  canUndo: boolean;
+  canRedo: boolean;
+  jsApplied: boolean;
+  reloadRequired: boolean;
+  deviceState: EditorDeviceState;
+};
+
+export const EMPTY_EDITOR_ARTIFACTS: EditorArtifacts = {
+  mutations: [],
+  customCss: "",
+  customJs: "",
+};
+
+export function cloneArtifacts(artifacts: EditorArtifacts): EditorArtifacts {
+  return {
+    mutations: artifacts.mutations.map((mutation) => ({
+      ...mutation,
+      attribute: mutation.attribute ? { ...mutation.attribute } : undefined,
+      attributes: mutation.attributes ? { ...mutation.attributes } : undefined,
+      styles: mutation.styles ? { ...mutation.styles } : undefined,
+    })),
+    customCss: artifacts.customCss,
+    customJs: artifacts.customJs,
+  };
+}

package/src/editor/view-kit.ts

@@ -0,0 +1,162 @@
+// Shared visual kit for the on-site editor chrome. Values are the canonical
+// Apex Design System dark tokens (docs/design-system/tokens) redeclared on
+// :host because the shadow root resets inheritance with all:initial.
+
+export const ICONS = {
+  pointer: "M4 3l7.6 18 2.3-7.4L21 11.5zM13.9 13.9L19 19",
+  undo: "M9 14L4 9l5-5M4 9h10.5a5.5 5.5 0 015.5 5.5v0a5.5 5.5 0 01-5.5 5.5H11",
+  redo: "M15 14l5-5-5-5M20 9H9.5A5.5 5.5 0 004 14.5v0A5.5 5.5 0 009.5 20H13",
+  monitor: "M3 4h18a1 1 0 011 1v11a1 1 0 01-1 1H3a1 1 0 01-1-1V5a1 1 0 011-1zM8 21h8M12 17v4",
+  tablet: "M6 2h12a2 2 0 012 2v16a2 2 0 01-2 2H6a2 2 0 01-2-2V4a2 2 0 012-2zM12 18h.01",
+  phone: "M8 2h8a2 2 0 012 2v16a2 2 0 01-2 2H8a2 2 0 01-2-2V4a2 2 0 012-2zM11 18h2",
+  wifiOff: "M2 2l20 20M8.5 16.5a5 5 0 015.6-1M5 12.5a10 10 0 015.2-2.7M2 8.8a15 15 0 014.2-2.5M16.6 6.6A15 15 0 0122 8.8M12 20h.01",
+  braces: "M8 3H7a2 2 0 00-2 2v4a2 2 0 01-2 2 2 2 0 012 2v4a2 2 0 002 2h1M16 3h1a2 2 0 012 2v4a2 2 0 002 2 2 2 0 00-2 2v4a2 2 0 01-2 2h-1",
+  collapse: "M9 3v18M3 5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2zM13 10l3 2-3 2",
+  history: "M3 12a9 9 0 113 6.7M3 12H1.5M3 12l-1.8 2M12 7v5l3.5 2",
+  send: "M22 2L11 13M22 2l-7 20-4-9-9-4z",
+  stop: "M6 6h12v12H6z",
+  cursorBox: "M3 3h8M3 3v8M21 13v8h-8M9 9l7 7M16 9v7h-7",
+  check: "M5 13l4 4L19 7",
+  x: "M18 6L6 18M6 6l12 12",
+  chevD: "M6 9l6 6 6-6",
+  chevR: "M9 6l6 6-6 6",
+  refresh: "M3 12a9 9 0 0114.5-7L21 8M21 3v5h-5M21 12a9 9 0 01-14.5 7L3 16M3 21v-5h5",
+  external: "M15 3h6v6M21 3l-9 9M10 5H5a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2v-5",
+  code: "M16 18l6-6-6-6M8 6l-6 6 6 6",
+  clock: "M12 22a10 10 0 100-20 10 10 0 000 20zM12 7v5l3 2",
+  eye: "M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7zM12 15a3 3 0 100-6 3 3 0 000 6z",
+  alert: "M10.3 3.9L1.8 18a2 2 0 001.7 3h17a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0zM12 9v4M12 17h.01",
+  globe: "M12 2a10 10 0 100 20 10 10 0 000-20zM2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20",
+  play: "M6 4l14 8-14 8z",
+  dot: "M12 12h.01",
+} as const;
+
+export type IconName = keyof typeof ICONS;
+
+export function icon(name: IconName, size = 14, extra = ""): string {
+  return `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" ${extra}><path d="${ICONS[name]}"/></svg>`;
+}
+
+let operatorMarkId = 0;
+
+// The Apex Operator "O." monogram — stencil-cut O with a purple accent chip.
+export function operatorMark(size = 16, color = "#fff"): string {
+  const id = `apex-op-mark-${++operatorMarkId}`;
+  return `<svg width="${size}" height="${size}" viewBox="0 0 120 120" fill="none" aria-hidden="true" style="flex-shrink:0">
+    <defs><mask id="${id}"><rect width="120" height="120" fill="#fff"/><rect x="0" y="68" width="120" height="6" fill="#000"/></mask></defs>
+    <path d="M60 14 C92 14 106 36 106 60 C106 84 92 106 60 106 C28 106 14 84 14 60 C14 36 28 14 60 14 Z M60 38 C46 38 38 48 38 60 C38 72 46 82 60 82 C74 82 82 72 82 60 C82 48 74 38 60 38 Z" fill="${color}" fill-rule="evenodd" mask="url(#${id})"/>
+    <rect x="92" y="92" width="14" height="14" rx="2" fill="#5B29FF"/>
+  </svg>`;
+}
+
+export function esc(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+export const KIT_CSS = `
+:host {
+  --bg0:#08080A;--bg1:#0A0A0C;--raised:#141419;--raised-hi:#1A1A21;--inset:#0B0B0E;
+  --border:rgba(255,255,255,0.06);--border-hi:rgba(255,255,255,0.10);--border-px:rgba(255,255,255,0.14);
+  --text1:#FAFAFA;--text2:rgba(255,255,255,0.66);--text3:rgba(255,255,255,0.42);--text4:rgba(255,255,255,0.26);
+  --purple500:#5B29FF;--purple400:#7C54FF;--purple300:#9B6FFF;--purple200:#C8B4FF;
+  --purple-soft:rgba(91,41,255,0.14);--purple-bd:rgba(124,84,255,0.34);
+  --positive:#3DD68C;--warning:#FACC15;--negative:#EB5252;--negative-soft:#F39797;
+  all:initial;font-family:Inter,system-ui,sans-serif;color:var(--text1);letter-spacing:0;
+  position:fixed;inset:0;z-index:2147483647;pointer-events:none;font-size:12.5px;line-height:1.5;
+}
+*{box-sizing:border-box;letter-spacing:0;margin:0;padding:0}
+button,input,select,textarea{font:inherit;color:inherit;font-family:inherit}
+button{cursor:pointer;background:none;border:none}
+button:disabled{cursor:not-allowed}
+:is(button,textarea,input,a):focus-visible{outline:2px solid var(--purple400);outline-offset:2px}
+@keyframes ee-spin{to{transform:rotate(360deg)}}
+@keyframes ee-pulse{0%{transform:scale(0.7);opacity:0.9}100%{transform:scale(1.6);opacity:0}}
+@keyframes ee-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
+.ee-in{animation:ee-in 160ms ease-out}
+.spin{animation:ee-spin 1s linear infinite}
+@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
+
+/* Buttons */
+.btn{display:inline-flex;align-items:center;gap:7px;justify-content:center;padding:7px 12px;font-size:13px;font-weight:550;border-radius:8px;border:1px solid transparent;line-height:1.2;white-space:nowrap;transition:background 120ms,border-color 120ms,color 120ms;pointer-events:auto}
+.btn.sm{padding:5px 10px;font-size:12px}
+.btn:disabled{opacity:0.45}
+.btn.primary{background:var(--purple500);color:#fff;border-color:rgba(255,255,255,0.14)}
+.btn.soft{background:var(--purple-soft);color:var(--purple200);border-color:var(--purple-bd)}
+.btn.ghost{background:transparent;color:var(--text2);border-color:var(--border)}
+.btn.ghost:hover{background:var(--raised-hi);color:var(--text1)}
+.btn.bare{background:transparent;color:var(--text2);border-color:transparent}
+.btn.danger{background:rgba(235,82,82,0.14);color:var(--negative-soft);border-color:rgba(235,82,82,0.3)}
+.iconbtn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--text2);flex-shrink:0;transition:background 120ms,color 120ms;pointer-events:auto}
+.iconbtn:hover{background:var(--raised-hi);color:var(--text1)}
+.iconbtn.active{background:var(--purple-soft);color:var(--purple200);border-color:var(--purple-bd)}
+.iconbtn:disabled{opacity:0.4}
+.iconbtn.xs{width:22px;height:22px}
+
+/* Status dot */
+.dot{position:relative;width:7px;height:7px;flex-shrink:0;display:inline-block}
+.dot i{position:absolute;inset:0;border-radius:50%}
+.dot.ok i{background:var(--positive)}.dot.warn i{background:var(--warning)}.dot.err i{background:var(--negative)}.dot.purple i{background:var(--purple300)}
+.dot b{position:absolute;inset:-3px;border-radius:50%;border:1px solid currentColor}
+.dot.ok b{color:var(--positive)}.dot.warn b{color:var(--warning)}.dot.err b{color:var(--negative)}.dot.purple b{color:var(--purple300)}
+.dot b{animation:ee-pulse 1.4s ease-out infinite}
+
+/* Save chip */
+.save-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:550;padding:4px 9px;border-radius:7px;background:rgba(255,255,255,0.04);border:1px solid var(--border);white-space:nowrap}
+.save-chip.unsaved{color:var(--warning)}
+.save-chip.saving{color:var(--purple200)}
+.save-chip.saved{color:var(--positive)}
+.save-chip.failed,.save-chip.conflict{color:var(--negative-soft);background:rgba(235,82,82,0.10);border-color:rgba(235,82,82,0.25)}
+.save-chip .retry{border:none;background:rgba(255,255,255,0.1);color:#fff;font-size:11.5px;font-weight:600;border-radius:5px;padding:2px 7px;margin-left:2px;pointer-events:auto}
+
+/* Segmented control */
+.seg{display:inline-flex;background:var(--inset);border-radius:8px;padding:2px;gap:2px;border:1px solid var(--border);pointer-events:auto}
+.seg button{display:inline-flex;align-items:center;gap:6px;justify-content:center;padding:5px 11px;border-radius:6px;border:none;background:transparent;color:var(--text3);font-size:12px;font-weight:550;transition:background 120ms,color 120ms}
+.seg button.sm{padding:4px 8px}
+.seg button[aria-checked="true"]{background:var(--raised-hi);color:var(--text1);box-shadow:inset 0 0 0 1px var(--border-px)}
+
+/* Pills & chips */
+.draft-pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:rgba(250,204,21,0.10);border:1px solid rgba(250,204,21,0.3);font-size:11px;font-weight:600;color:var(--warning);white-space:nowrap}
+.session-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:550;color:var(--warning);padding:4px 9px;border-radius:7px;border:1px solid rgba(250,204,21,0.35);background:rgba(250,204,21,0.08);white-space:nowrap;font-variant-numeric:tabular-nums}
+.session-chip .extend{border:none;background:rgba(250,204,21,0.16);color:var(--warning);font-size:11.5px;font-weight:600;border-radius:5px;padding:2px 7px;pointer-events:auto}
+.session-note{font-size:11px;color:var(--text4);white-space:nowrap}
+.conn-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:550;white-space:nowrap;color:var(--text3)}
+.conn-chip.offline{color:var(--negative-soft)}
+.conn-chip.connecting{color:var(--warning)}
+.ctx-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;background:var(--purple-soft);border:1px solid var(--purple-bd);border-radius:8px;padding:5px 8px;font-size:11.5px;color:var(--purple200);font-weight:550}
+.ctx-chip .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ctx-chip .replace{border:none;background:rgba(255,255,255,0.08);color:var(--text2);font-size:10.5px;font-weight:600;border-radius:5px;padding:2px 7px;pointer-events:auto}
+.ctx-chip .clear{border:none;background:none;color:var(--text3);padding:2px;display:inline-flex;pointer-events:auto}
+
+/* Fields */
+.field{width:100%;background:var(--inset);color:var(--text1);border:1px solid var(--border-hi);border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.5;outline:none;resize:vertical;pointer-events:auto}
+.field::placeholder{color:rgba(255,255,255,0.28)}
+.field.code{white-space:pre;font-variant-numeric:tabular-nums;min-height:150px}
+.flabel{display:block;font-size:11.5px;font-weight:550;color:var(--text3);margin-bottom:5px}
+.fhint{display:block;font-size:11px;color:var(--text4);margin-top:4px}
+
+/* Banners */
+.banner{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;color:var(--text1);font-size:12.5px;box-shadow:0 12px 32px rgba(0,0,0,0.4);pointer-events:auto;max-width:560px}
+.banner .body{flex:1;min-width:0}
+.banner.info{background:linear-gradient(0deg,rgba(91,41,255,0.16),rgba(91,41,255,0.16)),var(--bg1);border:1px solid var(--purple-bd)}
+.banner.info svg{color:var(--purple200)}
+.banner.warn{background:linear-gradient(0deg,rgba(250,204,21,0.10),rgba(250,204,21,0.10)),var(--bg1);border:1px solid rgba(250,204,21,0.35)}
+.banner.warn svg{color:var(--warning)}
+.banner.error{background:linear-gradient(0deg,rgba(235,82,82,0.12),rgba(235,82,82,0.12)),var(--bg1);border:1px solid rgba(235,82,82,0.35)}
+.banner.error svg{color:var(--negative-soft)}
+
+/* Modal */
+.modal-backdrop{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(5,5,8,0.55);backdrop-filter:blur(3px);pointer-events:auto}
+.modal{width:430px;max-width:calc(100vw - 40px);background:var(--bg1);border:1px solid var(--border-px);border-radius:14px;box-shadow:0 32px 80px rgba(0,0,0,0.55);overflow:hidden;color:var(--text1)}
+.modal .m-head{display:flex;gap:10px;align-items:flex-start;padding:18px 18px 0}
+.modal .m-icon{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,0.05);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
+.modal .m-icon.warn{color:var(--warning)}.modal .m-icon.purple{color:var(--purple300)}.modal .m-icon.ok{color:var(--positive)}
+.modal .m-title{font-size:15px;font-weight:600;letter-spacing:-0.015em;padding-top:4px}
+.modal .m-body{padding:12px 18px 4px;font-size:13px;line-height:1.6;color:var(--text2)}
+.modal .m-body p{margin:0}
+.modal .m-body p+p{margin-top:10px}
+.modal .m-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px 18px}
+`;