@bupple/vss-plugin-typography 1.0.0

package/dist/index.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+var chunk5IHSZBVF_cjs = require('./chunk-5IHSZBVF.cjs');
+var plugins = require('@bupple/vss/plugins');
+var react = require('react');
+
+function buildCategoriesFromPresets(presets) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const p of presets) {
+    const list = seen.get(p.category) ?? [];
+    list.push(p);
+    seen.set(p.category, list);
+  }
+  return Array.from(seen.entries()).map(([id, items]) => ({
+    id,
+    name: id.charAt(0).toUpperCase() + id.slice(1),
+    presets: items
+  }));
+}
+function typographyPlugin(options = {}) {
+  return plugins.createPlugin({
+    id: "bupple:typography",
+    name: "Typography",
+    version: "1.0.0",
+    onRegister(ctx) {
+      const presets = options.presets ?? chunk5IHSZBVF_cjs.TEXT_PRESETS;
+      const categories = options.categories ?? (options.presets ? buildCategoriesFromPresets(presets) : chunk5IHSZBVF_cjs.TEXT_PRESET_CATEGORIES);
+      chunk5IHSZBVF_cjs.setPresets(presets, categories);
+      ctx.registerPanel({
+        id: "text",
+        label: "Text",
+        icon: ctx.icons.pluginTypography,
+        component: react.lazy(() => import('./panel-4TAKN5WR.cjs')),
+        mobileComponent: react.lazy(() => import('./panel-mobile-3RLRYQAK.cjs')),
+        order: options.order ?? 3
+      });
+    }
+  });
+}
+
+Object.defineProperty(exports, "TEXT_PRESETS", {
+  enumerable: true,
+  get: function () { return chunk5IHSZBVF_cjs.TEXT_PRESETS; }
+});
+Object.defineProperty(exports, "TEXT_PRESET_CATEGORIES", {
+  enumerable: true,
+  get: function () { return chunk5IHSZBVF_cjs.TEXT_PRESET_CATEGORIES; }
+});
+exports.typographyPlugin = typographyPlugin;

package/dist/index.d.cts

@@ -0,0 +1,67 @@
+import { TextStyle } from '@bupple/vss/core';
+import { PluginDefinition } from '@bupple/vss/plugins';
+
+type TextPresetCategoryId = 'headings' | 'body' | 'minimal' | 'modern' | 'creative' | 'cinematic' | 'social' | 'neon-glow' | 'retro-vintage' | 'editorial' | 'tech' | 'handwritten';
+interface TextPreset {
+    id: string;
+    label: string;
+    category: TextPresetCategoryId;
+    style: Partial<TextStyle>;
+}
+interface TextPresetCategory {
+    id: TextPresetCategoryId;
+    name: string;
+    presets: TextPreset[];
+}
+declare const TEXT_PRESETS: TextPreset[];
+declare const TEXT_PRESET_CATEGORIES: TextPresetCategory[];
+
+interface TypographyPluginOptions {
+    /**
+     * Order of the panel in the sidebar.
+     */
+    order?: number;
+    /**
+     * Custom presets to use. When provided, these **replace** the built-in presets entirely.
+     * To extend the defaults, spread `TEXT_PRESETS` and append your own:
+     *
+     * @example
+     * ```ts
+     * import { TEXT_PRESETS, typographyPlugin } from '@bupple/vss-plugin-typography'
+     *
+     * typographyPlugin({
+     *   presets: [...TEXT_PRESETS, { id: 'my-preset', label: 'My Preset', category: 'headings', style: { ... } }],
+     * })
+     * ```
+     */
+    presets?: TextPreset[];
+    /**
+     * Custom categories to use. When provided, these **replace** the built-in categories.
+     * Each category references presets by filtering the `presets` array.
+     *
+     * If `presets` is provided but `categories` is not, categories are auto-generated
+     * from the unique `category` values in the presets array.
+     */
+    categories?: TextPresetCategory[];
+}
+/**
+ * Creates a typography plugin that registers a Text panel with preset categories.
+ *
+ * @example
+ * ```ts
+ * import { typographyPlugin } from '@bupple/vss-plugin-typography'
+ *
+ * // Use built-in presets
+ * typographyPlugin()
+ *
+ * // Replace with custom presets
+ * typographyPlugin({ presets: myPresets, categories: myCategories })
+ *
+ * // Extend built-in presets
+ * import { TEXT_PRESETS } from '@bupple/vss-plugin-typography'
+ * typographyPlugin({ presets: [...TEXT_PRESETS, ...myExtraPresets] })
+ * ```
+ */
+declare function typographyPlugin(options?: TypographyPluginOptions): PluginDefinition;
+
+export { TEXT_PRESETS, TEXT_PRESET_CATEGORIES, type TextPreset, type TextPresetCategory, type TextPresetCategoryId, type TypographyPluginOptions, typographyPlugin };

package/dist/index.d.ts

@@ -0,0 +1,67 @@
+import { TextStyle } from '@bupple/vss/core';
+import { PluginDefinition } from '@bupple/vss/plugins';
+
+type TextPresetCategoryId = 'headings' | 'body' | 'minimal' | 'modern' | 'creative' | 'cinematic' | 'social' | 'neon-glow' | 'retro-vintage' | 'editorial' | 'tech' | 'handwritten';
+interface TextPreset {
+    id: string;
+    label: string;
+    category: TextPresetCategoryId;
+    style: Partial<TextStyle>;
+}
+interface TextPresetCategory {
+    id: TextPresetCategoryId;
+    name: string;
+    presets: TextPreset[];
+}
+declare const TEXT_PRESETS: TextPreset[];
+declare const TEXT_PRESET_CATEGORIES: TextPresetCategory[];
+
+interface TypographyPluginOptions {
+    /**
+     * Order of the panel in the sidebar.
+     */
+    order?: number;
+    /**
+     * Custom presets to use. When provided, these **replace** the built-in presets entirely.
+     * To extend the defaults, spread `TEXT_PRESETS` and append your own:
+     *
+     * @example
+     * ```ts
+     * import { TEXT_PRESETS, typographyPlugin } from '@bupple/vss-plugin-typography'
+     *
+     * typographyPlugin({
+     *   presets: [...TEXT_PRESETS, { id: 'my-preset', label: 'My Preset', category: 'headings', style: { ... } }],
+     * })
+     * ```
+     */
+    presets?: TextPreset[];
+    /**
+     * Custom categories to use. When provided, these **replace** the built-in categories.
+     * Each category references presets by filtering the `presets` array.
+     *
+     * If `presets` is provided but `categories` is not, categories are auto-generated
+     * from the unique `category` values in the presets array.
+     */
+    categories?: TextPresetCategory[];
+}
+/**
+ * Creates a typography plugin that registers a Text panel with preset categories.
+ *
+ * @example
+ * ```ts
+ * import { typographyPlugin } from '@bupple/vss-plugin-typography'
+ *
+ * // Use built-in presets
+ * typographyPlugin()
+ *
+ * // Replace with custom presets
+ * typographyPlugin({ presets: myPresets, categories: myCategories })
+ *
+ * // Extend built-in presets
+ * import { TEXT_PRESETS } from '@bupple/vss-plugin-typography'
+ * typographyPlugin({ presets: [...TEXT_PRESETS, ...myExtraPresets] })
+ * ```
+ */
+declare function typographyPlugin(options?: TypographyPluginOptions): PluginDefinition;
+
+export { TEXT_PRESETS, TEXT_PRESET_CATEGORIES, type TextPreset, type TextPresetCategory, type TextPresetCategoryId, type TypographyPluginOptions, typographyPlugin };

package/dist/index.js

@@ -0,0 +1,40 @@
+import { TEXT_PRESETS, TEXT_PRESET_CATEGORIES, setPresets } from './chunk-YI7CKNOM.js';
+export { TEXT_PRESETS, TEXT_PRESET_CATEGORIES } from './chunk-YI7CKNOM.js';
+import { createPlugin } from '@bupple/vss/plugins';
+import { lazy } from 'react';
+
+function buildCategoriesFromPresets(presets) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const p of presets) {
+    const list = seen.get(p.category) ?? [];
+    list.push(p);
+    seen.set(p.category, list);
+  }
+  return Array.from(seen.entries()).map(([id, items]) => ({
+    id,
+    name: id.charAt(0).toUpperCase() + id.slice(1),
+    presets: items
+  }));
+}
+function typographyPlugin(options = {}) {
+  return createPlugin({
+    id: "bupple:typography",
+    name: "Typography",
+    version: "1.0.0",
+    onRegister(ctx) {
+      const presets = options.presets ?? TEXT_PRESETS;
+      const categories = options.categories ?? (options.presets ? buildCategoriesFromPresets(presets) : TEXT_PRESET_CATEGORIES);
+      setPresets(presets, categories);
+      ctx.registerPanel({
+        id: "text",
+        label: "Text",
+        icon: ctx.icons.pluginTypography,
+        component: lazy(() => import('./panel-NCQBLXF6.js')),
+        mobileComponent: lazy(() => import('./panel-mobile-4A4K4QIO.js')),
+        order: options.order ?? 3
+      });
+    }
+  });
+}
+
+export { typographyPlugin };

package/dist/panel-4TAKN5WR.cjs

@@ -0,0 +1,320 @@
+'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 TextPanel() {
+  const icons = ui.useIconMap();
+  const {
+    chevronDown: ChevronDownIcon,
+    add: PlusIcon,
+    search: SearchIcon,
+    itemText: TypeIcon,
+    close: XIcon
+  } = icons;
+  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 [search, setSearch] = react.useState("");
+  const [collapsedCategories, setCollapsedCategories] = react.useState(
+    /* @__PURE__ */ new Set()
+  );
+  const toggleCategory = react.useCallback((id) => {
+    setCollapsedCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  }, []);
+  const handleAddText = react.useCallback(
+    (preset) => {
+      const fps = settings.fps;
+      const durationFrames = fps * 5;
+      let resolvedTrackId;
+      const available = ui.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: {
+          ...core.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 = react.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 = react.useMemo(() => {
+    const categories = chunk5IHSZBVF_cjs.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__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-3 py-2 border-b", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground pointer-events-none" }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          "button",
+          {
+            className: "absolute right-2 top-1/2 -translate-y-1/2 opacity-50 hover:opacity-100",
+            onClick: () => setSearch(""),
+            children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { className: "size-3" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PlusIcon, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: filteredCategories.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 py-12", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { className: "size-6 opacity-20" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs opacity-40", children: [
+        'No presets match "',
+        search,
+        '"'
+      ] })
+    ] }) : filteredCategories.map((category) => {
+      const isCollapsed = collapsedCategories.has(category.id);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                ChevronDownIcon,
+                {
+                  className: ui.cn(
+                    "size-3 transition-transform",
+                    isCollapsed && "-rotate-90"
+                  )
+                }
+              ),
+              category.name,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto text-[9px] opacity-50", children: category.presets.length })
+            ]
+          }
+        ),
+        !isCollapsed && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 pb-2 flex flex-col gap-1.5", children: category.presets.map((preset) => /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  const { dragProps, isDragging } = ui.useItemDrag({
+    getData: () => ({
+      itemType: "text",
+      source: {},
+      style: { ...preset.style },
+      durationSeconds: 3,
+      name: preset.label
+    })
+  });
+  react.useEffect(() => {
+    if (s.fontFamily) {
+      ui.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...dragProps,
+      onClick,
+      className: ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 flex items-center justify-center",
+                  style: advancedBgStyle
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-2.5 py-1.5 border-t border-border/30", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] font-medium truncate", children: preset.label }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[9px] opacity-40 ml-auto shrink-0", children: s.fontFamily })
+        ] })
+      ]
+    }
+  );
+}
+
+module.exports = TextPanel;