@algorisys/yappydraw 0.8.253

package/chunks/turntable-ai-Bfq-oSsD.js

@@ -0,0 +1,120 @@
+import { s as A, b as t, e as I, t as $, c as S, p as R, d as k, f as v, g as M } from "./index-Bm3Inzn8.js";
+import { g as x, l as j, c as D } from "./ai-providers-CycU8sO1.js";
+import { p as O } from "./image-utils-CJQBaGoQ.js";
+function P() {
+  return [
+    'You are a vector-art "turntable" assistant for YappyDraw.',
+    "You receive a raster snapshot of a flat 2D vector illustration plus a target 3D viewpoint.",
+    "Redraw the SAME subject as it would look rotated to that viewpoint, as clean 2D vector art,",
+    "and return it as a single self-contained SVG document.",
+    "",
+    "Rules:",
+    "- Output ONLY the SVG markup. No prose, no markdown code fences, no explanation.",
+    '- Use <path d="…"> elements with an explicit fill (and a stroke where the original has an outline).',
+    "  Keep the original colour palette.",
+    "- Keep it recognizably the SAME object — same style and colours — just seen from the new angle.",
+    "- Invent parts that become newly visible from the rotation (a limb, a side, the far face) so the",
+    "  result reads as a coherent solid object, not a flat card.",
+    "- Prefer a modest number of smooth paths over thousands of tiny segments.",
+    "- Give the <svg> a viewBox that tightly frames the art."
+  ].join(`
+`);
+}
+function T(s) {
+  if (!s) return null;
+  const o = s.match(/```(?:svg|xml|html)?\s*([\s\S]*?)```/i), i = (o ? o[1] : s).match(/<svg[\s\S]*<\/svg>/i);
+  return i ? i[0] : null;
+}
+async function G(s, o) {
+  const e = A.elements.find((a) => a.id === s);
+  if (!e) return { success: !1, error: "Element not found" };
+  const i = j(), c = i.activeProvider, l = i.providers[c], r = x(c);
+  if (!r)
+    return t("Add an API key in AI Settings first", "error"), { success: !1, error: "No API key" };
+  const h = Math.round(o?.yaw ?? e.turntable?.yaw ?? 0), m = Math.round(o?.pitch ?? e.turntable?.pitch ?? 0), n = Math.max(8, Math.round(Math.max(e.width, e.height) * 0.1)), p = I(e.x - n, e.y - n, e.width + n * 2, e.height + n * 2, "tt-src", 2, !1);
+  if (!p)
+    return t("Could not rasterize the selection", "error"), { success: !1, error: "rasterize failed" };
+  const { base64: g, mediaType: f } = O(p), b = `The attached image is a 2D vector drawing. Redraw it as it would appear rotated ${h}° about the vertical axis${m ? ` and tilted ${m}° about the horizontal axis` : ""}, turning the object in 3D toward that viewpoint. Invent any parts that become newly visible so it reads as a coherent solid. Return ONLY a single <svg>…</svg> of clean vector paths, preserving the original colours.`;
+  t(`Reconstructing at ${h}°…`, "info");
+  let u;
+  try {
+    u = await D({
+      provider: c,
+      model: l.model,
+      apiKey: r,
+      systemPrompt: P(),
+      userPrompt: b,
+      images: [{ base64: g, mediaType: f }],
+      temperature: 0.2,
+      maxTokens: 8192
+    });
+  } catch (a) {
+    return t(`AI request failed: ${a.message}`, "error"), { success: !1, error: a.message };
+  }
+  if (!u.success || !u.content)
+    return t(u.error ?? "AI request failed", "error"), { success: !1, error: u.error ?? "no content" };
+  const w = T(u.content);
+  if (!w)
+    return t("AI did not return usable SVG", "error"), { success: !1, error: "no svg" };
+  let d;
+  try {
+    d = S(w, { x: e.x + e.width + 40, y: e.y, targetWidth: e.width });
+  } catch (a) {
+    return t(`Could not parse AI SVG: ${a.message}`, "error"), { success: !1, error: a.message };
+  }
+  if (!d.length)
+    return t("AI SVG had no drawable paths", "error"), { success: !1, error: "empty svg" };
+  R();
+  const y = d.map((a) => a.id);
+  return k(() => {
+    v("elements", (a) => [...a, ...d]), v("selection", y);
+  }), M(), t(`AI reconstruction inserted (${d.length} path${d.length > 1 ? "s" : ""})`, "success"), { success: !0, ids: y };
+}
+async function z(s, o) {
+  try {
+    const e = await fetch("https://api.openai.com/v1/images/edits", {
+      method: "POST",
+      headers: { Authorization: `Bearer ${o}` },
+      body: s
+    });
+    if (!e.ok) {
+      const l = await e.text().catch(() => "");
+      let r = "";
+      try {
+        r = JSON.parse(l).error?.message || "";
+      } catch {
+        r = l.slice(0, 200);
+      }
+      return { b64: null, error: `OpenAI image error ${e.status}: ${r}` };
+    }
+    const c = (await e.json()).data?.[0]?.b64_json;
+    return c ? { b64: c } : { b64: null, error: "OpenAI returned no image data" };
+  } catch (e) {
+    return { b64: null, error: `Network error calling OpenAI Images: ${e?.message || e}` };
+  }
+}
+async function K(s, o) {
+  const e = A.elements.find((b) => b.id === s);
+  if (!e) return { success: !1, error: "Element not found" };
+  const i = x("openai");
+  if (!i)
+    return t("AI Reimagine needs an OpenAI API key (set it in AI Settings)", "error"), { success: !1, error: "No OpenAI key" };
+  const c = Math.round(o?.yaw ?? e.turntable?.yaw ?? 0), l = Math.round(o?.pitch ?? e.turntable?.pitch ?? 0), r = Math.max(8, Math.round(Math.max(e.width, e.height) * 0.1)), h = I(e.x - r, e.y - r, e.width + r * 2, e.height + r * 2, "tt-src", 2, !1);
+  if (!h)
+    return t("Could not rasterize the selection", "error"), { success: !1, error: "rasterize failed" };
+  t(`Reimagining at ${c}°…`, "info");
+  const m = await (await fetch(h)).blob(), n = new FormData();
+  n.append("model", "gpt-image-1"), n.append("image", new File([m], "image.png", { type: "image/png" })), n.append(
+    "prompt",
+    `Redraw this subject as it would look rotated ${c}° about the vertical axis${l ? ` and tilted ${l}° about the horizontal axis` : ""}, turning the object in 3D toward that viewpoint. Invent any parts that become newly visible so it reads as a coherent solid object. Keep the same subject, flat illustration style, and colours, on a clean white or transparent background.`
+  ), n.append("size", "auto");
+  const { b64: p, error: g } = await z(n, i);
+  if (!p)
+    return t(g || "AI Reimagine failed", "error"), { success: !1, error: g || "no image" };
+  const f = await $(s, `data:image/png;base64,${p}`, { colors: 12 });
+  return f.length ? { success: !0, ids: f } : { success: !1, error: "trace produced no paths" };
+}
+export {
+  G as reconstructTurntableAI,
+  K as reconstructTurntableAIImage
+};

package/chunks/yappy-NspTXSPk.css

@@ -0,0 +1 @@
+.toast{position:fixed;bottom:var(--toast-bottom, 24px);left:50%;transform:translate(-50%);background:var(--bg-panel);color:var(--text-primary);padding:12px 16px;border-radius:8px;box-shadow:0 4px 20px #00000026;display:flex;align-items:center;gap:12px;z-index:10010;-webkit-user-select:none;user-select:none;font-size:14px;font-weight:500;border:1px solid var(--border-color);animation:slideUp .3s cubic-bezier(.16,1,.3,1);min-width:300px;max-width:90vw;pointer-events:none}.toast-success{border-left:4px solid #10b981}.toast-error{border-left:4px solid #ef4444}.toast-info{border-left:4px solid #3b82f6}.toast-icon{display:flex;align-items:center;justify-content:center}.toast-success .toast-icon{color:#10b981}.toast-error .toast-icon{color:#ef4444}.toast-info .toast-icon{color:#3b82f6}.toast-message{flex:1}.toast-close{pointer-events:auto;background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background .2s}.toast-close:hover{background:var(--bg-hover);color:var(--text-primary)}@keyframes slideUp{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.toast-loading{border-left:4px solid #f59e0b}.toast-loading .toast-icon{color:#f59e0b}.spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.quick-toolbar{position:fixed;z-index:10000;pointer-events:auto}.qt-collapsed-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-panel, #ffffff);border:2px solid var(--primary-color, #3b82f6);border-radius:50%;color:var(--primary-color, #3b82f6);cursor:pointer;box-shadow:0 2px 8px #00000026;transition:all .2s;padding:0}.qt-collapsed-icon:hover{background:var(--primary-color, #3b82f6);color:#fff;transform:scale(1.1);box-shadow:0 4px 12px #3b82f659}.qt-collapse-btn{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:1px solid var(--border-color, #e5e7eb);border-radius:4px;color:var(--primary-color, #3b82f6);cursor:pointer;padding:0;flex-shrink:0;transition:all .15s}.qt-collapse-btn:hover{background:var(--primary-color, #3b82f6);color:#fff;border-color:var(--primary-color, #3b82f6)}.quick-toolbar-content{display:flex;align-items:center;gap:4px;padding:6px;background:var(--bg-panel, #ffffff);border:2px solid var(--primary-color, #3b82f6);border-radius:8px;box-shadow:0 4px 12px #00000026}.quick-props-section{display:flex;align-items:center;gap:4px}.qt-divider{width:1px;height:24px;background:var(--border-color, #e5e7eb);margin:0 4px;flex-shrink:0}.color-dot-wrapper{position:relative}.color-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--border-color, #d1d5db);cursor:pointer;transition:transform .15s,border-color .15s;flex-shrink:0}.color-dot:hover{transform:scale(1.15);border-color:var(--primary-color, #3b82f6)}.color-dot.active{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 2px #3b82f64d}.color-dot.transparent{background:repeating-conic-gradient(#ccc 0% 25%,transparent 0% 50%) 50% / 8px 8px}.color-popover{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--bg-panel, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;padding:8px;box-shadow:0 4px 16px #0003;z-index:10002;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;min-width:110px}.color-swatch{width:22px;height:22px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s}.color-swatch:hover{transform:scale(1.15);border-color:var(--primary-color, #3b82f6)}.color-swatch.selected{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 1px var(--primary-color, #3b82f6)}.color-popover-custom{grid-column:1 / -1;display:flex;align-items:center;gap:4px;margin-top:4px;padding-top:4px;border-top:1px solid var(--border-color, #e5e7eb)}.color-popover-custom input[type=color]{width:22px;height:22px;border:none;padding:0;cursor:pointer;border-radius:4px}.color-popover-custom span{font-size:10px;color:var(--text-secondary, #6b7280)}.qt-icon-btn{width:26px;height:26px;background:transparent;border:1px solid transparent;border-radius:4px;color:var(--text-secondary, #6b7280);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;padding:0;flex-shrink:0}.qt-icon-btn:hover{background:var(--btn-hover, #f3f4f6);color:var(--text-primary, #374151)}.qt-icon-btn.active{background:var(--primary-color, #3b82f6);color:#fff;border-color:var(--primary-color, #3b82f6)}.qt-icon-btn svg{display:block;width:16px;height:16px}.qt-icon-btn:disabled,.qt-icon-btn.qt-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.qt-icon-select{display:flex;align-items:center;gap:2px}.qt-collapsed-select{position:relative}.qt-collapsed-trigger{position:relative;padding-right:10px!important;min-width:30px}.qt-collapsed-chevron{position:absolute;bottom:2px;right:1px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid currentColor;opacity:.5}.qt-collapsed-trigger:hover .qt-collapsed-chevron{opacity:.8}.qt-collapsed-popover{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--bg-panel, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;padding:6px;box-shadow:0 4px 16px #0003;z-index:10002;display:flex;align-items:center;gap:2px;white-space:nowrap}.qt-collapsed-popover .qt-icon-btn{width:28px;height:28px}.qt-preset-select{position:relative}.qt-preset-trigger{display:flex;align-items:center;gap:4px;height:26px;padding:0 16px 0 8px;background:transparent;border:1px solid var(--border-color, #e5e7eb);border-radius:4px;color:var(--text-primary, #374151);cursor:pointer;font-size:11px;white-space:nowrap;transition:all .15s;position:relative}.qt-preset-trigger:hover{background:var(--btn-hover, #f3f4f6);border-color:var(--primary-color, #3b82f6)}.qt-preset-trigger.active{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 1px var(--primary-color, #3b82f6)}.qt-preset-label{max-width:80px;overflow:hidden;text-overflow:ellipsis}.qt-preset-popover{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--bg-panel, #ffffff);border:1px solid var(--border-color, #e5e7eb);border-radius:8px;padding:4px;box-shadow:0 4px 16px #0003;z-index:10002;min-width:130px;max-height:280px;overflow-y:auto}.qt-preset-category{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary, #6b7280);padding:6px 8px 2px}.qt-preset-option{display:block;width:100%;padding:5px 8px;background:transparent;border:none;border-radius:4px;color:var(--text-primary, #374151);font-size:12px;text-align:left;cursor:pointer;transition:background .1s}.qt-preset-option:hover{background:var(--btn-hover, #f3f4f6)}.qt-preset-option.active{background:var(--primary-color, #3b82f6);color:#fff}.qt-mini-slider{display:flex;align-items:center;gap:4px;width:70px;flex-shrink:0}.qt-mini-slider input[type=range]{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:var(--border-color, #d1d5db);border-radius:2px;outline:none;cursor:pointer}.qt-mini-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--primary-color, #3b82f6);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px #0003}.qt-mini-slider input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--primary-color, #3b82f6);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px #0003}.qt-mini-slider-value{font-size:10px;color:var(--text-secondary, #6b7280);min-width:18px;text-align:right}.qt-mini-slider-value.editable{cursor:text;border-radius:3px;padding:1px 2px;margin:-1px -2px}.qt-mini-slider-value.editable:hover{background:var(--hover-bg, rgba(0, 0, 0, .06));color:var(--text-primary, #111827)}.qt-mini-slider-input{width:30px;min-width:30px;font-size:10px;text-align:right;padding:1px 2px;border:1px solid var(--primary-color, #3b82f6);border-radius:3px;background:var(--surface-color, #fff);color:var(--text-primary, #111827);outline:none;-moz-appearance:textfield;appearance:textfield}.qt-mini-slider-input::-webkit-outer-spin-button,.qt-mini-slider-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.qt-action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:none;border-radius:6px;color:var(--text-secondary, #6b7280);cursor:pointer;transition:all .15s;padding:0;flex-shrink:0}.qt-action-btn:hover{background:var(--btn-hover, #f3f4f6);color:var(--text-primary, #374151)}.qt-action-btn.active{background:var(--primary-color, #3b82f6);color:#fff}.qt-action-btn svg{display:block;color:inherit}.qt-layout-dropdown{position:absolute;top:calc(100% + 4px);left:50%;transform:translate(-50%);display:flex;gap:4px;padding:6px;background:var(--bg-panel, #ffffff);border:2px solid var(--primary-color, #3b82f6);border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:10001}.qt-layout-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:0;background:var(--bg-secondary, #f9fafb);border:1px solid var(--border-color, #e5e7eb);border-radius:6px;color:var(--text-secondary, #6b7280);cursor:pointer;transition:all .15s;flex-shrink:0}.qt-layout-btn:hover{background:var(--btn-hover, #f3f4f6);border-color:var(--primary-color, #3b82f6)}.qt-layout-btn svg{display:block;color:inherit}@media(max-width:768px){.quick-toolbar-content{padding:8px;gap:6px}.qt-action-btn{width:40px;height:40px}.qt-icon-btn{width:32px;height:32px}.color-dot{width:28px;height:28px}}.qt-floating{z-index:10070}.tool-options-bar{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;color:var(--text-primary);overflow-x:auto;scrollbar-width:none}.tool-options-bar::-webkit-scrollbar{height:0}.tob-title{font-weight:600;color:#6366f1}.tob-label{color:var(--text-secondary)}.tob-count{color:var(--text-secondary);min-width:68px}.tob-hint{color:var(--text-secondary);font-size:11px}.tob-sep{width:1px;height:16px;background:var(--border-color)}.tool-options-bar>button{font-size:11px;font-weight:600;color:#4f46e5;background:transparent;border:1px solid #4f46e5;border-radius:6px;padding:2px 8px;cursor:pointer}.tool-options-bar>button:hover:not(:disabled){background:#6366f11f;color:#3730a3}.tool-options-bar>button.is-on{background:#4f46e5;color:#fff}.tool-options-bar>button.is-on:hover:not(:disabled){background:#4338ca;color:#fff}[data-theme=dark] .tool-options-bar>button:not(.is-on),[data-theme=focus] .tool-options-bar>button:not(.is-on){color:#a5b4fc;border-color:#818cf8}[data-theme=dark] .tool-options-bar>button:hover:not(:disabled),[data-theme=focus] .tool-options-bar>button:hover:not(:disabled){background:#818cf838;color:#c7d2fe}[data-theme=dark] .tool-options-bar>button.is-on:hover:not(:disabled),[data-theme=focus] .tool-options-bar>button.is-on:hover:not(:disabled){background:#a5b4fc;color:#1e1b4b}.tool-options-bar>button:disabled{opacity:.4;cursor:default;border-color:var(--border-color);color:var(--text-secondary)}.tob-close{border:none!important;color:var(--text-secondary)!important;font-size:13px!important}.tob-controls{display:flex;align-items:center;gap:4px}.support-overlay{position:fixed;inset:0;z-index:3500;background:#00000080;display:flex;align-items:center;justify-content:center;padding:20px;animation:support-fade .15s ease-out}@keyframes support-fade{0%{opacity:0}to{opacity:1}}.support-modal{width:420px;max-width:100%;max-height:80vh;display:flex;flex-direction:column;background:var(--bg-panel, #1e1e1e);color:var(--text-primary, #f2f2f2);border:1px solid var(--border-color, #444);border-radius:14px;box-shadow:0 16px 48px #0006;overflow:hidden;animation:support-pop .18s ease-out}@keyframes support-pop{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.support-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-color, #444)}.support-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--text-primary, #fff)}.support-title svg{color:#ef4444}.support-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:var(--text-secondary, #999);cursor:pointer}.support-close:hover{background:var(--bg-secondary, #2d2d2d);color:var(--text-primary, #fff)}.support-close svg{flex:0 0 auto;width:18px;height:18px}.support-body{padding:16px;overflow-y:auto}.support-lede{margin:0 0 14px;font-size:13px;line-height:1.55;color:var(--text-secondary, #bbb)}.support-links{display:flex;flex-direction:column;gap:8px}.support-link{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border:1px solid var(--border-color, #444);border-radius:10px;background:var(--bg-secondary, #2d2d2d);text-decoration:none;color:inherit;transition:border-color .12s ease,transform .12s ease}.support-link:hover{border-color:var(--primary-color, #3b82f6);transform:translateY(-1px)}.support-link.primary{border-color:#4338ca73;background:#4338ca12}.support-link.primary:hover{border-color:var(--logo-accent, #4338ca);background:#4338ca1f}.support-link.primary .support-link-label{color:var(--logo-accent, #4338ca)}[data-theme=dark] .support-link.primary .support-link-label,[data-theme=focus] .support-link.primary .support-link-label{color:#a5b4fc}.support-link-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-primary, #fff)}.support-link-label svg{color:var(--text-secondary, #999);flex:0 0 auto;width:14px;height:14px}.support-link-note{font-size:11.5px;line-height:1.45;color:var(--text-secondary, #999)}.support-foot-note{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-secondary, #999)}@media(max-width:480px){.support-overlay{padding:12px}.support-modal{width:100%}}.whatsnew-overlay{position:fixed;inset:0;z-index:3500;background:#00000080;display:flex;align-items:center;justify-content:center;padding:20px;animation:whatsnew-fade .15s ease-out}@keyframes whatsnew-fade{0%{opacity:0}to{opacity:1}}.whatsnew-modal{width:460px;max-width:100%;max-height:80vh;display:flex;flex-direction:column;background:var(--bg-panel, #1e1e1e);color:var(--text-primary, #f2f2f2);border:1px solid var(--border-color, #444);border-radius:14px;box-shadow:0 16px 48px #0006;overflow:hidden;animation:whatsnew-pop .18s ease-out}@keyframes whatsnew-pop{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.whatsnew-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-color, #444)}.whatsnew-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--text-primary, #fff)}.whatsnew-title svg{color:var(--primary-color, #3b82f6)}.whatsnew-ver{font-size:11px;font-weight:500;color:var(--text-secondary, #999);background:var(--bg-secondary, #2d2d2d);border:1px solid var(--border-color, #444);padding:1px 6px;border-radius:999px}.whatsnew-close{display:inline-flex;padding:5px;background:transparent;border:none;border-radius:6px;color:var(--text-secondary, #999);cursor:pointer;transition:background .1s,color .1s}.whatsnew-close:hover{background:var(--bg-secondary, #333);color:var(--text-primary, #fff)}.whatsnew-body{overflow-y:auto;padding:8px 16px 4px}.whatsnew-entry{padding:12px 0;border-bottom:1px solid var(--border-color, #333)}.whatsnew-entry:last-child{border-bottom:none}.whatsnew-entry-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}.whatsnew-badge{font-size:11px;font-weight:600;color:var(--text-secondary, #aaa);background:var(--bg-secondary, #2d2d2d);border:1px solid var(--border-color, #444);padding:1px 7px;border-radius:999px}.whatsnew-badge.current{color:#fff;background:#2563eb;border-color:#2563eb}.whatsnew-date{font-size:11px;color:var(--text-secondary, #888)}.whatsnew-list{margin:0;padding-left:18px}.whatsnew-list li{font-size:13.5px;line-height:1.5;color:var(--text-primary, #e5e7eb);margin:2px 0}.whatsnew-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--border-color, #444)}.whatsnew-foot-note{font-size:12px;color:var(--text-secondary, #999)}.whatsnew-refresh{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--bg-secondary, #2d2d2d);color:var(--text-primary, #e5e7eb);border:1px solid var(--border-color, #444);border-radius:7px;font-size:12.5px;cursor:pointer;transition:background .1s}.whatsnew-refresh:hover{background:color-mix(in srgb,var(--bg-secondary, #2d2d2d) 88%,var(--text-primary, #e5e7eb))}@media(max-width:520px){.whatsnew-modal{width:100%;max-height:88vh}}.about-overlay{position:fixed;inset:0;z-index:3500;background:#00000080;display:flex;align-items:center;justify-content:center;padding:20px;animation:about-fade .15s ease-out}@keyframes about-fade{0%{opacity:0}to{opacity:1}}.about-modal{width:400px;max-width:100%;max-height:85vh;display:flex;flex-direction:column;background:var(--bg-panel, #1e1e1e);color:var(--text-primary, #f2f2f2);border:1px solid var(--border-color, #444);border-radius:14px;box-shadow:0 16px 48px #0006;overflow:hidden;animation:about-pop .18s ease-out}@keyframes about-pop{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.about-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-color, #444)}.about-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}.about-title svg{flex:0 0 auto;width:18px;height:18px;color:var(--primary-color, #3b82f6)}.about-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:var(--text-secondary, #999);cursor:pointer}.about-close:hover{background:var(--bg-secondary, #2d2d2d);color:var(--text-primary, #fff)}.about-close svg{flex:0 0 auto;width:18px;height:18px}.about-body{padding:18px 16px 16px;overflow-y:auto}.about-brand{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.about-wordmark{display:inline-flex;font-size:22px;font-weight:800;letter-spacing:-.5px;line-height:1}.about-wordmark-yappy{color:var(--text-primary)}.about-wordmark-draw{color:var(--logo-accent, #4338ca)}.about-version{padding:2px 7px;border:1px solid var(--border-color, #444);border-radius:999px;background:var(--bg-secondary, #2d2d2d);color:var(--text-secondary, #999);font-size:11px;font-weight:600;cursor:pointer}.about-version:hover{color:var(--text-primary, #fff);border-color:var(--primary-color, #3b82f6)}.about-tagline{margin:0 0 16px;font-size:12.5px;line-height:1.55;color:var(--text-secondary, #bbb)}.about-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0 0 16px;font-size:12.5px}.about-facts dt{color:var(--text-secondary, #999);white-space:nowrap}.about-facts dd{margin:0;color:var(--text-primary, #fff);font-weight:600}.about-artists{padding-top:14px;border-top:1px solid var(--border-color, #444);margin-bottom:4px}.about-artists-head{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text-secondary, #999);margin-bottom:5px}.about-artists-note{margin:0 0 9px;font-size:11.5px;line-height:1.5;color:var(--text-secondary, #999)}.about-artist-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.about-artist-list a{display:flex;align-items:baseline;gap:7px;padding:6px 9px;border:1px solid var(--border-color, #444);border-radius:8px;background:var(--bg-secondary, #2d2d2d);text-decoration:none;color:inherit;transition:border-color .12s ease}.about-artist-list a:hover{border-color:var(--primary-color, #3b82f6)}.about-artist-name{font-size:12.5px;font-weight:600;color:var(--text-primary, #fff)}.about-artist-handle{font-size:11.5px;color:var(--text-secondary, #999)}.about-links{display:flex;flex-direction:column;gap:5px;padding-top:14px;border-top:1px solid var(--border-color, #444)}.about-links a{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--primary-color, #3b82f6);text-decoration:none}.about-links a:hover{text-decoration:underline}.about-links svg{flex:0 0 auto;width:13px;height:13px;opacity:.7}.about-revenue{display:flex;align-items:flex-start;gap:7px;margin:14px 0 0;padding:10px 11px;border:1px solid rgba(239,68,68,.28);border-radius:9px;background:#ef444412;font-size:11.5px;line-height:1.55;color:var(--text-primary, #fff)}.about-revenue svg{flex:0 0 auto;width:13px;height:13px;margin-top:2px;color:#ef4444;fill:#ef444440}.about-privacy{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-secondary, #999)}@media(max-width:480px){.about-overlay{padding:12px}.about-modal{width:100%}}.settings-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000}.settings-modal{background:var(--bg-panel);color:var(--text-primary);padding:24px;border-radius:12px;width:720px;box-sizing:border-box;max-width:94vw;max-height:80vh;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px}.settings-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-shrink:0}.settings-search{display:flex;align-items:center;gap:6px;flex:1;max-width:260px;margin-left:auto;padding:5px 8px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-input, var(--bg-secondary));color:var(--text-secondary)}.settings-search input{flex:1;min-width:0;border:none;background:transparent;color:var(--text-primary);font-size:.85rem;outline:none}.settings-search-clear{display:flex;align-items:center;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;padding:0}.settings-search-clear:hover{color:var(--text-primary)}.settings-panes{display:flex;gap:20px;min-height:0;flex:1}.settings-rail{display:flex;flex-direction:column;gap:2px;width:172px;flex-shrink:0;border-right:1px solid var(--border-color);padding-right:12px;overflow-y:auto}.settings-rail-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:none;border-radius:6px;background:transparent;color:var(--text-secondary);font-size:.86rem;text-align:left;cursor:pointer;white-space:nowrap}.settings-rail-item:hover{background:var(--btn-hover);color:var(--text-primary)}.settings-rail-item.active{background:var(--primary-light);color:var(--text-primary);font-weight:600}.settings-body{flex:1;min-width:0;overflow-y:auto;display:flex;flex-direction:column;gap:20px;padding-right:4px}.settings-empty{color:var(--text-secondary);font-size:.85rem;margin:0}@media(max-width:640px){.settings-panes{flex-direction:column;gap:12px}.settings-rail{flex-direction:row;width:auto;border-right:none;border-bottom:1px solid var(--border-color);padding-right:0;padding-bottom:8px;overflow-x:auto}.settings-search{max-width:none}}.settings-header h3{margin:0;font-size:1.2rem}.settings-section{display:flex;flex-direction:column;gap:12px}.settings-section-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin:0}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-row label{font-size:.85rem;color:var(--text-primary);white-space:nowrap}.settings-row-note{margin-top:-6px}.settings-row-note label{font-size:.78rem;line-height:1.45;color:var(--text-secondary);white-space:normal}.settings-row select,.settings-row input[type=number]{padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-panel);color:var(--text-primary);font-size:.85rem;min-width:160px}.settings-row select:focus,.settings-row input[type=number]:focus{outline:none;border-color:var(--primary-color)}.settings-row input[type=color]{width:36px;height:30px;border:1px solid var(--border-color);border-radius:6px;padding:2px;cursor:pointer;background:var(--bg-panel)}.settings-color-group{display:flex;align-items:center;gap:8px;min-width:160px}.settings-color-group span{font-size:.8rem;color:var(--text-secondary)}.settings-row input[type=range]{min-width:120px;accent-color:var(--primary-color)}.settings-range-group{display:flex;align-items:center;gap:8px;min-width:160px}.settings-range-group span{font-size:.8rem;color:var(--text-secondary);min-width:30px;text-align:right}.settings-footer{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid var(--border-color)}.settings-reset-btn{padding:6px 14px;border:1px solid var(--border-color);border-radius:6px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.8rem}.settings-reset-btn:hover{background:var(--btn-hover);color:var(--text-primary)}.settings-close-btn{padding:6px 18px;border:none;border-radius:6px;background:var(--btn-primary-bg);color:var(--btn-primary-fg);cursor:pointer;font-size:.85rem}.settings-close-btn:hover{background:var(--btn-primary-bg-hover)}.settings-close-btn:focus-visible{outline:2px solid var(--btn-primary-bg);outline-offset:2px}.settings-toggle{position:relative;display:inline-block;width:40px;height:22px;cursor:pointer}.settings-toggle input{opacity:0;width:0;height:0}.settings-toggle-slider{position:absolute;inset:0;background:var(--border-color, #d1d5db);border-radius:11px;transition:background .2s}.settings-toggle-slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .2s}.settings-toggle input:checked+.settings-toggle-slider{background:var(--primary-color, #3b82f6)}.settings-toggle input:checked+.settings-toggle-slider:before{transform:translate(18px)}.ai-settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000}.ai-settings-modal{background:var(--bg-panel);color:var(--text-primary);padding:24px;border-radius:12px;width:480px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:20px}.ai-settings-header{display:flex;justify-content:space-between;align-items:center}.ai-settings-header h3{margin:0;font-size:1.2rem}.ai-settings-header .close-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center}.ai-settings-header .close-btn:hover{background:var(--btn-hover);color:var(--text-primary)}.ai-settings-section{display:flex;flex-direction:column;gap:10px}.ai-settings-section-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin:0}.ai-settings-provider-select{display:flex;gap:6px}.ai-settings-provider-btn{flex:1;padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.8rem;font-weight:500;transition:all .15s}.ai-settings-provider-btn:hover{background:var(--btn-hover);color:var(--text-primary)}.ai-settings-provider-btn.active{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:var(--btn-primary-bg)}.ai-settings-provider-btn.active:hover{background:var(--btn-primary-bg);color:var(--btn-primary-fg);background:var(--btn-primary-bg-hover)}.ai-settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.ai-settings-row label{font-size:.85rem;color:var(--text-primary);white-space:nowrap;min-width:60px}.ai-settings-row select{padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-panel);color:var(--text-primary);font-size:.85rem;min-width:200px}.ai-settings-row select:focus{outline:none;border-color:var(--primary-color)}.ai-settings-key-input{display:flex;align-items:center;flex:1;border:1px solid var(--border-color);border-radius:6px;overflow:hidden;min-width:200px}.ai-settings-key-input input{flex:1;padding:6px 10px;border:none;background:var(--bg-panel);color:var(--text-primary);font-size:.82rem;font-family:monospace;outline:none}.ai-settings-key-input input::placeholder{color:var(--text-secondary);opacity:.6;font-family:inherit}.ai-settings-eye-btn{background:none;border:none;border-left:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;padding:6px 8px;display:flex;align-items:center}.ai-settings-eye-btn:hover{color:var(--text-primary);background:var(--btn-hover)}.ai-settings-note{font-size:.75rem;color:var(--text-secondary);margin:0;line-height:1.4}.ai-settings-footer{display:flex;justify-content:flex-end;padding-top:8px;border-top:1px solid var(--border-color)}.ai-settings-done-btn{padding:6px 18px;border:none;border-radius:6px;background:var(--btn-primary-bg);color:var(--btn-primary-fg);cursor:pointer;font-size:.85rem}.ai-settings-done-btn:hover{background:var(--btn-primary-bg);color:var(--btn-primary-fg);background:var(--btn-primary-bg-hover)}.rocket-settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000}.rocket-settings-modal{background:var(--bg-panel);color:var(--text-primary);padding:24px;border-radius:12px;width:440px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px}.rocket-settings-header{display:flex;justify-content:space-between;align-items:center}.rocket-settings-header h3{margin:0;font-size:1.1rem}.rocket-settings-header .close-btn{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px;border-radius:4px;display:flex;align-items:center}.rocket-settings-header .close-btn:hover{background:var(--btn-hover);color:var(--text-primary)}.rocket-settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.rocket-settings-row label{font-size:.85rem;color:var(--text-primary);white-space:nowrap;min-width:80px}.rocket-settings-row input{flex:1;padding:6px 10px;border:1px solid var(--border-color);border-radius:6px;background:var(--bg-panel);color:var(--text-primary);font-size:.85rem;outline:none}.rocket-settings-row input:focus{border-color:var(--primary-color)}.rocket-settings-key-input{display:flex;align-items:center;flex:1;border:1px solid var(--border-color);border-radius:6px;overflow:hidden}.rocket-settings-key-input input{flex:1;padding:6px 10px;border:none;background:var(--bg-panel);color:var(--text-primary);font-size:.85rem;outline:none}.rocket-settings-eye-btn{background:none;border:none;border-left:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;padding:6px 8px;display:flex;align-items:center}.rocket-settings-eye-btn:hover{color:var(--text-primary);background:var(--btn-hover)}.rocket-settings-test-btn{padding:6px 14px;border:1px solid var(--border-color);border-radius:6px;background:transparent;color:var(--text-primary);cursor:pointer;font-size:.82rem;font-weight:500;transition:all .15s}.rocket-settings-test-btn:hover{background:var(--btn-hover)}.rocket-settings-test-btn:disabled{opacity:.5;cursor:not-allowed}.rocket-settings-test-result{font-size:.8rem;padding:6px 10px;border-radius:6px;line-height:1.4}.rocket-settings-test-result.success{color:#16a34a;background:#16a34a14}.rocket-settings-test-result.error{color:#dc2626;background:#dc262614}.rocket-settings-note{font-size:.75rem;color:var(--text-secondary);margin:0;line-height:1.4}.rocket-settings-footer{display:flex;justify-content:flex-end;padding-top:8px;border-top:1px solid var(--border-color)}.rocket-settings-done-btn{padding:6px 18px;border:none;border-radius:6px;background:var(--btn-primary-bg);color:var(--btn-primary-fg);cursor:pointer;font-size:.85rem}.rocket-settings-done-btn:hover{background:var(--btn-primary-bg-hover)}.dsd-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2200;animation:dsd-fade .15s ease-out}@keyframes dsd-fade{0%{opacity:0}to{opacity:1}}.dsd-modal{width:min(560px,94vw);max-height:84vh;display:flex;flex-direction:column;background:var(--bg-panel);color:var(--text-primary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden}.dsd-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-color)}.dsd-header h2{margin:0;font-size:16px;font-weight:600}.dsd-close{border:none;background:transparent;cursor:pointer;color:var(--text-secondary);padding:2px}.dsd-close:hover{color:var(--text-primary)}.dsd-body{overflow-y:auto;padding:12px 16px 16px}.dsd-category{margin-bottom:14px}.dsd-category-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin:6px 0 8px}.dsd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:8px}.dsd-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px 8px;border:1px solid var(--border-color);border-radius:8px;background:transparent;color:var(--text-primary);cursor:pointer;transition:border-color .12s,background .12s}.dsd-card:hover{border-color:var(--accent-color, #6366f1);background:#6366f10f}.dsd-preview-wrap{height:48px;display:flex;align-items:center;justify-content:center}.dsd-preview{border:1.5px solid var(--text-secondary);border-radius:3px;background:var(--bg-canvas, transparent)}.dsd-card-name{font-size:12px;font-weight:500;text-align:center}.dsd-card-size{font-size:10.5px;color:var(--text-secondary)}.dsd-custom-row{display:flex;align-items:center;gap:8px}.dsd-custom-row input{width:90px;padding:6px 8px;border:1px solid var(--border-color);border-radius:6px;background:transparent;color:var(--text-primary);font-size:13px}.dsd-x,.dsd-unit{color:var(--text-secondary);font-size:13px}.dsd-create{margin-left:auto;padding:6px 16px;border:none;border-radius:6px;background:var(--accent-color, #6366f1);color:#fff;font-size:13px;font-weight:500;cursor:pointer}.dsd-create:hover{filter:brightness(1.08)}.menu-container{display:flex;align-items:center;background:var(--bg-panel);padding:6px;border-radius:8px;box-shadow:var(--shadow-sm);gap:4px;border:1px solid var(--border-color);-webkit-user-select:none;user-select:none;transition:box-shadow .2s;position:relative;z-index:10060}.text-logo{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:700;letter-spacing:-.3px;line-height:1;flex-shrink:0;padding:0 2px}.text-logo-name{display:inline-flex}.text-logo-yappy{color:var(--text-primary)}.text-logo-draw{color:var(--logo-accent, #4338ca)}.topbar-support-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;margin:0 2px;border:1px solid rgba(239,68,68,.35);border-radius:999px;background:#ef444417;color:#dc2626;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;transition:background .12s ease,border-color .12s ease}.topbar-support-btn:hover{background:#ef444429;border-color:#ef44448c}.topbar-support-btn:focus-visible{outline:2px solid #ef4444;outline-offset:2px}.topbar-support-btn svg{flex:0 0 auto;width:15px;height:15px;fill:#ef444438;transition:fill .12s ease,transform .12s ease}.topbar-support-btn:hover svg{fill:#ef4444;transform:scale(1.1)}[data-theme=dark] .topbar-support-btn,[data-theme=focus] .topbar-support-btn{color:#fca5a5;background:#ef444424;border-color:#ef444466}@media(max-width:1180px){.topbar-support-label{display:none}.topbar-support-btn{padding:0 8px}}@media(prefers-reduced-motion:reduce){.topbar-support-btn,.topbar-support-btn svg{transition:none}.topbar-support-btn:hover svg{transform:none}}.text-logo-mark{flex:0 0 auto;width:20px;height:20px;display:block}.beta-badge{position:relative;overflow:hidden;display:inline-flex;align-items:center;margin-left:1px;padding:2px 5px;border-radius:999px;font-size:8px;font-weight:800;letter-spacing:.6px;line-height:1;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#4f46e5,#9333ea 55%,#db2777);box-shadow:0 1px 3px #6366f159;flex-shrink:0;-webkit-user-select:none;user-select:none}.beta-badge:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:beta-badge-sheen 4.5s ease-in-out infinite}@keyframes beta-badge-sheen{0%,65%{left:-60%}to{left:130%}}@media(prefers-reduced-motion:reduce){.beta-badge:after{animation:none;display:none}}.menu-container:hover{box-shadow:0 4px 12px #0000001a}.shell-topbar .menu-container{background:transparent;border:none;box-shadow:none;border-radius:0;padding:0}.shell-topbar .menu-container:hover{box-shadow:none}.topbar-right>.menu-container+.menu-container{border-left:1px solid var(--border-color);padding-left:8px;margin-left:4px}.shell-topbar .menu-dropdown{top:calc(100% + 10px)}.drag-handle{width:12px;height:32px;cursor:grab;display:flex;align-items:center;justify-content:center;padding:0 2px;opacity:.3;transition:opacity .2s}.drag-handle.sm{height:24px}.menu-container:hover .drag-handle,.app-title:hover .drag-handle{opacity:.7}.drag-dots{width:4px;height:16px;background-image:radial-gradient(var(--text-secondary) 1px,transparent 1px);background-size:4px 4px}.title-input{background:transparent;border:1px solid transparent;padding:4px 8px;font-size:14px;font-weight:500;width:150px;color:var(--text-primary);border-radius:4px}.title-input:hover{border-color:var(--border-color)}.title-input:focus{border-color:var(--primary-color);background:var(--bg-canvas)}.menu-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:none;background:transparent;color:var(--text-secondary);border-radius:6px;cursor:pointer;transition:all .2s}.menu-btn:hover{background:var(--btn-hover);color:var(--text-primary)}.menu-btn:disabled{opacity:.5;cursor:not-allowed}.menu-btn.primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);width:auto;padding:0 12px}.menu-btn.primary:hover{background:var(--btn-primary-bg-hover)}.menu-dropdown{position:absolute;top:60px;left:0;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;padding:8px 0;width:300px;z-index:10050;display:flex;flex-direction:column;gap:1px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.menu-dropdown::-webkit-scrollbar{width:8px}.menu-dropdown::-webkit-scrollbar-track{background:transparent}.menu-dropdown::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px;border:2px solid var(--bg-panel)}.menu-dropdown::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}@media(max-width:480px){.menu-dropdown{width:280px;left:0}}@media(max-width:768px){.menu-container .drag-handle{display:none}.menu-container{padding:4px}}.menu-item{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:12px;padding:10px 16px;border:none;background:transparent;color:var(--text-primary);cursor:pointer;text-align:left;width:100%;box-sizing:border-box;transition:background .2s}.menu-item:hover{background:var(--btn-hover)}.menu-item svg{color:var(--text-secondary)}.menu-item .label{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.menu-item-right{display:flex;align-items:center;gap:12px;flex-shrink:0;justify-content:flex-end;min-width:70px}.menu-item .shortcut{font-size:11px;color:var(--text-secondary);white-space:nowrap;min-width:40px;text-align:right}.check-icon{color:var(--primary-color)}.menu-separator{height:1px;background:var(--border-color);margin:4px 0}.menu-group .menu-group-chevron{margin-left:auto;transition:transform .15s ease;opacity:.7}.menu-group.expanded .menu-group-chevron{transform:rotate(180deg)}.menu-item.menu-sub{padding-left:34px;font-size:.92em}.menu-item.menu-sub .label{color:var(--text-secondary)}.menu-item.menu-sub:hover .label{color:var(--text-primary)}.menu-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:999;cursor:default}.app-title{position:fixed;top:12px;left:50%;transform:translate(-50%);background:var(--bg-panel);padding:4px 12px;border-radius:6px;border:1px solid var(--border-color);box-shadow:var(--shadow-sm);font-weight:500;color:var(--text-secondary);opacity:.6;z-index:100;font-size:13px;pointer-events:none;-webkit-user-select:none;user-select:none}.tour-overlay{position:fixed;inset:0;z-index:4000;pointer-events:none}.tour-mask{position:absolute;inset:0;width:100%;height:100%;pointer-events:auto}.tour-spotlight-ring{position:absolute;border:2px solid var(--primary-color, #3b82f6);border-radius:10px;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary-color, #3b82f6) 25%,transparent);pointer-events:none;animation:tour-pulse 2s ease-in-out infinite}@keyframes tour-pulse{0%,to{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary-color, #3b82f6) 25%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--primary-color, #3b82f6) 15%,transparent)}}.tour-tooltip{position:absolute;width:340px;max-width:calc(100vw - 32px);background:var(--bg-panel, #1e1e1e);color:var(--text-primary, #f2f2f2);border:1px solid var(--border-color, #444);border-radius:12px;padding:18px 18px 14px;box-shadow:0 12px 40px #00000059;pointer-events:auto;animation:tour-appear .18s ease-out}@keyframes tour-appear{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tour-tooltip-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.tour-step-count{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--text-secondary, #999)}.tour-skip{padding:4px 8px;background:transparent;border:none;border-radius:4px;color:var(--text-secondary, #999);font-size:12px;cursor:pointer;transition:background .1s,color .1s}.tour-skip:hover{background:var(--bg-secondary, #333);color:var(--text-primary, #fff)}.tour-title{margin:0 0 6px;font-size:17px;font-weight:600;color:var(--text-primary, #fff)}.tour-content{margin:0 0 16px;font-size:13.5px;line-height:1.5;color:var(--text-secondary, #bbb)}.tour-nav{display:flex;gap:10px}.tour-btn{flex:1;padding:9px 14px;border:none;border-radius:7px;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .1s,opacity .1s}.tour-btn-primary{background:#2563eb;color:#fff}.tour-btn-primary:hover{background:#1d4ed8}.tour-btn-secondary{background:var(--bg-secondary, #333);color:var(--text-primary, #ddd);border:1px solid var(--border-color, #444)}.tour-btn-secondary:hover{background:color-mix(in srgb,var(--bg-secondary, #333) 88%,var(--text-primary, #ddd))}.tour-btn-secondary:disabled{opacity:.45;cursor:default}.tour-btn-secondary:disabled:hover{background:var(--bg-secondary, #333)}.tour-dots{display:flex;justify-content:center;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border-color, #333)}.tour-dot{width:8px;height:8px;padding:0;background:var(--border-color, #555);border:none;border-radius:50%;cursor:pointer;transition:background .1s,transform .1s}.tour-dot:hover{transform:scale(1.25)}.tour-dot.active{background:var(--primary-color, #3b82f6)}@media(max-width:768px){.tour-tooltip{left:50%!important;top:auto!important;bottom:20px;transform:translate(-50%);width:calc(100vw - 24px)}.tour-title{font-size:16px}.tour-content{font-size:13px}}

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@algorisys/yappydraw",
+  "version": "0.8.253",
+  "description": "The YappyDraw drawing API without the editor: hand-drawn and clean shapes, rendered to SVG in the browser.",
+  "type": "module",
+  "main": "./yappy.js",
+  "module": "./yappy.js",
+  "types": "./yappy.d.ts",
+  "exports": {
+    ".": { "types": "./yappy.d.ts", "import": "./yappy.js" },
+    "./package.json": "./package.json"
+  },
+  "files": ["yappy.js", "yappy.d.ts", "chunks/", "LICENSE", "README.md"],
+  "sideEffects": true,
+  "browser": true,
+  "license": "AGPL-3.0-only",
+  "homepage": "https://yappydraw.com",
+  "repository": { "type": "git", "url": "git+https://github.com/algorisys-oss/yappydraw.git" },
+  "bugs": { "url": "https://github.com/algorisys-oss/yappydraw/issues" },
+  "keywords": ["drawing", "diagram", "svg", "sketch", "rough", "whiteboard", "animation", "yappy"]
+}

package/yappy.d.ts

@@ -0,0 +1,34 @@
+// Type declarations for the `@algorisys/yappydraw` npm package (the CDN SDK, frontend/src/sdk/index.ts).
+// Hand-written: `Yappy` is the full window.Yappy API, far too wide to emit from source
+// without dragging the editor's types along, so it is typed loosely here. Keep the named
+// exports in step with frontend/src/sdk/index.ts.
+
+export interface ToSvgOptions {
+    /** Only the selected elements. Default false. */
+    onlySelected?: boolean;
+    /** Wrap every element in `<g data-yappy-id="…">`. Default TRUE in the SDK. */
+    elementIds?: boolean;
+    /** 'static' bakes literal colours (the default). 'variables' emits CSS custom properties. */
+    theme?: 'static' | 'variables';
+    /** Custom prefix for the emitted variables. Defaults to `yd`. */
+    varPrefix?: string;
+}
+
+/** The full `window.Yappy` drawing API: `create*`, `importDSL`, `loadDocument`, … */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export declare const Yappy: Record<string, any>;
+
+/** The YappyDraw version this build came from. */
+export declare const version: string;
+
+/** The drawing as SVG markup. Returns '' for an empty drawing. Never downloads a file. */
+export declare function toSVG(options?: ToSvgOptions): string;
+
+/** Render the drawing into `target` as inline SVG, replacing its contents. */
+export declare function mount(target: string | Element, options?: ToSvgOptions): SVGSVGElement;
+
+/** Load YappyDraw's fonts; await before creating text. Never rejects. */
+export declare function fontsReady(): Promise<void>;
+
+/** Start a fresh drawing (one drawing per page). */
+export declare function clear(): void;

package/yappy.js

@@ -0,0 +1,9 @@
+import { ai as o, aj as e, ak as n, al as r, am as t, an as m } from "./chunks/index-Bm3Inzn8.js";
+export {
+  o as Yappy,
+  e as clear,
+  n as fontsReady,
+  r as mount,
+  t as toSVG,
+  m as version
+};