flomotion 0.2.0 → 0.4.0

package/dist/chunks/{chunk-QG2MOGKO.mjs → chunk-IGG2VZB6.mjs}

@@ -41,7 +41,7 @@ import {
   time,
   toCss,
   vec2
-} from "./chunk-AVP5XX4G.mjs";
+} from "./chunk-PEC2UVQY.mjs";
 
 // packages/components/src/util.ts
 var round = (n, d = 3) => {
@@ -745,7 +745,7 @@ var Vignette = defineEffect("Vignette", {
     const amount = sig(rc, "amount");
     return {
       overlay: {
-        html: `<div id="${id}" class="cc-vignette" style="position:absolute;inset:0;pointer-events:none;opacity:${round(evalSignal(amount, a))};background:radial-gradient(${p.roundness > 0.5 ? "circle" : "ellipse"} at 50% 50%, rgba(0,0,0,0) ${Math.max(0, inner)}%, ${p.color} ${outer}%)"></div>`,
+        html: `<div id="${id}" class="fm-vignette" style="position:absolute;inset:0;pointer-events:none;opacity:${round(evalSignal(amount, a))};background:radial-gradient(${p.roundness > 0.5 ? "circle" : "ellipse"} at 50% 50%, rgba(0,0,0,0) ${Math.max(0, inner)}%, ${p.color} ${outer}%)"></div>`,
         channels: [
           {
             target: `#${id}`,
@@ -1002,7 +1002,7 @@ var Grain = defineEffect("Grain", {
     const fps = rc.fps;
     const seedAt = (t) => Math.floor(mulberry32(p.seed * 7919 + Math.floor((t - a) * fps / p.hold))() * 1e5);
     const freq = round(0.9 / p.size, 3);
-    const html = `<svg id="${id}" class="cc-grain" width="100%" height="100%" style="position:absolute;inset:0;pointer-events:none;mix-blend-mode:${p.blend};opacity:${round(evalSignal(amount, a))}"><filter id="${id}-f" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"><feTurbulence id="${id}-t" type="fractalNoise" baseFrequency="${freq}" numOctaves="2" seed="${seedAt(a)}" stitchTiles="stitch"/>${p.mono ? '<feColorMatrix type="saturate" values="0"/>' : ""}</filter><rect width="100%" height="100%" filter="url(#${id}-f)"/></svg>`;
+    const html = `<svg id="${id}" class="fm-grain" width="100%" height="100%" style="position:absolute;inset:0;pointer-events:none;mix-blend-mode:${p.blend};opacity:${round(evalSignal(amount, a))}"><filter id="${id}-f" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"><feTurbulence id="${id}-t" type="fractalNoise" baseFrequency="${freq}" numOctaves="2" seed="${seedAt(a)}" stitchTiles="stitch"/>${p.mono ? '<feColorMatrix type="saturate" values="0"/>' : ""}</filter><rect width="100%" height="100%" filter="url(#${id}-f)"/></svg>`;
     return {
       overlay: {
         html,
@@ -2173,7 +2173,7 @@ function parseMarkup(src) {
     [/(?<![\w])_([^_]+)_(?![\w])/, "<i>", "</i>"],
     [
       /==([^=]+)==/,
-      '<span class="cc-mark" style="background:linear-gradient(#ffe14d,#ffe14d) no-repeat 0 85%/100% 45%">',
+      '<span class="fm-mark" style="background:linear-gradient(#ffe14d,#ffe14d) no-repeat 0 85%/100% 45%">',
       "</span>"
     ],
     [/~~([^~]+)~~/, "<s>", "</s>"]
@@ -2451,17 +2451,17 @@ function renderText(p, rc, split) {
           table.target.char.push(cid);
           table.charText.push(c.g);
           const col = charColor ? `;color:${charColor(srcIndex.get(c))}` : "";
-          return `${c.open}<span id="${cid}" class="cc-c" style="display:inline-block;white-space:pre${col}">${esc(c.g)}</span>${c.close}`;
+          return `${c.open}<span id="${cid}" class="fm-c" style="display:inline-block;white-space:pre${col}">${esc(c.g)}</span>${c.close}`;
         }).join("");
         const sep = k < words.length - 1 || false ? " " : "";
-        return `<span id="${wid}" class="cc-w" style="display:inline-block;white-space:nowrap">${chars}</span>${sep}`;
+        return `<span id="${wid}" class="fm-w" style="display:inline-block;white-space:nowrap">${chars}</span>${sep}`;
       });
       if (needLine) {
         const lid = `${id}-l${li}`;
         table.line.push(lid);
         table.target.line.push(`${lid}-in`);
         htmlLines.push(
-          `<span id="${lid}" class="cc-l" style="display:block;${mask ? "overflow:hidden;" : ""}white-space:nowrap"><span id="${lid}-in" style="display:block">${wordHtml.join("")}</span></span>`
+          `<span id="${lid}" class="fm-l" style="display:block;${mask ? "overflow:hidden;" : ""}white-space:nowrap"><span id="${lid}-in" style="display:block">${wordHtml.join("")}</span></span>`
         );
       } else htmlLines.push(wordHtml.join(""));
     });
@@ -2649,7 +2649,7 @@ function renderText(p, rc, split) {
       const sid = `${id}-${kind}`;
       const pos = kind === "underline" ? "0 100%" : "0 52%";
       decoOpen.push(
-        `<span id="${sid}" class="cc-deco" style="background:linear-gradient(${c},${c}) no-repeat ${pos}/${round((d.progress ?? 1) * 100, 2)}% ${th}px;padding-bottom:${kind === "underline" ? d.offset ?? 6 : 0}px">`
+        `<span id="${sid}" class="fm-deco" style="background:linear-gradient(${c},${c}) no-repeat ${pos}/${round((d.progress ?? 1) * 100, 2)}% ${th}px;padding-bottom:${kind === "underline" ? d.offset ?? 6 : 0}px">`
       );
       decoClose.unshift("</span>");
       if (animatedP)
@@ -2674,7 +2674,7 @@ function renderText(p, rc, split) {
     const raw = rc.node.props.highlight?.progress;
     const col = withAlphaColor(hl.color ?? "#ffe14d", hl.opacity ?? 1);
     decoOpen.push(
-      `<span id="${sid}" class="cc-hl" style="background:linear-gradient(${col},${col}) no-repeat 0 0/${round((hl.progress ?? 1) * 100, 2)}% 100%;padding:${hl.padding ?? 8}px;margin:-${hl.padding ?? 8}px;border-radius:${hl.radius ?? 6}px;-webkit-box-decoration-break:clone;box-decoration-break:clone">`
+      `<span id="${sid}" class="fm-hl" style="background:linear-gradient(${col},${col}) no-repeat 0 0/${round((hl.progress ?? 1) * 100, 2)}% 100%;padding:${hl.padding ?? 8}px;margin:-${hl.padding ?? 8}px;border-radius:${hl.radius ?? 6}px;-webkit-box-decoration-break:clone;box-decoration-break:clone">`
     );
     decoClose.unshift("</span>");
     if (dyn(raw))
@@ -2725,7 +2725,7 @@ function renderText(p, rc, split) {
     box.width = "max-content";
     box["max-width"] = `${round(maxW)}px`;
   }
-  let html = `<div id="${tid}" class="cc-text" ${s.lang ? `lang="${esc(s.lang)}" ` : ""}${s.direction === "rtl" ? 'dir="rtl" ' : ""}style="${css(style)}">${content}</div>`;
+  let html = `<div id="${tid}" class="fm-text" ${s.lang ? `lang="${esc(s.lang)}" ` : ""}${s.direction === "rtl" ? 'dir="rtl" ' : ""}style="${css(style)}">${content}</div>`;
   if (s.box?.height !== void 0 && s.valign !== "top") {
     html = `<div style="display:flex;width:100%;height:100%;align-items:${s.valign === "middle" ? "center" : "flex-end"}">${html}</div>`;
   }
@@ -2828,7 +2828,7 @@ var inline = (name, description, controls, open, channels) => defineComponent(na
   description,
   traits: ["inline"],
   children: "any",
-  controls,
+  controls: { id: text({ label: "Id", description: "Stable unique id." }), ...controls },
   render: (p, rc) => ({
     html: `${open(p, rc)}{{children}}</span>`,
     visual: false,
@@ -2880,7 +2880,7 @@ var Highlight = inline(
   },
   (p, rc) => {
     const prog = rc.at("progress", rc.node.start);
-    return `<span id="${rc.id}" class="cc-hl" style="background:linear-gradient(${p.color},${p.color}) no-repeat 0 0/${round(prog * 100, 2)}% 100%;padding:0 ${p.padding}px;margin:0 -${p.padding}px;border-radius:${p.radius}px;-webkit-box-decoration-break:clone;box-decoration-break:clone">`;
+    return `<span id="${rc.id}" class="fm-hl" style="background:linear-gradient(${p.color},${p.color}) no-repeat 0 0/${round(prog * 100, 2)}% 100%;padding:0 ${p.padding}px;margin:0 -${p.padding}px;border-radius:${p.radius}px;-webkit-box-decoration-break:clone;box-decoration-break:clone">`;
   },
   (p, rc) => {
     const sg = rc.node.props.progress;
@@ -2909,7 +2909,7 @@ var decoInline = (name, pos, label) => inline(
   },
   (p, rc) => {
     const prog = rc.at("progress", rc.node.start);
-    return `<span id="${rc.id}" class="cc-deco" style="background:linear-gradient(${p.color},${p.color}) no-repeat ${pos}/${round(prog * 100, 2)}% ${p.thickness}px;padding-bottom:${name === "Underline" ? p.offset : 0}px">`;
+    return `<span id="${rc.id}" class="fm-deco" style="background:linear-gradient(${p.color},${p.color}) no-repeat ${pos}/${round(prog * 100, 2)}% ${p.thickness}px;padding-bottom:${name === "Underline" ? p.offset : 0}px">`;
   },
   (p, rc) => {
     const sg = rc.node.props.progress;
@@ -3909,6 +3909,167 @@ var mediaComponents = [
 ];
 
 // packages/components/src/looks.ts
+var CleanLight = defineLook({
+  id: "clean-light",
+  name: "Clean light",
+  description: "Calm and credible. Pale background, white cards, one blue accent, soft shadows, card-slide transition. Inter Tight over Inter.",
+  palette: {
+    bg: "#F6F7FB",
+    surface: "#FFFFFF",
+    text: "#0F1222",
+    textMuted: "#5B6075",
+    accent: "#4B5CFF",
+    signal: "#FF7A45",
+    positive: "#2FBF71",
+    negative: "#E5484D",
+    block1: "#4B5CFF",
+    block2: "#FF7A45",
+    block3: "#2FBF71",
+    block4: "#FFC933",
+    // engine-wide aliases so components that ask for fg / muted / primary work in every look
+    fg: "#0F1222",
+    muted: "#5B6075",
+    primary: "#4B5CFF"
+  },
+  background: "#F6F7FB",
+  fonts: [
+    {
+      id: "display",
+      family: "Inter Tight",
+      source: "google",
+      weights: [700, 800],
+      subsets: ["latin"]
+    },
+    { id: "body", family: "Inter", source: "google", weights: [400, 500, 600], subsets: ["latin"] },
+    { id: "mono", family: "JetBrains Mono", source: "google", weights: [500], subsets: ["latin"] }
+  ],
+  type: {
+    display: { font: "display", size: 120, weight: 800, tracking: -20, leading: 1.02 },
+    title: { font: "display", size: 74, weight: 700, tracking: -20, leading: 1.05 },
+    body: { font: "body", size: 44, weight: 500, tracking: 0, leading: 1.3 },
+    caption: { font: "body", size: 40, weight: 500, tracking: 0, leading: 1.3 },
+    mono: { font: "mono", size: 34, weight: 500, tracking: 0, leading: 1.5 },
+    numerals: { font: "display", size: 170, weight: 800, tracking: -25, leading: 1 }
+  },
+  easing: {
+    in: "expo.out",
+    out: "power3.in",
+    move: "power3.inOut",
+    pop: "back.out(1.2)",
+    settle: "power3.out",
+    spring: "spring(220,24)"
+  },
+  transition: { type: "slide", duration: 0.5 },
+  grain: 0.03,
+  sound: {}
+});
+var DarkProduct = defineLook({
+  id: "dark-product",
+  name: "Dark product",
+  description: "Focused and premium. Near-black background, violet accent, mint signal, glow edges, glow-wipe transition. Sora over Inter.",
+  palette: {
+    bg: "#0B0D14",
+    surface: "#151826",
+    text: "#F4F5F9",
+    textMuted: "#9AA0B8",
+    accent: "#7C5CFF",
+    signal: "#3DDC97",
+    positive: "#3DDC97",
+    negative: "#FF6B6B",
+    block1: "#0B0D14",
+    block2: "#7C5CFF",
+    block3: "#151826",
+    block4: "#3DDC97",
+    fg: "#F4F5F9",
+    muted: "#9AA0B8",
+    primary: "#7C5CFF"
+  },
+  background: "#0B0D14",
+  fonts: [
+    { id: "display", family: "Sora", source: "google", weights: [600, 700], subsets: ["latin"] },
+    { id: "body", family: "Inter", source: "google", weights: [400, 500], subsets: ["latin"] },
+    { id: "mono", family: "JetBrains Mono", source: "google", weights: [500], subsets: ["latin"] }
+  ],
+  type: {
+    display: { font: "display", size: 116, weight: 700, tracking: -20, leading: 1.05 },
+    title: { font: "display", size: 72, weight: 600, tracking: -20, leading: 1.08 },
+    body: { font: "body", size: 44, weight: 500, tracking: 0, leading: 1.35 },
+    caption: { font: "body", size: 40, weight: 500, tracking: 0, leading: 1.35 },
+    mono: { font: "mono", size: 34, weight: 500, tracking: 0, leading: 1.5 },
+    numerals: { font: "display", size: 170, weight: 700, tracking: -25, leading: 1 }
+  },
+  easing: {
+    in: "expo.out",
+    out: "power2.in",
+    move: "power3.inOut",
+    pop: "back.out(1.2)",
+    settle: "power3.out",
+    spring: "spring(200,22)"
+  },
+  transition: { type: "wipe", duration: 0.5 },
+  grain: 0.06,
+  sound: {}
+});
+var BoldKinetic = defineLook({
+  id: "bold-kinetic",
+  name: "Bold kinetic",
+  description: "Energetic and confident. White or flat saturated colour blocks, heavy display type, key word in the contrast colour, colour-block wipes. Plus Jakarta Sans.",
+  palette: {
+    bg: "#FFFFFF",
+    surface: "#FFFFFF",
+    text: "#1A1020",
+    textMuted: "#5A4A66",
+    accent: "#FF3D81",
+    signal: "#FFC933",
+    positive: "#22B573",
+    negative: "#E5484D",
+    block1: "#FF8FB1",
+    block2: "#7BD389",
+    block3: "#6CB8FF",
+    block4: "#FFD35C",
+    block5: "#9B6BFF",
+    fg: "#1A1020",
+    muted: "#5A4A66",
+    primary: "#FF3D81"
+  },
+  background: "#FFFFFF",
+  fonts: [
+    {
+      id: "display",
+      family: "Plus Jakarta Sans",
+      source: "google",
+      weights: [800],
+      subsets: ["latin"]
+    },
+    {
+      id: "body",
+      family: "Plus Jakarta Sans",
+      source: "google",
+      weights: [500, 600],
+      subsets: ["latin"]
+    },
+    { id: "mono", family: "JetBrains Mono", source: "google", weights: [500], subsets: ["latin"] }
+  ],
+  type: {
+    display: { font: "display", size: 144, weight: 800, tracking: -30, leading: 0.98 },
+    title: { font: "display", size: 84, weight: 800, tracking: -30, leading: 1 },
+    body: { font: "body", size: 46, weight: 600, tracking: 0, leading: 1.25 },
+    caption: { font: "body", size: 40, weight: 600, tracking: 0, leading: 1.25 },
+    mono: { font: "mono", size: 34, weight: 500, tracking: 0, leading: 1.5 },
+    numerals: { font: "display", size: 200, weight: 800, tracking: -35, leading: 1 }
+  },
+  easing: {
+    in: "back.out(1.4)",
+    out: "power4.in",
+    move: "expo.inOut",
+    pop: "back.out(1.4)",
+    settle: "power3.out",
+    spring: "spring(260,18)"
+  },
+  transition: { type: "wipe", duration: 0.4 },
+  grain: 0,
+  sound: {}
+});
 var Kinetic = defineLook({
   id: "kinetic",
   name: "Kinetic",
@@ -4045,7 +4206,7 @@ var Sketch = defineLook({
   grain: 0.18,
   sound: { "ui/pop": "freesound:pop", "move/whip": "freesound:whoosh" }
 });
-var looks = [Kinetic, Minimal, Sketch];
+var looks = [CleanLight, DarkProduct, BoldKinetic, Kinetic, Minimal, Sketch];
 var themeControls = () => ({
   id: text({ required: true }),
   palette: json({}, external_exports.record(external_exports.string(), external_exports.string())),
@@ -4184,6 +4345,9 @@ export {
   toVtt,
   Captions,
   mediaComponents,
+  CleanLight,
+  DarkProduct,
+  BoldKinetic,
   Kinetic,
   Minimal,
   Sketch,