@bupple/vss-plugin-typography 1.0.0

package/dist/panel-NCQBLXF6.js

@@ -0,0 +1,318 @@
+import { getCategories } from './chunk-YI7CKNOM.js';
+import { createDefaultTransform } from '@bupple/vss/core';
+import { useIconMap, useStudioStore, findAvailableTrack, cn, useItemDrag, ensureFontLoaded } from '@bupple/vss/ui';
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TextPanel() {
+  const icons = useIconMap();
+  const {
+    chevronDown: ChevronDownIcon,
+    add: PlusIcon,
+    search: SearchIcon,
+    itemText: TypeIcon,
+    close: XIcon
+  } = icons;
+  const settings = useStudioStore((s) => s.project.settings);
+  const addItem = useStudioStore((s) => s.addItem);
+  const addTrack = useStudioStore((s) => s.addTrack);
+  const currentFrame = useStudioStore((s) => s.player.currentFrame);
+  const tracks = useStudioStore((s) => s.timeline.tracks);
+  const items = useStudioStore((s) => s.timeline.items);
+  const itemIdsByTrack = useStudioStore((s) => s.timeline.itemIdsByTrack);
+  const [search, setSearch] = useState("");
+  const [collapsedCategories, setCollapsedCategories] = useState(
+    /* @__PURE__ */ new Set()
+  );
+  const toggleCategory = useCallback((id) => {
+    setCollapsedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const handleAddText = useCallback(
+    (preset) => {
+      const fps = settings.fps;
+      const durationFrames = fps * 5;
+      let resolvedTrackId;
+      const available = findAvailableTrack(
+        tracks,
+        itemIdsByTrack,
+        items,
+        "track",
+        currentFrame,
+        durationFrames
+      );
+      if (available) {
+        resolvedTrackId = available.id;
+      } else {
+        const existingCount = tracks.filter((t) => t.kind === "track").length;
+        resolvedTrackId = addTrack({
+          name: `Track ${existingCount + 1}`,
+          kind: "track",
+          order: tracks.length,
+          locked: false,
+          muted: false,
+          hidden: false
+        });
+      }
+      const item = {
+        type: "text",
+        trackId: resolvedTrackId,
+        startFrame: currentFrame,
+        durationFrames,
+        zIndex: 10,
+        locked: false,
+        disabled: false,
+        source: {},
+        transform: {
+          ...createDefaultTransform(settings),
+          width: settings.width * 0.8,
+          height: 0,
+          x: settings.width * 0.1,
+          y: settings.height * 0.4
+        },
+        style: { ...preset.style },
+        filters: [],
+        metadata: { presetId: preset.id }
+      };
+      addItem(item);
+    },
+    [tracks, settings, currentFrame, addItem, addTrack, items, itemIdsByTrack]
+  );
+  const handleAddBlank = useCallback(() => {
+    handleAddText({
+      id: "blank",
+      label: "Text",
+      category: "body",
+      style: {
+        text: "Type something...",
+        fontFamily: "Inter",
+        fontSize: 48,
+        fontWeight: 400,
+        fontStyle: "normal",
+        fontColor: "#ffffff",
+        textDecoration: [],
+        textTransform: "none",
+        backgroundColor: "transparent",
+        textAlign: "center",
+        verticalText: false,
+        lineHeight: 1.3,
+        letterSpacing: 0,
+        background: null,
+        shadow: null,
+        stroke: null,
+        glow: null,
+        curve: null
+      }
+    });
+  }, [handleAddText]);
+  const filteredCategories = useMemo(() => {
+    const categories = getCategories();
+    if (!search.trim()) return categories;
+    const q = search.toLowerCase();
+    return categories.map((cat) => ({
+      ...cat,
+      presets: cat.presets.filter(
+        (p) => p.label.toLowerCase().includes(q) || p.style.fontFamily?.toLowerCase().includes(q)
+      )
+    })).filter((cat) => cat.presets.length > 0);
+  }, [search]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: "absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground pointer-events-none" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            placeholder: "Search presets...",
+            value: search,
+            onChange: (e) => setSearch(e.target.value),
+            className: "w-full pl-7 pr-7 h-7 text-xs bg-muted/40 rounded-md border-none outline-none focus:ring-1 focus:ring-ring"
+          }
+        ),
+        search && /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "absolute right-2 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100",
+            onClick: () => setSearch(""),
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleAddBlank,
+          className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-primary/10 hover:bg-primary/20 text-primary transition-colors",
+          title: "Add blank text",
+          children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: filteredCategories.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 py-12", children: [
+      /* @__PURE__ */ jsx(TypeIcon, { className: "size-6 opacity-20" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs opacity-40", children: [
+        'No presets match "',
+        search,
+        '"'
+      ] })
+    ] }) : filteredCategories.map((category) => {
+      const isCollapsed = collapsedCategories.has(category.id);
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => toggleCategory(category.id),
+            className: "flex w-full items-center gap-1.5 px-3 py-2 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(
+                ChevronDownIcon,
+                {
+                  className: cn(
+                    "size-3 transition-transform",
+                    isCollapsed && "-rotate-90"
+                  )
+                }
+              ),
+              category.name,
+              /* @__PURE__ */ jsx("span", { className: "ml-auto text-[9px] opacity-50", children: category.presets.length })
+            ]
+          }
+        ),
+        !isCollapsed && /* @__PURE__ */ jsx("div", { className: "px-2 pb-2 flex flex-col gap-1.5", children: category.presets.map((preset) => /* @__PURE__ */ jsx(
+          PresetCard,
+          {
+            preset,
+            onClick: () => handleAddText(preset)
+          },
+          preset.id
+        )) })
+      ] }, category.id);
+    }) })
+  ] });
+}
+function hexToRgba(hex, alpha) {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function buildPreviewShadow(shadow, scale) {
+  if (!shadow) return void 0;
+  const rad = (shadow.angle ?? 135) * Math.PI / 180;
+  const dist = (shadow.distance ?? 4) * scale;
+  const ox = Math.round(Math.cos(rad) * dist);
+  const oy = Math.round(Math.sin(rad) * dist);
+  const blur = (shadow.blur ?? 0) * scale;
+  const alpha = (shadow.opacity ?? 100) / 100;
+  const color = shadow.color?.startsWith("#") ? hexToRgba(shadow.color, alpha) : shadow.color;
+  return `${ox}px ${oy}px ${blur}px ${color}`;
+}
+function buildPreviewGlow(glow, scale) {
+  if (!glow) return void 0;
+  const alpha = (glow.intensity ?? 50) / 100;
+  const color = glow.color?.startsWith("#") ? hexToRgba(glow.color, alpha) : glow.color;
+  const blur = (glow.range ?? 10) * scale;
+  return `${(glow.offsetX ?? 0) * scale}px ${(glow.offsetY ?? 0) * scale}px ${blur}px ${color}`;
+}
+function PresetCard({
+  preset,
+  onClick
+}) {
+  const s = preset.style;
+  const scale = Math.min(s.fontSize / 3.5, 24) / s.fontSize;
+  const previewFontSize = s.fontSize * scale;
+  const bg = s.background;
+  const hasAdvancedBg = bg && bg.color;
+  const [fontLoaded, setFontLoaded] = useState(false);
+  const { dragProps, isDragging } = useItemDrag({
+    getData: () => ({
+      itemType: "text",
+      source: {},
+      style: { ...preset.style },
+      durationSeconds: 3,
+      name: preset.label
+    })
+  });
+  useEffect(() => {
+    if (s.fontFamily) {
+      ensureFontLoaded(s.fontFamily).then(() => setFontLoaded(true));
+    }
+  }, [s.fontFamily]);
+  const combinedTextShadow = (() => {
+    const parts = [];
+    const shadowStr = buildPreviewShadow(s.shadow, scale);
+    if (shadowStr) parts.push(shadowStr);
+    const glowStr = buildPreviewGlow(s.glow, scale);
+    if (glowStr) parts.push(glowStr);
+    return parts.length > 0 ? parts.join(", ") : void 0;
+  })();
+  const advancedBgStyle = hasAdvancedBg ? (() => {
+    const alpha = (bg.opacity ?? 100) / 100;
+    const color = bg.color.startsWith("#") ? hexToRgba(bg.color, alpha) : bg.color;
+    return {
+      backgroundColor: color,
+      borderRadius: `${bg.borderRadius ?? 0}%`,
+      padding: `${bg.height ?? 0}% ${bg.width ?? 0}%`
+    };
+  })() : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...dragProps,
+      onClick,
+      className: cn(
+        "group rounded-lg border border-border/50 bg-muted/10 hover:bg-muted/40 overflow-hidden transition-colors text-left w-full cursor-grab active:cursor-grabbing select-none",
+        isDragging && "opacity-50"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "relative flex items-center justify-center h-12 px-3 overflow-hidden",
+            style: {
+              background: !hasAdvancedBg ? "linear-gradient(135deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 100%)" : void 0
+            },
+            children: [
+              advancedBgStyle && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 flex items-center justify-center",
+                  style: advancedBgStyle
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "truncate max-w-full relative z-[1]",
+                  style: {
+                    fontFamily: fontLoaded ? s.fontFamily : "inherit",
+                    fontSize: previewFontSize,
+                    fontWeight: s.fontWeight,
+                    fontStyle: s.fontStyle || void 0,
+                    color: s.fontColor,
+                    letterSpacing: s.letterSpacing ? `${s.letterSpacing * scale}px` : void 0,
+                    textShadow: combinedTextShadow,
+                    textDecoration: s.textDecoration?.includes("underline") ? "underline" : s.textDecoration?.includes("line-through") ? "line-through" : void 0,
+                    textTransform: s.textTransform || void 0,
+                    WebkitTextStroke: s.stroke ? `${Math.max(0.5, s.stroke.width * scale)}px ${s.stroke.color}` : void 0
+                  },
+                  children: s.text
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1.5 border-t border-border/30", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] font-medium truncate", children: preset.label }),
+          /* @__PURE__ */ jsx("p", { className: "text-[9px] opacity-40 ml-auto shrink-0", children: s.fontFamily })
+        ] })
+      ]
+    }
+  );
+}
+
+export { TextPanel as default };

package/dist/panel-mobile-3RLRYQAK.cjs

@@ -0,0 +1,198 @@
+'use strict';
+
+var chunk5IHSZBVF_cjs = require('./chunk-5IHSZBVF.cjs');
+var core = require('@bupple/vss/core');
+var ui = require('@bupple/vss/ui');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function TextPanelMobile() {
+  const icons = ui.useIconMap();
+  const settings = ui.useStudioStore((s) => s.project.settings);
+  const addItem = ui.useStudioStore((s) => s.addItem);
+  const addTrack = ui.useStudioStore((s) => s.addTrack);
+  const currentFrame = ui.useStudioStore((s) => s.player.currentFrame);
+  const tracks = ui.useStudioStore((s) => s.timeline.tracks);
+  const items = ui.useStudioStore((s) => s.timeline.items);
+  const itemIdsByTrack = ui.useStudioStore((s) => s.timeline.itemIdsByTrack);
+  const selectItem = ui.useStudioStore((s) => s.selectItem);
+  const categories = chunk5IHSZBVF_cjs.getCategories();
+  const [search, setSearch] = react.useState("");
+  react.useMemo(
+    () => categories.flatMap((c) => c.presets),
+    [categories]
+  );
+  const filteredCategories = react.useMemo(() => {
+    if (!search.trim()) return categories;
+    const q = search.toLowerCase();
+    return categories.map((cat) => ({
+      ...cat,
+      presets: cat.presets.filter(
+        (p) => p.label.toLowerCase().includes(q) || (p.style.fontFamily ?? "").toLowerCase().includes(q)
+      )
+    })).filter((cat) => cat.presets.length > 0);
+  }, [categories, search]);
+  const handleAddText = react.useCallback(
+    (preset) => {
+      const fps = settings.fps;
+      const durationFrames = fps * 5;
+      const available = ui.findAvailableTrack(
+        tracks,
+        itemIdsByTrack,
+        items,
+        "track",
+        currentFrame,
+        durationFrames
+      );
+      let trackId;
+      if (available) {
+        trackId = available.id;
+      } else {
+        trackId = addTrack({
+          name: "Text",
+          kind: "track",
+          order: tracks.length,
+          locked: false,
+          muted: false,
+          hidden: false
+        });
+      }
+      const transform = core.createDefaultTransform(settings);
+      transform.width = Math.round(settings.width * 0.8);
+      transform.height = Math.round(settings.height * 0.3);
+      transform.x = Math.round(settings.width * 0.1);
+      transform.y = Math.round(settings.height * 0.4);
+      const itemId = addItem({
+        type: "text",
+        trackId,
+        startFrame: currentFrame,
+        durationFrames,
+        zIndex: 10,
+        locked: false,
+        disabled: false,
+        source: {},
+        transform,
+        style: preset.style,
+        filters: [],
+        metadata: { name: preset.label, presetId: preset.id }
+      });
+      if (itemId) selectItem(itemId, false);
+    },
+    [
+      settings,
+      currentFrame,
+      tracks,
+      items,
+      itemIdsByTrack,
+      addItem,
+      addTrack,
+      selectItem
+    ]
+  );
+  const handleAddBlank = react.useCallback(() => {
+    handleAddText({
+      id: "blank",
+      label: "Text",
+      category: "basic",
+      style: {
+        text: "Your text here",
+        fontFamily: "Inter",
+        fontSize: 48,
+        fontWeight: 400,
+        color: "#ffffff",
+        textAlign: "center"
+      }
+    });
+  }, [handleAddText]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.search, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-white/30" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: search,
+          onChange: (e) => setSearch(e.target.value),
+          placeholder: "Search text styles...",
+          className: "w-full h-10 pl-9 pr-3 bg-white/5 border border-white/10 rounded-xl text-sm text-white placeholder:text-white/30 focus:outline-none focus:ring-1 focus:ring-white/20"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: handleAddBlank,
+        className: "w-full h-11 rounded-xl bg-white/10 text-sm font-medium text-white flex items-center justify-center gap-2 active:bg-white/15 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.add, { className: "size-4" }),
+          "Add blank text"
+        ]
+      }
+    ),
+    filteredCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-white/40 uppercase tracking-wider font-medium", children: category.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-1.5", children: category.presets.map((preset) => /* @__PURE__ */ jsxRuntime.jsx(
+        PresetCard,
+        {
+          preset,
+          onAdd: handleAddText
+        },
+        preset.id
+      )) })
+    ] }, category.id)),
+    filteredCategories.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center py-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.itemText, { className: "size-6 text-white/15 mb-2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-white/30", children: "No presets found" })
+    ] })
+  ] });
+}
+function PresetCard({
+  preset,
+  onAdd
+}) {
+  const style = preset.style;
+  react.useEffect(() => {
+    if (style.fontFamily) ui.ensureFontLoaded(style.fontFamily);
+  }, [style.fontFamily]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: () => onAdd(preset),
+      className: "rounded-xl bg-white/5 border border-white/5 overflow-hidden active:bg-white/10 transition-colors",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-14 flex items-center justify-center px-2 overflow-hidden",
+            style: {
+              backgroundColor: style.backgroundColor ?? "transparent"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: "truncate",
+                style: {
+                  fontFamily: style.fontFamily ?? "Inter",
+                  fontSize: Math.min((style.fontSize ?? 48) / 2.5, 20),
+                  fontWeight: style.fontWeight ?? 400,
+                  fontStyle: style.fontStyle,
+                  color: style.color ?? style.fontColor ?? "#ffffff",
+                  letterSpacing: style.letterSpacing ? style.letterSpacing / 2 : void 0,
+                  textTransform: style.textTransform,
+                  textShadow: style.shadow ? `${style.shadow.offsetX ?? 0}px ${style.shadow.offsetY ?? 2}px ${style.shadow.blur ?? 4}px ${style.shadow.color ?? "rgba(0,0,0,0.5)"}` : void 0
+                },
+                children: style.text ?? preset.label
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-2 py-1.5 border-t border-white/5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-white/50 truncate", children: preset.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] text-white/25 truncate", children: style.fontFamily ?? "Inter" })
+        ] })
+      ]
+    }
+  );
+}
+
+module.exports = TextPanelMobile;