geoiq-frontend-ui-kit 2.0.2 → 2.0.4

package/dist/index.es170.js

@@ -1,289 +1,101 @@
-import t from "react";
-import { Input as m } from "./index.es11.js";
-import { Checkbox as v } from "./index.es10.js";
-import { RadioGroup as u, RadioGroupItem as p } from "./index.es13.js";
-import { MultiCombobox as I } from "./index.es23.js";
-import { SingleCombobox as _ } from "./index.es27.js";
-import { CreatableMultiCombobox as C } from "./index.es28.js";
-import { Textarea as x } from "./index.es16.js";
-import { Typography as s } from "./index.es19.js";
-import { Phone as O, Mail as T } from "lucide-react";
-import { SingleImagePicker as y } from "./index.es173.js";
-import { SingleVideoPicker as R } from "./index.es174.js";
-import { MultiImagePicker as M } from "./index.es175.js";
-import { MultiVideoPicker as P } from "./index.es176.js";
-import { RepeatableGroup as N } from "./index.es177.js";
-import { TaggableMultiImagePicker as B } from "./index.es178.js";
-import { FormFieldType as c } from "./index.es161.js";
-import { DatePicker as U } from "./index.es69.js";
-import { TaggableImageUploadFieldWithInput as G } from "./index.es179.js";
-import { useFormValues as L } from "./index.es160.js";
-const f = ({ field: e }) => {
-  const {
-    values: o,
-    errors: i,
-    setValue: r,
-    getRequestHeaders: E,
-    getCreateOptionExtraBody: d
-  } = L(), g = () => {
-    switch (e.type) {
-      case c.SINGLE_COMBOBOX:
-        return /* @__PURE__ */ t.createElement(
-          _,
-          {
-            options: e.options.map((a) => ({
-              id: a,
-              name: a
-            })),
-            value: o[e.id],
-            onChange: (a) => r(e.id, a),
-            placeholder: e.placeholder
-          }
-        );
-      case c.CREATABLE_MULTI_COMBOBOX: {
-        const a = o[e.id]?.split(",").filter(Boolean) ?? [];
-        return /* @__PURE__ */ t.createElement(
-          C,
-          {
-            fieldId: e.id,
-            optionsUrl: e.optionsUrl,
-            createOptionUrl: e.createOptionUrl,
-            optionsRequestBody: e.optionsRequestBody,
-            createOptionRequestBody: e.createOptionRequestBody,
-            createOptionValueKey: e.createOptionValueKey,
-            createOptionExtraBody: e.skipCreateOptionExtraBody ? void 0 : d,
-            requestHeaders: E,
-            urlTemplateData: o,
-            value: a,
-            onChange: (n) => r(e.id, n.length > 0 ? n.join(",") : void 0),
-            placeholder: e.placeholder,
-            minSelected: e.minSelected,
-            maxSelected: e.maxSelected
-          }
-        );
-      }
-      case c.MULTI_COMBOBOX:
-        return /* @__PURE__ */ t.createElement(
-          I,
-          {
-            options: e.options.map((a) => ({
-              label: a,
-              value: a
-            })),
-            selected: o[e.id]?.split(",") || [],
-            onChange: (a) => {
-              a.length === 0 ? r(e.id, void 0) : r(e.id, a.join(","));
-            },
-            placeholder: e.placeholder
-          }
-        );
-      case c.RADIO_GROUP:
-        return /* @__PURE__ */ t.createElement(
-          u,
-          {
-            value: o[e.id],
-            onValueChange: (a) => r(e.id, a)
-          },
-          e.options.map((a) => /* @__PURE__ */ t.createElement("div", { key: a, className: "flex items-center space-x-2" }, /* @__PURE__ */ t.createElement(p, { value: a, id: a }), /* @__PURE__ */ t.createElement(s, { variant: "body1", className: "text-light-4" }, a)))
-        );
-      case c.RADIO_GROUP_WITH_OPTIONAL_INPUT: {
-        const a = o[e.id];
-        return /* @__PURE__ */ t.createElement("div", null, /* @__PURE__ */ t.createElement(
-          u,
-          {
-            value: a?.radio_value,
-            onValueChange: (n) => r(e.id, {
-              ...a,
-              radio_value: n,
-              input_value: ""
-            })
-          },
-          e.options.map((n) => /* @__PURE__ */ t.createElement("div", { key: n, className: "flex items-center space-x-2" }, /* @__PURE__ */ t.createElement(p, { value: n, id: n }), /* @__PURE__ */ t.createElement(s, { variant: "body1", className: "text-light-4" }, n)))
-        ), e.inputTriggerOptionValue === a?.radio_value ? /* @__PURE__ */ t.createElement(
-          m,
-          {
-            id: e.id,
-            type: "text",
-            placeholder: e.inputFieldPlaceholder,
-            value: a?.input_value,
-            onChange: (n) => r(e.id, {
-              ...a,
-              input_value: n.target.value
-            })
-          }
-        ) : null);
-      }
-      case c.CHECKBOX_GROUP: {
-        const a = o[e.id];
-        return /* @__PURE__ */ t.createElement("div", { className: "flex flex-col gap-2" }, e.options.map((n) => /* @__PURE__ */ t.createElement("div", { key: n, className: "flex items-center space-x-2" }, /* @__PURE__ */ t.createElement(
-          v,
-          {
-            id: n,
-            checked: a?.split(",").includes(n),
-            onCheckedChange: (l) => {
-              l ? r(
-                e.id,
-                a ? `${a},${n}` : n
-              ) : r(
-                e.id,
-                a?.split(",").filter((h) => h !== n).join(",")
-              );
-            }
-          }
-        ), /* @__PURE__ */ t.createElement(s, { variant: "body1", className: "text-light-4" }, n))));
-      }
-      case c.DATE_PICKER: {
-        const a = o[e.id], n = a ? new Date(a * 1e3) : void 0;
-        return /* @__PURE__ */ t.createElement(
-          U,
-          {
-            variant: "single",
-            date: n,
-            onDateChange: (l) => {
-              l && r(e.id, Math.floor(l.valueOf() / 1e3));
-            }
-          }
-        );
-      }
-      case c.LONG_TEXT:
-        return /* @__PURE__ */ t.createElement(
-          x,
-          {
-            id: e.id,
-            placeholder: e.placeholder,
-            value: o[e.id],
-            onChange: (a) => r(e.id, a.target.value)
-          }
-        );
-      case c.EMAIL:
-        return /* @__PURE__ */ t.createElement(
-          m,
-          {
-            type: "email",
-            id: e.id,
-            value: o[e.id],
-            onChange: (a) => r(e.id, a.target.value),
-            placeholder: e.placeholder,
-            prefix: /* @__PURE__ */ t.createElement(T, { className: "stroke-gray-400", size: 20 })
-          }
-        );
-      case c.SHORT_TEXT:
-        return /* @__PURE__ */ t.createElement(
-          m,
-          {
-            id: e.id,
-            type: "text",
-            placeholder: e.placeholder,
-            value: o[e.id],
-            onChange: (a) => r(e.id, a.target.value)
-          }
-        );
-      case c.MOBILE_NUMBER:
-        return /* @__PURE__ */ t.createElement(
-          m,
-          {
-            prefix: /* @__PURE__ */ t.createElement(O, { className: "stroke-gray-400", size: 20 }),
-            type: "tel",
-            id: e.id,
-            placeholder: e.placeholder,
-            value: o[e.id],
-            onChange: (a) => r(e.id, a.target.value)
-          }
-        );
-      case c.NUMBER:
-        return /* @__PURE__ */ t.createElement(
-          m,
-          {
-            type: "number",
-            inputMode: "decimal",
-            pattern: "^\\d*\\.?\\d*$",
-            id: e.id,
-            placeholder: e.placeholder,
-            value: o[e.id],
-            onChange: (a) => r(e.id, a.target.value)
-          }
-        );
-      case c.SINGLE_IMAGE_PICKER:
-        return /* @__PURE__ */ t.createElement(
-          y,
-          {
-            id: e.id,
-            onChange: (a) => r(e.id, a),
-            value: o[e.id]
-          }
-        );
-      case c.MULTI_IMAGE_PICKER:
-        return /* @__PURE__ */ t.createElement(
-          M,
-          {
-            id: e.id,
-            onChange: (a) => r(e.id, a),
-            value: o[e.id],
-            maxImages: e.max_items
-          }
-        );
-      case c.TAGGABLE_MULTI_IMAGE_PICKER:
-        return /* @__PURE__ */ t.createElement(
-          B,
-          {
-            id: e.id,
-            onChange: (a) => r(e.id, a),
-            value: o[e.id],
-            options: e.options,
-            maxImages: e.max_items
-          }
-        );
-      case c.SINGLE_VIDEO_PICKER:
-        return /* @__PURE__ */ t.createElement(
-          R,
-          {
-            id: e.id,
-            onChange: (a) => r(e.id, a),
-            value: o[e.id]
-          }
-        );
-      case c.MULTI_VIDEO_PICKER:
-        return /* @__PURE__ */ t.createElement(
-          P,
-          {
-            id: e.id,
-            onChange: (a) => r(e.id, a),
-            value: o[e.id],
-            maxVideos: e.max_items
-          }
-        );
-      case c.REPEATABLE_GROUP_FIELD:
-        return /* @__PURE__ */ t.createElement(N, { field: e });
-      case c.SINGLE_VIDEO_PICKER_WITH_INPUT:
-        return /* @__PURE__ */ t.createElement(
-          m,
-          {
-            id: e.id,
-            required: e.required,
-            type: "url",
-            placeholder: e.placeholder,
-            value: o[e.id],
-            onChange: (a) => r(e.id, a.target.value)
-          }
-        );
-      case c.TAGGABLE_MULTI_IMAGE_PICKER_WITH_INPUT:
-        return /* @__PURE__ */ t.createElement(
-          G,
-          {
-            id: e.id,
-            onChange: (a) => r(e.id, a),
-            value: o[e.id],
-            maxImages: e.max_items,
-            placeholder: e.placeholder
-          }
-        );
-      default:
-        return /* @__PURE__ */ t.createElement("div", null, "Unknown Field");
+import e from "react";
+import { Slider as n } from "./index.es30.js";
+import { Switch as r } from "./index.es15.js";
+import { SingleSelect as s } from "./index.es29.js";
+import { SwatchGrid as o } from "./index.es38.js";
+import { FONTS as i, SHAPES as h } from "./index.es143.js";
+import { ShapeIcons as p } from "./index.es176.js";
+import { ColorPicker as c } from "./index.es177.js";
+import { useImageEditorPortalContainer as d } from "./index.es137.js";
+const E = [
+  { label: "Outline only", value: "stroke" },
+  { label: "Solid fill", value: "fill" }
+], x = ["line", "dashedLine"], u = [
+  { label: "Marker", value: "round" },
+  { label: "Highlighter", value: "highlight" }
+];
+function T({ ui: t, engine: a }) {
+  const m = d();
+  return /* @__PURE__ */ e.createElement("div", null, t.mode === "text" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Font"), /* @__PURE__ */ e.createElement(
+    s,
+    {
+      items: i,
+      value: t.textFont,
+      onValueChange: a.setTextFont,
+      container: m
     }
-  };
-  return /* @__PURE__ */ t.createElement("aside", { className: "flex flex-col gap-1" }, /* @__PURE__ */ t.createElement(s, { variant: "body1", className: "text-light-2" }, e.name, e.required && /* @__PURE__ */ t.createElement("span", { className: "text-danger-1" }, "*")), g(), i[e.id] && /* @__PURE__ */ t.createElement("div", { className: "error-message" }, i[e.id]));
-};
+  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Size"), /* @__PURE__ */ e.createElement(
+    n,
+    {
+      min: 16,
+      max: 200,
+      step: 1,
+      value: [t.textSize],
+      onValueChange: ([l]) => a.setTextSize(l)
+    }
+  )), t.mode === "shape" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Shape"), /* @__PURE__ */ e.createElement(
+    o,
+    {
+      columns: 3,
+      value: t.selectedShapeType,
+      onSelect: a.selectShapeType,
+      items: h.map((l) => ({
+        value: l.id,
+        label: l.name,
+        icon: p[l.id]
+      }))
+    }
+  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Fill style"), /* @__PURE__ */ e.createElement(
+    s,
+    {
+      items: E,
+      value: t.shapeFill,
+      onValueChange: (l) => a.setShapeFill(l),
+      container: m
+    }
+  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Thickness"), /* @__PURE__ */ e.createElement(
+    n,
+    {
+      min: 1,
+      max: 40,
+      step: 1,
+      value: [t.shapeWidth],
+      onValueChange: ([l]) => a.setShapeWidth(l)
+    }
+  ), x.includes(t.selectedShapeType) && /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("div", { className: "my-3 h-px bg-neutral-1" }), /* @__PURE__ */ e.createElement("div", { className: "flex items-center justify-between gap-3" }, /* @__PURE__ */ e.createElement("div", null, /* @__PURE__ */ e.createElement("span", { className: "block text-xs font-medium text-light-2" }, "Multi-point line"), /* @__PURE__ */ e.createElement("span", { className: "mt-0.5 block text-[11px] leading-snug text-light-4" }, "Chain corners into one continuous line")), /* @__PURE__ */ e.createElement(
+    r,
+    {
+      checked: t.multiPointMode,
+      onCheckedChange: a.setMultiPointMode
+    }
+  )), t.multiPointMode && /* @__PURE__ */ e.createElement("ul", { className: "mt-2 list-none space-y-1 rounded-md bg-light-3 px-2.5 py-2 text-[11px] leading-relaxed text-light-3" }, /* @__PURE__ */ e.createElement("li", null, "Click to place each corner"), /* @__PURE__ */ e.createElement("li", null, "Hold Shift to snap the angle"), /* @__PURE__ */ e.createElement("li", null, "Backspace undoes the last corner"), /* @__PURE__ */ e.createElement("li", null, "Double-click or Enter to finish"), /* @__PURE__ */ e.createElement("li", null, "Click the first point to close the shape"), /* @__PURE__ */ e.createElement("li", null, "Esc cancels")))), t.mode === "draw" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement("span", { className: "mb-1 block text-xs text-light-4" }, "Brush size"), /* @__PURE__ */ e.createElement(
+    n,
+    {
+      min: 1,
+      max: 60,
+      step: 1,
+      value: [t.brushSize],
+      onValueChange: ([l]) => a.setBrushSize(l)
+    }
+  ), /* @__PURE__ */ e.createElement("span", { className: "mb-1 mt-2.5 block text-xs text-light-4" }, "Brush style"), /* @__PURE__ */ e.createElement(
+    s,
+    {
+      items: u,
+      value: t.brushStyle,
+      onValueChange: (l) => a.setBrushStyle(l),
+      container: m
+    }
+  )), t.mode === "sticker" && /* @__PURE__ */ e.createElement("div", { className: "mb-3.5" }, /* @__PURE__ */ e.createElement(
+    o,
+    {
+      columns: 3,
+      onSelect: a.addSticker,
+      emptyMessage: /* @__PURE__ */ e.createElement(e.Fragment, null, "No stickers configured — pass a ", /* @__PURE__ */ e.createElement("code", null, "stickers"), " prop with image URLs."),
+      items: t.stickers.map((l) => ({ value: l, thumbnail: l }))
+    }
+  )), t.mode === "text" && /* @__PURE__ */ e.createElement(c, { value: t.textColor, onChange: a.setTextColor }), t.mode === "shape" && /* @__PURE__ */ e.createElement(c, { value: t.shapeColor, onChange: a.setShapeColor }), t.mode === "draw" && /* @__PURE__ */ e.createElement(c, { value: t.drawColor, onChange: a.setDrawColor }));
+}
 export {
-  f as FormField
+  T as PanelInsert
 };
 //# sourceMappingURL=index.es170.js.map

package/dist/index.es170.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es170.js","sources":["../src/components/ui/form-renderer/components/form-fields/index.tsx"],"sourcesContent":["// components/FormField.tsx\nimport React from 'react'\nimport {\n  AssetValue,\n  FormField as FormFieldInterface,\n  RadioGroupWithInputFieldValue,\n  TaggableAssetValue,\n} from '../../form.types'\nimport { useFormValues } from '../../context/form-values'\nimport { Input } from '@/components/atoms/input'\nimport { Checkbox } from '@/components/atoms/checkbox'\nimport { RadioGroup } from '@/components/atoms/radio-group'\nimport { RadioGroupItem } from '@/components/atoms/radio-group'\nimport { MultiCombobox } from '@/components/molecules/multi-combobox'\nimport { SingleCombobox } from '@/components/molecules/single-combobox'\nimport { CreatableMultiCombobox } from '@/components/molecules/creatable-multi-combobox'\nimport { Textarea } from '@/components/atoms/textarea'\nimport { Typography } from '@/components/atoms/typography'\n\nimport { Mail, Phone } from 'lucide-react'\nimport { SingleImagePicker } from './components/single-image-picker'\nimport { SingleVideoPicker } from './components/single-video-picker'\nimport { MultiImagePicker } from './components/multi-image-picker'\nimport { MultiVideoPicker } from './components/multi-video-picker'\nimport { RepeatableGroup } from './components/repeatable-group'\nimport { TaggableMultiImagePicker } from './components/taggable-multi-image-picker'\nimport { FormFieldType } from '../../form.enums'\nimport { DatePicker } from '@/components/unstyled/date-picker'\nimport { TaggableImageUploadFieldWithInput } from './components/taggable-multi-image-picker-with-input'\n\ninterface FormFieldProps {\n  field: FormFieldInterface\n}\n\nexport const FormField: React.FC<FormFieldProps> = ({ field }) => {\n  const {\n    values,\n    errors,\n    setValue,\n    getRequestHeaders,\n    getCreateOptionExtraBody,\n  } = useFormValues()\n\n  const renderField = () => {\n    switch (field.type) {\n      case FormFieldType.SINGLE_COMBOBOX:\n        return (\n          <SingleCombobox\n            options={field.options.map((option) => ({\n              id: option,\n              name: option,\n            }))}\n            value={values[field.id] as string}\n            onChange={(data) => setValue(field.id, data)}\n            placeholder={field.placeholder}\n          />\n        )\n\n      case FormFieldType.CREATABLE_MULTI_COMBOBOX: {\n        const selected =\n          (values[field.id] as string)?.split(',').filter(Boolean) ?? []\n        return (\n          <CreatableMultiCombobox\n            fieldId={field.id}\n            optionsUrl={field.optionsUrl}\n            createOptionUrl={field.createOptionUrl}\n            optionsRequestBody={field.optionsRequestBody}\n            createOptionRequestBody={field.createOptionRequestBody}\n            createOptionValueKey={field.createOptionValueKey}\n            createOptionExtraBody={\n              field.skipCreateOptionExtraBody\n                ? undefined\n                : getCreateOptionExtraBody\n            }\n            requestHeaders={getRequestHeaders}\n            urlTemplateData={values}\n            value={selected}\n            onChange={(data) =>\n              setValue(field.id, data.length > 0 ? data.join(',') : undefined)\n            }\n            placeholder={field.placeholder}\n            minSelected={field.minSelected}\n            maxSelected={field.maxSelected}\n          />\n        )\n      }\n\n      case FormFieldType.MULTI_COMBOBOX:\n        return (\n          <MultiCombobox\n            options={field.options.map((option) => ({\n              label: option,\n              value: option,\n            }))}\n            selected={(values[field.id] as string)?.split(',') || []}\n            onChange={(data) => {\n              if (data.length === 0) {\n                setValue(field.id, undefined)\n              } else {\n                setValue(field.id, (data as string[]).join(','))\n              }\n            }}\n            placeholder={field.placeholder}\n          />\n        )\n\n      case FormFieldType.RADIO_GROUP:\n        return (\n          <RadioGroup\n            value={values[field.id] as string}\n            onValueChange={(data) => setValue(field.id, data)}\n          >\n            {field.options.map((option) => (\n              <div key={option} className=\"flex items-center space-x-2\">\n                <RadioGroupItem value={option} id={option} />\n                <Typography variant=\"body1\" className=\"text-light-4\">\n                  {option}\n                </Typography>\n              </div>\n            ))}\n          </RadioGroup>\n        )\n\n      case FormFieldType.RADIO_GROUP_WITH_OPTIONAL_INPUT: {\n        const value = values[field.id] as RadioGroupWithInputFieldValue\n        return (\n          <div>\n            <RadioGroup\n              value={value?.radio_value}\n              onValueChange={(data) =>\n                setValue(field.id, {\n                  ...value,\n                  radio_value: data,\n                  input_value: '',\n                })\n              }\n            >\n              {field.options.map((option) => (\n                <div key={option} className=\"flex items-center space-x-2\">\n                  <RadioGroupItem value={option} id={option} />\n                  <Typography variant=\"body1\" className=\"text-light-4\">\n                    {option}\n                  </Typography>\n                </div>\n              ))}\n            </RadioGroup>\n            {field.inputTriggerOptionValue === value?.radio_value ? (\n              <Input\n                id={field.id}\n                type=\"text\"\n                placeholder={field.inputFieldPlaceholder}\n                value={value?.input_value}\n                onChange={(e) =>\n                  setValue(field.id, {\n                    ...value,\n                    input_value: e.target.value,\n                  })\n                }\n              />\n            ) : null}\n          </div>\n        )\n      }\n\n      case FormFieldType.CHECKBOX_GROUP: {\n        const value = values[field.id] as string\n        return (\n          <div className=\"flex flex-col gap-2\">\n            {field.options.map((option) => {\n              return (\n                <div key={option} className=\"flex items-center space-x-2\">\n                  <Checkbox\n                    id={option}\n                    checked={value?.split(',').includes(option)}\n                    onCheckedChange={(data) => {\n                      if (data) {\n                        setValue(\n                          field.id,\n                          value ? `${value},${option}` : option\n                        )\n                      } else {\n                        setValue(\n                          field.id,\n                          value\n                            ?.split(',')\n                            .filter((item) => item !== option)\n                            .join(',')\n                        )\n                      }\n                    }}\n                  />\n                  <Typography variant=\"body1\" className=\"text-light-4\">\n                    {option}\n                  </Typography>\n                </div>\n              )\n            })}\n          </div>\n        )\n      }\n\n      case FormFieldType.DATE_PICKER: {\n        const epochValue = values[field.id] as number | undefined\n        const dateValue = epochValue ? new Date(epochValue * 1000) : undefined\n        return (\n          <DatePicker\n            variant=\"single\"\n            date={dateValue}\n            onDateChange={(date) => {\n              if (date) {\n                setValue(field.id, Math.floor(date.valueOf() / 1000))\n              }\n            }}\n          />\n        )\n      }\n\n      case FormFieldType.LONG_TEXT:\n        return (\n          <Textarea\n            id={field.id}\n            placeholder={field.placeholder}\n            value={values[field.id] as string}\n            onChange={(e) => setValue(field.id, e.target.value)}\n          />\n        )\n\n      case FormFieldType.EMAIL:\n        return (\n          <Input\n            type=\"email\"\n            id={field.id}\n            value={values[field.id] as string}\n            onChange={(e) => setValue(field.id, e.target.value)}\n            placeholder={field.placeholder}\n            prefix={<Mail className=\"stroke-gray-400\" size={20} />}\n          />\n        )\n\n      case FormFieldType.SHORT_TEXT:\n        // Default string input\n        return (\n          <Input\n            id={field.id}\n            type=\"text\"\n            placeholder={field.placeholder}\n            value={values[field.id] as string}\n            onChange={(e) => setValue(field.id, e.target.value)}\n          />\n        )\n      case FormFieldType.MOBILE_NUMBER:\n        return (\n          <Input\n            prefix={<Phone className=\"stroke-gray-400\" size={20} />}\n            type=\"tel\"\n            id={field.id}\n            placeholder={field.placeholder}\n            value={values[field.id] as string}\n            onChange={(e) => setValue(field.id, e.target.value)}\n          />\n        )\n      case FormFieldType.NUMBER:\n        return (\n          <Input\n            // type=\"number\"\n            type=\"number\"\n            inputMode=\"decimal\"\n            pattern=\"^\\d*\\.?\\d*$\"\n            id={field.id}\n            placeholder={field.placeholder}\n            value={values[field.id] as string}\n            onChange={(e) => setValue(field.id, e.target.value)}\n          />\n        )\n      case FormFieldType.SINGLE_IMAGE_PICKER:\n        return (\n          <SingleImagePicker\n            id={field.id}\n            onChange={(data?: AssetValue) => setValue(field.id, data)}\n            value={values[field.id] as AssetValue | undefined}\n          />\n        )\n\n      case FormFieldType.MULTI_IMAGE_PICKER:\n        return (\n          <MultiImagePicker\n            id={field.id}\n            onChange={(data?: AssetValue[]) => setValue(field.id, data)}\n            value={values[field.id] as AssetValue[] | undefined}\n            maxImages={field.max_items}\n          />\n        )\n\n      case FormFieldType.TAGGABLE_MULTI_IMAGE_PICKER:\n        return (\n          <TaggableMultiImagePicker\n            id={field.id}\n            onChange={(data?: TaggableAssetValue[]) => setValue(field.id, data)}\n            value={values[field.id] as TaggableAssetValue[] | undefined}\n            options={field.options}\n            maxImages={field.max_items}\n          />\n        )\n\n      case FormFieldType.SINGLE_VIDEO_PICKER:\n        return (\n          <SingleVideoPicker\n            id={field.id}\n            onChange={(data?: AssetValue) => setValue(field.id, data)}\n            value={values[field.id] as AssetValue | undefined}\n          />\n        )\n\n      case FormFieldType.MULTI_VIDEO_PICKER:\n        return (\n          <MultiVideoPicker\n            id={field.id}\n            onChange={(data?: AssetValue[]) => setValue(field.id, data)}\n            value={values[field.id] as AssetValue[] | undefined}\n            maxVideos={field.max_items}\n          />\n        )\n\n      case FormFieldType.REPEATABLE_GROUP_FIELD: {\n        return <RepeatableGroup field={field} />\n      }\n\n      case FormFieldType.SINGLE_VIDEO_PICKER_WITH_INPUT: {\n        return (\n          <Input\n            id={field.id}\n            required={field.required}\n            type=\"url\"\n            placeholder={field.placeholder}\n            value={values[field.id] as string}\n            onChange={(e) => setValue(field.id, e.target.value)}\n          />\n        )\n      }\n\n      case FormFieldType.TAGGABLE_MULTI_IMAGE_PICKER_WITH_INPUT: {\n        return (\n          <TaggableImageUploadFieldWithInput\n            id={field.id}\n            onChange={(data?: TaggableAssetValue[]) => setValue(field.id, data)}\n            value={values[field.id] as TaggableAssetValue[] | undefined}\n            maxImages={field.max_items}\n            placeholder={field.placeholder}\n          />\n        )\n      }\n\n      default:\n        return <div>Unknown Field</div>\n    }\n  }\n\n  return (\n    <aside className=\"flex flex-col gap-1\">\n      <Typography variant=\"body1\" className=\"text-light-2\">\n        {field.name}\n        {field.required && <span className=\"text-danger-1\">*</span>}\n      </Typography>\n      {renderField()}\n      {errors[field.id] && (\n        <div className=\"error-message\">{errors[field.id]}</div>\n      )}\n    </aside>\n  )\n}\n"],"names":["FormField","field","values","errors","setValue","getRequestHeaders","getCreateOptionExtraBody","useFormValues","renderField","FormFieldType","React","SingleCombobox","option","data","selected","CreatableMultiCombobox","MultiCombobox","RadioGroup","RadioGroupItem","Typography","value","Input","e","Checkbox","item","epochValue","dateValue","DatePicker","date","Textarea","Mail","Phone","SingleImagePicker","MultiImagePicker","TaggableMultiImagePicker","SingleVideoPicker","MultiVideoPicker","RepeatableGroup","TaggableImageUploadFieldWithInput"],"mappings":"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"}
+{"version":3,"file":"index.es170.js","sources":["../src/components/organisms/image-editor/components/panel-insert.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Slider } from '@/components/molecules/slider'\nimport { Switch } from '@/components/atoms/switch'\nimport { SingleSelect } from '@/components/molecules/single-select'\nimport { SwatchGrid } from '@/components/molecules/swatch-grid'\n\nimport { ImageEditorEngine, ImageEditorUiState } from '../image-editor.types'\nimport { FONTS, SHAPES } from '../picture-studio-engine'\nimport { ShapeIcons } from './shape-icons'\nimport { ColorPicker } from './color-picker'\nimport { useImageEditorPortalContainer } from './portal-context'\n\ninterface PanelInsertProps {\n  ui: ImageEditorUiState\n  engine: ImageEditorEngine\n}\n\nconst FILL_ITEMS = [\n  { label: 'Outline only', value: 'stroke' },\n  { label: 'Solid fill', value: 'fill' },\n]\nconst MULTI_POINT_SHAPES = ['line', 'dashedLine']\n\nconst BRUSH_STYLE_ITEMS = [\n  { label: 'Marker', value: 'round' },\n  { label: 'Highlighter', value: 'highlight' },\n]\n\nexport function PanelInsert({ ui, engine }: PanelInsertProps) {\n  const container = useImageEditorPortalContainer()\n  return (\n    <div>\n      {ui.mode === 'text' && (\n        <div className=\"mb-3.5\">\n          <span className=\"mb-1 block text-xs text-light-4\">Font</span>\n          <SingleSelect\n            items={FONTS}\n            value={ui.textFont}\n            onValueChange={engine.setTextFont}\n            container={container}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">Size</span>\n          <Slider\n            min={16}\n            max={200}\n            step={1}\n            value={[ui.textSize]}\n            onValueChange={([v]) => engine.setTextSize(v)}\n          />\n        </div>\n      )}\n\n      {ui.mode === 'shape' && (\n        <div className=\"mb-3.5\">\n          <span className=\"mb-1 block text-xs text-light-4\">Shape</span>\n          <SwatchGrid\n            columns={3}\n            value={ui.selectedShapeType}\n            onSelect={engine.selectShapeType}\n            items={SHAPES.map((s) => ({\n              value: s.id,\n              label: s.name,\n              icon: ShapeIcons[s.id],\n            }))}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">\n            Fill style\n          </span>\n          <SingleSelect\n            items={FILL_ITEMS}\n            value={ui.shapeFill}\n            onValueChange={(v) => engine.setShapeFill(v as 'stroke' | 'fill')}\n            container={container}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">\n            Thickness\n          </span>\n          <Slider\n            min={1}\n            max={40}\n            step={1}\n            value={[ui.shapeWidth]}\n            onValueChange={([v]) => engine.setShapeWidth(v)}\n          />\n\n          {MULTI_POINT_SHAPES.includes(ui.selectedShapeType) && (\n            <>\n              <div className=\"my-3 h-px bg-neutral-1\" />\n              <div className=\"flex items-center justify-between gap-3\">\n                <div>\n                  <span className=\"block text-xs font-medium text-light-2\">\n                    Multi-point line\n                  </span>\n                  <span className=\"mt-0.5 block text-[11px] leading-snug text-light-4\">\n                    Chain corners into one continuous line\n                  </span>\n                </div>\n                <Switch\n                  checked={ui.multiPointMode}\n                  onCheckedChange={engine.setMultiPointMode}\n                />\n              </div>\n              {ui.multiPointMode && (\n                <ul className=\"mt-2 list-none space-y-1 rounded-md bg-light-3 px-2.5 py-2 text-[11px] leading-relaxed text-light-3\">\n                  <li>Click to place each corner</li>\n                  <li>Hold Shift to snap the angle</li>\n                  <li>Backspace undoes the last corner</li>\n                  <li>Double-click or Enter to finish</li>\n                  <li>Click the first point to close the shape</li>\n                  <li>Esc cancels</li>\n                </ul>\n              )}\n            </>\n          )}\n        </div>\n      )}\n\n      {ui.mode === 'draw' && (\n        <div className=\"mb-3.5\">\n          <span className=\"mb-1 block text-xs text-light-4\">Brush size</span>\n          <Slider\n            min={1}\n            max={60}\n            step={1}\n            value={[ui.brushSize]}\n            onValueChange={([v]) => engine.setBrushSize(v)}\n          />\n          <span className=\"mb-1 mt-2.5 block text-xs text-light-4\">\n            Brush style\n          </span>\n          <SingleSelect\n            items={BRUSH_STYLE_ITEMS}\n            value={ui.brushStyle}\n            onValueChange={(v) =>\n              engine.setBrushStyle(v as 'round' | 'highlight')\n            }\n            container={container}\n          />\n        </div>\n      )}\n\n      {ui.mode === 'sticker' && (\n        <div className=\"mb-3.5\">\n          <SwatchGrid\n            columns={3}\n            onSelect={engine.addSticker}\n            emptyMessage={\n              <>\n                No stickers configured — pass a <code>stickers</code> prop with\n                image URLs.\n              </>\n            }\n            items={ui.stickers.map((src) => ({ value: src, thumbnail: src }))}\n          />\n        </div>\n      )}\n\n      {ui.mode === 'text' && (\n        <ColorPicker value={ui.textColor} onChange={engine.setTextColor} />\n      )}\n      {ui.mode === 'shape' && (\n        <ColorPicker value={ui.shapeColor} onChange={engine.setShapeColor} />\n      )}\n      {ui.mode === 'draw' && (\n        <ColorPicker value={ui.drawColor} onChange={engine.setDrawColor} />\n      )}\n    </div>\n  )\n}\n"],"names":["FILL_ITEMS","MULTI_POINT_SHAPES","BRUSH_STYLE_ITEMS","PanelInsert","ui","engine","container","useImageEditorPortalContainer","React","SingleSelect","FONTS","Slider","v","SwatchGrid","SHAPES","s","ShapeIcons","Switch","src","ColorPicker"],"mappings":";;;;;;;;;AAkBA,MAAMA,IAAa;AAAA,EACjB,EAAE,OAAO,gBAAgB,OAAO,SAAA;AAAA,EAChC,EAAE,OAAO,cAAc,OAAO,OAAA;AAChC,GACMC,IAAqB,CAAC,QAAQ,YAAY,GAE1CC,IAAoB;AAAA,EACxB,EAAE,OAAO,UAAU,OAAO,QAAA;AAAA,EAC1B,EAAE,OAAO,eAAe,OAAO,YAAA;AACjC;AAEO,SAASC,EAAY,EAAE,IAAAC,GAAI,QAAAC,KAA4B;AAC5D,QAAMC,IAAYC,EAAA;AAClB,SACEC,gBAAAA,EAAA,cAAC,OAAA,MACEJ,EAAG,SAAS,UACXI,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,YACbA,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,qCAAkC,MAAI,GACtDA,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOC;AAAA,MACP,OAAON,EAAG;AAAA,MACV,eAAeC,EAAO;AAAA,MACtB,WAAAC;AAAA,IAAA;AAAA,EAAA,GAEFE,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,4CAAyC,MAAI,GAC7DA,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,CAACP,EAAG,QAAQ;AAAA,MACnB,eAAe,CAAC,CAACQ,CAAC,MAAMP,EAAO,YAAYO,CAAC;AAAA,IAAA;AAAA,EAAA,CAEhD,GAGDR,EAAG,SAAS,WACXI,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,SAAA,GACbA,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,qCAAkC,OAAK,GACvDA,gBAAAA,EAAA;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,OAAOT,EAAG;AAAA,MACV,UAAUC,EAAO;AAAA,MACjB,OAAOS,EAAO,IAAI,CAACC,OAAO;AAAA,QACxB,OAAOA,EAAE;AAAA,QACT,OAAOA,EAAE;AAAA,QACT,MAAMC,EAAWD,EAAE,EAAE;AAAA,MAAA,EACrB;AAAA,IAAA;AAAA,EAAA,GAEJP,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,4CAAyC,YAEzD,GACAA,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOT;AAAA,MACP,OAAOI,EAAG;AAAA,MACV,eAAe,CAACQ,MAAMP,EAAO,aAAaO,CAAsB;AAAA,MAChE,WAAAN;AAAA,IAAA;AAAA,EAAA,GAEFE,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,4CAAyC,WAEzD,GACAA,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,CAACP,EAAG,UAAU;AAAA,MACrB,eAAe,CAAC,CAACQ,CAAC,MAAMP,EAAO,cAAcO,CAAC;AAAA,IAAA;AAAA,EAAA,GAG/CX,EAAmB,SAASG,EAAG,iBAAiB,KAC/CI,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MACEA,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,yBAAA,CAAyB,mCACvC,OAAA,EAAI,WAAU,0CAAA,GACbA,gBAAAA,EAAA,cAAC,OAAA,MACCA,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,yCAAA,GAAyC,kBAEzD,GACAA,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,qDAAA,GAAqD,wCAErE,CACF,GACAA,gBAAAA,EAAA;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,SAASb,EAAG;AAAA,MACZ,iBAAiBC,EAAO;AAAA,IAAA;AAAA,EAAA,CAE5B,GACCD,EAAG,kDACD,MAAA,EAAG,WAAU,yGACZI,gBAAAA,EAAA,cAAC,MAAA,MAAG,4BAA0B,GAC9BA,gBAAAA,EAAA,cAAC,YAAG,8BAA4B,mCAC/B,MAAA,MAAG,kCAAgC,GACpCA,gBAAAA,EAAA,cAAC,MAAA,MAAG,iCAA+B,GACnCA,gBAAAA,EAAA,cAAC,MAAA,MAAG,0CAAwC,GAC5CA,gBAAAA,EAAA,cAAC,YAAG,aAAW,CACjB,CAEJ,CAEJ,GAGDJ,EAAG,SAAS,UACXI,gBAAAA,EAAA,cAAC,SAAI,WAAU,SAAA,mCACZ,QAAA,EAAK,WAAU,kCAAA,GAAkC,YAAU,GAC5DA,gBAAAA,EAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,CAACP,EAAG,SAAS;AAAA,MACpB,eAAe,CAAC,CAACQ,CAAC,MAAMP,EAAO,aAAaO,CAAC;AAAA,IAAA;AAAA,EAAA,GAE/CJ,gBAAAA,EAAA,cAAC,QAAA,EAAK,WAAU,4CAAyC,aAEzD,GACAA,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOP;AAAA,MACP,OAAOE,EAAG;AAAA,MACV,eAAe,CAACQ,MACdP,EAAO,cAAcO,CAA0B;AAAA,MAEjD,WAAAN;AAAA,IAAA;AAAA,EAAA,CAEJ,GAGDF,EAAG,SAAS,aACXI,gBAAAA,EAAA,cAAC,OAAA,EAAI,WAAU,SAAA,GACbA,gBAAAA,EAAA;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,UAAUR,EAAO;AAAA,MACjB,cACEG,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAE,oEACiC,QAAA,MAAK,UAAQ,GAAO,wBAEvD;AAAA,MAEF,OAAOJ,EAAG,SAAS,IAAI,CAACc,OAAS,EAAE,OAAOA,GAAK,WAAWA,IAAM;AAAA,IAAA;AAAA,EAAA,CAEpE,GAGDd,EAAG,SAAS,0CACVe,GAAA,EAAY,OAAOf,EAAG,WAAW,UAAUC,EAAO,aAAA,CAAc,GAElED,EAAG,SAAS,WACXI,gBAAAA,EAAA,cAACW,GAAA,EAAY,OAAOf,EAAG,YAAY,UAAUC,EAAO,eAAe,GAEpED,EAAG,SAAS,UACXI,gBAAAA,EAAA,cAACW,KAAY,OAAOf,EAAG,WAAW,UAAUC,EAAO,cAAc,CAErE;AAEJ;"}