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

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

@@ -0,0 +1,194 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState}from'react';import {Text,View,TextInput,ActivityIndicator,StyleSheet}from'react-native';import {useCanvasTheme,themedStyles}from'../../canvas/canvasTheme.js';import {SPACE,RADIUS,TYPE}from'../../canvas/canvasUi.js';import {isPrintDoc,buildFlyer,deckBrief,buildDeck,designToPages,editPage,toConnectorPage,mergeEditedPage}from'../doc/aiDesign.js';import {Segmented,Stepper,PrimaryButton}from'./controls.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 TONES = ["Professional", "Friendly", "Bold", "Playful", "Elegant", "Minimal"];
+const EDIT_IDEAS = ["Make the headline bigger and bolder", "Use a darker background", "Add a call to action at the bottom", "Tighten the layout"];
+function AiPanel({
+  doc,
+  page,
+  pageIndex,
+  run,
+  onCreated,
+  onEdited
+}) {
+  var _a, _b, _c, _d, _e;
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const print = isPrintDoc(doc);
+  const hasLayers = Boolean((_a = page.layers) == null ? void 0 : _a.length);
+  const [mode, setMode] = useState(hasLayers ? "edit" : "create");
+  const [topic, setTopic] = useState((_c = (_b = doc.brief) == null ? void 0 : _b.topic) != null ? _c : "");
+  const [details, setDetails] = useState("");
+  const [tone, setTone] = useState(((_d = doc.brief) == null ? void 0 : _d.tone) || "Professional");
+  const [count, setCount] = useState(Math.max(3, Math.min(10, ((_e = doc.brief) == null ? void 0 : _e.pageCount) || 5)));
+  const [instruction, setInstruction] = useState("");
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState(null);
+  const [done, setDone] = useState(null);
+  if (!run) {
+    return /* @__PURE__ */ jsx(Text, { style: styles.note, children: "Sign in to design with AI." });
+  }
+  const create = async () => {
+    if (!topic.trim() || busy) return;
+    setError(null);
+    setDone(null);
+    try {
+      let design;
+      if (print) {
+        setBusy("Designing your page\u2026");
+        design = await buildFlyer(run, __spreadProps(__spreadValues({
+          title: topic.trim()
+        }, details.trim() ? {
+          body: details.trim()
+        } : {}), {
+          tone,
+          format: doc.aspectRatio
+        }));
+      } else {
+        setBusy("Planning the pages\u2026");
+        const brief = deckBrief({
+          topic: details.trim() ? `${topic.trim()}. ${details.trim()}` : topic,
+          pageCount: count,
+          tone
+        }, doc);
+        design = await buildDeck(run, brief, doc.aspectRatio);
+      }
+      const pages = designToPages(design, pageIndex + 1);
+      onCreated(pages, design);
+      setDone(pages.length === 1 ? "Added 1 page." : `Added ${pages.length} pages.`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "The design assistant could not finish. Try again.");
+    } finally {
+      setBusy(null);
+    }
+  };
+  const edit = async () => {
+    if (!instruction.trim() || busy) return;
+    setError(null);
+    setDone(null);
+    setBusy("Editing this page\u2026");
+    try {
+      const edited = await editPage(run, {
+        instruction: instruction.trim(),
+        page: toConnectorPage(page, pageIndex, doc.pages.length),
+        palette: doc.palette,
+        fontPair: doc.fontPair,
+        aspectRatio: doc.aspectRatio
+      });
+      onEdited(mergeEditedPage(page, edited));
+      setInstruction("");
+      setDone("Page updated. Undo puts it back.");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "The edit could not be made. Try again.");
+    } finally {
+      setBusy(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+    /* @__PURE__ */ jsx(Segmented, { options: [{
+      id: "create",
+      label: print ? "Design it" : "Create pages"
+    }, {
+      id: "edit",
+      label: "Edit this page"
+    }], value: mode, onChange: (m) => {
+      setMode(m);
+      setError(null);
+      setDone(null);
+    } }),
+    mode === "create" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.label, children: print ? "What is it for?" : "What is it about?" }),
+      /* @__PURE__ */ jsx(TextInput, { value: topic, onChangeText: setTopic, placeholder: print ? "Summer jazz night at the park" : "5 habits of productive teams", placeholderTextColor: theme.edInk3, style: styles.input, editable: !busy }),
+      /* @__PURE__ */ jsx(Text, { style: styles.label, children: print ? "Details (date, place, offer)" : "Anything it must say (optional)" }),
+      /* @__PURE__ */ jsx(TextInput, { value: details, onChangeText: setDetails, placeholder: print ? "Sat 14 June, 7pm, Riverside Park. Free entry." : "Audience, key points, call to action", placeholderTextColor: theme.edInk3, style: [styles.input, styles.multi], multiline: true, editable: !busy }),
+      /* @__PURE__ */ jsx(Text, { style: styles.label, children: "Tone" }),
+      /* @__PURE__ */ jsx(View, { style: styles.wrap, children: TONES.map((t) => /* @__PURE__ */ jsx(Text, { onPress: () => setTone(t), style: [styles.pill, tone === t && {
+        backgroundColor: theme.edAccent,
+        color: theme.edOnInk
+      }], accessibilityRole: "button", accessibilityState: {
+        selected: tone === t
+      }, children: t }, t)) }),
+      !print ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.label, children: "Pages" }),
+        /* @__PURE__ */ jsx(Stepper, { value: String(count), onMinus: () => setCount((c) => Math.max(1, c - 1)), onPlus: () => setCount((c) => Math.min(20, c + 1)) })
+      ] }) : null,
+      /* @__PURE__ */ jsx(PrimaryButton, { label: busy != null ? busy : print ? "Design it" : `Create ${count} pages`, busy: Boolean(busy), disabled: !topic.trim(), onPress: () => void create() })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Text, { style: styles.label, children: [
+        "What should change on page ",
+        pageIndex + 1,
+        "?"
+      ] }),
+      /* @__PURE__ */ jsx(TextInput, { value: instruction, onChangeText: setInstruction, placeholder: "Make the title punchier and the background navy", placeholderTextColor: theme.edInk3, style: [styles.input, styles.multi], multiline: true, editable: !busy }),
+      /* @__PURE__ */ jsx(View, { style: styles.wrap, children: EDIT_IDEAS.map((idea) => /* @__PURE__ */ jsx(Text, { onPress: () => setInstruction(idea), style: styles.pill, accessibilityRole: "button", children: idea }, idea)) }),
+      /* @__PURE__ */ jsx(PrimaryButton, { label: busy != null ? busy : "Edit this page", busy: Boolean(busy), disabled: !instruction.trim(), onPress: () => void edit() })
+    ] }),
+    busy ? /* @__PURE__ */ jsxs(View, { style: styles.row, children: [
+      /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.edInk2 }),
+      /* @__PURE__ */ jsx(Text, { style: styles.note, children: "This can take a minute." })
+    ] }) : null,
+    error ? /* @__PURE__ */ jsx(Text, { style: [styles.note, {
+      color: theme.edDanger
+    }], children: error }) : null,
+    done ? /* @__PURE__ */ jsx(Text, { style: styles.note, children: done }) : null
+  ] });
+}
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  stack: {
+    gap: SPACE.sm
+  },
+  label: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk,
+    marginTop: SPACE.xs
+  }),
+  note: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk2
+  }),
+  input: __spreadValues({
+    minHeight: 42,
+    borderRadius: RADIUS.sm,
+    paddingHorizontal: SPACE.md,
+    backgroundColor: theme.edRaised,
+    color: theme.edInk
+  }, TYPE.body),
+  multi: {
+    minHeight: 76,
+    paddingTop: SPACE.sm,
+    textAlignVertical: "top"
+  },
+  wrap: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: SPACE.xs
+  },
+  pill: __spreadProps(__spreadValues({}, TYPE.caption), {
+    color: theme.edInk,
+    backgroundColor: theme.edRaised,
+    borderRadius: RADIUS.pill,
+    paddingHorizontal: SPACE.md,
+    paddingVertical: 6,
+    overflow: "hidden"
+  }),
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: SPACE.sm
+  }
+}));export{AiPanel};//# sourceMappingURL=AiPanel.js.map

package/lib/features/design/editor/AiPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AiPanel.js","sources":["../../../../src/features/design/editor/AiPanel.tsx"],"sourcesContent":["/**\n * The AI tool - native twin of the web Design Studio's wizard (WizardPanel,\n * FlyerBriefPanel) and chat (RightPanel ChatTab):\n *\n *   Create pages   a short brief; a deck runs BUILD_OUTLINE -> BUILD_DESIGN, a\n *                  printed design BUILD_FLYER, and the pages land after this one\n *                  (or replace an empty design)\n *   Edit this page an instruction for the open page (EDIT_PAGE): its layers are\n *                  rewritten in place, painted pictures kept where unchanged\n *\n * Pictures the design asks for are painted afterwards by the editor.\n */\nimport React, { useState } from 'react';\nimport { ActivityIndicator, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { themedStyles, useCanvasTheme, type CanvasPalette } from '../../canvas/canvasTheme';\nimport { RADIUS, SPACE, TYPE } from '../../canvas/canvasUi';\nimport {\n    buildDeck,\n    buildFlyer,\n    deckBrief,\n    designToPages,\n    editPage,\n    isPrintDoc,\n    mergeEditedPage,\n    toConnectorPage,\n    type ConnectorDesign,\n    type RunCarousel,\n} from '../doc/aiDesign';\nimport type { DesignDoc, DesignPage } from '../doc/types';\nimport { PrimaryButton, Segmented, Stepper } from './controls';\n\ntype Mode = 'create' | 'edit';\n\nconst TONES = ['Professional', 'Friendly', 'Bold', 'Playful', 'Elegant', 'Minimal'];\n\n/** Example edits, as the web chat suggests them. */\nconst EDIT_IDEAS = [\n    'Make the headline bigger and bolder',\n    'Use a darker background',\n    'Add a call to action at the bottom',\n    'Tighten the layout',\n];\n\nexport function AiPanel({\n    doc,\n    page,\n    pageIndex,\n    run,\n    onCreated,\n    onEdited,\n}: {\n    doc: DesignDoc;\n    page: DesignPage;\n    pageIndex: number;\n    run?: RunCarousel;\n    onCreated: (pages: DesignPage[], design: ConnectorDesign) => void;\n    onEdited: (page: DesignPage) => void;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    const print = isPrintDoc(doc);\n    const hasLayers = Boolean(page.layers?.length);\n    const [mode, setMode] = useState<Mode>(hasLayers ? 'edit' : 'create');\n    const [topic, setTopic] = useState(doc.brief?.topic ?? '');\n    const [details, setDetails] = useState('');\n    const [tone, setTone] = useState(doc.brief?.tone || 'Professional');\n    const [count, setCount] = useState(Math.max(3, Math.min(10, doc.brief?.pageCount || 5)));\n    const [instruction, setInstruction] = useState('');\n    const [busy, setBusy] = useState<string | null>(null);\n    const [error, setError] = useState<string | null>(null);\n    const [done, setDone] = useState<string | null>(null);\n\n    if (!run) {\n        return <Text style={styles.note}>Sign in to design with AI.</Text>;\n    }\n\n    const create = async () => {\n        if (!topic.trim() || busy) return;\n        setError(null);\n        setDone(null);\n        try {\n            let design: ConnectorDesign;\n            if (print) {\n                setBusy('Designing your page…');\n                design = await buildFlyer(run, {\n                    title: topic.trim(),\n                    ...(details.trim() ? { body: details.trim() } : {}),\n                    tone,\n                    format: doc.aspectRatio,\n                });\n            } else {\n                setBusy('Planning the pages…');\n                const brief = deckBrief(\n                    { topic: details.trim() ? `${topic.trim()}. ${details.trim()}` : topic, pageCount: count, tone },\n                    doc,\n                );\n                design = await buildDeck(run, brief, doc.aspectRatio);\n            }\n            const pages = designToPages(design, pageIndex + 1);\n            onCreated(pages, design);\n            setDone(pages.length === 1 ? 'Added 1 page.' : `Added ${pages.length} pages.`);\n        } catch (err) {\n            setError(err instanceof Error ? err.message : 'The design assistant could not finish. Try again.');\n        } finally {\n            setBusy(null);\n        }\n    };\n\n    const edit = async () => {\n        if (!instruction.trim() || busy) return;\n        setError(null);\n        setDone(null);\n        setBusy('Editing this page…');\n        try {\n            const edited = await editPage(run, {\n                instruction: instruction.trim(),\n                page: toConnectorPage(page, pageIndex, doc.pages.length),\n                palette: doc.palette,\n                fontPair: doc.fontPair,\n                aspectRatio: doc.aspectRatio,\n            });\n            onEdited(mergeEditedPage(page, edited));\n            setInstruction('');\n            setDone('Page updated. Undo puts it back.');\n        } catch (err) {\n            setError(err instanceof Error ? err.message : 'The edit could not be made. Try again.');\n        } finally {\n            setBusy(null);\n        }\n    };\n\n    return (\n        <View style={styles.stack}>\n            <Segmented<Mode>\n                options={[\n                    { id: 'create', label: print ? 'Design it' : 'Create pages' },\n                    { id: 'edit', label: 'Edit this page' },\n                ]}\n                value={mode}\n                onChange={(m) => {\n                    setMode(m);\n                    setError(null);\n                    setDone(null);\n                }}\n            />\n            {mode === 'create' ? (\n                <>\n                    <Text style={styles.label}>{print ? 'What is it for?' : 'What is it about?'}</Text>\n                    <TextInput\n                        value={topic}\n                        onChangeText={setTopic}\n                        placeholder={print ? 'Summer jazz night at the park' : '5 habits of productive teams'}\n                        placeholderTextColor={theme.edInk3}\n                        style={styles.input}\n                        editable={!busy}\n                    />\n                    <Text style={styles.label}>\n                        {print ? 'Details (date, place, offer)' : 'Anything it must say (optional)'}\n                    </Text>\n                    <TextInput\n                        value={details}\n                        onChangeText={setDetails}\n                        placeholder={\n                            print\n                                ? 'Sat 14 June, 7pm, Riverside Park. Free entry.'\n                                : 'Audience, key points, call to action'\n                        }\n                        placeholderTextColor={theme.edInk3}\n                        style={[styles.input, styles.multi]}\n                        multiline\n                        editable={!busy}\n                    />\n                    <Text style={styles.label}>Tone</Text>\n                    <View style={styles.wrap}>\n                        {TONES.map((t) => (\n                            <Text\n                                key={t}\n                                onPress={() => setTone(t)}\n                                style={[\n                                    styles.pill,\n                                    tone === t && { backgroundColor: theme.edAccent, color: theme.edOnInk },\n                                ]}\n                                accessibilityRole=\"button\"\n                                accessibilityState={{ selected: tone === t }}\n                            >\n                                {t}\n                            </Text>\n                        ))}\n                    </View>\n                    {!print ? (\n                        <View style={styles.row}>\n                            <Text style={styles.label}>Pages</Text>\n                            <Stepper\n                                value={String(count)}\n                                onMinus={() => setCount((c) => Math.max(1, c - 1))}\n                                onPlus={() => setCount((c) => Math.min(20, c + 1))}\n                            />\n                        </View>\n                    ) : null}\n                    <PrimaryButton\n                        label={busy ?? (print ? 'Design it' : `Create ${count} pages`)}\n                        busy={Boolean(busy)}\n                        disabled={!topic.trim()}\n                        onPress={() => void create()}\n                    />\n                </>\n            ) : (\n                <>\n                    <Text style={styles.label}>What should change on page {pageIndex + 1}?</Text>\n                    <TextInput\n                        value={instruction}\n                        onChangeText={setInstruction}\n                        placeholder=\"Make the title punchier and the background navy\"\n                        placeholderTextColor={theme.edInk3}\n                        style={[styles.input, styles.multi]}\n                        multiline\n                        editable={!busy}\n                    />\n                    <View style={styles.wrap}>\n                        {EDIT_IDEAS.map((idea) => (\n                            <Text\n                                key={idea}\n                                onPress={() => setInstruction(idea)}\n                                style={styles.pill}\n                                accessibilityRole=\"button\"\n                            >\n                                {idea}\n                            </Text>\n                        ))}\n                    </View>\n                    <PrimaryButton\n                        label={busy ?? 'Edit this page'}\n                        busy={Boolean(busy)}\n                        disabled={!instruction.trim()}\n                        onPress={() => void edit()}\n                    />\n                </>\n            )}\n            {busy ? (\n                <View style={styles.row}>\n                    <ActivityIndicator color={theme.edInk2} />\n                    <Text style={styles.note}>This can take a minute.</Text>\n                </View>\n            ) : null}\n            {error ? <Text style={[styles.note, { color: theme.edDanger }]}>{error}</Text> : null}\n            {done ? <Text style={styles.note}>{done}</Text> : null}\n        </View>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        stack: { gap: SPACE.sm },\n        label: { ...TYPE.label, color: theme.edInk, marginTop: SPACE.xs },\n        note: { ...TYPE.caption, color: theme.edInk2 },\n        input: {\n            minHeight: 42,\n            borderRadius: RADIUS.sm,\n            paddingHorizontal: SPACE.md,\n            backgroundColor: theme.edRaised,\n            color: theme.edInk,\n            ...TYPE.body,\n        },\n        multi: { minHeight: 76, paddingTop: SPACE.sm, textAlignVertical: 'top' },\n        wrap: { flexDirection: 'row', flexWrap: 'wrap', gap: SPACE.xs },\n        pill: {\n            ...TYPE.caption,\n            color: theme.edInk,\n            backgroundColor: theme.edRaised,\n            borderRadius: RADIUS.pill,\n            paddingHorizontal: SPACE.md,\n            paddingVertical: 6,\n            overflow: 'hidden',\n        },\n        row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: SPACE.sm },\n    }),\n);\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,182 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {View,ScrollView,TextInput,Text,StyleSheet}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {useCanvasTheme,themedStyles}from'../../canvas/canvasTheme.js';import {Pressable,SPACE,RADIUS,TYPE}from'../../canvas/canvasUi.js';import {readChartData,parseCell,writeChartData}from'../doc/chart.js';import {ChipRow,ToolChip,ToggleRow}from'./controls.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 KINDS = [{
+  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 CELL_W = 84;
+function ChartDataPanel({
+  layer,
+  patch
+}) {
+  const theme = useCanvasTheme();
+  const styles = makeStyles(theme);
+  const data = readChartData(layer);
+  const edit = (fn, coalesce) => {
+    const draft = {
+      categories: [...data.categories],
+      series: data.series.map((s) => ({
+        name: s.name,
+        values: [...s.values]
+      }))
+    };
+    fn(draft);
+    patch(writeChartData(draft), coalesce);
+  };
+  const pie = layer.chart === "pie" || layer.chart === "donut";
+  return /* @__PURE__ */ jsxs(View, { style: styles.stack, children: [
+    /* @__PURE__ */ jsx(ChipRow, { children: KINDS.map((k) => /* @__PURE__ */ jsx(ToolChip, { icon: k.icon, label: k.label, active: layer.chart === k.id, onPress: () => patch({
+      chart: k.id
+    }) }, k.id)) }),
+    /* @__PURE__ */ jsx(ScrollView, { horizontal: true, style: styles.gridScroll, keyboardShouldPersistTaps: "handled", showsHorizontalScrollIndicator: false, children: /* @__PURE__ */ jsxs(View, { children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.gridRow, children: [
+        /* @__PURE__ */ jsx(View, { style: [styles.cell, styles.corner] }),
+        data.series.map((s, si) => /* @__PURE__ */ jsxs(View, { style: styles.headCell, children: [
+          /* @__PURE__ */ jsx(TextInput, { value: s.name, onChangeText: (t) => edit((d) => d.series[si].name = t, `chart-name:${layer.id}:${si}`), placeholder: `Series ${si + 1}`, placeholderTextColor: theme.edInk3, style: [styles.input, styles.head] }),
+          data.series.length > 1 ? /* @__PURE__ */ jsx(Pressable, { onPress: () => edit((d) => d.series.splice(si, 1)), hitSlop: 6, accessibilityRole: "button", accessibilityLabel: `Remove ${s.name || `series ${si + 1}`}`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 14, color: theme.edInk3 }) }) : null
+        ] }, si)),
+        !pie ? /* @__PURE__ */ jsx(Pressable, { onPress: () => edit((d) => d.series.push({
+          name: `Series ${d.series.length + 1}`,
+          values: d.categories.map(() => 0)
+        })), style: styles.addCol, accessibilityRole: "button", accessibilityLabel: "Add series", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 18, color: theme.edInk2 }) }) : null
+      ] }),
+      data.categories.map((cat, ri) => /* @__PURE__ */ jsxs(View, { style: styles.gridRow, children: [
+        /* @__PURE__ */ jsxs(View, { style: styles.rowHead, children: [
+          data.categories.length > 1 ? /* @__PURE__ */ jsx(Pressable, { onPress: () => edit((d) => {
+            d.categories.splice(ri, 1);
+            d.series.forEach((s) => s.values.splice(ri, 1));
+          }), hitSlop: 6, accessibilityRole: "button", accessibilityLabel: `Remove ${cat || `row ${ri + 1}`}`, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 14, color: theme.edInk3 }) }) : null,
+          /* @__PURE__ */ jsx(TextInput, { value: cat, onChangeText: (t) => edit((d) => d.categories[ri] = t, `chart-cat:${layer.id}:${ri}`), placeholder: `Item ${ri + 1}`, placeholderTextColor: theme.edInk3, style: [styles.input, styles.head] })
+        ] }),
+        data.series.map((s, si) => {
+          var _a;
+          return /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              defaultValue: String((_a = s.values[ri]) != null ? _a : 0),
+              onChangeText: (t) => edit((d) => d.series[si].values[ri] = parseCell(t), `chart-cell:${layer.id}:${si}:${ri}`),
+              keyboardType: "numbers-and-punctuation",
+              selectTextOnFocus: true,
+              style: [styles.input, styles.cell]
+            },
+            `${si}:${ri}:${data.series.length}:${data.categories.length}`
+          );
+        })
+      ] }, ri))
+    ] }) }),
+    /* @__PURE__ */ jsxs(Pressable, { onPress: () => edit((d) => {
+      d.categories.push(`Item ${d.categories.length + 1}`);
+      d.series.forEach((s) => s.values.push(0));
+    }), style: styles.addRow, accessibilityRole: "button", children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "plus", size: 18, color: theme.edInk2 }),
+      /* @__PURE__ */ jsx(Text, { style: styles.addLabel, children: "Add row" })
+    ] }),
+    !pie && layer.chart !== "line" ? /* @__PURE__ */ jsx(ToggleRow, { label: "Stacked", value: Boolean(layer.stacked), onChange: (v) => patch({
+      stacked: v || void 0
+    }) }) : null,
+    /* @__PURE__ */ jsx(ToggleRow, { label: "Legend", value: Boolean(layer.legend), onChange: (v) => patch({
+      legend: v || void 0
+    }) })
+  ] });
+}
+const makeStyles = themedStyles((theme) => StyleSheet.create({
+  stack: {
+    gap: SPACE.sm
+  },
+  gridScroll: {
+    flexGrow: 0
+  },
+  gridRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    marginBottom: 4
+  },
+  corner: {
+    width: CELL_W + 18,
+    backgroundColor: "transparent"
+  },
+  headCell: {
+    width: CELL_W,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2
+  },
+  rowHead: {
+    width: CELL_W + 18,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 2
+  },
+  input: __spreadValues({
+    height: 34,
+    borderRadius: RADIUS.sm,
+    paddingHorizontal: SPACE.sm,
+    backgroundColor: theme.edRaised,
+    color: theme.edInk
+  }, TYPE.caption),
+  head: {
+    flex: 1,
+    fontWeight: "600"
+  },
+  cell: {
+    width: CELL_W,
+    textAlign: "right"
+  },
+  addCol: {
+    width: 34,
+    height: 34,
+    borderRadius: RADIUS.sm,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: theme.edLine
+  },
+  addRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: SPACE.xs,
+    height: 36
+  },
+  addLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: theme.edInk2
+  })
+}));export{ChartDataPanel};//# sourceMappingURL=ChartDataPanel.js.map

package/lib/features/design/editor/ChartDataPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartDataPanel.js","sources":["../../../../src/features/design/editor/ChartDataPanel.tsx"],"sourcesContent":["/**\n * The chart sheet (web ChartPanel + ChartDataGrid): the chart's kind, its\n * numbers as a small spreadsheet (rows are categories, columns named series),\n * and the stacked and legend switches. Every edit writes `categories`/`series`\n * and the legacy `data` mirror (doc/chart.ts writeChartData), as web does.\n */\nimport React from 'react';\nimport { ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { themedStyles, useCanvasTheme, type CanvasPalette } from '../../canvas/canvasTheme';\nimport { Pressable, RADIUS, SPACE, TYPE } from '../../canvas/canvasUi';\nimport { parseCell, readChartData, writeChartData, type ChartData } from '../doc/chart';\nimport type { ChartKind, ChartLayer, EditorLayer } from '../doc/types';\nimport { ChipRow, ToggleRow, ToolChip } from './controls';\n\nconst KINDS: Array<{\n    id: ChartKind;\n    label: string;\n    icon: React.ComponentProps<typeof MaterialCommunityIcons>['name'];\n}> = [\n    { id: 'bar', label: 'Bar', icon: 'chart-bar' },\n    { id: 'row', label: 'Row', icon: 'chart-gantt' },\n    { id: 'line', label: 'Line', icon: 'chart-line' },\n    { id: 'area', label: 'Area', icon: 'chart-areaspline' },\n    { id: 'pie', label: 'Pie', icon: 'chart-pie' },\n    { id: 'donut', label: 'Donut', icon: 'chart-donut' },\n];\n\nconst CELL_W = 84;\n\nexport function ChartDataPanel({\n    layer,\n    patch,\n}: {\n    layer: ChartLayer;\n    patch: (p: Partial<EditorLayer>, coalesce?: string) => void;\n}) {\n    const theme = useCanvasTheme();\n    const styles = makeStyles(theme);\n    const data = readChartData(layer);\n    const edit = (fn: (d: ChartData) => void, coalesce?: string) => {\n        const draft: ChartData = {\n            categories: [...data.categories],\n            series: data.series.map((s) => ({ name: s.name, values: [...s.values] })),\n        };\n        fn(draft);\n        patch(writeChartData(draft), coalesce);\n    };\n    const pie = layer.chart === 'pie' || layer.chart === 'donut';\n    return (\n        <View style={styles.stack}>\n            <ChipRow>\n                {KINDS.map((k) => (\n                    <ToolChip\n                        key={k.id}\n                        icon={k.icon}\n                        label={k.label}\n                        active={layer.chart === k.id}\n                        onPress={() => patch({ chart: k.id })}\n                    />\n                ))}\n            </ChipRow>\n            <ScrollView\n                horizontal\n                style={styles.gridScroll}\n                keyboardShouldPersistTaps=\"handled\"\n                showsHorizontalScrollIndicator={false}\n            >\n                <View>\n                    <View style={styles.gridRow}>\n                        <View style={[styles.cell, styles.corner]} />\n                        {data.series.map((s, si) => (\n                            <View key={si} style={styles.headCell}>\n                                <TextInput\n                                    value={s.name}\n                                    onChangeText={(t) =>\n                                        edit((d) => (d.series[si].name = t), `chart-name:${layer.id}:${si}`)\n                                    }\n                                    placeholder={`Series ${si + 1}`}\n                                    placeholderTextColor={theme.edInk3}\n                                    style={[styles.input, styles.head]}\n                                />\n                                {data.series.length > 1 ? (\n                                    <Pressable\n                                        onPress={() => edit((d) => d.series.splice(si, 1))}\n                                        hitSlop={6}\n                                        accessibilityRole=\"button\"\n                                        accessibilityLabel={`Remove ${s.name || `series ${si + 1}`}`}\n                                    >\n                                        <MaterialCommunityIcons name=\"close\" size={14} color={theme.edInk3} />\n                                    </Pressable>\n                                ) : null}\n                            </View>\n                        ))}\n                        {!pie ? (\n                            <Pressable\n                                onPress={() =>\n                                    edit((d) =>\n                                        d.series.push({\n                                            name: `Series ${d.series.length + 1}`,\n                                            values: d.categories.map(() => 0),\n                                        }),\n                                    )\n                                }\n                                style={styles.addCol}\n                                accessibilityRole=\"button\"\n                                accessibilityLabel=\"Add series\"\n                            >\n                                <MaterialCommunityIcons name=\"plus\" size={18} color={theme.edInk2} />\n                            </Pressable>\n                        ) : null}\n                    </View>\n                    {data.categories.map((cat, ri) => (\n                        <View key={ri} style={styles.gridRow}>\n                            <View style={styles.rowHead}>\n                                {data.categories.length > 1 ? (\n                                    <Pressable\n                                        onPress={() =>\n                                            edit((d) => {\n                                                d.categories.splice(ri, 1);\n                                                d.series.forEach((s) => s.values.splice(ri, 1));\n                                            })\n                                        }\n                                        hitSlop={6}\n                                        accessibilityRole=\"button\"\n                                        accessibilityLabel={`Remove ${cat || `row ${ri + 1}`}`}\n                                    >\n                                        <MaterialCommunityIcons name=\"close\" size={14} color={theme.edInk3} />\n                                    </Pressable>\n                                ) : null}\n                                <TextInput\n                                    value={cat}\n                                    onChangeText={(t) =>\n                                        edit((d) => (d.categories[ri] = t), `chart-cat:${layer.id}:${ri}`)\n                                    }\n                                    placeholder={`Item ${ri + 1}`}\n                                    placeholderTextColor={theme.edInk3}\n                                    style={[styles.input, styles.head]}\n                                />\n                            </View>\n                            {data.series.map((s, si) => (\n                                <TextInput\n                                    // Re-keyed when rows or series move, so a cell never shows its neighbour's number.\n                                    key={`${si}:${ri}:${data.series.length}:${data.categories.length}`}\n                                    defaultValue={String(s.values[ri] ?? 0)}\n                                    onChangeText={(t) =>\n                                        edit(\n                                            (d) => (d.series[si].values[ri] = parseCell(t)),\n                                            `chart-cell:${layer.id}:${si}:${ri}`,\n                                        )\n                                    }\n                                    keyboardType=\"numbers-and-punctuation\"\n                                    selectTextOnFocus\n                                    style={[styles.input, styles.cell]}\n                                />\n                            ))}\n                        </View>\n                    ))}\n                </View>\n            </ScrollView>\n            <Pressable\n                onPress={() =>\n                    edit((d) => {\n                        d.categories.push(`Item ${d.categories.length + 1}`);\n                        d.series.forEach((s) => s.values.push(0));\n                    })\n                }\n                style={styles.addRow}\n                accessibilityRole=\"button\"\n            >\n                <MaterialCommunityIcons name=\"plus\" size={18} color={theme.edInk2} />\n                <Text style={styles.addLabel}>Add row</Text>\n            </Pressable>\n            {!pie && layer.chart !== 'line' ? (\n                <ToggleRow\n                    label=\"Stacked\"\n                    value={Boolean(layer.stacked)}\n                    onChange={(v) => patch({ stacked: v || undefined })}\n                />\n            ) : null}\n            <ToggleRow\n                label=\"Legend\"\n                value={Boolean(layer.legend)}\n                onChange={(v) => patch({ legend: v || undefined })}\n            />\n        </View>\n    );\n}\n\nconst makeStyles = themedStyles((theme: CanvasPalette) =>\n    StyleSheet.create({\n        stack: { gap: SPACE.sm },\n        gridScroll: { flexGrow: 0 },\n        gridRow: { flexDirection: 'row', alignItems: 'center', gap: 4, marginBottom: 4 },\n        corner: { width: CELL_W + 18, backgroundColor: 'transparent' },\n        headCell: { width: CELL_W, flexDirection: 'row', alignItems: 'center', gap: 2 },\n        rowHead: { width: CELL_W + 18, flexDirection: 'row', alignItems: 'center', gap: 2 },\n        input: {\n            height: 34,\n            borderRadius: RADIUS.sm,\n            paddingHorizontal: SPACE.sm,\n            backgroundColor: theme.edRaised,\n            color: theme.edInk,\n            ...TYPE.caption,\n        },\n        head: { flex: 1, fontWeight: '600' },\n        cell: { width: CELL_W, textAlign: 'right' },\n        addCol: {\n            width: 34,\n            height: 34,\n            borderRadius: RADIUS.sm,\n            alignItems: 'center',\n            justifyContent: 'center',\n            borderWidth: 1,\n            borderColor: theme.edLine,\n        },\n        addRow: { flexDirection: 'row', alignItems: 'center', gap: SPACE.xs, height: 36 },\n        addLabel: { ...TYPE.label, color: theme.edInk2 },\n    }),\n);\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,199 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {useState,useMemo,useRef}from'react';import {StyleSheet,PanResponder,View,Text}from'react-native';import {Image}from'expo-image';import {useCanvasTheme}from'../../canvas/canvasTheme.js';import {RADIUS,SPACE,Pressable,TYPE}from'../../canvas/canvasUi.js';import {cropStart,cropPan,cropResize,cropCommit}from'../doc/crop.js';import {CANVAS_MARGIN}from'./DesignCanvas.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 HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+const HIT = 28;
+function CropOverlay({
+  doc,
+  layer,
+  onDone,
+  onCancel
+}) {
+  const theme = useCanvasTheme();
+  const [area, setArea] = useState({
+    w: 0,
+    h: 0
+  });
+  const PW = doc.pageWidth;
+  const PH = doc.pageHeight;
+  const aspect = PW / Math.max(1, PH);
+  const W = Math.max(1, Math.min(area.w - CANVAS_MARGIN * 2, (area.h - CANVAS_MARGIN * 2) * aspect));
+  const H = W / aspect;
+  const ox = (area.w - W) / 2;
+  const oy = (area.h - H) / 2;
+  const s = W / PW;
+  const initial = useMemo(() => cropStart({
+    x: layer.x * PW,
+    y: layer.y * PH,
+    w: layer.w * PW,
+    h: layer.h * PH
+  }, layer.crop, layer.flipX, layer.flipY), [layer, PW, PH]);
+  const [state, setState] = useState(initial);
+  const live = useRef({
+    state,
+    s,
+    ox,
+    oy,
+    start: state,
+    mode: "pan"
+  });
+  live.current = __spreadProps(__spreadValues({}, live.current), {
+    state,
+    s,
+    ox,
+    oy
+  });
+  const responder = useMemo(() => PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderTerminationRequest: () => false,
+    onPanResponderGrant: (e) => {
+      const {
+        state: st,
+        s: k,
+        ox: x0,
+        oy: y0
+      } = live.current;
+      const px = e.nativeEvent.locationX;
+      const py = e.nativeEvent.locationY;
+      const {
+        win: win2
+      } = st;
+      const hx = (h) => x0 + (h.includes("w") ? win2.x : h.includes("e") ? win2.x + win2.w : win2.x + win2.w / 2) * k;
+      const hy = (h) => y0 + (h.includes("n") ? win2.y : h.includes("s") ? win2.y + win2.h : win2.y + win2.h / 2) * k;
+      const near = HANDLES.find((h) => Math.abs(px - hx(h)) < HIT && Math.abs(py - hy(h)) < HIT);
+      live.current.mode = near != null ? near : "pan";
+      live.current.start = st;
+    },
+    onPanResponderMove: (_e, g) => {
+      const {
+        start,
+        mode,
+        s: k
+      } = live.current;
+      const dx = g.dx / k;
+      const dy = g.dy / k;
+      setState(mode === "pan" ? cropPan(start, dx, dy) : cropResize(start, mode, dx, dy));
+    }
+  }), []);
+  const {
+    img,
+    win
+  } = state;
+  const accent = theme.edAccent;
+  return /* @__PURE__ */ jsxs(View, { style: StyleSheet.absoluteFill, onLayout: (e) => setArea({
+    w: e.nativeEvent.layout.width,
+    h: e.nativeEvent.layout.height
+  }), children: [
+    area.w > 0 && layer.src ? /* @__PURE__ */ jsxs(View, __spreadProps(__spreadValues({ style: StyleSheet.absoluteFill }, responder.panHandlers), { children: [
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles.scrim] }),
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: {
+        position: "absolute",
+        left: ox + img.x * s,
+        top: oy + img.y * s,
+        width: img.w * s,
+        height: img.h * s,
+        opacity: 0.4,
+        transform: [{
+          scaleX: layer.flipX ? -1 : 1
+        }, {
+          scaleY: layer.flipY ? -1 : 1
+        }]
+      }, children: /* @__PURE__ */ jsx(Image, { source: {
+        uri: layer.src
+      }, style: StyleSheet.absoluteFill, contentFit: "fill" }) }),
+      /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: {
+        position: "absolute",
+        left: ox + win.x * s,
+        top: oy + win.y * s,
+        width: win.w * s,
+        height: win.h * s,
+        overflow: "hidden",
+        borderWidth: 2,
+        borderColor: accent
+      }, children: /* @__PURE__ */ jsx(View, { style: {
+        position: "absolute",
+        left: (img.x - win.x) * s - 2,
+        top: (img.y - win.y) * s - 2,
+        width: img.w * s,
+        height: img.h * s,
+        transform: [{
+          scaleX: layer.flipX ? -1 : 1
+        }, {
+          scaleY: layer.flipY ? -1 : 1
+        }]
+      }, children: /* @__PURE__ */ jsx(Image, { source: {
+        uri: layer.src
+      }, style: StyleSheet.absoluteFill, contentFit: "fill" }) }) }),
+      HANDLES.map((h) => {
+        const corner = h.length === 2;
+        const cx = ox + (h.includes("w") ? win.x : h.includes("e") ? win.x + win.w : win.x + win.w / 2) * s;
+        const cy = oy + (h.includes("n") ? win.y : h.includes("s") ? win.y + win.h : win.y + win.h / 2) * s;
+        const size = corner ? 18 : 12;
+        return /* @__PURE__ */ jsx(View, { pointerEvents: "none", style: [styles.handle, {
+          left: cx - size / 2,
+          top: cy - size / 2,
+          width: size,
+          height: size,
+          borderColor: accent
+        }] }, h);
+      })
+    ] })) : null,
+    /* @__PURE__ */ jsxs(View, { style: styles.bar, pointerEvents: "box-none", children: [
+      /* @__PURE__ */ jsx(Pressable, { onPress: onCancel, style: [styles.button, {
+        backgroundColor: "rgba(15,23,42,0.86)"
+      }], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: styles.buttonLabel, children: "Cancel" }) }),
+      /* @__PURE__ */ jsx(Pressable, { onPress: () => onDone(cropCommit(state, PW, PH, layer.flipX, layer.flipY)), style: [styles.button, {
+        backgroundColor: accent
+      }], accessibilityRole: "button", children: /* @__PURE__ */ jsx(Text, { style: [styles.buttonLabel, {
+        color: theme.edOnInk
+      }], children: "Done" }) })
+    ] })
+  ] });
+}
+const styles = StyleSheet.create({
+  scrim: {
+    backgroundColor: "rgba(0,0,0,0.45)"
+  },
+  handle: {
+    position: "absolute",
+    backgroundColor: "#ffffff",
+    borderWidth: 2,
+    borderRadius: 4
+  },
+  bar: {
+    position: "absolute",
+    top: SPACE.sm,
+    left: 0,
+    right: 0,
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: SPACE.md
+  },
+  button: {
+    height: 36,
+    paddingHorizontal: SPACE.lg,
+    borderRadius: RADIUS.pill,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  buttonLabel: __spreadProps(__spreadValues({}, TYPE.label), {
+    color: "#ffffff"
+  })
+});export{CropOverlay};//# sourceMappingURL=CropOverlay.js.map