@drawnagency/primitives 0.1.71 → 0.1.73

package/dist/{chunk-RTYJZAKR.js → chunk-7T2WQSWF.js}

@@ -1,25 +1,25 @@
-import {
-  Checkbox,
-  FormLabel,
-  Input
-} from "./chunk-5THS4K5D.js";
 import {
   EditableGrid,
   EditablePlainText,
   MediaBlock,
   containerGridClass,
   useEditableCollection
-} from "./chunk-KWBM27UR.js";
+} from "./chunk-T7MP7ANP.js";
+import {
+  Checkbox,
+  FormLabel,
+  Input
+} from "./chunk-5THS4K5D.js";
 import {
   AddIcon,
   DeleteIcon,
   DragHandle,
   IconButton
-} from "./chunk-I5737FJY.js";
+} from "./chunk-IFHRHV7S.js";
 import {
   DEFAULT_LINK,
   LinkValueSchema
-} from "./chunk-3DCG4DNU.js";
+} from "./chunk-PZJL2S3Z.js";
 import {
   curatedIcons,
   getIcon
@@ -27,13 +27,13 @@ import {
 import {
   cn
 } from "./chunk-7EOSDFS3.js";
-import {
-  HexColorSchema,
-  SingleMediaReferenceSchema
-} from "./chunk-YMVYTYGQ.js";
 import {
   defineSection
 } from "./chunk-VKAGMEKE.js";
+import {
+  HexColorSchema,
+  SingleMediaReferenceSchema
+} from "./chunk-SWIHUIFT.js";
 
 // src/components/sections/Colors/index.tsx
 import { z as z2 } from "zod";

package/dist/chunk-IFHRHV7S.js

@@ -0,0 +1,117 @@
+import {
+  getMediaProvider
+} from "./chunk-S55OZ7F2.js";
+import {
+  cn
+} from "./chunk-7EOSDFS3.js";
+
+// src/components/shell/MediaLibraryContext.tsx
+import { createContext, useContext } from "react";
+var MediaLibraryContext = createContext(null);
+function useMediaLibrary() {
+  return useContext(MediaLibraryContext);
+}
+
+// src/hooks/useResolvedMedia.ts
+import { useMemo } from "react";
+function useResolvedMedia(imageId) {
+  const ctx = useMediaLibrary();
+  return useMemo(() => {
+    if (!imageId || !ctx) {
+      return { src: void 0, srcset: void 0, poster: void 0, alt: "", kind: "image" };
+    }
+    const { manifest, pendingItems, pendingLocalUrls, siteConfig } = ctx;
+    const sizes = siteConfig?.media?.sizes ?? [640, 1080, 1920];
+    const manifestItem = manifest.images[imageId];
+    const pendingItem = pendingItems.find((i) => i.id === imageId);
+    const item = manifestItem ?? pendingItem;
+    const alt = item?.alt ?? "";
+    const kind = item?.kind ?? "image";
+    const width = item?.width;
+    const height = item?.height;
+    const localUrl = pendingLocalUrls[imageId];
+    if (localUrl) {
+      return { src: localUrl, srcset: void 0, poster: void 0, alt, kind, width, height };
+    }
+    if (manifestItem) {
+      const provider = getMediaProvider();
+      const resolved = provider.resolve(manifestItem, sizes);
+      if (resolved && resolved.tag === "img") {
+        return {
+          src: resolved.src,
+          srcset: "srcSet" in resolved ? resolved.srcSet : void 0,
+          poster: void 0,
+          alt,
+          kind,
+          width: resolved.width,
+          height: resolved.height
+        };
+      }
+      if (resolved && resolved.tag === "video") {
+        return { src: resolved.src, srcset: void 0, poster: resolved.poster, alt, kind, width: resolved.width, height: resolved.height };
+      }
+    }
+    return { src: void 0, srcset: void 0, poster: void 0, alt, kind, width, height };
+  }, [imageId, ctx]);
+}
+
+// src/components/shared/icons.tsx
+import { GripVertical, Plus, Trash2, X, Settings } from "lucide-react";
+import { GripVertical as GripVertical2, Plus as Plus2, Trash2 as Trash22, X as X2, Settings as Settings2 } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+function DragHandle({ size = 16 }) {
+  return /* @__PURE__ */ jsx(GripVertical, { size });
+}
+function AddIcon({ size = 14 }) {
+  return /* @__PURE__ */ jsx(Plus, { size });
+}
+function DeleteIcon({ size = 14 }) {
+  return /* @__PURE__ */ jsx(Trash2, { size });
+}
+function SettingsIcon({ size = 14 }) {
+  return /* @__PURE__ */ jsx(Settings, { size });
+}
+
+// src/components/shared/IconButton.tsx
+import { forwardRef } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var sizeClasses = {
+  sm: "h-chrome-sm w-chrome-sm",
+  md: "h-chrome-md w-chrome-md",
+  lg: "h-chrome-lg w-chrome-lg"
+};
+var intentClasses = {
+  default: "text-base-contrast-light hover:text-base-contrast",
+  destructive: "text-destructive hover:text-destructive-hover",
+  primary: "text-primary/60 hover:text-primary"
+};
+var IconButton = forwardRef(
+  function IconButton2({ icon, label, size = "md", intent = "default", className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "cursor-pointer flex items-center justify-center rounded transition-colors",
+          sizeClasses[size],
+          intentClasses[intent],
+          className
+        ),
+        "aria-label": label,
+        ...rest,
+        children: icon
+      }
+    );
+  }
+);
+
+export {
+  useMediaLibrary,
+  useResolvedMedia,
+  DragHandle,
+  AddIcon,
+  DeleteIcon,
+  SettingsIcon,
+  IconButton
+};

package/dist/{chunk-2BHPWO7M.js → chunk-N6AE6NBB.js}

@@ -1,17 +1,20 @@
+import {
+  Button,
+  usePages
+} from "./chunk-ZSPCE6MZ.js";
 import {
   Checkbox,
   FormLabel,
   Input
 } from "./chunk-5THS4K5D.js";
-import {
-  usePages
-} from "./chunk-4E66N6UV.js";
 import {
   DeleteIcon,
   DragHandle,
   IconButton,
-  SettingsIcon
-} from "./chunk-I5737FJY.js";
+  SettingsIcon,
+  useMediaLibrary,
+  useResolvedMedia
+} from "./chunk-IFHRHV7S.js";
 import {
   cn
 } from "./chunk-7EOSDFS3.js";
@@ -86,7 +89,7 @@ function SettingsButton({ onClick }) {
 }
 
 // src/components/editor/SettingsForm.tsx
-import { useId as useId2, useState as useState2 } from "react";
+import { useId as useId2, useState as useState3 } from "react";
 
 // src/components/shared/Select.tsx
 import { useId } from "react";
@@ -205,11 +208,125 @@ function LinkField({ label, value, onChange }) {
   ] });
 }
 
-// src/components/shared/Tabs.tsx
+// src/components/shared/VideoSourceField.tsx
 import { useState } from "react";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function VideoSourceField({ value, onChange }) {
+  const mediaLibrary = useMediaLibrary();
+  const [mode, setMode] = useState(value?.type === "external" ? "embed" : "library");
+  const [url, setUrl] = useState(value?.type === "external" ? value.url : "");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [fallback, setFallback] = useState(false);
+  const libraryImageId = value?.type === "library" ? value.ref.imageId : void 0;
+  const resolved = useResolvedMedia(libraryImageId);
+  async function submitEmbed() {
+    if (loading) return;
+    const trimmed = url.trim();
+    if (!trimmed) return;
+    setLoading(true);
+    setError(null);
+    setFallback(false);
+    try {
+      const res = await fetch(`/api/media/oembed?url=${encodeURIComponent(trimmed)}`);
+      const body = await res.json();
+      if (!res.ok) {
+        setError(body?.message ?? "Couldn't load that video.");
+        return;
+      }
+      onChange({
+        type: "external",
+        provider: body.provider,
+        id: body.id,
+        url: body.url,
+        width: body.width,
+        height: body.height
+      });
+      if (body.fallback) {
+        setFallback(true);
+      } else {
+        setUrl("");
+      }
+    } catch {
+      setError("Couldn't reach the video service.");
+    } finally {
+      setLoading(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsx7(FormLabel, { children: "Source" }),
+    /* @__PURE__ */ jsx7("div", { className: "flex gap-2", role: "tablist", children: ["library", "embed"].map((m) => /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": mode === m,
+        onClick: () => setMode(m),
+        className: cn(
+          "cursor-pointer rounded border px-3 py-1 text-sm",
+          mode === m ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast"
+        ),
+        children: m === "library" ? "Choose from library" : "Paste embed URL"
+      },
+      m
+    )) }),
+    mode === "library" ? /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+      libraryImageId ? resolved.poster ? /* @__PURE__ */ jsx7("img", { src: resolved.poster, alt: "", className: "h-12 w-20 rounded object-cover" }) : /* @__PURE__ */ jsx7("span", { className: "text-sm text-base-contrast-light", children: "Video selected" }) : /* @__PURE__ */ jsx7("span", { className: "text-sm text-base-contrast-light", children: "No video selected" }),
+      /* @__PURE__ */ jsx7(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          size: "sm",
+          onClick: () => mediaLibrary?.openSelectModal((id) => onChange({ type: "library", ref: { imageId: id } })),
+          children: "Choose video"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "text",
+            value: url,
+            onChange: (e) => {
+              setUrl(e.target.value);
+              setError(null);
+              setFallback(false);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                void submitEmbed();
+              }
+            },
+            placeholder: "Paste a YouTube or Vimeo URL\u2026",
+            className: "flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          Button,
+          {
+            type: "button",
+            variant: "primary",
+            size: "sm",
+            onClick: () => void submitEmbed(),
+            disabled: loading || !url.trim(),
+            children: loading ? "Loading\u2026" : "Use link"
+          }
+        )
+      ] }),
+      error ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-red-600", children: error }) : null,
+      !error && fallback ? /* @__PURE__ */ jsx7("p", { className: "text-xs text-base-contrast-light/70", children: "Added \u2014 couldn't fetch exact dimensions, using 16:9." }) : null
+    ] })
+  ] });
+}
+
+// src/components/shared/Tabs.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar }) {
-  const [uncontrolledId, setUncontrolledId] = useState(defaultTabId ?? tabs[0]?.id);
+  const [uncontrolledId, setUncontrolledId] = useState2(defaultTabId ?? tabs[0]?.id);
   const isControlled = activeTabId !== void 0;
   const activeId = isControlled ? activeTabId : uncontrolledId;
   const activeTab = tabs.find((t) => t.id === activeId) ?? tabs[0];
@@ -217,8 +334,8 @@ function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar })
     if (!isControlled) setUncontrolledId(id);
     onTabChange?.(id);
   }
-  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
-    /* @__PURE__ */ jsx7("div", { className: cn("border-b border-base-200", fullBleedTabBar && "-mx-6 px-6"), children: /* @__PURE__ */ jsx7("div", { className: "flex", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx8("div", { className: cn("border-b border-base-200", fullBleedTabBar && "-mx-6 px-6"), children: /* @__PURE__ */ jsx8("div", { className: "flex", role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -233,12 +350,12 @@ function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar })
       },
       tab.id
     )) }) }),
-    /* @__PURE__ */ jsx7("div", { role: "tabpanel", children: activeTab?.content })
+    /* @__PURE__ */ jsx8("div", { role: "tabpanel", className: cn(fullBleedTabBar && "pt-4"), children: activeTab?.content })
   ] });
 }
 
 // src/components/editor/SettingsForm.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function resolveValues(schema, values) {
   const resolved = {};
   for (const [key, field] of Object.entries(schema)) {
@@ -278,9 +395,9 @@ function RangeField({
   onChange
 }) {
   const id = useId2();
-  return /* @__PURE__ */ jsxs6("div", { children: [
-    /* @__PURE__ */ jsx8(FormLabel, { htmlFor: id, children: field.label }),
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs7("div", { children: [
+    /* @__PURE__ */ jsx9(FormLabel, { htmlFor: id, children: field.label }),
+    /* @__PURE__ */ jsx9(
       "input",
       {
         id,
@@ -300,7 +417,7 @@ function RangeField({
 function renderField(key, field, value, handleFieldChange) {
   switch (field.type) {
     case "text":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         Input,
         {
           label: field.label,
@@ -311,7 +428,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "number":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         Input,
         {
           label: field.label,
@@ -322,7 +439,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "checkbox":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         Checkbox,
         {
           label: field.label,
@@ -332,7 +449,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "select":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         Select,
         {
           label: field.label,
@@ -343,7 +460,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "range":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         RangeField,
         {
           field,
@@ -353,7 +470,7 @@ function renderField(key, field, value, handleFieldChange) {
         key
       );
     case "link":
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         LinkField,
         {
           label: field.label,
@@ -362,12 +479,21 @@ function renderField(key, field, value, handleFieldChange) {
         },
         key
       );
+    case "video-source":
+      return /* @__PURE__ */ jsx9(
+        VideoSourceField,
+        {
+          value,
+          onChange: (v) => handleFieldChange(key, v)
+        },
+        key
+      );
     default:
       return null;
   }
 }
 function SettingsForm({ schema, values, onChange, tabs }) {
-  const [local, setLocal] = useState2(() => resolveValues(schema, values));
+  const [local, setLocal] = useState3(() => resolveValues(schema, values));
   function handleFieldChange(key, newValue) {
     const next = { ...local, [key]: newValue };
     setLocal(next);
@@ -378,16 +504,16 @@ function SettingsForm({ schema, values, onChange, tabs }) {
     const listed = new Set(tabs.flatMap((t) => t.fields));
     const otherKeys = Object.keys(schema).filter((key) => !listed.has(key));
     const tabItems = [
-      ...tabs.map((t) => ({ id: t.label, label: t.label, content: /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-4", children: fields(t.fields) }) })),
-      ...otherKeys.length > 0 ? [{ id: "__other__", label: "Other", content: /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-4", children: fields(otherKeys) }) }] : []
+      ...tabs.map((t) => ({ id: t.label, label: t.label, content: /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-4", children: fields(t.fields) }) })),
+      ...otherKeys.length > 0 ? [{ id: "__other__", label: "Other", content: /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-4", children: fields(otherKeys) }) }] : []
     ];
-    return /* @__PURE__ */ jsx8(Tabs, { tabs: tabItems, fullBleedTabBar: true });
+    return /* @__PURE__ */ jsx9(Tabs, { tabs: tabItems, fullBleedTabBar: true });
   }
-  return /* @__PURE__ */ jsx8("div", { className: "flex flex-col gap-4", children: Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange)) });
+  return /* @__PURE__ */ jsx9("div", { className: "flex flex-col gap-4", children: Object.entries(schema).map(([key, field]) => renderField(key, field, local[key], handleFieldChange)) });
 }
 
 // src/components/shared/Popover.tsx
-import { useEffect as useEffect2, useLayoutEffect, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useRef, useState as useState4 } from "react";
 
 // src/hooks/useFocusTrap.ts
 import { useEffect } from "react";
@@ -438,7 +564,7 @@ function useFocusTrap(ref, active) {
 }
 
 // src/components/shared/Popover.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Popover({
   isOpen,
   onClose,
@@ -448,7 +574,7 @@ function Popover({
   className
 }) {
   const panelRef = useRef(null);
-  const [resolvedAlign, setResolvedAlign] = useState3("start");
+  const [resolvedAlign, setResolvedAlign] = useState4("start");
   useFocusTrap(panelRef, isOpen);
   useLayoutEffect(() => {
     if (!isOpen || align !== "auto") {
@@ -488,7 +614,7 @@ function Popover({
   }, [isOpen, onClose, anchorRef]);
   if (!isOpen) return null;
   const effectiveAlign = align === "auto" ? resolvedAlign : align;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       ref: panelRef,
@@ -506,10 +632,10 @@ function Popover({
 
 // src/components/shared/PopoverItem.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var PopoverItem = forwardRef2(
   function PopoverItem2({ className, children, ...rest }, ref) {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       "button",
       {
         ref,