@adminide-stack/yantra-mobile 12.0.69-alpha.9 → 12.0.69

package/lib/features/design/DesignEditorExperience.js

@@ -0,0 +1,643 @@
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useCallback,useMemo,useRef}from'react';import {StyleSheet,View,Pressable,Text,ScrollView,PanResponder,TextInput}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {KeyboardAwareScreen,KeyboardLiftSpacer}from'../../components/KeyboardComposerDock.js';import {dismissKeyboard}from'../../utils/keyboardController.js';import {resizeFrame}from'../canvas/canvasCore.js';import {replaceLayer,addLayer,newImageLayer,nextZ,layerPaintOrder,bringLayerToFront,sendLayerToBack,duplicateLayer,removeLayer,newTextLayer,newShapeLayer,TSHIRT_COLORS,DESIGN_SWATCHES,TSHIRT_PRINT_AREA}from'./designCore.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function DesignEditorExperience({
+  doc,
+  onChange,
+  onClose,
+  onExport,
+  onPickLocalMedia,
+  canvasImages = []
+}) {
+  var _a;
+  const [pageIndex, setPageIndex] = useState(0);
+  const [selectedId, setSelectedId] = useState(null);
+  const [dock, setDock] = useState("add");
+  const [imagePicker, setImagePicker] = useState(false);
+  const [canvasSize, setCanvasSize] = useState({
+    width: 0,
+    height: 0
+  });
+  const page = doc.pages[Math.min(pageIndex, doc.pages.length - 1)];
+  const selected = (_a = page.layers.find((l) => l.id === selectedId)) != null ? _a : null;
+  const setPage = useCallback((next) => {
+    onChange(__spreadProps(__spreadValues({}, doc), {
+      pages: doc.pages.map((p) => p.id === next.id ? next : p)
+    }));
+  }, [doc, onChange]);
+  const updateLayer = useCallback((layer) => setPage(replaceLayer(page, layer)), [page, setPage]);
+  const scale = useMemo(() => {
+    if (!canvasSize.width || !canvasSize.height) return 0;
+    return Math.min((canvasSize.width - 32) / page.width, (canvasSize.height - 32) / page.height);
+  }, [canvasSize, page.width, page.height]);
+  const addAndSelect = useCallback((layer) => {
+    setPage(addLayer(page, layer));
+    setSelectedId(layer.id);
+    setDock("style");
+  }, [page, setPage]);
+  const handleAddImage = useCallback(async () => {
+    if (onPickLocalMedia) {
+      try {
+        const picked = await onPickLocalMedia();
+        const image = picked.find((p) => p.type === "image");
+        if (image) addAndSelect(newImageLayer(image.src, nextZ(page)));
+        return;
+      } catch (e) {
+      }
+    }
+    setImagePicker(true);
+  }, [onPickLocalMedia, addAndSelect, page]);
+  return /* @__PURE__ */ jsxs(KeyboardAwareScreen, { style: styles.root, testID: "design-editor", children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+        dismissKeyboard();
+        onClose();
+      }, hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: "#F7F7FA" }) }),
+      doc.pages.length > 1 ? /* @__PURE__ */ jsx(View, { style: styles.pageChips, children: doc.pages.map((p, i) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+        setPageIndex(i);
+        setSelectedId(null);
+      }, style: [styles.pageChip, i === pageIndex && styles.pageChipActive], children: /* @__PURE__ */ jsx(Text, { style: [styles.pageChipLabel, i === pageIndex && styles.pageChipLabelActive], children: p.name }) }, p.id)) }) : /* @__PURE__ */ jsx(Text, { style: styles.headerTitle, children: doc.title || "Design" }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => onExport(doc), hitSlop: 10, accessibilityRole: "button", accessibilityLabel: "Export design", children: /* @__PURE__ */ jsx(View, { style: styles.exportButton, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check", size: 20, color: "#0f172a" }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.canvasArea, onLayout: (e) => setCanvasSize(e.nativeEvent.layout), onTouchStart: dismissKeyboard, children: scale > 0 ? /* @__PURE__ */ jsxs(Pressable, { style: [styles.page, {
+      width: page.width * scale,
+      height: page.height * scale,
+      backgroundColor: page.background
+    }], onPress: () => setSelectedId(null), children: [
+      /* @__PURE__ */ jsx(PageChrome, { doc, page, pageIndex, scale }),
+      layerPaintOrder(page.layers).map((layer) => /* @__PURE__ */ jsx(LayerView, { layer, scale, selected: layer.id === selectedId, onSelect: () => setSelectedId(layer.id), onCommit: updateLayer }, layer.id))
+    ] }) : null }),
+    selected ? /* @__PURE__ */ jsxs(View, { style: styles.inspector, children: [
+      /* @__PURE__ */ jsx(IconButton, { name: "flip-to-front", onPress: () => setPage(bringLayerToFront(page, selected.id)) }),
+      /* @__PURE__ */ jsx(IconButton, { name: "flip-to-back", onPress: () => setPage(sendLayerToBack(page, selected.id)) }),
+      /* @__PURE__ */ jsx(IconButton, { name: "content-copy", onPress: () => setPage(duplicateLayer(page, selected.id)) }),
+      /* @__PURE__ */ jsx(View, { style: styles.inspectorSpacer }),
+      /* @__PURE__ */ jsx(Text, { style: styles.inspectorLabel, children: "Opacity" }),
+      /* @__PURE__ */ jsx(IconButton, { name: "minus", onPress: () => updateLayer(__spreadProps(__spreadValues({}, selected), {
+        opacity: Math.max(0.1, +(selected.opacity - 0.1).toFixed(2))
+      })) }),
+      /* @__PURE__ */ jsxs(Text, { style: styles.inspectorValue, children: [
+        Math.round(selected.opacity * 100),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx(IconButton, { name: "plus", onPress: () => updateLayer(__spreadProps(__spreadValues({}, selected), {
+        opacity: Math.min(1, +(selected.opacity + 0.1).toFixed(2))
+      })) }),
+      /* @__PURE__ */ jsx(View, { style: styles.inspectorSpacer }),
+      /* @__PURE__ */ jsx(IconButton, { name: "trash-can-outline", color: "#F87171", onPress: () => {
+        setPage(removeLayer(page, selected.id));
+        setSelectedId(null);
+      } })
+    ] }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.dockPanel, children: [
+      dock === "add" ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.addRow, children: [
+        /* @__PURE__ */ jsx(AddButton, { icon: "format-text", label: "Text", onPress: () => addAndSelect(newTextLayer("Tap to edit", nextZ(page))) }),
+        /* @__PURE__ */ jsx(AddButton, { icon: "square-rounded-outline", label: "Rectangle", onPress: () => addAndSelect(newShapeLayer("rect", nextZ(page))) }),
+        /* @__PURE__ */ jsx(AddButton, { icon: "minus", label: "Line", onPress: () => addAndSelect(newShapeLayer("line", nextZ(page))) }),
+        /* @__PURE__ */ jsx(AddButton, { icon: "image-outline", label: "Image", onPress: () => void handleAddImage() })
+      ] }) : null,
+      dock === "style" && (selected == null ? void 0 : selected.type) === "text" ? /* @__PURE__ */ jsx(TextStylePanel, { layer: selected, onChange: updateLayer }) : null,
+      dock === "style" && (selected == null ? void 0 : selected.type) === "shape" ? /* @__PURE__ */ jsx(SwatchRow, { value: selected.fill, onPick: (fill) => updateLayer(__spreadProps(__spreadValues({}, selected), {
+        fill
+      })) }) : null,
+      dock === "style" && (selected == null ? void 0 : selected.type) === "image" ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Drag to move \xB7 corner handle resizes" }) : null,
+      dock === "style" && !selected ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "Select a layer to style it" }) : null,
+      dock === "page" ? /* @__PURE__ */ jsxs(View, { children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.panelLabel, children: doc.kind === "tshirt" ? "Shirt colour" : "Page background" }),
+        /* @__PURE__ */ jsx(SwatchRow, { swatches: doc.kind === "tshirt" ? TSHIRT_COLORS : DESIGN_SWATCHES, value: page.background, onPick: (background) => setPage(__spreadProps(__spreadValues({}, page), {
+          background
+        })) })
+      ] }) : null,
+      dock === "layers" ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.addRow, children: [
+        layerPaintOrder(page.layers).slice().reverse().map((layer) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => setSelectedId(layer.id), style: [styles.layerChip, layer.id === selectedId && styles.layerChipActive], children: [
+          /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: layer.type === "text" ? "format-text" : layer.type === "image" ? "image-outline" : "square-rounded-outline", size: 14, color: layer.id === selectedId ? "#0f172a" : "#CBD5E1" }),
+          /* @__PURE__ */ jsx(Text, { style: [styles.layerChipLabel, layer.id === selectedId && styles.layerChipLabelActive], numberOfLines: 1, children: layer.type === "text" ? layer.text.slice(0, 14) || "Text" : layer.type })
+        ] }, layer.id)),
+        page.layers.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: "No layers yet" }) : null
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(View, { style: styles.dock, children: [["add", "plus-box-outline", "Add"], ["style", "palette-outline", "Style"], ["page", "file-outline", "Page"], ["layers", "layers-outline", "Layers"]].map(([tab, icon, label]) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => setDock(tab), style: styles.dockTab, accessibilityRole: "tab", children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 22, color: dock === tab ? "#A5B4FC" : "#94A3B8" }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.dockLabel, dock === tab && styles.dockLabelActive], children: label })
+    ] }, tab)) }),
+    imagePicker ? /* @__PURE__ */ jsx(View, { style: styles.pickerOverlay, children: /* @__PURE__ */ jsxs(View, { style: styles.pickerCard, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.pickerTitle, children: "Add an image" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.panelHint, children: canvasImages.length ? "From your canvases:" : onPickLocalMedia ? "No images on your canvases yet." : "Photo library needs an app update - images from your canvases work now." }),
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.pickerRow, children: canvasImages.map((src) => /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+        setImagePicker(false);
+        addAndSelect(newImageLayer(src, nextZ(page)));
+      }, children: /* @__PURE__ */ jsx(Image, { source: {
+        uri: src
+      }, style: styles.pickerThumb, contentFit: "cover" }) }, src)) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => setImagePicker(false), style: styles.pickerDismiss, children: /* @__PURE__ */ jsx(Text, { style: styles.pickerDismissLabel, children: "Cancel" }) })
+    ] }) }) : null,
+    /* @__PURE__ */ jsx(KeyboardLiftSpacer, {})
+  ] });
+}
+function PageChrome({
+  doc,
+  page,
+  pageIndex,
+  scale
+}) {
+  if (doc.kind === "tshirt") {
+    const area = TSHIRT_PRINT_AREA;
+    return /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.tshirtNeck, {
+        left: page.width * scale * 0.38,
+        width: page.width * scale * 0.24,
+        height: page.height * scale * 0.055,
+        borderRadius: page.width * scale * 0.12
+      }] }),
+      /* @__PURE__ */ jsx(View, { style: [styles.printArea, {
+        left: page.width * area.x * scale,
+        top: page.height * area.y * scale,
+        width: page.width * area.width * scale,
+        height: page.height * area.height * scale
+      }] }),
+      /* @__PURE__ */ jsx(Text, { style: [styles.chromeHint, {
+        top: page.height * (area.y + area.height) * scale + 6
+      }], children: "Print area" })
+    ] });
+  }
+  if (doc.kind === "postcard" && pageIndex === 1) {
+    const w = page.width * scale;
+    const h = page.height * scale;
+    return /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: [
+      /* @__PURE__ */ jsx(View, { style: [styles.postDivider, {
+        left: w * 0.55,
+        top: h * 0.12,
+        height: h * 0.76
+      }] }),
+      [0.3, 0.45, 0.6].map((frac) => /* @__PURE__ */ jsx(View, { style: [styles.postAddressLine, {
+        left: w * 0.62,
+        right: w * 0.06,
+        top: h * frac
+      }] }, frac)),
+      /* @__PURE__ */ jsx(View, { style: [styles.postStamp, {
+        right: w * 0.06,
+        top: h * 0.08,
+        width: w * 0.1,
+        height: w * 0.12
+      }] })
+    ] });
+  }
+  return null;
+}
+function LayerView({
+  layer,
+  scale,
+  selected,
+  onSelect,
+  onCommit
+}) {
+  const [live, setLive] = useState(null);
+  const gestureBase = useRef({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  });
+  const liveRef = useRef(null);
+  const setLiveBoth = (f) => {
+    liveRef.current = f;
+    setLive(f);
+  };
+  const current = useRef({
+    layer,
+    scale,
+    onSelect,
+    onCommit
+  });
+  current.current = {
+    layer,
+    scale,
+    onSelect,
+    onCommit
+  };
+  const commitLive = () => {
+    if (liveRef.current) current.current.onCommit(__spreadValues(__spreadValues({}, current.current.layer), liveRef.current));
+    setLiveBoth(null);
+  };
+  const grabFrame = () => {
+    const l = current.current.layer;
+    gestureBase.current = {
+      x: l.x,
+      y: l.y,
+      width: l.width,
+      height: l.height
+    };
+  };
+  const drag = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) + Math.abs(g.dy) > 4,
+    onPanResponderGrant: () => {
+      current.current.onSelect();
+      grabFrame();
+    },
+    onPanResponderMove: (_e, g) => {
+      const b = gestureBase.current;
+      const s = current.current.scale;
+      setLiveBoth(__spreadProps(__spreadValues({}, b), {
+        x: b.x + g.dx / s,
+        y: b.y + g.dy / s
+      }));
+    },
+    onPanResponderRelease: commitLive,
+    onPanResponderTerminate: () => setLiveBoth(null)
+  }));
+  const resize = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderGrant: grabFrame,
+    onPanResponderMove: (_e, g) => {
+      const s = current.current.scale;
+      setLiveBoth(resizeFrame(gestureBase.current, "br", g.dx / s, g.dy / s));
+    },
+    onPanResponderRelease: commitLive,
+    onPanResponderTerminate: () => setLiveBoth(null)
+  }));
+  const frame = live != null ? live : layer;
+  const box = {
+    left: frame.x * scale,
+    top: frame.y * scale,
+    width: frame.width * scale,
+    height: frame.height * scale,
+    opacity: layer.opacity
+  };
+  return /* @__PURE__ */ jsxs(View, __spreadProps(__spreadValues({ style: [styles.layer, box] }, selected ? drag.current.panHandlers : {}), { children: [
+    layer.type === "image" ? /* @__PURE__ */ jsx(Image, { source: {
+      uri: layer.src
+    }, style: StyleSheet.absoluteFill, contentFit: "fill" }) : layer.type === "shape" ? /* @__PURE__ */ jsx(View, { style: [StyleSheet.absoluteFill, {
+      backgroundColor: layer.fill,
+      borderRadius: layer.cornerRadius * scale
+    }] }) : /* @__PURE__ */ jsx(Text, { style: {
+      fontSize: layer.fontSize * scale,
+      color: layer.color,
+      fontWeight: layer.bold ? "700" : "400",
+      textAlign: layer.align,
+      width: "100%"
+    }, numberOfLines: 0, children: layer.text }),
+    !selected ? /* @__PURE__ */ jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: onSelect }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: styles.selection }),
+      /* @__PURE__ */ jsx(View, __spreadProps(__spreadValues({ style: styles.handle }, resize.current.panHandlers), { children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-expand", size: 10, color: "#0f172a" }) }))
+    ] })
+  ] }));
+}
+function TextStylePanel({
+  layer,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsx(TextInput, { style: styles.textInput, value: layer.text, onChangeText: (text) => onChange(__spreadProps(__spreadValues({}, layer), {
+      text
+    })), placeholder: "Your text", placeholderTextColor: "#64748B", multiline: true }),
+    /* @__PURE__ */ jsxs(View, { style: styles.textControls, children: [
+      /* @__PURE__ */ jsx(IconButton, { name: "format-font-size-decrease", onPress: () => onChange(__spreadProps(__spreadValues({}, layer), {
+        fontSize: Math.max(16, layer.fontSize - 8)
+      })) }),
+      /* @__PURE__ */ jsx(Text, { style: styles.inspectorValue, children: layer.fontSize }),
+      /* @__PURE__ */ jsx(IconButton, { name: "format-font-size-increase", onPress: () => onChange(__spreadProps(__spreadValues({}, layer), {
+        fontSize: Math.min(400, layer.fontSize + 8)
+      })) }),
+      /* @__PURE__ */ jsx(IconButton, { name: "format-bold", color: layer.bold ? "#A5B4FC" : "#CBD5E1", onPress: () => onChange(__spreadProps(__spreadValues({}, layer), {
+        bold: !layer.bold
+      })) }),
+      ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx(IconButton, { name: `format-align-${align}`, color: layer.align === align ? "#A5B4FC" : "#CBD5E1", onPress: () => onChange(__spreadProps(__spreadValues({}, layer), {
+        align
+      })) }, align))
+    ] }),
+    /* @__PURE__ */ jsx(SwatchRow, { value: layer.color, onPick: (color) => onChange(__spreadProps(__spreadValues({}, layer), {
+      color
+    })) })
+  ] });
+}
+function SwatchRow({
+  swatches = DESIGN_SWATCHES,
+  value,
+  onPick
+}) {
+  return /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.swatchRow, children: swatches.map((color) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onPick(color), style: [styles.swatch, {
+    backgroundColor: color
+  }, value === color && styles.swatchActive], accessibilityRole: "button", accessibilityLabel: `Colour ${color}` }, color)) });
+}
+function AddButton({
+  icon,
+  label,
+  onPress
+}) {
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: styles.addButton, accessibilityRole: "button", children: [
+    /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 22, color: "#E2E8F0" }),
+    /* @__PURE__ */ jsx(Text, { style: styles.addButtonLabel, children: label })
+  ] });
+}
+function IconButton({
+  name,
+  color = "#CBD5E1",
+  onPress
+}) {
+  return /* @__PURE__ */ jsx(Pressable, { onPress, hitSlop: 8, style: styles.iconButton, accessibilityRole: "button", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name, size: 18, color }) });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: "#0B0B0F"
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#F7F7FA"
+  },
+  exportButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "#F7F7FA",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  pageChips: {
+    flexDirection: "row",
+    gap: 6
+  },
+  pageChip: {
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 16,
+    backgroundColor: "#1E1E24"
+  },
+  pageChipActive: {
+    backgroundColor: "#A5B4FC"
+  },
+  pageChipLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#CBD5E1"
+  },
+  pageChipLabelActive: {
+    color: "#0f172a"
+  },
+  canvasArea: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  page: {
+    borderRadius: 4,
+    overflow: "hidden"
+  },
+  layer: {
+    position: "absolute"
+  },
+  selection: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    borderWidth: 1.5,
+    borderColor: "#A5B4FC",
+    borderRadius: 2
+  }),
+  handle: {
+    position: "absolute",
+    right: -12,
+    bottom: -12,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: "#A5B4FC",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  printArea: {
+    position: "absolute",
+    borderWidth: 1.5,
+    borderStyle: "dashed",
+    borderColor: "rgba(148,163,184,0.9)",
+    borderRadius: 6
+  },
+  tshirtNeck: {
+    position: "absolute",
+    top: 0,
+    borderBottomWidth: 2,
+    borderColor: "rgba(148,163,184,0.6)"
+  },
+  chromeHint: {
+    position: "absolute",
+    alignSelf: "center",
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.6,
+    textTransform: "uppercase",
+    color: "rgba(148,163,184,0.9)"
+  },
+  postDivider: {
+    position: "absolute",
+    width: 1.5,
+    backgroundColor: "rgba(15,23,42,0.25)"
+  },
+  postAddressLine: {
+    position: "absolute",
+    height: 1.5,
+    backgroundColor: "rgba(15,23,42,0.18)"
+  },
+  postStamp: {
+    position: "absolute",
+    borderWidth: 1.5,
+    borderStyle: "dashed",
+    borderColor: "rgba(15,23,42,0.25)",
+    borderRadius: 4
+  },
+  inspector: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    backgroundColor: "#141419",
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#26262E"
+  },
+  inspectorSpacer: {
+    flex: 1
+  },
+  inspectorLabel: {
+    fontSize: 12,
+    color: "#94A3B8"
+  },
+  inspectorValue: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#E2E8F0",
+    minWidth: 40,
+    textAlign: "center"
+  },
+  iconButton: {
+    padding: 6
+  },
+  dockPanel: {
+    minHeight: 64,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    backgroundColor: "#111116",
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#26262E"
+  },
+  addRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  addButton: {
+    alignItems: "center",
+    gap: 4,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  addButtonLabel: {
+    fontSize: 11,
+    color: "#CBD5E1"
+  },
+  panelHint: {
+    fontSize: 12,
+    color: "#64748B",
+    paddingVertical: 8
+  },
+  panelLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#94A3B8",
+    marginBottom: 8
+  },
+  swatchRow: {
+    flexDirection: "row",
+    gap: 10,
+    paddingVertical: 6
+  },
+  swatch: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    borderWidth: 1,
+    borderColor: "rgba(148,163,184,0.4)"
+  },
+  swatchActive: {
+    borderWidth: 2.5,
+    borderColor: "#A5B4FC"
+  },
+  textInput: {
+    backgroundColor: "#1E1E24",
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    color: "#F7F7FA",
+    fontSize: 14,
+    maxHeight: 80
+  },
+  textControls: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2,
+    marginTop: 8
+  },
+  layerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 16,
+    backgroundColor: "#1E1E24"
+  },
+  layerChipActive: {
+    backgroundColor: "#A5B4FC"
+  },
+  layerChipLabel: {
+    fontSize: 12,
+    color: "#CBD5E1",
+    maxWidth: 110
+  },
+  layerChipLabelActive: {
+    color: "#0f172a",
+    fontWeight: "600"
+  },
+  dock: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    paddingVertical: 10,
+    backgroundColor: "#0B0B0F",
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: "#26262E"
+  },
+  dockTab: {
+    alignItems: "center",
+    gap: 2,
+    minWidth: 64
+  },
+  dockLabel: {
+    fontSize: 11,
+    color: "#94A3B8"
+  },
+  dockLabelActive: {
+    color: "#A5B4FC",
+    fontWeight: "600"
+  },
+  pickerOverlay: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    backgroundColor: "rgba(0,0,0,0.65)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
+  }),
+  pickerCard: {
+    width: "100%",
+    maxWidth: 360,
+    backgroundColor: "#17171C",
+    borderRadius: 16,
+    padding: 18,
+    gap: 8
+  },
+  pickerTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#F7F7FA"
+  },
+  pickerRow: {
+    flexDirection: "row",
+    gap: 10,
+    paddingVertical: 8
+  },
+  pickerThumb: {
+    width: 84,
+    height: 84,
+    borderRadius: 10,
+    backgroundColor: "#26262E"
+  },
+  pickerDismiss: {
+    alignSelf: "flex-end",
+    paddingHorizontal: 14,
+    paddingVertical: 8
+  },
+  pickerDismissLabel: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#A5B4FC"
+  }
+});export{DesignEditorExperience};//# sourceMappingURL=DesignEditorExperience.js.map