@bupple/vss-plugin-typography 1.0.0

package/dist/panel-mobile-4A4K4QIO.js

@@ -0,0 +1,196 @@
+import { getCategories } from './chunk-YI7CKNOM.js';
+import { createDefaultTransform } from '@bupple/vss/core';
+import { useIconMap, useStudioStore, findAvailableTrack, ensureFontLoaded } from '@bupple/vss/ui';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TextPanelMobile() {
+  const icons = useIconMap();
+  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 selectItem = useStudioStore((s) => s.selectItem);
+  const categories = getCategories();
+  const [search, setSearch] = useState("");
+  useMemo(
+    () => categories.flatMap((c) => c.presets),
+    [categories]
+  );
+  const filteredCategories = 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 = useCallback(
+    (preset) => {
+      const fps = settings.fps;
+      const durationFrames = fps * 5;
+      const available = 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 = 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 = 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__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(icons.search, { className: "absolute left-3 top-1/2 -translate-y-1/2 size-4 text-white/30" }),
+      /* @__PURE__ */ 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__ */ 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__ */ jsx(icons.add, { className: "size-4" }),
+          "Add blank text"
+        ]
+      }
+    ),
+    filteredCategories.map((category) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-white/40 uppercase tracking-wider font-medium", children: category.name }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1.5", children: category.presets.map((preset) => /* @__PURE__ */ jsx(
+        PresetCard,
+        {
+          preset,
+          onAdd: handleAddText
+        },
+        preset.id
+      )) })
+    ] }, category.id)),
+    filteredCategories.length === 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center py-8", children: [
+      /* @__PURE__ */ jsx(icons.itemText, { className: "size-6 text-white/15 mb-2" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-white/30", children: "No presets found" })
+    ] })
+  ] });
+}
+function PresetCard({
+  preset,
+  onAdd
+}) {
+  const style = preset.style;
+  useEffect(() => {
+    if (style.fontFamily) ensureFontLoaded(style.fontFamily);
+  }, [style.fontFamily]);
+  return /* @__PURE__ */ 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__ */ jsx(
+          "div",
+          {
+            className: "h-14 flex items-center justify-center px-2 overflow-hidden",
+            style: {
+              backgroundColor: style.backgroundColor ?? "transparent"
+            },
+            children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "px-2 py-1.5 border-t border-white/5", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] text-white/50 truncate", children: preset.label }),
+          /* @__PURE__ */ jsx("p", { className: "text-[9px] text-white/25 truncate", children: style.fontFamily ?? "Inter" })
+        ] })
+      ]
+    }
+  );
+}
+
+export { TextPanelMobile as default };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@bupple/vss-plugin-typography",
+  "version": "1.0.0",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@bupple/vss": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.39",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.9.0",
+    "@bupple/vss": "1.0.0",
+    "@bupple/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "lint": "eslint .",
+    "check-types": "tsc --noEmit"
+  }
+}