@adminide-stack/yantra-mobile 12.0.125-alpha.1 → 12.0.125

package/lib/features/design/DesignEditorExperience.js

@@ -1,4 +1,4 @@
-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;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useCallback,useMemo,useRef}from'react';import {View,ScrollView,Text,StyleSheet,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 {useCanvasTheme,themedStyles}from'../canvas/canvasTheme.js';import {Pressable,pressedStyle,SPACE,HIT,RADIUS,TYPE}from'../canvas/canvasUi.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;
@@ -26,6 +26,8 @@ function DesignEditorExperience({
   canvasImages = []
 }) {
   var _a;
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
   const [pageIndex, setPageIndex] = useState(0);
   const [selectedId, setSelectedId] = useState(null);
   const [dock, setDock] = useState("add");
@@ -68,12 +70,16 @@ function DesignEditorExperience({
       /* @__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: () => {
+      }, style: ({
+        pressed
+      }) => [styles.headerButton, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Close editor", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 22, color: theme.edInk }) }),
+      doc.pages.length > 1 ? /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.headerMiddleScroll, contentContainerStyle: 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" }) }) })
+      }, 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, numberOfLines: 1, children: doc.title || "Design" }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => onExport(doc), style: ({
+        pressed
+      }) => [styles.headerButton, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Export design", children: /* @__PURE__ */ jsx(View, { style: styles.exportButton, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check", size: 20, color: theme.primaryForeground }) }) })
     ] }),
     /* @__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,
@@ -100,13 +106,13 @@ function DesignEditorExperience({
         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: () => {
+      /* @__PURE__ */ jsx(IconButton, { name: "trash-can-outline", color: theme.edDanger, 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: [
+      dock === "add" ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, 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))) }),
@@ -124,28 +130,32 @@ function DesignEditorExperience({
           background
         })) })
       ] }) : null,
-      dock === "layers" ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, contentContainerStyle: styles.addRow, children: [
+      dock === "layers" ? /* @__PURE__ */ jsxs(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, 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(MaterialCommunityIcons, { name: layer.type === "text" ? "format-text" : layer.type === "image" ? "image-outline" : "square-rounded-outline", size: 14, color: layer.id === selectedId ? theme.edOnInk : theme.edInk2 }),
           /* @__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(View, { style: [styles.dockPill, dock === tab && styles.dockPillActive], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 22, color: dock === tab ? theme.edInk : theme.edInk3 }) }),
       /* @__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__ */ jsxs(View, { style: styles.pickerHead, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.pickerTitle, children: "Add an image" }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setImagePicker(false), style: ({
+          pressed
+        }) => [styles.pickerDismiss, pressedStyle(pressed)], children: /* @__PURE__ */ jsx(Text, { style: styles.pickerDismissLabel, children: "Cancel" }) })
+      ] }),
       /* @__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: () => {
+      /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, 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" }) })
+      }, style: styles.pickerThumb, contentFit: "cover" }) }, src)) })
     ] }) }) : null,
     /* @__PURE__ */ jsx(KeyboardLiftSpacer, {})
   ] });
@@ -156,6 +166,7 @@ function PageChrome({
   pageIndex,
   scale
 }) {
+  const styles = makeStyles(useCanvasTheme());
   if (doc.kind === "tshirt") {
     const area = TSHIRT_PRINT_AREA;
     return /* @__PURE__ */ jsxs(View, { pointerEvents: "none", style: StyleSheet.absoluteFill, children: [
@@ -207,6 +218,8 @@ function LayerView({
   onSelect,
   onCommit
 }) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
   const [live, setLive] = useState(null);
   const gestureBase = useRef({
     x: 0,
@@ -295,7 +308,7 @@ function LayerView({
     }, 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" }) }))
+      /* @__PURE__ */ jsx(View, __spreadProps(__spreadValues({ style: styles.handle }, resize.current.panHandlers), { children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-expand", size: 11, color: "#ffffff" }) }))
     ] })
   ] }));
 }
@@ -303,10 +316,12 @@ function TextStylePanel({
   layer,
   onChange
 }) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
   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 }),
+    })), placeholder: "Your text", placeholderTextColor: theme.edInk3, 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)
@@ -315,10 +330,10 @@ function TextStylePanel({
       /* @__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), {
+      /* @__PURE__ */ jsx(IconButton, { name: "format-bold", active: layer.bold, 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), {
+      ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx(IconButton, { name: `format-align-${align}`, active: layer.align === align, onPress: () => onChange(__spreadProps(__spreadValues({}, layer), {
         align
       })) }, align))
     ] }),
@@ -332,7 +347,8 @@ function SwatchRow({
   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, {
+  const styles = makeStyles(useCanvasTheme());
+  return /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, style: styles.hScroll, 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)) });
 }
@@ -341,68 +357,96 @@ function AddButton({
   label,
   onPress
 }) {
-  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: styles.addButton, accessibilityRole: "button", children: [
-    /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 22, color: "#E2E8F0" }),
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsxs(Pressable, { onPress, style: ({
+    pressed
+  }) => [styles.addButton, pressedStyle(pressed)], accessibilityRole: "button", children: [
+    /* @__PURE__ */ jsx(View, { style: styles.addIcon, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 22, color: theme.edInk }) }),
     /* @__PURE__ */ jsx(Text, { style: styles.addButtonLabel, children: label })
   ] });
 }
 function IconButton({
   name,
-  color = "#CBD5E1",
+  color,
+  active,
   onPress
 }) {
-  return /* @__PURE__ */ jsx(Pressable, { onPress, hitSlop: 8, style: styles.iconButton, accessibilityRole: "button", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name, size: 18, color }) });
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const ink = color != null ? color : active === false ? theme.edInk3 : theme.edInk2;
+  return /* @__PURE__ */ jsx(Pressable, { onPress, hitSlop: 4, style: ({
+    pressed
+  }) => [styles.iconButton, active && styles.iconButtonActive, pressedStyle(pressed)], accessibilityRole: "button", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name, size: 20, color: active ? theme.edInk : ink }) });
 }
-const styles = StyleSheet.create({
+const STAGE = "#0c0c0f";
+const makeStyles = themedStyles((theme) => StyleSheet.create({
   root: {
     flex: 1,
-    backgroundColor: "#0B0B0F"
+    backgroundColor: theme.edBg
   },
   header: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 16,
-    paddingVertical: 12
+    gap: SPACE.sm,
+    minHeight: 56,
+    paddingHorizontal: SPACE.sm,
+    backgroundColor: theme.edPanel,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: theme.edLine
+  },
+  headerButton: {
+    width: HIT,
+    height: HIT,
+    borderRadius: HIT / 2,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  headerTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#F7F7FA"
+  headerTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    flex: 1,
+    textAlign: "center",
+    color: theme.edInk
+  }),
+  headerMiddleScroll: {
+    flexGrow: 0,
+    flexShrink: 1,
+    marginHorizontal: "auto"
   },
   exportButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    backgroundColor: "#F7F7FA",
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: theme.primary,
     alignItems: "center",
     justifyContent: "center"
   },
   pageChips: {
     flexDirection: "row",
-    gap: 6
+    alignItems: "center",
+    gap: SPACE.xs + 2
   },
   pageChip: {
-    paddingHorizontal: 14,
-    paddingVertical: 6,
-    borderRadius: 16,
-    backgroundColor: "#1E1E24"
+    minHeight: 32,
+    paddingHorizontal: SPACE.md + 2,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.edRaised
   },
   pageChipActive: {
-    backgroundColor: "#A5B4FC"
-  },
-  pageChipLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#CBD5E1"
+    backgroundColor: theme.edInk
   },
+  pageChipLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk2
+  }),
   pageChipLabelActive: {
-    color: "#0f172a"
+    color: theme.edOnInk
   },
   canvasArea: {
     flex: 1,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    backgroundColor: STAGE
   },
   page: {
     borderRadius: 4,
@@ -413,7 +457,7 @@ const styles = StyleSheet.create({
   },
   selection: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
     borderWidth: 1.5,
-    borderColor: "#A5B4FC",
+    borderColor: theme.info,
     borderRadius: 2
   }),
   handle: {
@@ -423,221 +467,258 @@ const styles = StyleSheet.create({
     width: 24,
     height: 24,
     borderRadius: 12,
-    backgroundColor: "#A5B4FC",
+    backgroundColor: theme.info,
+    borderWidth: 2,
+    borderColor: "#ffffff",
     alignItems: "center",
     justifyContent: "center"
   },
+  // Guides draw on the design's own page colour, so their ink is fixed, not themed.
   printArea: {
     position: "absolute",
     borderWidth: 1.5,
     borderStyle: "dashed",
-    borderColor: "rgba(148,163,184,0.9)",
+    borderColor: "rgba(148,148,160,0.9)",
     borderRadius: 6
   },
   tshirtNeck: {
     position: "absolute",
     top: 0,
     borderBottomWidth: 2,
-    borderColor: "rgba(148,163,184,0.6)"
+    borderColor: "rgba(148,148,160,0.6)"
   },
   chromeHint: {
     position: "absolute",
     alignSelf: "center",
-    fontSize: 10,
+    fontSize: 11,
     fontWeight: "600",
-    letterSpacing: 0.6,
-    textTransform: "uppercase",
-    color: "rgba(148,163,184,0.9)"
+    color: "rgba(148,148,160,0.95)"
   },
   postDivider: {
     position: "absolute",
     width: 1.5,
-    backgroundColor: "rgba(15,23,42,0.25)"
+    backgroundColor: "rgba(20,20,20,0.22)"
   },
   postAddressLine: {
     position: "absolute",
     height: 1.5,
-    backgroundColor: "rgba(15,23,42,0.18)"
+    backgroundColor: "rgba(20,20,20,0.16)"
   },
   postStamp: {
     position: "absolute",
     borderWidth: 1.5,
     borderStyle: "dashed",
-    borderColor: "rgba(15,23,42,0.25)",
+    borderColor: "rgba(20,20,20,0.22)",
     borderRadius: 4
   },
   inspector: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    backgroundColor: "#141419",
+    gap: SPACE.xs,
+    paddingHorizontal: SPACE.sm,
+    paddingVertical: SPACE.xs,
+    backgroundColor: theme.edPanel,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#26262E"
+    borderTopColor: theme.edLine
   },
   inspectorSpacer: {
     flex: 1
   },
-  inspectorLabel: {
-    fontSize: 12,
-    color: "#94A3B8"
-  },
-  inspectorValue: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#E2E8F0",
+  inspectorLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk3
+  }),
+  inspectorValue: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
     minWidth: 40,
-    textAlign: "center"
-  },
+    textAlign: "center",
+    fontVariant: ["tabular-nums"]
+  }),
   iconButton: {
-    padding: 6
+    width: 40,
+    height: 40,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  iconButtonActive: {
+    backgroundColor: theme.edRaisedHi
   },
   dockPanel: {
-    minHeight: 64,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    backgroundColor: "#111116",
+    minHeight: 84,
+    justifyContent: "center",
+    paddingHorizontal: SPACE.lg,
+    paddingVertical: SPACE.md,
+    backgroundColor: theme.edPanel,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#26262E"
+    borderTopColor: theme.edLine
+  },
+  hScroll: {
+    flexGrow: 0
   },
   addRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12
+    gap: SPACE.md
   },
   addButton: {
     alignItems: "center",
-    gap: 4,
-    paddingHorizontal: 10,
-    paddingVertical: 6
+    gap: SPACE.xs + 2,
+    minWidth: 64
+  },
+  addIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: RADIUS.md,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.edRaised
   },
   addButtonLabel: {
     fontSize: 11,
-    color: "#CBD5E1"
-  },
-  panelHint: {
-    fontSize: 12,
-    color: "#64748B",
-    paddingVertical: 8
-  },
-  panelLabel: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: "#94A3B8",
-    marginBottom: 8
+    lineHeight: 14,
+    fontWeight: "500",
+    color: theme.edInk2
   },
+  panelHint: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk3,
+    paddingVertical: SPACE.sm
+  }),
+  panelLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk2,
+    marginBottom: SPACE.sm
+  }),
   swatchRow: {
     flexDirection: "row",
-    gap: 10,
-    paddingVertical: 6
+    alignItems: "center",
+    gap: SPACE.md,
+    paddingVertical: SPACE.xs + 2
   },
   swatch: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
     borderWidth: 1,
-    borderColor: "rgba(148,163,184,0.4)"
+    borderColor: theme.edLineHi
   },
   swatchActive: {
-    borderWidth: 2.5,
-    borderColor: "#A5B4FC"
+    borderWidth: 3,
+    borderColor: theme.edInk
   },
   textInput: {
-    backgroundColor: "#1E1E24",
-    borderRadius: 10,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    color: "#F7F7FA",
-    fontSize: 14,
-    maxHeight: 80
+    backgroundColor: theme.edRaised,
+    borderRadius: RADIUS.md,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: SPACE.sm + 2,
+    color: theme.edInk,
+    fontSize: 15,
+    maxHeight: 84
   },
   textControls: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 2,
-    marginTop: 8
+    gap: SPACE.xs,
+    marginTop: SPACE.sm
   },
   layerChip: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 16,
-    backgroundColor: "#1E1E24"
+    gap: SPACE.xs + 2,
+    minHeight: 36,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.pill,
+    backgroundColor: theme.edRaised
   },
   layerChipActive: {
-    backgroundColor: "#A5B4FC"
+    backgroundColor: theme.edInk
   },
-  layerChipLabel: {
-    fontSize: 12,
-    color: "#CBD5E1",
+  layerChipLabel: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2,
     maxWidth: 110
-  },
+  }),
   layerChipLabelActive: {
-    color: "#0f172a",
+    color: theme.edOnInk,
     fontWeight: "600"
   },
   dock: {
     flexDirection: "row",
     justifyContent: "space-around",
-    paddingVertical: 10,
-    backgroundColor: "#0B0B0F",
+    paddingTop: SPACE.sm,
+    paddingBottom: SPACE.sm,
+    backgroundColor: theme.edPanel,
     borderTopWidth: StyleSheet.hairlineWidth,
-    borderTopColor: "#26262E"
+    borderTopColor: theme.edLine
   },
   dockTab: {
     alignItems: "center",
     gap: 2,
-    minWidth: 64
+    minWidth: 64,
+    minHeight: HIT
+  },
+  dockPill: {
+    width: 56,
+    height: 30,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  dockPillActive: {
+    backgroundColor: theme.edRaisedHi
   },
   dockLabel: {
     fontSize: 11,
-    color: "#94A3B8"
+    lineHeight: 14,
+    fontWeight: "500",
+    color: theme.edInk3
   },
   dockLabelActive: {
-    color: "#A5B4FC",
+    color: theme.edInk,
     fontWeight: "600"
   },
   pickerOverlay: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
-    backgroundColor: "rgba(0,0,0,0.65)",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 24
+    backgroundColor: "rgba(0,0,0,0.5)",
+    justifyContent: "flex-end"
   }),
   pickerCard: {
     width: "100%",
-    maxWidth: 360,
-    backgroundColor: "#17171C",
-    borderRadius: 16,
-    padding: 18,
-    gap: 8
-  },
-  pickerTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: "#F7F7FA"
+    backgroundColor: theme.edPanel,
+    borderTopLeftRadius: RADIUS.xl,
+    borderTopRightRadius: RADIUS.xl,
+    paddingHorizontal: SPACE.lg,
+    paddingTop: SPACE.xs,
+    paddingBottom: SPACE.xl,
+    gap: SPACE.xs
+  },
+  pickerHead: {
+    flexDirection: "row",
+    alignItems: "center",
+    minHeight: 52,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: theme.edLine,
+    marginBottom: SPACE.xs
   },
+  pickerTitle: __spreadProps(__spreadValues({}, TYPE.title), {
+    flex: 1,
+    color: theme.edInk
+  }),
   pickerRow: {
     flexDirection: "row",
-    gap: 10,
-    paddingVertical: 8
+    gap: SPACE.sm + 2,
+    paddingVertical: SPACE.sm
   },
   pickerThumb: {
-    width: 84,
-    height: 84,
-    borderRadius: 10,
-    backgroundColor: "#26262E"
+    width: 88,
+    height: 88,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
   },
   pickerDismiss: {
-    alignSelf: "flex-end",
-    paddingHorizontal: 14,
-    paddingVertical: 8
+    minHeight: HIT,
+    paddingHorizontal: SPACE.md,
+    alignItems: "center",
+    justifyContent: "center"
   },
-  pickerDismissLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: "#A5B4FC"
-  }
-});export{DesignEditorExperience};//# sourceMappingURL=DesignEditorExperience.js.map
+  pickerDismissLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    fontSize: 15,
+    color: theme.edInk2
+  })
+}));export{DesignEditorExperience};//# sourceMappingURL=DesignEditorExperience.js.map