@adminide-stack/yantra-mobile 12.0.129-alpha.0 → 12.0.129-alpha.1

package/lib/features/design/editor/ToolPanels.js

@@ -0,0 +1,695 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {useState,useEffect,useMemo,useRef}from'react';import {View,TextInput,ActivityIndicator,Text,StyleSheet}from'react-native';import {Image}from'expo-image';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useCanvasTheme,themedStyles}from'../../canvas/canvasTheme.js';import {Pressable,RADIUS,SPACE,TYPE}from'../../canvas/canvasUi.js';import {TEXT_PRESETS}from'../doc/docOps.js';import {catalogGroupOf}from'../doc/newDoc.js';import {scalePath}from'../doc/pathScale.js';import {SHAPE_CATEGORIES,shapesInCategory,SHAPES,isStrokeShape}from'../doc/shapes.js';import {DESIGN_SIZES,fromPx}from'../doc/sizes.js';import {resolveTextFont}from'../render/fontRegistry.js';import {getSvg,svgUsable,SvgBoundary}from'../render/svg.js';import {DEFAULT_QR_STYLE,normaliseQrText}from'../doc/qr.js';import {ColorPicker,FontList}from'./controls.js';import {FramesGrid}from'./ImageTools.js';import {colorsInDoc,fontsInDoc}from'./LayerTools.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));
+const DOCK_TOOLS = [{
+  id: "ai",
+  label: "AI",
+  icon: "creation"
+}, {
+  id: "templates",
+  label: "Templates",
+  icon: "view-dashboard-outline"
+}, {
+  id: "elements",
+  label: "Elements",
+  icon: "shape-outline"
+}, {
+  id: "text",
+  label: "Text",
+  icon: "format-text"
+}, {
+  id: "brand",
+  label: "Brand",
+  icon: "palette-outline"
+}, {
+  id: "details",
+  label: "Details",
+  icon: "tune-variant"
+}, {
+  id: "assets",
+  label: "Assets",
+  icon: "image-multiple-outline"
+}];
+function TemplatesPanel({
+  doc,
+  load,
+  onPick,
+  width
+}) {
+  var _a;
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const group = (_a = catalogGroupOf(doc)) != null ? _a : "canvas-flyer";
+  const [query, setQuery] = useState("");
+  const [search, setSearch] = useState("");
+  const [cards, setCards] = useState([]);
+  const [status, setStatus] = useState("loading");
+  useEffect(() => {
+    const t = setTimeout(() => setSearch(query.trim()), 350);
+    return () => clearTimeout(t);
+  }, [query]);
+  useEffect(() => {
+    if (!load) {
+      setStatus("failed");
+      return void 0;
+    }
+    let live = true;
+    setStatus("loading");
+    load(group, {
+      search: search || void 0,
+      limit: 24,
+      offset: 0
+    }).then((page) => {
+      if (!live) return;
+      setCards(page.cards);
+      setStatus("ready");
+    }, () => live && setStatus("failed"));
+    return () => {
+      live = false;
+    };
+  }, [load, group, search]);
+  const col = (width - SPACE.lg * 2 - SPACE.md) / 2;
+  return /* @__PURE__ */ jsxs(View, { children: [
+    /* @__PURE__ */ jsx(TextInput, { value: query, onChangeText: setQuery, placeholder: "Search templates", placeholderTextColor: theme.edInk3, style: styles.search, autoCorrect: false, returnKeyType: "search" }),
+    status === "loading" ? /* @__PURE__ */ jsx(ActivityIndicator, { style: styles.spinner, color: theme.edInk2 }) : null,
+    status === "failed" ? /* @__PURE__ */ jsx(Text, { style: styles.empty, children: "Templates could not load." }) : null,
+    status === "ready" && cards.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.empty, children: "No templates match." }) : null,
+    /* @__PURE__ */ jsx(View, { style: styles.grid, children: cards.map((card) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => onPick(card), style: ({
+      pressed
+    }) => [{
+      width: col
+    }, pressed && styles.pressed], accessibilityRole: "button", accessibilityLabel: card.title, children: [
+      /* @__PURE__ */ jsx(Image, { source: {
+        uri: card.coverUrl
+      }, style: [styles.cover, {
+        width: col,
+        height: col * card.pageHeight / card.pageWidth
+      }], contentFit: "cover", transition: 150 }),
+      /* @__PURE__ */ jsx(Text, { style: styles.cardTitle, numberOfLines: 1, children: card.title })
+    ] }, card.id)) })
+  ] });
+}
+function ShapeGlyph({
+  shape,
+  size,
+  color
+}) {
+  const svg = getSvg();
+  const box = /* @__PURE__ */ jsx(View, { style: {
+    width: size,
+    height: size,
+    backgroundColor: color,
+    borderRadius: shape === "ellipse" ? size / 2 : 4
+  } });
+  if (!svg || !svgUsable()) return box;
+  const {
+    Svg,
+    Path,
+    Line
+  } = svg;
+  return /* @__PURE__ */ jsx(SvgBoundary, { fallback: box, children: /* @__PURE__ */ jsx(Svg, { width: size, height: size, children: isStrokeShape(shape) ? /* @__PURE__ */ jsx(Line, { x1: 2, y1: size / 2, x2: size - 2, y2: size / 2, stroke: color, strokeWidth: 3, strokeLinecap: "round" }) : /* @__PURE__ */ jsx(Path, { d: scalePath(SHAPES[shape].d, size, size), fill: color }) }) });
+}
+const CHARTS = [{
+  id: "bar",
+  label: "Bar",
+  icon: "chart-bar"
+}, {
+  id: "row",
+  label: "Row",
+  icon: "chart-gantt"
+}, {
+  id: "line",
+  label: "Line",
+  icon: "chart-line"
+}, {
+  id: "area",
+  label: "Area",
+  icon: "chart-areaspline"
+}, {
+  id: "pie",
+  label: "Pie",
+  icon: "chart-pie"
+}, {
+  id: "donut",
+  label: "Donut",
+  icon: "chart-donut"
+}];
+const STICKER_EMOJI = ["\u{1F525}", "\u2764\uFE0F", "\u{1F602}", "\u{1F44D}", "\u2B50", "\u{1F389}", "\u{1F4AF}", "\u2728", "\u{1F60D}", "\u{1F680}", "\u{1F44F}", "\u{1F4A1}"];
+const QR_COLORS = [{
+  foreground: "#000000",
+  background: "#ffffff"
+}, {
+  foreground: "#0f172a",
+  background: "#f8fafc"
+}, {
+  foreground: "#ffffff",
+  background: "#000000"
+}, {
+  foreground: "#1d4ed8",
+  background: "#ffffff"
+}, {
+  foreground: "#7c3aed",
+  background: "#faf5ff"
+}];
+function QrSection({
+  onAdd
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [text, setText] = useState("");
+  const [style, setStyle] = useState(DEFAULT_QR_STYLE);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const value = normaliseQrText(text);
+  const add = async () => {
+    if (!value || busy) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await onAdd(value, style);
+      setText("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "The QR code could not be added. Try again.");
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "QR code" }),
+    /* @__PURE__ */ jsx(TextInput, { value: text, onChangeText: setText, placeholder: "yantra.app", placeholderTextColor: theme.edInk3, autoCapitalize: "none", autoCorrect: false, keyboardType: "url", style: styles.input, onSubmitEditing: () => void add() }),
+    /* @__PURE__ */ jsxs(View, { style: styles.swatchRow, children: [
+      QR_COLORS.map((c) => {
+        const on = c.foreground === style.foreground && c.background === style.background;
+        return /* @__PURE__ */ jsx(Pressable, { onPress: () => setStyle((s) => __spreadValues(__spreadValues({}, s), c)), style: [styles.qrSwatch, {
+          backgroundColor: c.background,
+          borderColor: on ? theme.edAccent : theme.edLineHi
+        }], accessibilityRole: "button", accessibilityState: {
+          selected: on
+        }, accessibilityLabel: `Code ${c.foreground} on ${c.background}`, children: /* @__PURE__ */ jsx(View, { style: [styles.qrDot, {
+          backgroundColor: c.foreground
+        }] }) }, `${c.foreground}${c.background}`);
+      }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => setStyle((s) => __spreadProps(__spreadValues({}, s), {
+        margin: s.margin ? 0 : 2
+      })), style: [styles.qrSwatch, {
+        borderColor: style.margin ? theme.edAccent : theme.edLineHi
+      }], accessibilityRole: "switch", accessibilityState: {
+        checked: Boolean(style.margin)
+      }, accessibilityLabel: "Quiet zone", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "border-outside", size: 18, color: theme.edInk2 }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Pressable, { onPress: () => void add(), disabled: !value || busy, style: [styles.wideButton, (!value || busy) && styles.dim], accessibilityRole: "button", children: [
+      busy ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk2 }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "qrcode-plus", size: 20, color: theme.edInk }),
+      /* @__PURE__ */ jsx(Text, { style: styles.wideLabel, children: busy ? "Adding\u2026" : "Add QR code" })
+    ] }),
+    error ? /* @__PURE__ */ jsx(Text, { style: [styles.empty, {
+      color: theme.edDanger,
+      paddingVertical: 0
+    }], children: error }) : null
+  ] });
+}
+function ElementsPanel({
+  onShape,
+  onChart,
+  onPhoto,
+  onSticker,
+  onFrame,
+  frameCurrent,
+  onQr
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+    onPhoto ? /* @__PURE__ */ jsxs(Pressable, { onPress: onPhoto, style: styles.wideButton, accessibilityRole: "button", children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "image-plus", size: 20, color: theme.edInk }),
+      /* @__PURE__ */ jsx(Text, { style: styles.wideLabel, children: "Add a photo" })
+    ] }) : null,
+    SHAPE_CATEGORIES.map((cat) => /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: cat.label }),
+      /* @__PURE__ */ jsx(View, { style: styles.tileGrid, children: shapesInCategory(cat.id).map((shape) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onShape(shape), style: ({
+        pressed
+      }) => [styles.tile, pressed && styles.pressed], accessibilityRole: "button", accessibilityLabel: SHAPES[shape].label, children: /* @__PURE__ */ jsx(ShapeGlyph, { shape, size: 34, color: theme.edInk2 }) }, shape)) })
+    ] }, cat.id)),
+    onFrame ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "Frames" }),
+      /* @__PURE__ */ jsx(FramesGrid, { current: frameCurrent, onPick: onFrame })
+    ] }) : null,
+    onSticker ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "Graphics" }),
+      /* @__PURE__ */ jsx(View, { style: styles.tileGrid, children: STICKER_EMOJI.map((emoji) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onSticker(emoji), style: ({
+        pressed
+      }) => [styles.tile, pressed && styles.pressed], accessibilityRole: "button", accessibilityLabel: `Add ${emoji} sticker`, children: /* @__PURE__ */ jsx(Text, { style: styles.emoji, children: emoji }) }, emoji)) })
+    ] }) : null,
+    onQr ? /* @__PURE__ */ jsx(QrSection, { onAdd: onQr }) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "Charts" }),
+      /* @__PURE__ */ jsx(View, { style: styles.tileGrid, children: CHARTS.map((chart) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onChart(chart.id), style: ({
+        pressed
+      }) => [styles.tile, pressed && styles.pressed], accessibilityRole: "button", accessibilityLabel: `${chart.label} chart`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: chart.icon, size: 30, color: theme.edInk2 }) }, chart.id)) })
+    ] })
+  ] });
+}
+function TextPanel({
+  doc,
+  onAdd,
+  onTextBox
+}) {
+  var _a, _b, _c;
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const fonts = (_c = (_b = (_a = doc.brandKit) == null ? void 0 : _a.fonts) != null ? _b : doc.fontPair) != null ? _c : {
+    display: "Inter",
+    body: "Inter"
+  };
+  const presets = [{
+    id: "heading",
+    size: 26
+  }, {
+    id: "subheading",
+    size: 19
+  }, {
+    id: "body",
+    size: 14
+  }];
+  return /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+    onTextBox ? /* @__PURE__ */ jsxs(Pressable, { onPress: onTextBox, style: styles.wideButton, accessibilityRole: "button", children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "format-text", size: 20, color: theme.edInk }),
+      /* @__PURE__ */ jsx(Text, { style: styles.wideLabel, children: "Add a text box" })
+    ] }) : null,
+    /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "Default text styles" }),
+    presets.map(({
+      id,
+      size
+    }) => {
+      const p = TEXT_PRESETS[id];
+      return /* @__PURE__ */ jsx(Pressable, { onPress: () => onAdd(id), style: ({
+        pressed
+      }) => [styles.textPreset, pressed && styles.pressed], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [{
+        fontSize: size,
+        color: theme.edInk
+      }, resolveTextFont(fonts[p.fontToken], p.fontWeight, false)], children: p.content }) }, id);
+    })
+  ] });
+}
+function BrandPanel({
+  doc,
+  onBrandKit,
+  onPlaceLogo,
+  onAddLogo
+}) {
+  var _a, _b;
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const kit = (_b = doc.brandKit) != null ? _b : {
+    colors: [],
+    fonts: (_a = doc.fontPair) != null ? _a : {
+      display: "Inter",
+      body: "Inter"
+    },
+    logos: []
+  };
+  const [picking, setPicking] = useState(null);
+  if (picking === "color") {
+    return /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+      /* @__PURE__ */ jsx(BackRow, { label: "Add a brand colour", onBack: () => setPicking(null) }),
+      /* @__PURE__ */ jsx(ColorPicker, { used: colorsInDoc(doc), onChange: (c) => {
+        if (!kit.colors.includes(c)) onBrandKit(__spreadProps(__spreadValues({}, kit), {
+          colors: [...kit.colors, c]
+        }));
+        setPicking(null);
+      } })
+    ] });
+  }
+  if (picking === "display" || picking === "body") {
+    const role = picking;
+    return /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+      /* @__PURE__ */ jsx(BackRow, { label: role === "display" ? "Heading font" : "Body font", onBack: () => setPicking(null) }),
+      /* @__PURE__ */ jsx(FontList, { value: kit.fonts[role], designFonts: fontsInDoc(doc), onChange: (family) => {
+        onBrandKit(__spreadProps(__spreadValues({}, kit), {
+          fonts: __spreadProps(__spreadValues({}, kit.fonts), {
+            [role]: family
+          })
+        }));
+        setPicking(null);
+      } })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "Brand colours" }),
+      /* @__PURE__ */ jsxs(View, { style: styles.swatchRow, children: [
+        kit.colors.map((c) => /* @__PURE__ */ jsx(Pressable, { onLongPress: () => onBrandKit(__spreadProps(__spreadValues({}, kit), {
+          colors: kit.colors.filter((x) => x !== c)
+        })), style: [styles.swatch, {
+          backgroundColor: c
+        }], accessibilityLabel: `${c}, hold to remove` }, c)),
+        /* @__PURE__ */ jsx(Pressable, { onPress: () => setPicking("color"), style: [styles.swatch, styles.swatchAdd], accessibilityLabel: "Add colour", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 18, color: theme.edInk2 }) })
+      ] }),
+      kit.colors.length ? /* @__PURE__ */ jsx(Text, { style: styles.hint, children: "Hold a colour to remove it." }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "Brand fonts" }),
+      ["display", "body"].map((role) => /* @__PURE__ */ jsxs(Pressable, { onPress: () => setPicking(role), style: styles.row, accessibilityRole: "button", children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: role === "display" ? "Heading" : "Body" }),
+        /* @__PURE__ */ jsx(Text, { style: [styles.rowValue, resolveTextFont(kit.fonts[role], role === "display" ? 700 : 400, false)], children: kit.fonts[role] }),
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-right", size: 18, color: theme.edInk3 })
+      ] }, role))
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "Logos" }),
+      /* @__PURE__ */ jsxs(View, { style: styles.swatchRow, children: [
+        kit.logos.map((src) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onPlaceLogo(src), onLongPress: () => onBrandKit(__spreadProps(__spreadValues({}, kit), {
+          logos: kit.logos.filter((l) => l !== src)
+        })), style: styles.logo, accessibilityLabel: "Logo, tap to place, hold to remove", children: /* @__PURE__ */ jsx(Image, { source: {
+          uri: src
+        }, style: StyleSheet.absoluteFill, contentFit: "contain" }) }, src)),
+        onAddLogo ? /* @__PURE__ */ jsx(Pressable, { onPress: onAddLogo, style: [styles.logo, styles.swatchAdd], accessibilityLabel: "Upload a logo", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "upload", size: 20, color: theme.edInk2 }) }) : null
+      ] })
+    ] })
+  ] });
+}
+function BackRow({
+  label,
+  onBack
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  return /* @__PURE__ */ jsxs(Pressable, { onPress: onBack, style: styles.backRow, accessibilityRole: "button", children: [
+    /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chevron-left", size: 20, color: theme.edInk }),
+    /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: label })
+  ] });
+}
+function DetailsPanel({
+  doc,
+  page,
+  onRename,
+  onResize,
+  onPage
+}) {
+  var _a, _b, _c, _d, _e, _f;
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [title, setTitle] = useState((_c = (_b = doc.title) != null ? _b : (_a = doc.brief) == null ? void 0 : _a.topic) != null ? _c : "");
+  const [showSizes, setShowSizes] = useState(false);
+  const print = Boolean(doc.print);
+  const sizes = useMemo(() => DESIGN_SIZES.filter((s) => print ? s.kind === "flyer" : s.kind === "deck"), [print]);
+  const size = print && ((_d = doc.print) == null ? void 0 : _d.trimMm) ? `${doc.print.trimMm.w} \xD7 ${doc.print.trimMm.h} mm` : `${doc.pageWidth} \xD7 ${doc.pageHeight} px`;
+  return /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "Design name" }),
+      /* @__PURE__ */ jsx(TextInput, { value: title, onChangeText: setTitle, onEndEditing: () => onRename(title.trim()), onSubmitEditing: () => onRename(title.trim()), placeholder: "Untitled design", placeholderTextColor: theme.edInk3, style: styles.input, returnKeyType: "done" })
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "Size" }),
+      /* @__PURE__ */ jsxs(Pressable, { onPress: () => setShowSizes((v) => !v), style: styles.row, accessibilityRole: "button", children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: size }),
+        /* @__PURE__ */ jsx(Text, { style: styles.rowValue, children: print ? "Print" : "Screen" }),
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: showSizes ? "chevron-up" : "chevron-down", size: 18, color: theme.edInk3 })
+      ] }),
+      showSizes ? sizes.map((s) => {
+        var _a2;
+        return /* @__PURE__ */ jsxs(Pressable, { onPress: () => {
+          onResize(s);
+          setShowSizes(false);
+        }, style: styles.row, accessibilityRole: "button", children: [
+          /* @__PURE__ */ jsx(Text, { style: styles.rowLabel, children: s.label }),
+          /* @__PURE__ */ jsx(Text, { style: styles.rowValue, children: (_a2 = s.physical) != null ? _a2 : `${s.width} \xD7 ${s.height}` })
+        ] }, s.id);
+      }) : null,
+      print && doc.print ? /* @__PURE__ */ jsxs(Text, { style: styles.hint, children: [
+        "Bleed ",
+        doc.print.bleedMm,
+        " mm \xB7 safe area ",
+        doc.print.safeAreaMm,
+        " mm \xB7",
+        " ",
+        fromPx(doc.pageWidth),
+        " \xD7 ",
+        fromPx(doc.pageHeight),
+        " in"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: "This page" }),
+      /* @__PURE__ */ jsx(PageField, { label: "Page name", value: (_e = page.name) != null ? _e : "", onCommit: (name) => onPage({
+        name
+      }) }),
+      /* @__PURE__ */ jsx(PageField, { label: "Notes", value: (_f = page.notes) != null ? _f : "", multiline: true, onCommit: (notes) => onPage({
+        notes: notes || void 0
+      }) })
+    ] })
+  ] });
+}
+function PageField({
+  label,
+  value,
+  onCommit,
+  multiline
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const [text, setText] = useState(value);
+  const last = useRef(value);
+  useEffect(() => {
+    if (value !== last.current) {
+      last.current = value;
+      setText(value);
+    }
+  }, [value]);
+  const commit = () => {
+    if (text !== last.current) {
+      last.current = text;
+      onCommit(text);
+    }
+  };
+  return /* @__PURE__ */ jsx(TextInput, { value: text, onChangeText: setText, onEndEditing: commit, placeholder: label, placeholderTextColor: theme.edInk3, multiline, style: [styles.input, multiline && styles.inputMulti] });
+}
+function picturesInDoc(doc) {
+  var _a, _b;
+  const seen = /* @__PURE__ */ new Set();
+  for (const page of doc.pages) {
+    if (((_a = page.background) == null ? void 0 : _a.kind) === "image" && page.background.src) seen.add(page.background.src);
+    for (const l of (_b = page.layers) != null ? _b : []) if (l.kind === "image" && l.src && /^https:/.test(l.src)) seen.add(l.src);
+  }
+  return [...seen].filter((src) => !/\.svg(\?|$)/i.test(src));
+}
+function AssetsPanel({
+  doc,
+  width,
+  onUpload,
+  uploading,
+  onPlace,
+  replacing
+}) {
+  var _a, _b;
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const pictures = picturesInDoc(doc);
+  const logos = (_b = (_a = doc.brandKit) == null ? void 0 : _a.logos) != null ? _b : [];
+  const col = (width - SPACE.lg * 2 - SPACE.sm * 2) / 3;
+  return /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+    onUpload ? /* @__PURE__ */ jsxs(Pressable, { onPress: onUpload, disabled: uploading, style: styles.wideButton, accessibilityRole: "button", children: [
+      uploading ? /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk }) : /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "upload", size: 20, color: theme.edInk }),
+      /* @__PURE__ */ jsx(Text, { style: styles.wideLabel, children: replacing ? "Replace with a photo" : "Upload from device" })
+    ] }) : null,
+    [{
+      title: "In this design",
+      items: pictures
+    }, {
+      title: "Logos",
+      items: logos
+    }].filter((g) => g.items.length).map((g) => /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.heading, children: g.title }),
+      /* @__PURE__ */ jsx(View, { style: styles.assetGrid, children: g.items.map((src) => /* @__PURE__ */ jsx(Pressable, { onPress: () => onPlace(src), style: ({
+        pressed
+      }) => [styles.asset, {
+        width: col,
+        height: col
+      }, pressed && styles.pressed], accessibilityRole: "button", accessibilityLabel: replacing ? "Use this picture" : "Add this picture", children: /* @__PURE__ */ jsx(Image, { source: {
+        uri: src
+      }, style: StyleSheet.absoluteFill, contentFit: "cover" }) }, src)) })
+    ] }, g.title)),
+    !onUpload && !pictures.length && !logos.length ? /* @__PURE__ */ jsx(Text, { style: styles.empty, children: "Pictures you add to this design show here." }) : null
+  ] });
+}
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  stack: {
+    gap: SPACE.lg
+  },
+  section: {
+    gap: SPACE.sm
+  },
+  heading: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk2
+  }),
+  hint: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk3
+  }),
+  empty: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: theme.edInk2,
+    textAlign: "center",
+    paddingVertical: SPACE.xl
+  }),
+  spinner: {
+    paddingVertical: SPACE.xl
+  },
+  pressed: {
+    opacity: 0.7
+  },
+  search: __spreadValues({
+    height: 40,
+    borderRadius: RADIUS.pill,
+    paddingHorizontal: SPACE.lg,
+    backgroundColor: theme.edRaised,
+    color: theme.edInk,
+    marginBottom: SPACE.md
+  }, TYPE.body),
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.md
+  },
+  cover: {
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.edRaised
+  },
+  cardTitle: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2,
+    marginTop: 4
+  }),
+  tileGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.sm
+  },
+  tile: {
+    width: 56,
+    height: 56,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  wideButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: SPACE.sm,
+    height: 46,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
+  },
+  wideLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk
+  }),
+  dim: {
+    opacity: 0.4
+  },
+  emoji: {
+    fontSize: 28
+  },
+  qrSwatch: {
+    width: 40,
+    height: 40,
+    borderRadius: RADIUS.sm,
+    borderWidth: 2,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  qrDot: {
+    width: 16,
+    height: 16,
+    borderRadius: 3
+  },
+  textPreset: {
+    paddingVertical: SPACE.md,
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.md,
+    backgroundColor: theme.edRaised
+  },
+  swatchRow: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.sm
+  },
+  swatch: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: theme.edLineHi
+  },
+  swatchAdd: {
+    alignItems: "center",
+    justifyContent: "center",
+    borderStyle: "dashed",
+    backgroundColor: "transparent"
+  },
+  logo: {
+    width: 64,
+    height: 64,
+    borderRadius: RADIUS.sm,
+    borderWidth: 1,
+    borderColor: theme.edLine,
+    overflow: "hidden",
+    backgroundColor: theme.edRaised
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.sm,
+    minHeight: 46,
+    paddingHorizontal: SPACE.md,
+    borderRadius: RADIUS.sm,
+    backgroundColor: theme.edRaised
+  },
+  rowLabel: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: theme.edInk,
+    flex: 1
+  }),
+  rowValue: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: theme.edInk2
+  }),
+  backRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.xs
+  },
+  input: __spreadValues({
+    minHeight: 42,
+    borderRadius: RADIUS.sm,
+    paddingHorizontal: SPACE.md,
+    backgroundColor: theme.edRaised,
+    color: theme.edInk
+  }, TYPE.body),
+  inputMulti: {
+    minHeight: 84,
+    paddingTop: SPACE.sm,
+    textAlignVertical: "top"
+  },
+  assetGrid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.sm
+  },
+  asset: {
+    borderRadius: RADIUS.sm,
+    overflow: "hidden",
+    backgroundColor: theme.edRaised
+  }
+}));export{AssetsPanel,BrandPanel,DOCK_TOOLS,DetailsPanel,ElementsPanel,TemplatesPanel,TextPanel,picturesInDoc};//# sourceMappingURL=ToolPanels.js.map