create-next-imagicma 0.1.15 → 0.2.0

package/template-hono/client/src/globals.css

@@ -1,11 +1,427 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
 @import "tailwindcss";
-@import "./theme/default-theme.css";
 @config "../../tailwind.config.mjs";
 
 .backdrop {
   display: none;
 }
 
+:root {
+  /* Fonts */
+  --font-sans: "Poppins", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans SC", "Helvetica Neue", sans-serif;
+  --font-display: "Poppins", "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", sans-serif;
+  --font-serif: "Poppins", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans SC", "Helvetica Neue", sans-serif;
+  --font-mono: Menlo, ui-monospace, SFMono-Regular, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+
+  /* Core theme tokens (HSL triples) */
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 240 10% 3.9%;
+
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 240 4.8% 95.9%;
+  --secondary-foreground: 240 5.9% 10%;
+
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+
+  --accent: 240 4.8% 95.9%;
+  --accent-foreground: 240 5.9% 10%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+
+  --radius: 0.8rem;
+
+  /* Visual system tokens for showcase pages */
+  --surface-1: 224 40% 98%;
+  --surface-2: 220 35% 95%;
+  --brand-accent: 201 92% 56%;
+  --brand-success: 156 72% 40%;
+  --elevation-soft: 0 14px 34px rgba(15, 23, 42, 0.12);
+  --elevation-strong: 0 22px 56px rgba(15, 23, 42, 0.18);
+  --space-xs: 0.625rem;
+  --space-sm: 0.875rem;
+  --space-md: 1.125rem;
+  --space-lg: 1.625rem;
+
+  /* Extra tokens used by the migrated shadcn components */
+  --card-border: var(--border);
+  --popover-border: var(--border);
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+
+  /* Border colors expected by template classnames */
+  --primary-border: hsl(var(--primary) / 0.18);
+  --secondary-border: hsl(var(--border));
+  --muted-border: hsl(var(--border));
+  --accent-border: hsl(var(--border));
+  --destructive-border: hsl(var(--destructive) / 0.25);
+
+  --button-outline: hsl(var(--border));
+  --badge-outline: hsl(var(--border));
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --accent: 240 3.7% 15.9%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+
+  --card-border: var(--border);
+  --popover-border: var(--border);
+  --sidebar: var(--background);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+
+  --primary-border: hsl(var(--primary) / 0.15);
+  --secondary-border: hsl(var(--border));
+  --muted-border: hsl(var(--border));
+  --accent-border: hsl(var(--border));
+  --destructive-border: hsl(var(--destructive) / 0.35);
+
+  --button-outline: hsl(var(--border));
+  --badge-outline: hsl(var(--border));
+}
+
+/* Theme style presets (used by html[data-theme-style="<preset>"]) */
+:root[data-theme-style="quadratic"] {
+  --background: 246 33% 96%;
+  --foreground: 233 24% 17%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 233 24% 17%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 233 24% 17%;
+
+  --primary: 258 84% 63%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 250 44% 92%;
+  --secondary-foreground: 233 24% 20%;
+  --muted: 246 36% 93%;
+  --muted-foreground: 230 12% 42%;
+  --accent: 257 62% 88%;
+  --accent-foreground: 234 24% 24%;
+
+  --border: 246 24% 86%;
+  --input: 246 24% 84%;
+  --ring: 258 84% 63%;
+
+  --chart-1: 258 78% 56%;
+  --chart-2: 201 84% 56%;
+  --chart-3: 172 65% 45%;
+  --chart-4: 338 74% 58%;
+  --chart-5: 39 84% 58%;
+}
+
+.dark[data-theme-style="quadratic"] {
+  --background: 233 22% 11%;
+  --foreground: 246 33% 96%;
+
+  --card: 232 20% 14%;
+  --card-foreground: 246 33% 96%;
+  --popover: 232 20% 14%;
+  --popover-foreground: 246 33% 96%;
+
+  --primary: 258 90% 70%;
+  --primary-foreground: 233 22% 11%;
+  --secondary: 235 16% 20%;
+  --secondary-foreground: 246 30% 94%;
+  --muted: 234 14% 18%;
+  --muted-foreground: 240 15% 76%;
+  --accent: 235 16% 20%;
+  --accent-foreground: 246 30% 94%;
+
+  --border: 234 14% 26%;
+  --input: 234 14% 26%;
+  --ring: 258 90% 70%;
+
+  --chart-1: 258 90% 70%;
+  --chart-2: 201 78% 68%;
+  --chart-3: 172 58% 62%;
+  --chart-4: 338 76% 72%;
+  --chart-5: 39 78% 70%;
+}
+
+:root[data-theme-style="nomad"] {
+  --background: 0 0% 94.1%;
+  --foreground: 0 0% 10.2%;
+
+  --card: 0 0% 98.8%;
+  --card-foreground: 0 0% 0%;
+  --popover: 45 25% 96.9%;
+  --popover-foreground: 0 0% 10.2%;
+
+  --primary: 341.9 85.1% 52.5%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 76.9%;
+  --secondary-foreground: 0 0% 10.2%;
+  --muted: 0 0% 89%;
+  --muted-foreground: 0 0% 12.9%;
+  --accent: 0 0% 100%;
+  --accent-foreground: 0 0% 10.2%;
+
+  --border: 0 0% 91%;
+  --input: 0 0% 71%;
+  --ring: 0 0% 42%;
+
+  --chart-1: 203.9 88.3% 53.1%;
+  --chart-2: 159.8 100% 36.1%;
+  --chart-3: 42 92.8% 56.3%;
+  --chart-4: 147.1 78.5% 42%;
+  --chart-5: 341.5 75.2% 51%;
+}
+
+.dark[data-theme-style="nomad"] {
+  --background: 0 0% 10%;
+  --foreground: 0 0% 96%;
+
+  --card: 0 0% 13%;
+  --card-foreground: 0 0% 98%;
+  --popover: 0 0% 8%;
+  --popover-foreground: 0 0% 96%;
+
+  --primary: 341.9 85.1% 60%;
+  --primary-foreground: 0 0% 100%;
+  --secondary: 0 0% 26%;
+  --secondary-foreground: 0 0% 96%;
+  --muted: 0 0% 18%;
+  --muted-foreground: 0 0% 72%;
+  --accent: 0 0% 22%;
+  --accent-foreground: 0 0% 96%;
+
+  --border: 0 0% 24%;
+  --input: 0 0% 34%;
+  --ring: 0 0% 62%;
+
+  --chart-1: 203.9 88.3% 62%;
+  --chart-2: 159.8 100% 44%;
+  --chart-3: 42 92.8% 64%;
+  --chart-4: 147.1 78.5% 50%;
+  --chart-5: 341.5 75.2% 59%;
+}
+
+:root[data-theme-style="honey"] {
+  --background: 49 38.1% 91.8%;
+  --foreground: 40 52.9% 27.5%;
+
+  --card: 49 42% 95%;
+  --card-foreground: 40 52.9% 27.5%;
+  --popover: 49 42% 95%;
+  --popover-foreground: 40 52.9% 27.5%;
+
+  --primary: 40 72.8% 68.2%;
+  --primary-foreground: 40 52.9% 18%;
+  --secondary: 63 20.8% 79.2%;
+  --secondary-foreground: 40 52.9% 27.5%;
+  --muted: 49 30% 88%;
+  --muted-foreground: 40 24% 38%;
+  --accent: 63 20.8% 79.2%;
+  --accent-foreground: 40 52.9% 27.5%;
+
+  --border: 52 22% 74%;
+  --input: 52 22% 74%;
+  --ring: 40 72.8% 68.2%;
+
+  --chart-1: 40 72.8% 55%;
+  --chart-2: 63 30% 45%;
+  --chart-3: 173 25% 42%;
+  --chart-4: 18 56% 50%;
+  --chart-5: 240 16% 52%;
+}
+
+.dark[data-theme-style="honey"] {
+  --background: 36 38% 10%;
+  --foreground: 49 30% 88%;
+
+  --card: 34 30% 14%;
+  --card-foreground: 49 30% 88%;
+  --popover: 34 30% 14%;
+  --popover-foreground: 49 30% 88%;
+
+  --primary: 40 72.8% 68.2%;
+  --primary-foreground: 36 38% 10%;
+  --secondary: 38 20% 20%;
+  --secondary-foreground: 49 30% 88%;
+  --muted: 38 18% 18%;
+  --muted-foreground: 49 18% 70%;
+  --accent: 38 18% 18%;
+  --accent-foreground: 49 30% 88%;
+
+  --border: 38 18% 26%;
+  --input: 38 18% 26%;
+  --ring: 40 72.8% 68.2%;
+
+  --chart-1: 40 72.8% 68.2%;
+  --chart-2: 63 35% 58%;
+  --chart-3: 173 30% 56%;
+  --chart-4: 20 56% 64%;
+  --chart-5: 240 22% 70%;
+}
+
+:root[data-theme-style="zen-garden"] {
+  --background: 84 9.8% 90%;
+  --foreground: 225 18.2% 8.6%;
+
+  --card: 84 12% 94%;
+  --card-foreground: 225 18.2% 8.6%;
+  --popover: 84 12% 94%;
+  --popover-foreground: 225 18.2% 8.6%;
+
+  --primary: 173 24.7% 62%;
+  --primary-foreground: 225 18.2% 8.6%;
+  --secondary: 289 32.9% 72%;
+  --secondary-foreground: 225 18.2% 8.6%;
+  --muted: 84 10% 86%;
+  --muted-foreground: 225 10% 36%;
+  --accent: 289 32.9% 72%;
+  --accent-foreground: 225 18.2% 8.6%;
+
+  --border: 84 8% 78%;
+  --input: 84 8% 78%;
+  --ring: 173 24.7% 62%;
+
+  --chart-1: 173 24.7% 48%;
+  --chart-2: 289 32.9% 58%;
+  --chart-3: 40 68% 56%;
+  --chart-4: 220 26% 50%;
+  --chart-5: 0 55% 58%;
+}
+
+.dark[data-theme-style="zen-garden"] {
+  --background: 225 18.2% 8.6%;
+  --foreground: 84 9.8% 90%;
+
+  --card: 225 16% 12%;
+  --card-foreground: 84 9.8% 90%;
+  --popover: 225 16% 12%;
+  --popover-foreground: 84 9.8% 90%;
+
+  --primary: 173 30% 66%;
+  --primary-foreground: 225 18.2% 8.6%;
+  --secondary: 225 12% 18%;
+  --secondary-foreground: 84 9.8% 90%;
+  --muted: 225 10% 15%;
+  --muted-foreground: 84 8% 72%;
+  --accent: 225 10% 15%;
+  --accent-foreground: 84 9.8% 90%;
+
+  --border: 225 10% 24%;
+  --input: 225 10% 24%;
+  --ring: 173 30% 66%;
+
+  --chart-1: 173 30% 66%;
+  --chart-2: 289 36% 70%;
+  --chart-3: 40 68% 64%;
+  --chart-4: 220 30% 70%;
+  --chart-5: 355 65% 68%;
+}
+
+:root[data-theme-style="highlighter"] {
+  --background: 228 23.8% 95.9%;
+  --foreground: 223 18.9% 7.3%;
+
+  --card: 228 24% 98%;
+  --card-foreground: 223 18.9% 7.3%;
+  --popover: 228 24% 98%;
+  --popover-foreground: 223 18.9% 7.3%;
+
+  --primary: 97 70.5% 64.1%;
+  --primary-foreground: 223 18.9% 7.3%;
+  --secondary: 249 35.6% 88.4%;
+  --secondary-foreground: 223 18.9% 7.3%;
+  --muted: 228 20% 92%;
+  --muted-foreground: 223 10% 35%;
+  --accent: 249 35.6% 88.4%;
+  --accent-foreground: 223 18.9% 7.3%;
+
+  --border: 238 20% 84%;
+  --input: 238 20% 84%;
+  --ring: 97 70.5% 64.1%;
+
+  --chart-1: 97 70.5% 48%;
+  --chart-2: 249 45% 56%;
+  --chart-3: 202 72% 54%;
+  --chart-4: 339 78% 58%;
+  --chart-5: 40 78% 58%;
+}
+
+.dark[data-theme-style="highlighter"] {
+  --background: 223 18.9% 7.3%;
+  --foreground: 228 23.8% 95.9%;
+
+  --card: 223 16% 11%;
+  --card-foreground: 228 23.8% 95.9%;
+  --popover: 223 16% 11%;
+  --popover-foreground: 228 23.8% 95.9%;
+
+  --primary: 97 74% 66%;
+  --primary-foreground: 223 18.9% 7.3%;
+  --secondary: 223 12% 18%;
+  --secondary-foreground: 228 23.8% 95.9%;
+  --muted: 223 10% 15%;
+  --muted-foreground: 228 14% 72%;
+  --accent: 223 10% 15%;
+  --accent-foreground: 228 23.8% 95.9%;
+
+  --border: 223 10% 24%;
+  --input: 223 10% 24%;
+  --ring: 97 74% 66%;
+
+  --chart-1: 97 74% 66%;
+  --chart-2: 249 50% 72%;
+  --chart-3: 202 78% 70%;
+  --chart-4: 339 80% 70%;
+  --chart-5: 40 78% 68%;
+}
+
 @layer base {
   * {
     border-color: hsl(var(--border));

package/template-hono/client/src/lib/imagicma-preview-bridge.ts

@@ -1,4 +1,4 @@
-const PROD_PARENT_ORIGINS = new Set(["https://agentma.cn", "https://imagicma.cn", "https://nanocoda.com"]);
+const PROD_PARENT_ORIGINS = new Set(["https://agentma.cn", "https://imagicma.cn"]);
 const LOCAL_PARENT_RE = /^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/i;
 const LOCAL_IMAGICMA_PARENT_RE = /^https?:\/\/([a-z0-9-]+\.)?local\.(agentma\.cn|imagicma\.cn)(:\d+)?$/i;
 

package/template-hono/client/src/lib/imagicma-preview-picker.ts

@@ -142,8 +142,6 @@ type PreviewPickerStateSyncPayload = {
   pageKey: string;
   overrides: PreviewOverridePageEntry | null;
   selectedNodeId: string | null;
-  selectedTextEditable: boolean;
-  draftTargetScope: PreviewDraftTargetScope;
   draft: PreviewDraftApplyPayload | null;
   drafts: PreviewDraftApplyPayload[];
   pendingSort: PreviewSortPreviewPayload | null;
@@ -169,19 +167,6 @@ type PickerMessage =
       sessionId: string | null;
       payload: PreviewPickerStateSyncPayload;
     }
-  | {
-      channel: typeof PREVIEW_PICKER_CHANNEL;
-      version: typeof PREVIEW_PICKER_VERSION;
-      type: "IMAGICMA_PICKER_DRAFT_PATCH";
-      frameInstanceId: string;
-      sessionId: string | null;
-      payload?: {
-        nodeId?: string;
-        patch?: {
-          textContent?: string;
-        };
-      };
-    }
   | {
       channel: typeof PREVIEW_PICKER_CHANNEL;
       version: typeof PREVIEW_PICKER_VERSION;
@@ -208,8 +193,6 @@ type RuntimeState = {
   selectedSiblingBoxEls: HTMLDivElement[];
   draftStyleEl: HTMLStyleElement | null;
   persistedOverrides: PreviewOverridePageEntry | null;
-  selectedTextEditable: boolean;
-  draftTargetScope: PreviewDraftTargetScope;
   draftPayload: PreviewDraftApplyPayload | null;
   draftPayloads: PreviewDraftApplyPayload[];
   pendingSort: { groupKey: string; orderedSortKeys: readonly string[] } | null;
@@ -232,10 +215,6 @@ type RuntimeState = {
   throttledRecalculate: (() => void) | null;
   mutationObserver: MutationObserver | null;
   suppressMutationObserver: number;
-  inlineEditingElement: HTMLElement | null;
-  inlineEditingAbortController: AbortController | null;
-  inlineEditingOriginalContentEditable: string | null;
-  inlineEditingOriginalSpellcheck: boolean;
 };
 
 type SortableMetadata = {
@@ -524,6 +503,14 @@ function getElementNodeId(element: HTMLElement | null | undefined): string {
   return trimText(element?.getAttribute("data-imagicma-node-id"));
 }
 
+function getRepeatItemScopeKey(element: HTMLElement | null | undefined): string | null {
+  const repeatRoot = element ? getRepeatItemRoot(element) : null;
+  const groupKey = trimText(repeatRoot?.getAttribute("data-imagicma-repeat-group"));
+  const itemKey = trimText(repeatRoot?.getAttribute("data-imagicma-sort-key"));
+  if (!groupKey || !itemKey) return null;
+  return `${groupKey}::${itemKey}`;
+}
+
 function getIndexedElementsByNodeKey(state: RuntimeState, nodeKey: string): HTMLElement[] {
   const cached = state.nodeIdIndex.get(nodeKey)?.filter((element) => element.isConnected) ?? [];
   if (cached.length > 0) return cached;
@@ -535,13 +522,26 @@ function getIndexedElementsByNodeKey(state: RuntimeState, nodeKey: string): HTML
   );
 }
 
+function isRepeatScopedNodeIdentity(peers: HTMLElement[]): boolean {
+  if (peers.length <= 1) return false;
+
+  const seenScopes = new Set<string>();
+  for (const peer of peers) {
+    const scopeKey = getRepeatItemScopeKey(peer);
+    if (!scopeKey || seenScopes.has(scopeKey)) {
+      return false;
+    }
+    seenScopes.add(scopeKey);
+  }
+
+  return seenScopes.size === peers.length;
+}
+
 function getDirectSemanticSiblingItems(parent: HTMLElement | null): HTMLElement[] {
   if (!parent) return [];
 
   const items = Array.from(parent.children).filter((child): child is HTMLElement => {
-    return child instanceof HTMLElement
-      && Boolean(getElementNodeId(child))
-      && trimText(child.getAttribute("data-imagicma-kind")) === "repeat-item";
+    return child instanceof HTMLElement && Boolean(getElementNodeId(child));
   });
 
   if (items.length < 2) return [];
@@ -559,10 +559,6 @@ function getSyntheticSortableParentId(parent: HTMLElement | null): string | null
 }
 
 function getSiblingSortableMetadata(element: HTMLElement): SortableMetadata | null {
-  if (trimText(element.getAttribute("data-imagicma-kind")) !== "repeat-item") {
-    return null;
-  }
-
   const nodeId = getElementNodeId(element);
   if (!nodeId) return null;
 
@@ -1694,92 +1690,6 @@ function applyCurrentDraftToSelectedElement(state: RuntimeState) {
   });
 }
 
-function disableInlineTextEditing(state: RuntimeState) {
-  const element = state.inlineEditingElement;
-  state.inlineEditingAbortController?.abort();
-  state.inlineEditingAbortController = null;
-
-  if (element?.isConnected) {
-    if (state.inlineEditingOriginalContentEditable === null) {
-      element.removeAttribute("contenteditable");
-    } else {
-      element.setAttribute("contenteditable", state.inlineEditingOriginalContentEditable);
-    }
-    element.spellcheck = state.inlineEditingOriginalSpellcheck;
-    element.removeAttribute("data-imagicma-inline-editing");
-  }
-
-  state.inlineEditingElement = null;
-  state.inlineEditingOriginalContentEditable = null;
-  state.inlineEditingOriginalSpellcheck = false;
-}
-
-function moveCaretToEnd(element: HTMLElement) {
-  const selection = window.getSelection();
-  if (!selection) return;
-  const range = document.createRange();
-  range.selectNodeContents(element);
-  range.collapse(false);
-  selection.removeAllRanges();
-  selection.addRange(range);
-}
-
-function shouldEnableInlineTextEditing(state: RuntimeState, element: HTMLElement | null): element is HTMLElement {
-  if (!state.enabled || !element || element !== state.selectedElement) return false;
-  if (state.draftTargetScope !== "single") return false;
-  if (!state.selectedTextEditable) return false;
-  if (!isSimpleTextElement(element)) return false;
-  return true;
-}
-
-function enableInlineTextEditing(state: RuntimeState, element: HTMLElement) {
-  if (state.inlineEditingElement === element) return;
-  disableInlineTextEditing(state);
-
-  state.inlineEditingElement = element;
-  state.inlineEditingOriginalContentEditable = element.getAttribute("contenteditable");
-  state.inlineEditingOriginalSpellcheck = element.spellcheck;
-
-  const abortController = new AbortController();
-  state.inlineEditingAbortController = abortController;
-
-  element.setAttribute("contenteditable", "plaintext-only");
-  element.setAttribute("data-imagicma-inline-editing", "true");
-  element.spellcheck = false;
-
-  element.addEventListener("input", () => {
-    postToParent(state, {
-      channel: PREVIEW_PICKER_CHANNEL,
-      version: PREVIEW_PICKER_VERSION,
-      type: "IMAGICMA_PICKER_DRAFT_PATCH",
-      frameInstanceId: state.frameInstanceId,
-      sessionId: state.activeSessionId,
-      payload: {
-        nodeId: getElementNodeId(element),
-        patch: {
-          textContent: element.textContent || "",
-        },
-      },
-    });
-  }, { signal: abortController.signal });
-
-  window.requestAnimationFrame(() => {
-    if (state.inlineEditingElement !== element) return;
-    if (document.activeElement !== element) {
-      element.focus({ preventScroll: true });
-      moveCaretToEnd(element);
-    }
-  });
-}
-
-function syncInlineTextEditing(state: RuntimeState) {
-  if (shouldEnableInlineTextEditing(state, state.selectedElement)) {
-    enableInlineTextEditing(state, state.selectedElement);
-    return;
-  }
-  disableInlineTextEditing(state);
-}
-
 function applySortPreview(state: RuntimeState, items: HTMLElement[], orderedKeys: readonly string[]) {
   if (items.length < 2 || orderedKeys.length === 0) return;
 
@@ -1861,7 +1771,6 @@ function reapplyVisualState(state: RuntimeState) {
   applyTextOverrides(state, state.persistedOverrides, state.draftPayloads);
   applyCurrentDraftToSelectedElement(state);
   applySortOverrides(state, state.persistedOverrides, state.pendingSort);
-  syncInlineTextEditing(state);
 
   const hoverTarget = state.hoveredElement && state.hoveredElement !== state.selectedElement
     ? state.hoveredElement
@@ -1883,10 +1792,12 @@ function reapplyVisualState(state: RuntimeState) {
   }
 }
 
-function isNodeSelectableElement(_state: RuntimeState, element: HTMLElement): boolean {
+function isNodeSelectableElement(state: RuntimeState, element: HTMLElement): boolean {
   const nodeId = getElementNodeId(element);
   if (!nodeId) return false;
-  return true;
+
+  const peers = getIndexedElementsByNodeKey(state, nodeId);
+  return peers.length <= 1 || isRepeatScopedNodeIdentity(peers);
 }
 
 function isOverlayElement(state: RuntimeState, element: HTMLElement): boolean {
@@ -1968,8 +1879,6 @@ function createRuntimeState(): RuntimeState {
     selectedSiblingBoxEls: [],
     draftStyleEl: null,
     persistedOverrides: null,
-    selectedTextEditable: false,
-    draftTargetScope: "single",
     draftPayload: null,
     draftPayloads: [],
     pendingSort: null,
@@ -1988,10 +1897,6 @@ function createRuntimeState(): RuntimeState {
     throttledRecalculate: null,
     mutationObserver: null,
     suppressMutationObserver: 0,
-    inlineEditingElement: null,
-    inlineEditingAbortController: null,
-    inlineEditingOriginalContentEditable: null,
-    inlineEditingOriginalSpellcheck: false,
   };
 }
 
@@ -2199,8 +2104,6 @@ export function installPreviewPickerRuntime() {
       state.activeSessionId = event.data.sessionId;
       state.enabled = event.data.payload.mode === "picking";
       state.persistedOverrides = event.data.payload.overrides;
-      state.selectedTextEditable = event.data.payload.selectedTextEditable === true;
-      state.draftTargetScope = event.data.payload.draftTargetScope;
       state.draftPayload = event.data.payload.draft;
       state.draftPayloads = event.data.payload.drafts ?? (event.data.payload.draft ? [event.data.payload.draft] : []);
       state.pendingSort = event.data.payload.pendingSort
@@ -2218,8 +2121,6 @@ export function installPreviewPickerRuntime() {
         sessionId: state.activeSessionId,
         mode: event.data.payload.mode,
         selectedNodeId: event.data.payload.selectedNodeId,
-        selectedTextEditable: event.data.payload.selectedTextEditable,
-        draftTargetScope: event.data.payload.draftTargetScope,
         hasDraft: Boolean(event.data.payload.draft),
         hasPendingSort: Boolean(event.data.payload.pendingSort),
         pageKey: event.data.payload.pageKey,
@@ -2233,12 +2134,9 @@ export function installPreviewPickerRuntime() {
       state.activeSessionId = null;
       state.selectedElement = null;
       state.hoveredElement = null;
-      state.selectedTextEditable = false;
-      state.draftTargetScope = "single";
       state.draftPayload = null;
       state.draftPayloads = [];
       state.pendingSort = null;
-      disableInlineTextEditing(state);
       clearOverlay(state);
       applySortableAffordance(state, false);
       logPreviewPickerRuntime("stop-session", {

package/template-hono/client/src/providers.tsx

@@ -9,7 +9,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
   const [queryClient] = React.useState(() => makeQueryClient());
 
   return (
-    <ThemeProvider attribute="class" defaultTheme="light">
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
       <QueryClientProvider client={queryClient}>
         <TooltipProvider>
           <Toaster />