@delmaredigital/payload-puck 0.6.12 → 0.6.13

package/dist/fields/richtext/controls/ColorPickerControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPickerControl.js","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/ColorPickerControl.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../../src/fields/richtext/controls/ColorPickerControl.tsx"],"sourcesContent":["'use client'\n\n/**\n * ColorPickerControl - Text color control for Puck RichText toolbar\n *\n * A dropdown color picker with:\n * - Native color input\n * - Hex input with validation\n * - Opacity slider (RGBA support)\n * - Theme color presets\n * - \"Theme Color (Auto)\" option for dark/light mode adaptation\n */\n\nimport React, { useState, useCallback, type CSSProperties } from 'react'\nimport { Palette, ChevronDown } from 'lucide-react'\nimport { useTheme } from '../../../theme/index.js'\nimport { parseColor, normalizeHex, hexToRgba, controlStyles } from './shared.js'\nimport { Dropdown } from './DropdownPortal.js'\nimport type { Editor } from '@tiptap/react'\n\ninterface ColorPickerControlProps {\n  editor: Editor\n  currentColor: string | undefined\n}\n\nexport function ColorPickerControl({ editor, currentColor }: ColorPickerControlProps) {\n  const [isOpen, setIsOpen] = useState(false)\n\n  const handleColorChange = useCallback(\n    (color: string | null) => {\n      if (color) {\n        editor.chain().focus().setColor(color).run()\n      } else {\n        editor.chain().focus().unsetColor().run()\n      }\n    },\n    [editor]\n  )\n\n  const close = useCallback(() => setIsOpen(false), [])\n\n  const hasColor = Boolean(currentColor)\n\n  const trigger = (\n    <button\n      type=\"button\"\n      title=\"Text Color\"\n      style={{\n        ...controlStyles.dropdownTrigger,\n        ...(hasColor ? controlStyles.dropdownTriggerActive : {}),\n      }}\n    >\n      <Palette style={controlStyles.icon} />\n      <ChevronDown style={{ width: '12px', height: '12px' }} />\n      {/* Color indicator */}\n      {currentColor && (\n        <span\n          style={{\n            position: 'absolute',\n            bottom: '2px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            width: '12px',\n            height: '3px',\n            borderRadius: '1px',\n            backgroundColor: currentColor,\n          }}\n        />\n      )}\n    </button>\n  )\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <Dropdown isOpen={isOpen} onOpenChange={setIsOpen} trigger={trigger} minWidth={260}>\n        <ColorPickerPanel\n          currentColor={currentColor}\n          onColorChange={handleColorChange}\n          onClose={close}\n          mode=\"text\"\n        />\n      </Dropdown>\n    </div>\n  )\n}\n\n// =============================================================================\n// Color Picker Panel (shared between text and highlight)\n// =============================================================================\n\ninterface ColorPickerPanelProps {\n  currentColor: string | undefined\n  onColorChange: (color: string | null) => void\n  onClose: () => void\n  mode: 'text' | 'highlight'\n  showOpacity?: boolean\n}\n\nexport function ColorPickerPanel({\n  currentColor,\n  onColorChange,\n  onClose,\n  mode,\n  showOpacity = true,\n}: ColorPickerPanelProps) {\n  const theme = useTheme()\n  const presets = theme.colorPresets\n  const parsed = parseColor(currentColor)\n\n  const [hex, setHex] = useState(parsed.hex)\n  const [hexInput, setHexInput] = useState(parsed.hex)\n  const [opacity, setOpacity] = useState(parsed.opacity)\n  const [hoverTheme, setHoverTheme] = useState(false)\n\n  // Apply color (converts to rgba if opacity < 100)\n  const applyColor = useCallback(\n    (h: string, o: number) => {\n      if (o < 100) {\n        onColorChange(hexToRgba(h, o))\n      } else {\n        onColorChange(h)\n      }\n    },\n    [onColorChange]\n  )\n\n  const handleColorInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newHex = e.target.value\n      setHex(newHex)\n      setHexInput(newHex)\n      applyColor(newHex, opacity)\n    },\n    [opacity, applyColor]\n  )\n\n  const handleHexInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const input = e.target.value\n      setHexInput(input)\n      const normalized = normalizeHex(input)\n      if (normalized) {\n        setHex(normalized)\n        applyColor(normalized, opacity)\n      }\n    },\n    [opacity, applyColor]\n  )\n\n  const handleHexInputBlur = useCallback(() => {\n    setHexInput(hex)\n  }, [hex])\n\n  const handleOpacityChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newOpacity = parseInt(e.target.value, 10)\n      setOpacity(newOpacity)\n      applyColor(hex, newOpacity)\n    },\n    [hex, applyColor]\n  )\n\n  const handlePresetClick = useCallback(\n    (preset: { hex: string; label: string }) => {\n      setHex(preset.hex)\n      setHexInput(preset.hex)\n      setOpacity(100)\n      applyColor(preset.hex, 100)\n      onClose()\n    },\n    [applyColor, onClose]\n  )\n\n  const handleClearColor = useCallback(() => {\n    onColorChange(null)\n    onClose()\n  }, [onColorChange, onClose])\n\n  const previewColor = hexToRgba(hex, opacity)\n\n  return (\n    <div style={controlStyles.colorPickerContainer as CSSProperties}>\n      {/* Theme/Auto color option */}\n      <button\n        type=\"button\"\n        onClick={handleClearColor}\n        onMouseEnter={() => setHoverTheme(true)}\n        onMouseLeave={() => setHoverTheme(false)}\n        style={{\n          ...controlStyles.colorPickerThemeButton,\n          ...(hoverTheme ? { backgroundColor: 'var(--puck-color-grey-01)' } : {}),\n        }}\n      >\n        <span style={controlStyles.colorPickerThemeSwatch} />\n        {mode === 'text' ? 'Theme Color (Auto)' : 'Remove Highlight'}\n      </button>\n\n      {/* Color picker row: native picker + hex input + preview */}\n      <div style={controlStyles.colorPickerRow}>\n        <input\n          type=\"color\"\n          value={hex}\n          onChange={handleColorInputChange}\n          style={controlStyles.colorPickerInput}\n          title=\"Pick a color\"\n        />\n        <input\n          type=\"text\"\n          value={hexInput}\n          onChange={handleHexInputChange}\n          onBlur={handleHexInputBlur}\n          placeholder=\"#000000\"\n          style={controlStyles.colorPickerHexInput}\n        />\n        <div\n          style={controlStyles.colorPickerPreview as CSSProperties}\n          title={`${hex} at ${opacity}% opacity`}\n        >\n          <div style={controlStyles.colorPickerCheckerboard as CSSProperties} />\n          <div\n            style={{ ...(controlStyles.colorPickerOverlay as CSSProperties), backgroundColor: previewColor }}\n          />\n        </div>\n      </div>\n\n      {/* Opacity slider */}\n      {showOpacity && (\n        <div style={controlStyles.colorPickerOpacitySection as CSSProperties}>\n          <div style={controlStyles.colorPickerOpacityHeader}>\n            <label style={controlStyles.colorPickerOpacityLabel}>Opacity</label>\n            <span style={controlStyles.colorPickerOpacityValue}>{opacity}%</span>\n          </div>\n          <div style={controlStyles.colorPickerOpacitySlider as CSSProperties}>\n            <div style={controlStyles.colorPickerCheckerboard as CSSProperties} />\n            <div\n              style={{\n                ...(controlStyles.colorPickerOverlay as CSSProperties),\n                background: `linear-gradient(to right, transparent 0%, ${hex} 100%)`,\n              }}\n            />\n            <input\n              type=\"range\"\n              min=\"0\"\n              max=\"100\"\n              value={opacity}\n              onChange={handleOpacityChange}\n              style={controlStyles.colorPickerOpacityInputRange as CSSProperties}\n            />\n            <div\n              style={{\n                ...(controlStyles.colorPickerOpacityThumb as CSSProperties),\n                left: `calc(${opacity}% - 2px)`,\n              }}\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Preset swatches */}\n      {presets.length > 0 && (\n        <div>\n          <div style={controlStyles.colorPickerPresetsLabel}>Presets</div>\n          <div style={controlStyles.colorPickerPresetsGrid as CSSProperties}>\n            {presets.map((preset) => {\n              const isSelected = hex.toLowerCase() === preset.hex.toLowerCase()\n              return (\n                <button\n                  key={preset.hex}\n                  type=\"button\"\n                  onClick={() => handlePresetClick(preset)}\n                  style={{\n                    ...(isSelected\n                      ? controlStyles.colorPickerPresetButtonSelected\n                      : controlStyles.colorPickerPresetButton),\n                    backgroundColor: preset.hex,\n                  }}\n                  title={preset.label}\n                />\n              )\n            })}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["React","useState","useCallback","Palette","ChevronDown","useTheme","parseColor","normalizeHex","hexToRgba","controlStyles","Dropdown","ColorPickerControl","editor","currentColor","isOpen","setIsOpen","handleColorChange","color","chain","focus","setColor","run","unsetColor","close","hasColor","Boolean","trigger","button","type","title","style","dropdownTrigger","dropdownTriggerActive","icon","width","height","span","position","bottom","left","transform","borderRadius","backgroundColor","div","onOpenChange","minWidth","ColorPickerPanel","onColorChange","onClose","mode","showOpacity","theme","presets","colorPresets","parsed","hex","setHex","hexInput","setHexInput","opacity","setOpacity","hoverTheme","setHoverTheme","applyColor","h","o","handleColorInputChange","e","newHex","target","value","handleHexInputChange","input","normalized","handleHexInputBlur","handleOpacityChange","newOpacity","parseInt","handlePresetClick","preset","handleClearColor","previewColor","colorPickerContainer","onClick","onMouseEnter","onMouseLeave","colorPickerThemeButton","colorPickerThemeSwatch","colorPickerRow","onChange","colorPickerInput","onBlur","placeholder","colorPickerHexInput","colorPickerPreview","colorPickerCheckerboard","colorPickerOverlay","colorPickerOpacitySection","colorPickerOpacityHeader","label","colorPickerOpacityLabel","colorPickerOpacityValue","colorPickerOpacitySlider","background","min","max","colorPickerOpacityInputRange","colorPickerOpacityThumb","length","colorPickerPresetsLabel","colorPickerPresetsGrid","map","isSelected","toLowerCase","colorPickerPresetButtonSelected","colorPickerPresetButton"],"mappings":"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"}

package/dist/fields/richtext/controls/DropdownPortal.d.ts

@@ -11,7 +11,7 @@
  * causes the editor to blur, clearing currentRichText state and breaking all menu
  * controls (including native Puck ones like HeadingSelect).
  */
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 interface DropdownProps {
     isOpen: boolean;
     onOpenChange: (open: boolean) => void;
@@ -19,6 +19,6 @@ interface DropdownProps {
     children: ReactNode;
     minWidth?: number;
 }
-export declare function Dropdown({ isOpen, onOpenChange, trigger, children, minWidth }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function Dropdown({ isOpen, onOpenChange, trigger, children, minWidth }: DropdownProps): React.JSX.Element;
 export { Dropdown as DropdownPortal };
 //# sourceMappingURL=DropdownPortal.d.ts.map

package/dist/fields/richtext/controls/DropdownPortal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownPortal.d.ts","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/DropdownPortal.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAQ7C,UAAU,aAAa;IACrB,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,EAAE,SAAS,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAc,EAAE,EAAE,aAAa,2CAuBlG;AAGD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,CAAA"}
+{"version":3,"file":"DropdownPortal.d.ts","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/DropdownPortal.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAQ7C,UAAU,aAAa;IACrB,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,EAAE,SAAS,CAAA;IAClB,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,QAAQ,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAc,EAAE,EAAE,aAAa,qBAuBlG;AAGD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,CAAA"}

package/dist/fields/richtext/controls/DropdownPortal.js

@@ -1,16 +1,48 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Root as PopoverRoot, Trigger as PopoverTrigger, Portal as PopoverPortal, Content as PopoverContent, } from '@radix-ui/react-popover';
+/**
+ * Dropdown - Renders dropdown content using Radix Popover for proper focus management
+ *
+ * Uses @radix-ui/react-popover which provides:
+ * - Proper focus management that integrates with Puck's dirty state tracking
+ * - Automatic close on escape and click outside
+ * - Focus restoration to trigger element on close
+ *
+ * IMPORTANT: Uses data-puck-rte-menu attribute so Puck's blur handler recognizes
+ * this dropdown as part of the rich text menu. Without this, clicking the dropdown
+ * causes the editor to blur, clearing currentRichText state and breaking all menu
+ * controls (including native Puck ones like HeadingSelect).
+ */ import React from 'react';
+import { Root as PopoverRoot, Trigger as PopoverTrigger, Portal as PopoverPortal, Content as PopoverContent } from '@radix-ui/react-popover';
 export function Dropdown({ isOpen, onOpenChange, trigger, children, minWidth = 160 }) {
-    return (_jsxs(PopoverRoot, { open: isOpen, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: trigger }), _jsx(PopoverPortal, { children: _jsx(PopoverContent, { align: "start", sideOffset: 4, style: {
+    return /*#__PURE__*/ _jsxs(PopoverRoot, {
+        open: isOpen,
+        onOpenChange: onOpenChange,
+        children: [
+            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                asChild: true,
+                children: trigger
+            }),
+            /*#__PURE__*/ _jsx(PopoverPortal, {
+                children: /*#__PURE__*/ _jsx(PopoverContent, {
+                    align: "start",
+                    sideOffset: 4,
+                    style: {
                         backgroundColor: 'var(--puck-color-white)',
                         border: '1px solid var(--puck-color-grey-09)',
                         borderRadius: '8px',
                         boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                         zIndex: 99999,
-                        minWidth,
-                    }, "data-puck-rte-menu": true, children: children }) })] }));
+                        minWidth
+                    },
+                    "data-puck-rte-menu": true,
+                    children: children
+                })
+            })
+        ]
+    });
 }
 // Keep the old export name for backwards compatibility during migration
 export { Dropdown as DropdownPortal };
+
 //# sourceMappingURL=DropdownPortal.js.map

package/dist/fields/richtext/controls/DropdownPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownPortal.js","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/DropdownPortal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAiBZ,OAAO,EACL,IAAI,IAAI,WAAW,EACnB,OAAO,IAAI,cAAc,EACzB,MAAM,IAAI,aAAa,EACvB,OAAO,IAAI,cAAc,GAC1B,MAAM,yBAAyB,CAAA;AAUhC,MAAM,UAAU,QAAQ,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG,EAAiB;IACjG,OAAO,CACL,MAAC,WAAW,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,aACnD,KAAC,cAAc,IAAC,OAAO,kBAAE,OAAO,GAAkB,EAClD,KAAC,aAAa,cACZ,KAAC,cAAc,IACb,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,CAAC,EACb,KAAK,EAAE;wBACL,eAAe,EAAE,yBAAyB;wBAC1C,MAAM,EAAE,qCAAqC;wBAC7C,YAAY,EAAE,KAAK;wBACnB,SAAS,EAAE,yEAAyE;wBACpF,MAAM,EAAE,KAAK;wBACb,QAAQ;qBACT,wCAGA,QAAQ,GACM,GACH,IACJ,CACf,CAAA;AACH,CAAC;AAED,wEAAwE;AACxE,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,CAAA"}
+{"version":3,"sources":["../../../../src/fields/richtext/controls/DropdownPortal.tsx"],"sourcesContent":["'use client'\n\n/**\n * Dropdown - Renders dropdown content using Radix Popover for proper focus management\n *\n * Uses @radix-ui/react-popover which provides:\n * - Proper focus management that integrates with Puck's dirty state tracking\n * - Automatic close on escape and click outside\n * - Focus restoration to trigger element on close\n *\n * IMPORTANT: Uses data-puck-rte-menu attribute so Puck's blur handler recognizes\n * this dropdown as part of the rich text menu. Without this, clicking the dropdown\n * causes the editor to blur, clearing currentRichText state and breaking all menu\n * controls (including native Puck ones like HeadingSelect).\n */\n\nimport React, { type ReactNode } from 'react'\nimport {\n  Root as PopoverRoot,\n  Trigger as PopoverTrigger,\n  Portal as PopoverPortal,\n  Content as PopoverContent,\n} from '@radix-ui/react-popover'\n\ninterface DropdownProps {\n  isOpen: boolean\n  onOpenChange: (open: boolean) => void\n  trigger: ReactNode\n  children: ReactNode\n  minWidth?: number\n}\n\nexport function Dropdown({ isOpen, onOpenChange, trigger, children, minWidth = 160 }: DropdownProps) {\n  return (\n    <PopoverRoot open={isOpen} onOpenChange={onOpenChange}>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverPortal>\n        <PopoverContent\n          align=\"start\"\n          sideOffset={4}\n          style={{\n            backgroundColor: 'var(--puck-color-white)',\n            border: '1px solid var(--puck-color-grey-09)',\n            borderRadius: '8px',\n            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n            zIndex: 99999,\n            minWidth,\n          }}\n          data-puck-rte-menu\n        >\n          {children}\n        </PopoverContent>\n      </PopoverPortal>\n    </PopoverRoot>\n  )\n}\n\n// Keep the old export name for backwards compatibility during migration\nexport { Dropdown as DropdownPortal }\n"],"names":["React","Root","PopoverRoot","Trigger","PopoverTrigger","Portal","PopoverPortal","Content","PopoverContent","Dropdown","isOpen","onOpenChange","trigger","children","minWidth","open","asChild","align","sideOffset","style","backgroundColor","border","borderRadius","boxShadow","zIndex","data-puck-rte-menu","DropdownPortal"],"mappings":"AAAA;;AAEA;;;;;;;;;;;;CAYC,GAED,OAAOA,WAA+B,QAAO;AAC7C,SACEC,QAAQC,WAAW,EACnBC,WAAWC,cAAc,EACzBC,UAAUC,aAAa,EACvBC,WAAWC,cAAc,QACpB,0BAAyB;AAUhC,OAAO,SAASC,SAAS,EAAEC,MAAM,EAAEC,YAAY,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,WAAW,GAAG,EAAiB;IACjG,qBACE,MAACZ;QAAYa,MAAML;QAAQC,cAAcA;;0BACvC,KAACP;gBAAeY,OAAO;0BAAEJ;;0BACzB,KAACN;0BACC,cAAA,KAACE;oBACCS,OAAM;oBACNC,YAAY;oBACZC,OAAO;wBACLC,iBAAiB;wBACjBC,QAAQ;wBACRC,cAAc;wBACdC,WAAW;wBACXC,QAAQ;wBACRV;oBACF;oBACAW,oBAAkB;8BAEjBZ;;;;;AAKX;AAEA,wEAAwE;AACxE,SAASJ,YAAYiB,cAAc,GAAE"}

package/dist/fields/richtext/controls/FontSizeControl.d.ts

@@ -1,8 +1,16 @@
+/**
+ * FontSizeControl - Font size control for Puck RichText toolbar
+ *
+ * A dropdown with:
+ * - 9 preset sizes (XS to 4XL)
+ * - Custom size input with px/rem/em unit selection
+ */
+import React from 'react';
 import type { Editor } from '@tiptap/react';
 interface FontSizeControlProps {
     editor: Editor;
     currentSize: string | undefined;
 }
-export declare function FontSizeControl({ editor, currentSize }: FontSizeControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function FontSizeControl({ editor, currentSize }: FontSizeControlProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=FontSizeControl.d.ts.map

package/dist/fields/richtext/controls/FontSizeControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FontSizeControl.d.ts","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/FontSizeControl.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,oBAAoB,2CA6H5E"}
+{"version":3,"file":"FontSizeControl.d.ts","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/FontSizeControl.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAA;AAIxE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,UAAU,oBAAoB;IAC5B,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;CAChC;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,oBAAoB,qBA6H5E"}

package/dist/fields/richtext/controls/FontSizeControl.js

@@ -6,56 +6,141 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * A dropdown with:
  * - 9 preset sizes (XS to 4XL)
  * - Custom size input with px/rem/em unit selection
- */
-import { useState, useCallback } from 'react';
+ */ import React, { useState, useCallback } from 'react';
 import { ALargeSmall, ChevronDown } from 'lucide-react';
-import { FONT_SIZES, FONT_SIZE_UNITS, controlStyles } from './shared';
-import { Dropdown } from './DropdownPortal';
+import { FONT_SIZES, FONT_SIZE_UNITS, controlStyles } from './shared.js';
+import { Dropdown } from './DropdownPortal.js';
 export function FontSizeControl({ editor, currentSize }) {
     const [isOpen, setIsOpen] = useState(false);
     const [customValue, setCustomValue] = useState('');
     const [customUnit, setCustomUnit] = useState('px');
-    const handlePresetClick = useCallback((value) => {
+    const handlePresetClick = useCallback((value)=>{
         if (value) {
             editor.chain().focus().setFontSize(value).run();
-        }
-        else {
+        } else {
             editor.chain().focus().unsetFontSize().run();
         }
         setIsOpen(false);
-    }, [editor]);
-    const handleCustomApply = useCallback(() => {
+    }, [
+        editor
+    ]);
+    const handleCustomApply = useCallback(()=>{
         if (customValue) {
             const size = `${customValue}${customUnit}`;
             editor.chain().focus().setFontSize(size).run();
             setIsOpen(false);
             setCustomValue('');
         }
-    }, [editor, customValue, customUnit]);
-    const handleCustomKeyDown = useCallback((e) => {
+    }, [
+        editor,
+        customValue,
+        customUnit
+    ]);
+    const handleCustomKeyDown = useCallback((e)=>{
         if (e.key === 'Enter') {
             e.preventDefault();
             handleCustomApply();
         }
-    }, [handleCustomApply]);
+    }, [
+        handleCustomApply
+    ]);
     // Find current preset label if any
-    const currentPreset = FONT_SIZES.find((s) => s.value === currentSize);
+    const currentPreset = FONT_SIZES.find((s)=>s.value === currentSize);
     const hasCustomSize = currentSize && !currentPreset;
-    const trigger = (_jsxs("button", { type: "button", title: "Font Size", style: {
+    const trigger = /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        title: "Font Size",
+        style: {
             ...controlStyles.dropdownTrigger,
-            ...(currentSize ? controlStyles.dropdownTriggerActive : {}),
-        }, children: [_jsx(ALargeSmall, { style: controlStyles.icon }), _jsx(ChevronDown, { style: { width: '12px', height: '12px' } })] }));
-    return (_jsx("div", { style: { position: 'relative' }, children: _jsxs(Dropdown, { isOpen: isOpen, onOpenChange: setIsOpen, trigger: trigger, minWidth: 200, children: [_jsx("div", { style: controlStyles.dropdownLabel, children: "Presets" }), _jsx("div", { style: controlStyles.fontSizeGrid, children: FONT_SIZES.map((size) => {
-                        const isActive = size.value === currentSize || (!size.value && !currentSize);
-                        return (_jsx("button", { type: "button", onClick: () => handlePresetClick(size.value), title: size.px, style: {
+            ...currentSize ? controlStyles.dropdownTriggerActive : {}
+        },
+        children: [
+            /*#__PURE__*/ _jsx(ALargeSmall, {
+                style: controlStyles.icon
+            }),
+            /*#__PURE__*/ _jsx(ChevronDown, {
+                style: {
+                    width: '12px',
+                    height: '12px'
+                }
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            position: 'relative'
+        },
+        children: /*#__PURE__*/ _jsxs(Dropdown, {
+            isOpen: isOpen,
+            onOpenChange: setIsOpen,
+            trigger: trigger,
+            minWidth: 200,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    style: controlStyles.dropdownLabel,
+                    children: "Presets"
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: controlStyles.fontSizeGrid,
+                    children: FONT_SIZES.map((size)=>{
+                        const isActive = size.value === currentSize || !size.value && !currentSize;
+                        return /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: ()=>handlePresetClick(size.value),
+                            title: size.px,
+                            style: {
                                 ...controlStyles.fontSizeButton,
-                                ...(isActive ? controlStyles.fontSizeButtonActive : {}),
-                            }, children: size.label }, size.label));
-                    }) }), _jsxs("div", { style: controlStyles.customSizeRow, children: [_jsx("input", { type: "number", placeholder: "16", min: "8", max: "200", value: customValue, onChange: (e) => setCustomValue(e.target.value), onKeyDown: handleCustomKeyDown, style: controlStyles.customSizeInput }), _jsx("select", { value: customUnit, onChange: (e) => setCustomUnit(e.target.value), style: controlStyles.customSizeSelect, children: FONT_SIZE_UNITS.map((unit) => (_jsx("option", { value: unit, children: unit }, unit))) }), _jsx("button", { type: "button", onClick: handleCustomApply, style: controlStyles.customSizeApply, children: "Apply" })] }), hasCustomSize && (_jsxs("div", { style: {
+                                ...isActive ? controlStyles.fontSizeButtonActive : {}
+                            },
+                            children: size.label
+                        }, size.label);
+                    })
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    style: controlStyles.customSizeRow,
+                    children: [
+                        /*#__PURE__*/ _jsx("input", {
+                            type: "number",
+                            placeholder: "16",
+                            min: "8",
+                            max: "200",
+                            value: customValue,
+                            onChange: (e)=>setCustomValue(e.target.value),
+                            onKeyDown: handleCustomKeyDown,
+                            style: controlStyles.customSizeInput
+                        }),
+                        /*#__PURE__*/ _jsx("select", {
+                            value: customUnit,
+                            onChange: (e)=>setCustomUnit(e.target.value),
+                            style: controlStyles.customSizeSelect,
+                            children: FONT_SIZE_UNITS.map((unit)=>/*#__PURE__*/ _jsx("option", {
+                                    value: unit,
+                                    children: unit
+                                }, unit))
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            type: "button",
+                            onClick: handleCustomApply,
+                            style: controlStyles.customSizeApply,
+                            children: "Apply"
+                        })
+                    ]
+                }),
+                hasCustomSize && /*#__PURE__*/ _jsxs("div", {
+                    style: {
                         padding: '8px 12px',
                         fontSize: '12px',
                         color: 'var(--puck-color-grey-05)',
-                        borderTop: '1px solid var(--puck-color-grey-03)',
-                    }, children: ["Current: ", currentSize] }))] }) }));
+                        borderTop: '1px solid var(--puck-color-grey-03)'
+                    },
+                    children: [
+                        "Current: ",
+                        currentSize
+                    ]
+                })
+            ]
+        })
+    });
 }
+
 //# sourceMappingURL=FontSizeControl.js.map

package/dist/fields/richtext/controls/FontSizeControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"FontSizeControl.js","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/FontSizeControl.tsx"],"names":[],"mappings":"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"}
+{"version":3,"sources":["../../../../src/fields/richtext/controls/FontSizeControl.tsx"],"sourcesContent":["'use client'\n\n/**\n * FontSizeControl - Font size control for Puck RichText toolbar\n *\n * A dropdown with:\n * - 9 preset sizes (XS to 4XL)\n * - Custom size input with px/rem/em unit selection\n */\n\nimport React, { useState, useCallback, type CSSProperties } from 'react'\nimport { ALargeSmall, ChevronDown } from 'lucide-react'\nimport { FONT_SIZES, FONT_SIZE_UNITS, controlStyles } from './shared.js'\nimport { Dropdown } from './DropdownPortal.js'\nimport type { Editor } from '@tiptap/react'\n\ninterface FontSizeControlProps {\n  editor: Editor\n  currentSize: string | undefined\n}\n\nexport function FontSizeControl({ editor, currentSize }: FontSizeControlProps) {\n  const [isOpen, setIsOpen] = useState(false)\n  const [customValue, setCustomValue] = useState('')\n  const [customUnit, setCustomUnit] = useState<'px' | 'rem' | 'em'>('px')\n\n  const handlePresetClick = useCallback(\n    (value: string | null) => {\n      if (value) {\n        editor.chain().focus().setFontSize(value).run()\n      } else {\n        editor.chain().focus().unsetFontSize().run()\n      }\n      setIsOpen(false)\n    },\n    [editor]\n  )\n\n  const handleCustomApply = useCallback(() => {\n    if (customValue) {\n      const size = `${customValue}${customUnit}`\n      editor.chain().focus().setFontSize(size).run()\n      setIsOpen(false)\n      setCustomValue('')\n    }\n  }, [editor, customValue, customUnit])\n\n  const handleCustomKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter') {\n        e.preventDefault()\n        handleCustomApply()\n      }\n    },\n    [handleCustomApply]\n  )\n\n  // Find current preset label if any\n  const currentPreset = FONT_SIZES.find((s) => s.value === currentSize)\n  const hasCustomSize = currentSize && !currentPreset\n\n  const trigger = (\n    <button\n      type=\"button\"\n      title=\"Font Size\"\n      style={{\n        ...controlStyles.dropdownTrigger,\n        ...(currentSize ? controlStyles.dropdownTriggerActive : {}),\n      }}\n    >\n      <ALargeSmall style={controlStyles.icon} />\n      <ChevronDown style={{ width: '12px', height: '12px' }} />\n    </button>\n  )\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <Dropdown isOpen={isOpen} onOpenChange={setIsOpen} trigger={trigger} minWidth={200}>\n        {/* Preset label */}\n        <div style={controlStyles.dropdownLabel}>Presets</div>\n\n        {/* Preset grid */}\n        <div style={controlStyles.fontSizeGrid as CSSProperties}>\n          {FONT_SIZES.map((size) => {\n            const isActive = size.value === currentSize || (!size.value && !currentSize)\n            return (\n              <button\n                key={size.label}\n                type=\"button\"\n                onClick={() => handlePresetClick(size.value)}\n                title={size.px}\n                style={{\n                  ...controlStyles.fontSizeButton,\n                  ...(isActive ? controlStyles.fontSizeButtonActive : {}),\n                }}\n              >\n                {size.label}\n              </button>\n            )\n          })}\n        </div>\n\n        {/* Custom size input */}\n        <div style={controlStyles.customSizeRow as CSSProperties}>\n          <input\n            type=\"number\"\n            placeholder=\"16\"\n            min=\"8\"\n            max=\"200\"\n            value={customValue}\n            onChange={(e) => setCustomValue(e.target.value)}\n            onKeyDown={handleCustomKeyDown}\n            style={controlStyles.customSizeInput}\n          />\n          <select\n            value={customUnit}\n            onChange={(e) => setCustomUnit(e.target.value as 'px' | 'rem' | 'em')}\n            style={controlStyles.customSizeSelect}\n          >\n            {FONT_SIZE_UNITS.map((unit) => (\n              <option key={unit} value={unit}>\n                {unit}\n              </option>\n            ))}\n          </select>\n          <button type=\"button\" onClick={handleCustomApply} style={controlStyles.customSizeApply}>\n            Apply\n          </button>\n        </div>\n\n        {/* Show current custom size if any */}\n        {hasCustomSize && (\n          <div\n            style={{\n              padding: '8px 12px',\n              fontSize: '12px',\n              color: 'var(--puck-color-grey-05)',\n              borderTop: '1px solid var(--puck-color-grey-03)',\n            }}\n          >\n            Current: {currentSize}\n          </div>\n        )}\n      </Dropdown>\n    </div>\n  )\n}\n"],"names":["React","useState","useCallback","ALargeSmall","ChevronDown","FONT_SIZES","FONT_SIZE_UNITS","controlStyles","Dropdown","FontSizeControl","editor","currentSize","isOpen","setIsOpen","customValue","setCustomValue","customUnit","setCustomUnit","handlePresetClick","value","chain","focus","setFontSize","run","unsetFontSize","handleCustomApply","size","handleCustomKeyDown","e","key","preventDefault","currentPreset","find","s","hasCustomSize","trigger","button","type","title","style","dropdownTrigger","dropdownTriggerActive","icon","width","height","div","position","onOpenChange","minWidth","dropdownLabel","fontSizeGrid","map","isActive","onClick","px","fontSizeButton","fontSizeButtonActive","label","customSizeRow","input","placeholder","min","max","onChange","target","onKeyDown","customSizeInput","select","customSizeSelect","unit","option","customSizeApply","padding","fontSize","color","borderTop"],"mappings":"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"}

package/dist/fields/richtext/controls/HighlightControl.d.ts

@@ -1,9 +1,20 @@
+/**
+ * HighlightControl - Text highlight control for Puck RichText toolbar
+ *
+ * A dropdown color picker for text highlighting with:
+ * - Native color input
+ * - Hex input with validation
+ * - Opacity slider (RGBA support)
+ * - Theme color presets
+ * - Remove highlight option
+ */
+import React from 'react';
 import type { Editor } from '@tiptap/react';
 interface HighlightControlProps {
     editor: Editor;
     currentColor: string | undefined;
     isActive: boolean;
 }
-export declare function HighlightControl({ editor, currentColor, isActive }: HighlightControlProps): import("react/jsx-runtime").JSX.Element;
+export declare function HighlightControl({ editor, currentColor, isActive }: HighlightControlProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=HighlightControl.d.ts.map

package/dist/fields/richtext/controls/HighlightControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightControl.d.ts","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/HighlightControl.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAyDzF"}
+{"version":3,"file":"HighlightControl.d.ts","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/HighlightControl.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,KAAgC,MAAM,OAAO,CAAA;AAKpD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,UAAU,qBAAqB;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,qBAyDzF"}

package/dist/fields/richtext/controls/HighlightControl.js

@@ -9,27 +9,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * - Opacity slider (RGBA support)
  * - Theme color presets
  * - Remove highlight option
- */
-import { useState, useCallback } from 'react';
+ */ import React, { useState, useCallback } from 'react';
 import { Highlighter, ChevronDown } from 'lucide-react';
-import { controlStyles } from './shared';
-import { ColorPickerPanel } from './ColorPickerControl';
-import { Dropdown } from './DropdownPortal';
+import { controlStyles } from './shared.js';
+import { ColorPickerPanel } from './ColorPickerControl.js';
+import { Dropdown } from './DropdownPortal.js';
 export function HighlightControl({ editor, currentColor, isActive }) {
     const [isOpen, setIsOpen] = useState(false);
-    const handleColorChange = useCallback((color) => {
+    const handleColorChange = useCallback((color)=>{
         if (color) {
-            editor.chain().focus().setHighlight({ color }).run();
-        }
-        else {
+            editor.chain().focus().setHighlight({
+                color
+            }).run();
+        } else {
             editor.chain().focus().unsetHighlight().run();
         }
-    }, [editor]);
-    const close = useCallback(() => setIsOpen(false), []);
-    const trigger = (_jsxs("button", { type: "button", title: "Highlight", style: {
+    }, [
+        editor
+    ]);
+    const close = useCallback(()=>setIsOpen(false), []);
+    const trigger = /*#__PURE__*/ _jsxs("button", {
+        type: "button",
+        title: "Highlight",
+        style: {
             ...controlStyles.dropdownTrigger,
-            ...(isActive ? controlStyles.dropdownTriggerActive : {}),
-        }, children: [_jsx(Highlighter, { style: controlStyles.icon }), _jsx(ChevronDown, { style: { width: '12px', height: '12px' } }), currentColor && (_jsx("span", { style: {
+            ...isActive ? controlStyles.dropdownTriggerActive : {}
+        },
+        children: [
+            /*#__PURE__*/ _jsx(Highlighter, {
+                style: controlStyles.icon
+            }),
+            /*#__PURE__*/ _jsx(ChevronDown, {
+                style: {
+                    width: '12px',
+                    height: '12px'
+                }
+            }),
+            currentColor && /*#__PURE__*/ _jsx("span", {
+                style: {
                     position: 'absolute',
                     bottom: '2px',
                     left: '50%',
@@ -37,8 +54,28 @@ export function HighlightControl({ editor, currentColor, isActive }) {
                     width: '12px',
                     height: '3px',
                     borderRadius: '1px',
-                    backgroundColor: currentColor,
-                } }))] }));
-    return (_jsx("div", { style: { position: 'relative' }, children: _jsx(Dropdown, { isOpen: isOpen, onOpenChange: setIsOpen, trigger: trigger, minWidth: 260, children: _jsx(ColorPickerPanel, { currentColor: currentColor, onColorChange: handleColorChange, onClose: close, mode: "highlight" }) }) }));
+                    backgroundColor: currentColor
+                }
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        style: {
+            position: 'relative'
+        },
+        children: /*#__PURE__*/ _jsx(Dropdown, {
+            isOpen: isOpen,
+            onOpenChange: setIsOpen,
+            trigger: trigger,
+            minWidth: 260,
+            children: /*#__PURE__*/ _jsx(ColorPickerPanel, {
+                currentColor: currentColor,
+                onColorChange: handleColorChange,
+                onClose: close,
+                mode: "highlight"
+            })
+        })
+    });
 }
+
 //# sourceMappingURL=HighlightControl.js.map

package/dist/fields/richtext/controls/HighlightControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"HighlightControl.js","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/HighlightControl.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;GASG;AAEH,OAAc,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAS3C,MAAM,UAAU,gBAAgB,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAyB;IACxF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3C,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,KAAoB,EAAE,EAAE;QACvB,IAAI,KAAK,EAAE,CAAC;YACV,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,CAAA;QACtD,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,cAAc,EAAE,CAAC,GAAG,EAAE,CAAA;QAC/C,CAAC;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IAED,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IAErD,MAAM,OAAO,GAAG,CACd,kBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE;YACL,GAAG,aAAa,CAAC,eAAe;YAChC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC;SACzD,aAED,KAAC,WAAW,IAAC,KAAK,EAAE,aAAa,CAAC,IAAI,GAAI,EAC1C,KAAC,WAAW,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,EAExD,YAAY,IAAI,CACf,eACE,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,MAAM,EAAE,KAAK;oBACb,IAAI,EAAE,KAAK;oBACX,SAAS,EAAE,kBAAkB;oBAC7B,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,KAAK;oBACb,YAAY,EAAE,KAAK;oBACnB,eAAe,EAAE,YAAY;iBAC9B,GACD,CACH,IACM,CACV,CAAA;IAED,OAAO,CACL,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAClC,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,YAChF,KAAC,gBAAgB,IACf,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,iBAAiB,EAChC,OAAO,EAAE,KAAK,EACd,IAAI,EAAC,WAAW,GAChB,GACO,GACP,CACP,CAAA;AACH,CAAC"}
+{"version":3,"sources":["../../../../src/fields/richtext/controls/HighlightControl.tsx"],"sourcesContent":["'use client'\n\n/**\n * HighlightControl - Text highlight control for Puck RichText toolbar\n *\n * A dropdown color picker for text highlighting with:\n * - Native color input\n * - Hex input with validation\n * - Opacity slider (RGBA support)\n * - Theme color presets\n * - Remove highlight option\n */\n\nimport React, { useState, useCallback } from 'react'\nimport { Highlighter, ChevronDown } from 'lucide-react'\nimport { controlStyles } from './shared.js'\nimport { ColorPickerPanel } from './ColorPickerControl.js'\nimport { Dropdown } from './DropdownPortal.js'\nimport type { Editor } from '@tiptap/react'\n\ninterface HighlightControlProps {\n  editor: Editor\n  currentColor: string | undefined\n  isActive: boolean\n}\n\nexport function HighlightControl({ editor, currentColor, isActive }: HighlightControlProps) {\n  const [isOpen, setIsOpen] = useState(false)\n\n  const handleColorChange = useCallback(\n    (color: string | null) => {\n      if (color) {\n        editor.chain().focus().setHighlight({ color }).run()\n      } else {\n        editor.chain().focus().unsetHighlight().run()\n      }\n    },\n    [editor]\n  )\n\n  const close = useCallback(() => setIsOpen(false), [])\n\n  const trigger = (\n    <button\n      type=\"button\"\n      title=\"Highlight\"\n      style={{\n        ...controlStyles.dropdownTrigger,\n        ...(isActive ? controlStyles.dropdownTriggerActive : {}),\n      }}\n    >\n      <Highlighter style={controlStyles.icon} />\n      <ChevronDown style={{ width: '12px', height: '12px' }} />\n      {/* Highlight color indicator */}\n      {currentColor && (\n        <span\n          style={{\n            position: 'absolute',\n            bottom: '2px',\n            left: '50%',\n            transform: 'translateX(-50%)',\n            width: '12px',\n            height: '3px',\n            borderRadius: '1px',\n            backgroundColor: currentColor,\n          }}\n        />\n      )}\n    </button>\n  )\n\n  return (\n    <div style={{ position: 'relative' }}>\n      <Dropdown isOpen={isOpen} onOpenChange={setIsOpen} trigger={trigger} minWidth={260}>\n        <ColorPickerPanel\n          currentColor={currentColor}\n          onColorChange={handleColorChange}\n          onClose={close}\n          mode=\"highlight\"\n        />\n      </Dropdown>\n    </div>\n  )\n}\n"],"names":["React","useState","useCallback","Highlighter","ChevronDown","controlStyles","ColorPickerPanel","Dropdown","HighlightControl","editor","currentColor","isActive","isOpen","setIsOpen","handleColorChange","color","chain","focus","setHighlight","run","unsetHighlight","close","trigger","button","type","title","style","dropdownTrigger","dropdownTriggerActive","icon","width","height","span","position","bottom","left","transform","borderRadius","backgroundColor","div","onOpenChange","minWidth","onColorChange","onClose","mode"],"mappings":"AAAA;;AAEA;;;;;;;;;CASC,GAED,OAAOA,SAASC,QAAQ,EAAEC,WAAW,QAAQ,QAAO;AACpD,SAASC,WAAW,EAAEC,WAAW,QAAQ,eAAc;AACvD,SAASC,aAAa,QAAQ,cAAa;AAC3C,SAASC,gBAAgB,QAAQ,0BAAyB;AAC1D,SAASC,QAAQ,QAAQ,sBAAqB;AAS9C,OAAO,SAASC,iBAAiB,EAAEC,MAAM,EAAEC,YAAY,EAAEC,QAAQ,EAAyB;IACxF,MAAM,CAACC,QAAQC,UAAU,GAAGZ,SAAS;IAErC,MAAMa,oBAAoBZ,YACxB,CAACa;QACC,IAAIA,OAAO;YACTN,OAAOO,KAAK,GAAGC,KAAK,GAAGC,YAAY,CAAC;gBAAEH;YAAM,GAAGI,GAAG;QACpD,OAAO;YACLV,OAAOO,KAAK,GAAGC,KAAK,GAAGG,cAAc,GAAGD,GAAG;QAC7C;IACF,GACA;QAACV;KAAO;IAGV,MAAMY,QAAQnB,YAAY,IAAMW,UAAU,QAAQ,EAAE;IAEpD,MAAMS,wBACJ,MAACC;QACCC,MAAK;QACLC,OAAM;QACNC,OAAO;YACL,GAAGrB,cAAcsB,eAAe;YAChC,GAAIhB,WAAWN,cAAcuB,qBAAqB,GAAG,CAAC,CAAC;QACzD;;0BAEA,KAACzB;gBAAYuB,OAAOrB,cAAcwB,IAAI;;0BACtC,KAACzB;gBAAYsB,OAAO;oBAAEI,OAAO;oBAAQC,QAAQ;gBAAO;;YAEnDrB,8BACC,KAACsB;gBACCN,OAAO;oBACLO,UAAU;oBACVC,QAAQ;oBACRC,MAAM;oBACNC,WAAW;oBACXN,OAAO;oBACPC,QAAQ;oBACRM,cAAc;oBACdC,iBAAiB5B;gBACnB;;;;IAMR,qBACE,KAAC6B;QAAIb,OAAO;YAAEO,UAAU;QAAW;kBACjC,cAAA,KAAC1B;YAASK,QAAQA;YAAQ4B,cAAc3B;YAAWS,SAASA;YAASmB,UAAU;sBAC7E,cAAA,KAACnC;gBACCI,cAAcA;gBACdgC,eAAe5B;gBACf6B,SAAStB;gBACTuB,MAAK;;;;AAKf"}

package/dist/fields/richtext/controls/index.d.ts

@@ -3,9 +3,9 @@
  *
  * Custom controls for Puck's native richtext field.
  */
-export { ColorPickerControl, ColorPickerPanel } from './ColorPickerControl';
-export { FontSizeControl } from './FontSizeControl';
-export { HighlightControl } from './HighlightControl';
-export { normalizeHex, hexToRgba, parseColor, FONT_SIZES, FONT_SIZE_UNITS, controlStyles, } from './shared';
-export type { FontSizeUnit } from './shared';
+export { ColorPickerControl, ColorPickerPanel } from './ColorPickerControl.js';
+export { FontSizeControl } from './FontSizeControl.js';
+export { HighlightControl } from './HighlightControl.js';
+export { normalizeHex, hexToRgba, parseColor, FONT_SIZES, FONT_SIZE_UNITS, controlStyles, } from './shared.js';
+export type { FontSizeUnit } from './shared.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/fields/richtext/controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,OAAO,EAEL,YAAY,EACZ,SAAS,EACT,UAAU,EAEV,UAAU,EACV,eAAe,EAEf,aAAa,GACd,MAAM,UAAU,CAAA;AAEjB,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAEL,YAAY,EACZ,SAAS,EACT,UAAU,EAEV,UAAU,EACV,eAAe,EAEf,aAAa,GACd,MAAM,aAAa,CAAA;AAEpB,YAAY,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA"}

package/dist/fields/richtext/controls/index.js

@@ -2,15 +2,12 @@
  * RichText toolbar controls
  *
  * Custom controls for Puck's native richtext field.
- */
-export { ColorPickerControl, ColorPickerPanel } from './ColorPickerControl';
-export { FontSizeControl } from './FontSizeControl';
-export { HighlightControl } from './HighlightControl';
-export { 
-// Color utilities
-normalizeHex, hexToRgba, parseColor, 
-// Font size presets
-FONT_SIZES, FONT_SIZE_UNITS, 
-// Shared styles
-controlStyles, } from './shared';
+ */ export { ColorPickerControl, ColorPickerPanel } from './ColorPickerControl.js';
+export { FontSizeControl } from './FontSizeControl.js';
+export { HighlightControl } from './HighlightControl.js';
+export { // Color utilities
+normalizeHex, hexToRgba, parseColor, // Font size presets
+FONT_SIZES, FONT_SIZE_UNITS, // Shared styles
+controlStyles } from './shared.js';
+
 //# sourceMappingURL=index.js.map

package/dist/fields/richtext/controls/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fields/richtext/controls/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAC3E,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,OAAO;AACL,kBAAkB;AAClB,YAAY,EACZ,SAAS,EACT,UAAU;AACV,oBAAoB;AACpB,UAAU,EACV,eAAe;AACf,gBAAgB;AAChB,aAAa,GACd,MAAM,UAAU,CAAA"}
+{"version":3,"sources":["../../../../src/fields/richtext/controls/index.ts"],"sourcesContent":["/**\n * RichText toolbar controls\n *\n * Custom controls for Puck's native richtext field.\n */\n\nexport { ColorPickerControl, ColorPickerPanel } from './ColorPickerControl.js'\nexport { FontSizeControl } from './FontSizeControl.js'\nexport { HighlightControl } from './HighlightControl.js'\n\nexport {\n  // Color utilities\n  normalizeHex,\n  hexToRgba,\n  parseColor,\n  // Font size presets\n  FONT_SIZES,\n  FONT_SIZE_UNITS,\n  // Shared styles\n  controlStyles,\n} from './shared.js'\n\nexport type { FontSizeUnit } from './shared.js'\n"],"names":["ColorPickerControl","ColorPickerPanel","FontSizeControl","HighlightControl","normalizeHex","hexToRgba","parseColor","FONT_SIZES","FONT_SIZE_UNITS","controlStyles"],"mappings":"AAAA;;;;CAIC,GAED,SAASA,kBAAkB,EAAEC,gBAAgB,QAAQ,0BAAyB;AAC9E,SAASC,eAAe,QAAQ,uBAAsB;AACtD,SAASC,gBAAgB,QAAQ,wBAAuB;AAExD,SACE,kBAAkB;AAClBC,YAAY,EACZC,SAAS,EACTC,UAAU,EACV,oBAAoB;AACpBC,UAAU,EACVC,eAAe,EACf,gBAAgB;AAChBC,aAAa,QACR,cAAa"}