dune-react 0.0.10 → 0.0.12

package/dist/components/puck-base/core/fields.js

@@ -1,16 +1,10 @@
 import { fieldTypes } from "../field.js";
-import { ActionField } from "../action-field.js";
-import { iconNames } from "../../../node_modules/.pnpm/lucide-react@0.540.0_react@19.2.4/node_modules/lucide-react/dist/esm/DynamicIcon.js";
+import { ActionField } from "../fields/action-field.js";
+import { IconPickerField } from "../icon-picker-field.js";
 const formMethods = ["get", "post", "put", "patch", "delete"];
 const icon = {
-  type: "select",
-  options: [
-    { label: "none", value: "none" },
-    ...iconNames.map((iconName) => ({
-      label: iconName,
-      value: iconName
-    }))
-  ]
+  type: "custom",
+  render: IconPickerField
 };
 const action = {
   type: "custom",
@@ -32,7 +26,6 @@ const button = {
   type: "object",
   objectFields: {
     label: { type: "text" },
-    url: { type: "text" },
     action,
     variant: {
       type: "select",
@@ -59,7 +52,6 @@ const button = {
 };
 const buttonDefaults = {
   label: "Button",
-  url: "",
   action: actionDefaults,
   variant: "default",
   size: "default",
@@ -97,13 +89,14 @@ const image = {
   type: "object",
   objectFields: {
     // "image" is a custom field type registered via Puck overrides (fieldTypes.image)
-    src: { type: "image", label: "图片" },
+    src: { type: "image", label: "Image" },
     alt: { type: "text" }
   }
 };
-const getPlaceholderImageUrl = (size, text = "Placeholder Image") => `https://dummyimage.com/${size}/f5f4f4/101010.png&text=${encodeURIComponent(
-  text
-)}`;
+const getPlaceholderImageUrl = (size, text = "Placeholder Image") => {
+  const [w, h] = size.split("x");
+  return `https://picsum.photos/seed/${encodeURIComponent(text)}/${w}/${h}`;
+};
 const image16x9Placeholder = {
   alt: "16/9 aspect ratio accessible description of the image",
   src: getPlaceholderImageUrl("1920x1080")
@@ -204,7 +197,7 @@ const fieldDefaults = {
   type: "text",
   name: "field_name"
 };
-const { url, action: _buttonAction, ...formButtonConfig } = button.objectFields;
+const { action: _buttonAction, ...formButtonConfig } = button.objectFields;
 const form = {
   type: "object",
   objectFields: {

package/dist/components/puck-base/core/icon-catalog.d.ts

@@ -0,0 +1,14 @@
+import type { LucideIcon } from "lucide-react";
+export interface IconEntry {
+    name: string;
+    component: LucideIcon;
+}
+export interface IconCategory {
+    label: string;
+    icons: IconEntry[];
+}
+export declare const ICON_CATALOG: IconCategory[];
+/** Flat map of icon name → LucideIcon component */
+export declare const ICON_MAP: Map<string, LucideIcon>;
+/** Set of all curated icon names, for membership checks */
+export declare const CURATED_ICON_SET: Set<string>;

package/dist/components/puck-base/core/icon-catalog.js

@@ -0,0 +1,193 @@
+import { ArrowRight, ArrowLeft, ArrowUp, ArrowDown, ArrowUpRight, ChevronRight, ChevronLeft, ChevronDown, ChevronUp, ChevronsRight, MoveRight, ExternalLink, CornerDownRight, Undo2, Redo2, Mail, Phone, MessageCircle, MessageSquare, Send, AtSign, Inbox, Bell, BellRing, Megaphone, PhoneCall, Voicemail, Globe, Share2, Link, ThumbsUp, Heart, Star, Users, User, UserPlus, UserCheck, HandHeart, Handshake, Briefcase, Building2, CreditCard, DollarSign, Wallet, Receipt, BarChart3, TrendingUp, PiggyBank, BadgeDollarSign, ChartPie, Landmark, Image, Video, Camera, Play, Music, FileText, BookOpen, PenTool, Newspaper, Mic, Headphones, Film, Code, Terminal, Cpu, Database, Server, Cloud, Wifi, Smartphone, Monitor, Laptop, HardDrive, GitBranch, Check, CheckCircle, CircleCheck, X, XCircle, AlertTriangle, AlertCircle, Info, Ban, Loader, CircleAlert, ShieldCheck, Search, Settings, Menu, Plus, Minus, Pencil, Trash2, Copy, Download, Upload, Filter, Eye, EyeOff, Lock, Unlock, MoreHorizontal, Grip, Sun, Moon, Zap, Flame, Droplets, Leaf, Mountain, Compass, MapPin, Clock, Calendar, Gift, TreePine, Snowflake, CloudRain, ShoppingCart, ShoppingBag, Tag, Percent, Store, Package, Truck, Box, BadgePercent, Ticket } from "lucide-react";
+function entry(name, component) {
+  return { name, component };
+}
+const ICON_CATALOG = [
+  {
+    label: "Navigation",
+    icons: [
+      entry("arrow-right", ArrowRight),
+      entry("arrow-left", ArrowLeft),
+      entry("arrow-up", ArrowUp),
+      entry("arrow-down", ArrowDown),
+      entry("arrow-up-right", ArrowUpRight),
+      entry("chevron-right", ChevronRight),
+      entry("chevron-left", ChevronLeft),
+      entry("chevron-down", ChevronDown),
+      entry("chevron-up", ChevronUp),
+      entry("chevrons-right", ChevronsRight),
+      entry("move-right", MoveRight),
+      entry("external-link", ExternalLink),
+      entry("corner-down-right", CornerDownRight),
+      entry("undo-2", Undo2),
+      entry("redo-2", Redo2)
+    ]
+  },
+  {
+    label: "Communication",
+    icons: [
+      entry("mail", Mail),
+      entry("phone", Phone),
+      entry("message-circle", MessageCircle),
+      entry("message-square", MessageSquare),
+      entry("send", Send),
+      entry("at-sign", AtSign),
+      entry("inbox", Inbox),
+      entry("bell", Bell),
+      entry("bell-ring", BellRing),
+      entry("megaphone", Megaphone),
+      entry("phone-call", PhoneCall),
+      entry("voicemail", Voicemail)
+    ]
+  },
+  {
+    label: "Social",
+    icons: [
+      entry("globe", Globe),
+      entry("share-2", Share2),
+      entry("link", Link),
+      entry("thumbs-up", ThumbsUp),
+      entry("heart", Heart),
+      entry("star", Star),
+      entry("users", Users),
+      entry("user", User),
+      entry("user-plus", UserPlus),
+      entry("user-check", UserCheck),
+      entry("hand-heart", HandHeart),
+      entry("handshake", Handshake)
+    ]
+  },
+  {
+    label: "Business",
+    icons: [
+      entry("briefcase", Briefcase),
+      entry("building-2", Building2),
+      entry("credit-card", CreditCard),
+      entry("dollar-sign", DollarSign),
+      entry("wallet", Wallet),
+      entry("receipt", Receipt),
+      entry("bar-chart-3", BarChart3),
+      entry("trending-up", TrendingUp),
+      entry("piggy-bank", PiggyBank),
+      entry("badge-dollar-sign", BadgeDollarSign),
+      entry("chart-pie", ChartPie),
+      entry("landmark", Landmark)
+    ]
+  },
+  {
+    label: "Media",
+    icons: [
+      entry("image", Image),
+      entry("video", Video),
+      entry("camera", Camera),
+      entry("play", Play),
+      entry("music", Music),
+      entry("file-text", FileText),
+      entry("book-open", BookOpen),
+      entry("pen-tool", PenTool),
+      entry("newspaper", Newspaper),
+      entry("mic", Mic),
+      entry("headphones", Headphones),
+      entry("film", Film)
+    ]
+  },
+  {
+    label: "Tech",
+    icons: [
+      entry("code", Code),
+      entry("terminal", Terminal),
+      entry("cpu", Cpu),
+      entry("database", Database),
+      entry("server", Server),
+      entry("cloud", Cloud),
+      entry("wifi", Wifi),
+      entry("smartphone", Smartphone),
+      entry("monitor", Monitor),
+      entry("laptop", Laptop),
+      entry("hard-drive", HardDrive),
+      entry("git-branch", GitBranch)
+    ]
+  },
+  {
+    label: "Status",
+    icons: [
+      entry("check", Check),
+      entry("check-circle", CheckCircle),
+      entry("circle-check", CircleCheck),
+      entry("x", X),
+      entry("x-circle", XCircle),
+      entry("alert-triangle", AlertTriangle),
+      entry("alert-circle", AlertCircle),
+      entry("info", Info),
+      entry("ban", Ban),
+      entry("loader", Loader),
+      entry("circle-alert", CircleAlert),
+      entry("shield-check", ShieldCheck)
+    ]
+  },
+  {
+    label: "UI",
+    icons: [
+      entry("search", Search),
+      entry("settings", Settings),
+      entry("menu", Menu),
+      entry("plus", Plus),
+      entry("minus", Minus),
+      entry("pencil", Pencil),
+      entry("trash-2", Trash2),
+      entry("copy", Copy),
+      entry("download", Download),
+      entry("upload", Upload),
+      entry("filter", Filter),
+      entry("eye", Eye),
+      entry("eye-off", EyeOff),
+      entry("lock", Lock),
+      entry("unlock", Unlock),
+      entry("more-horizontal", MoreHorizontal),
+      entry("grip", Grip)
+    ]
+  },
+  {
+    label: "Nature",
+    icons: [
+      entry("sun", Sun),
+      entry("moon", Moon),
+      entry("zap", Zap),
+      entry("flame", Flame),
+      entry("droplets", Droplets),
+      entry("leaf", Leaf),
+      entry("mountain", Mountain),
+      entry("compass", Compass),
+      entry("map-pin", MapPin),
+      entry("clock", Clock),
+      entry("calendar", Calendar),
+      entry("gift", Gift),
+      entry("tree-pine", TreePine),
+      entry("snowflake", Snowflake),
+      entry("cloud-rain", CloudRain)
+    ]
+  },
+  {
+    label: "Commerce",
+    icons: [
+      entry("shopping-cart", ShoppingCart),
+      entry("shopping-bag", ShoppingBag),
+      entry("tag", Tag),
+      entry("percent", Percent),
+      entry("store", Store),
+      entry("package", Package),
+      entry("truck", Truck),
+      entry("box", Box),
+      entry("badge-percent", BadgePercent),
+      entry("ticket", Ticket)
+    ]
+  }
+];
+const ICON_MAP = new Map(
+  ICON_CATALOG.flatMap((cat) => cat.icons.map((e) => [e.name, e.component]))
+);
+new Set(ICON_MAP.keys());
+export {
+  ICON_CATALOG,
+  ICON_MAP
+};

package/dist/components/puck-base/core/styles.d.ts

@@ -1,4 +1,37 @@
+/**
+ * Puck Section 样式系统
+ *
+ * 所有 section 组件共享一套可编辑的样式配置（背景、内边距、深色/浅色模式等）。
+ * 本文件是该样式系统的中枢，避免在 50+ 个组件中重复定义。
+ *
+ * 核心流程：
+ *   createStylesField(extra)    → 组件 index.tsx 的 fields.styles    → Puck 编辑器右侧面板的样式控件
+ *   createStylesDefaults(extra) → 组件 index.tsx 的 defaultProps.styles → 组件拖入画布时的初始样式
+ *
+ * 文件结构：
+ *   1. Types           — 样式相关类型
+ *   2. Field 原子定义   — 每个编辑器控件的配置（padding / sectionStyle / backgroundColor …）
+ *   3. Fields & Defaults — 将原子 field 按层级组合（基础 / 带背景图）
+ *   4. 工厂函数         — createStylesField / createStylesDefaults
+ *   5. 各分类预设       — Banner / Hero / CTA … 每类导出 Interface + Field + Defaults 三件套
+ */
 import type { SectionStyle, OverlayStyle } from "../container";
+export type PaddingLevel = "none" | "small" | "medium" | "large";
+export type { SectionStyle, OverlayStyle };
+/** 所有 section 通用的基础样式 */
+export interface SectionBaseStyles {
+    sectionStyle?: SectionStyle;
+    backgroundColor?: string;
+    padding?: {
+        top?: PaddingLevel;
+        bottom?: PaddingLevel;
+    };
+}
+/** 带背景图的 section 样式，继承基础样式 */
+export interface SectionImageStyles extends SectionBaseStyles {
+    backgroundImage?: string;
+    overlay?: OverlayStyle;
+}
 export declare const paddingLevel: {
     readonly type: "select";
     readonly options: readonly [{
@@ -64,10 +97,6 @@ export declare const padding: {
         readonly exclude: true;
     };
 };
-export declare const paddingDefaults: {
-    readonly top: "medium";
-    readonly bottom: "medium";
-};
 export declare const sectionStyle: {
     readonly type: "select";
     readonly label: "Section Style";
@@ -91,6 +120,21 @@ export declare const sectionStyle: {
         readonly instructions: "Match the section's background tone: use 'dark' for dark/black backgrounds, 'muted' for gray/subtle backgrounds, 'inverted' for full contrast reversal. Default for standard light backgrounds.";
     };
 };
+export declare const backgroundColor: {
+    readonly type: "text";
+    readonly label: "Background Color";
+    readonly ai: {
+        readonly instructions: "Set a custom background color in oklch format (e.g. 'oklch(0.2 0.05 260)'). Only use when sectionStyle is 'custom'.";
+    };
+};
+export declare const backgroundImage: {
+    readonly type: "text";
+    readonly label: "Background Image URL";
+    readonly ai: {
+        readonly instructions: "URL for a full-width background image behind the section.";
+        readonly stream: false;
+    };
+};
 export declare const sectionOverlay: {
     readonly type: "select";
     readonly label: "Overlay";
@@ -111,31 +155,6 @@ export declare const sectionOverlay: {
         readonly instructions: "Use gradient overlays when the section has a background image that needs text contrast. Use noise for subtle texture.";
     };
 };
-export declare const backgroundColor: {
-    readonly type: "text";
-    readonly label: "Background Color";
-    readonly ai: {
-        readonly instructions: "Set a custom background color in oklch format (e.g. 'oklch(0.2 0.05 260)'). Only use when sectionStyle is 'custom'.";
-    };
-};
-export declare const backgroundImage: {
-    readonly type: "text";
-    readonly label: "Background Image URL";
-    readonly ai: {
-        readonly instructions: "URL for a full-width background image behind the section.";
-        readonly stream: false;
-    };
-};
-export type PaddingLevel = "none" | "small" | "medium" | "large";
-export type { SectionStyle, OverlayStyle };
-export interface SectionBaseStyles {
-    sectionStyle?: SectionStyle;
-    backgroundColor?: string;
-    padding?: {
-        top?: PaddingLevel;
-        bottom?: PaddingLevel;
-    };
-}
 export declare const sectionBaseStyleFields: {
     readonly sectionStyle: {
         readonly type: "select";
@@ -214,16 +233,18 @@ export declare const sectionBaseStyleFields: {
         };
     };
 };
+export declare const paddingDefaults: {
+    readonly top: "medium";
+    readonly bottom: "medium";
+};
 export declare const sectionBaseStyleDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
     };
 };
-export interface SectionImageStyles extends SectionBaseStyles {
-    backgroundImage?: string;
-    overlay?: OverlayStyle;
-}
 export declare const sectionImageStyleFields: {
     readonly backgroundImage: {
         readonly type: "text";
@@ -331,11 +352,20 @@ export declare const sectionImageStyleFields: {
     };
 };
 export declare const sectionImageStyleDefaults: {
+    backgroundImage: string;
+    overlay: "none";
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
     };
 };
+/**
+ * 生成 Puck `styles` object field。
+ * 始终包含 sectionBaseStyleFields（sectionStyle / backgroundColor / padding），
+ * 可通过 extraFields 追加分类特有的控件。
+ */
 export declare function createStylesField<T extends Record<string, unknown> = Record<string, never>>(extraFields?: T): {
     type: "object";
     label: string;
@@ -418,7 +448,14 @@ export declare function createStylesField<T extends Record<string, unknown> = Re
         };
     };
 };
+/**
+ * 生成 Puck `styles` defaultProps。
+ * 始终包含 sectionBaseStyleDefaults 的全部 key，
+ * 可通过 extraDefaults 追加或覆盖分类特有的默认值。
+ */
 export declare function createStylesDefaults<T>(extraDefaults?: T): {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -512,6 +549,8 @@ export declare const bannerStylesField: {
     };
 };
 export declare const bannerStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -604,6 +643,8 @@ export declare const heroStylesField: {
     };
 };
 export declare const heroStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -695,6 +736,8 @@ export declare const ctaStylesField: {
     };
 };
 export declare const ctaStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -786,6 +829,8 @@ export declare const featureStylesField: {
     };
 };
 export declare const featureStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -877,6 +922,8 @@ export declare const faqStylesField: {
     };
 };
 export declare const faqStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -968,6 +1015,8 @@ export declare const galleryStylesField: {
     };
 };
 export declare const galleryStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1059,6 +1108,8 @@ export declare const testimonialStylesField: {
     };
 };
 export declare const testimonialStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1150,6 +1201,8 @@ export declare const showcaseStylesField: {
     };
 };
 export declare const showcaseStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1241,6 +1294,8 @@ export declare const textStylesField: {
     };
 };
 export declare const textStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1332,6 +1387,8 @@ export declare const contactStylesField: {
     };
 };
 export declare const contactStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1425,6 +1482,8 @@ export declare const locationStylesField: {
     };
 };
 export declare const locationStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1518,6 +1577,8 @@ export declare const footerStylesField: {
     };
 };
 export declare const footerStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1606,6 +1667,8 @@ export declare const headerStylesField: {
     };
 };
 export declare const headerStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1694,6 +1757,8 @@ export declare const metricsStylesField: {
     };
 };
 export declare const metricsStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1782,6 +1847,8 @@ export declare const pricingStylesField: {
     };
 };
 export declare const pricingStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";
@@ -1870,6 +1937,8 @@ export declare const teamStylesField: {
     };
 };
 export declare const teamStylesDefaults: {
+    sectionStyle: "default";
+    backgroundColor: string;
     padding: {
         readonly top: "medium";
         readonly bottom: "medium";