@parhelia/core 0.1.12808 → 0.1.12838

package/dist/editor/template-wizard/TemplateStructureInlineEditor.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Bot, Check, ChevronDown, ChevronRight, GripVertical, Plus, Settings2, Trash2, X, } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { Bot, Check, ChevronDown, ChevronRight, GripVertical, Plus, Settings2, X, } from "lucide-react";
+import { DeleteIcon } from "../../components/ui/delete-icon";
 import { Button } from "../../components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger, } from "../../components/ui/popover";
 import { AgentTerminal } from "../ai/AgentTerminal";
@@ -88,11 +89,13 @@ const sameBaseTemplateChangeTarget = (left, right) => (!!left.templateId &&
     (!!left.templatePath &&
         !!right.templatePath &&
         normalizeName(left.templatePath) === normalizeName(right.templatePath));
-const findSectionIndex = (sectionList, targetSectionLocalId, targetSectionName) => sectionList.findIndex((sectionItem) => (!!targetSectionLocalId && sectionItem.localId === targetSectionLocalId) ||
+const findSectionIndex = (sectionList, targetSectionLocalId, targetSectionName) => sectionList.findIndex((sectionItem) => (!!targetSectionLocalId &&
+    sectionItem.localId === targetSectionLocalId) ||
     (!!targetSectionName &&
         normalizeName(sectionItem.name) === normalizeName(targetSectionName)));
 const findFieldIndex = (fieldList, targetFieldLocalId, targetFieldName) => fieldList.findIndex((fieldItem) => (!!targetFieldLocalId && fieldItem.localId === targetFieldLocalId) ||
-    (!!targetFieldName && normalizeName(fieldItem.name) === normalizeName(targetFieldName)));
+    (!!targetFieldName &&
+        normalizeName(fieldItem.name) === normalizeName(targetFieldName)));
 function applyPendingSuggestionsToSections(baseSections, pendingChanges) {
     const mergedSections = baseSections.map(cloneWizardSection);
     for (const change of pendingChanges) {
@@ -160,7 +163,8 @@ function mergePendingSuggestionChanges(existingChanges, incomingChanges) {
         if (change.kind === "section" && change.action === "add") {
             const duplicateSectionAddIndex = merged.findIndex((entry) => entry.kind === "section" &&
                 entry.action === "add" &&
-                normalizeName(entry.section.name) === normalizeName(change.section.name));
+                normalizeName(entry.section.name) ===
+                    normalizeName(change.section.name));
             if (duplicateSectionAddIndex >= 0) {
                 const existingEntry = merged[duplicateSectionAddIndex];
                 if (existingEntry &&
@@ -277,7 +281,8 @@ function mergePendingSuggestionChanges(existingChanges, incomingChanges) {
                     entry.action === "add" &&
                     entry.sectionLocalId === change.sectionLocalId &&
                     (findFieldIndex([entry.field], change.targetFieldLocalId, change.targetFieldName) >= 0 ||
-                        normalizeName(entry.field.name) === normalizeName(change.field.name)));
+                        normalizeName(entry.field.name) ===
+                            normalizeName(change.field.name)));
                 if (pendingFieldAddIndex >= 0) {
                     const pendingFieldEntry = merged[pendingFieldAddIndex];
                     if (pendingFieldEntry && pendingFieldEntry.kind === "field") {
@@ -442,7 +447,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         const normalized = name.trim().toLowerCase();
         if (!normalized)
             return false;
-        return sections.some((section, index) => index !== ignoreIndex && section.name.trim().toLowerCase() === normalized);
+        return sections.some((section, index) => index !== ignoreIndex &&
+            section.name.trim().toLowerCase() === normalized);
     };
     const hasDuplicateFieldNameInSection = (sectionIndex, name, ignoreIndex) => {
         const normalized = name.trim().toLowerCase();
@@ -470,7 +476,11 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                 ...section,
                 fields: [
                     ...section.fields,
-                    { ...draft, localId: createLocalId("field"), name: draft.name.trim() },
+                    {
+                        ...draft,
+                        localId: createLocalId("field"),
+                        name: draft.name.trim(),
+                    },
                 ],
             }));
         resetFieldDraft(sectionIndex);
@@ -488,7 +498,11 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         const nextSectionIndex = sections.length;
         setSections((prev) => [
             ...prev,
-            { localId: createLocalId("section"), name: newSectionName.trim(), fields: [] },
+            {
+                localId: createLocalId("section"),
+                name: newSectionName.trim(),
+                fields: [],
+            },
         ]);
         setNewSectionName("");
         setFocusFieldDraftSectionIndex(nextSectionIndex);
@@ -543,7 +557,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             ? s
             : {
                 ...s,
-                fields: s.fields.map((f, fi) => (fi === fieldIndex ? { ...f, ...updates } : f)),
+                fields: s.fields.map((f, fi) => fi === fieldIndex ? { ...f, ...updates } : f),
             }));
     };
     const removeField = (sectionIndex, fieldIndex) => {
@@ -569,7 +583,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             return { ...s, fields: newFields };
         }));
         // Update selection if the moved field was selected
-        if (selectedFieldKey?.si === sectionIndex && selectedFieldKey.fi === fromIdx) {
+        if (selectedFieldKey?.si === sectionIndex &&
+            selectedFieldKey.fi === fromIdx) {
             setSelectedFieldKey({ si: sectionIndex, fi: toIdx });
         }
         else if (selectedFieldKey?.si === sectionIndex) {
@@ -663,7 +678,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         const movedField = sections[fromSi]?.fields[fromFi];
         if (!movedField)
             return;
-        if (movedField.name.trim() && hasDuplicateFieldNameInSection(toSi, movedField.name)) {
+        if (movedField.name.trim() &&
+            hasDuplicateFieldNameInSection(toSi, movedField.name)) {
             editContext?.showErrorToast({
                 summary: "Duplicate field name",
                 details: "Field names must be unique within a section.",
@@ -817,9 +833,9 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                         localId: createLocalId("field"),
                         name: field.name || "",
                         type: field.type ||
-                            (liveFieldTypeGroups.flatMap((x) => x.types || [])[0] ||
-                                defaultFieldTypeOptions[0] ||
-                                "Single-Line Text"),
+                            liveFieldTypeGroups.flatMap((x) => x.types || [])[0] ||
+                            defaultFieldTypeOptions[0] ||
+                            "Single-Line Text",
                         source: field.source || "",
                         title: field.title || "",
                         shortDescription: field.shortDescription || "",
@@ -838,12 +854,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             }
         };
         load();
-    }, [
-        initialBaseTemplates,
-        initialName,
-        isCreateMode,
-        item,
-    ]);
+    }, [initialBaseTemplates, initialName, isCreateMode, item]);
     const save = async () => {
         if (!templateName.trim()) {
             editContext?.showErrorToast({
@@ -1047,7 +1058,14 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                 unversioned: field.unversioned,
             })),
         })),
-    }), [effectiveBaseTemplates, effectiveSections, isCreateMode, item, parentItem, templateName]);
+    }), [
+        effectiveBaseTemplates,
+        effectiveSections,
+        isCreateMode,
+        item,
+        parentItem,
+        templateName,
+    ]);
     const currentTemplateId = useMemo(() => (item?.id ? normalizeGuid(item.id) : ""), [item?.id]);
     const templateBuilderAgentMetadata = useMemo(() => ({
         mode: "read-only",
@@ -1061,7 +1079,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
     }), [currentTemplateBuilderState]);
     const effectiveAiProfiles = useMemo(() => {
         const mergeTemplateBuilderSkills = (profile) => {
-            if (normalizeGuid(profile.id) !== normalizeGuid(TEMPLATE_BUILDER_AGENT_PROFILE_ID)) {
+            if (normalizeGuid(profile.id) !==
+                normalizeGuid(TEMPLATE_BUILDER_AGENT_PROFILE_ID)) {
                 return profile;
             }
             const mergedSkills = [
@@ -1084,7 +1103,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                 allowedSkills: mergedSkills,
             };
         };
-        if (aiProfiles.some((profile) => normalizeGuid(profile.id) === normalizeGuid(TEMPLATE_BUILDER_AGENT_PROFILE_ID))) {
+        if (aiProfiles.some((profile) => normalizeGuid(profile.id) ===
+            normalizeGuid(TEMPLATE_BUILDER_AGENT_PROFILE_ID))) {
             return aiProfiles.map(mergeTemplateBuilderSkills);
         }
         return [
@@ -1150,7 +1170,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             if (!matchedSection)
                 continue;
             if (sectionChange.action === "update") {
-                matchedSection.name = sectionChange.section.name ?? matchedSection.name;
+                matchedSection.name =
+                    sectionChange.section.name ?? matchedSection.name;
                 nextChanges.push({
                     id: createLocalId("section-suggestion"),
                     kind: "section",
@@ -1181,7 +1202,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             });
         }
         for (const fieldChange of suggestion.fields || []) {
-            let matchedSection = workingSections.find((sectionItem) => normalizeName(sectionItem.name) === normalizeName(fieldChange.targetSectionName));
+            let matchedSection = workingSections.find((sectionItem) => normalizeName(sectionItem.name) ===
+                normalizeName(fieldChange.targetSectionName));
             if (fieldChange.action === "add") {
                 if (!matchedSection) {
                     const syntheticSection = {
@@ -1215,14 +1237,16 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
             }
             if (!matchedSection)
                 continue;
-            const matchedField = matchedSection.fields.find((fieldItem) => normalizeName(fieldItem.name) === normalizeName(fieldChange.targetFieldName));
+            const matchedField = matchedSection.fields.find((fieldItem) => normalizeName(fieldItem.name) ===
+                normalizeName(fieldChange.targetFieldName));
             if (!matchedField)
                 continue;
             if (fieldChange.action === "update") {
                 const updatedField = hydrateFieldFromPatch(fieldChange.field, matchedField);
                 const matchedFieldIndex = matchedSection.fields.findIndex((fieldItem) => fieldItem.localId === matchedField.localId);
                 if (matchedFieldIndex >= 0) {
-                    matchedSection.fields[matchedFieldIndex] = cloneWizardField(updatedField);
+                    matchedSection.fields[matchedFieldIndex] =
+                        cloneWizardField(updatedField);
                 }
                 nextChanges.push({
                     id: createLocalId("field-suggestion"),
@@ -1295,19 +1319,25 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         if (change.kind === "baseTemplate") {
             if (change.action === "remove") {
                 const matches = baseTemplates.filter((template) => (!!change.templateId &&
-                    normalizeGuid(template.id) === normalizeGuid(change.templateId)) ||
-                    normalizeName(template.name) === normalizeName(change.templateName) ||
+                    normalizeGuid(template.id) ===
+                        normalizeGuid(change.templateId)) ||
+                    normalizeName(template.name) ===
+                        normalizeName(change.templateName) ||
                     (!!change.templatePath &&
-                        normalizeName(template.path) === normalizeName(change.templatePath)));
+                        normalizeName(template.path) ===
+                            normalizeName(change.templatePath)));
                 removeBaseTemplates(matches);
                 clearSuggestion(suggestionId);
                 return;
             }
             let resolvedTemplate = selectedTemplateNodesInTree.find((template) => (!!change.templateId &&
-                normalizeGuid(template.id) === normalizeGuid(change.templateId)) ||
-                normalizeName(template.name) === normalizeName(change.templateName) ||
+                normalizeGuid(template.id) ===
+                    normalizeGuid(change.templateId)) ||
+                normalizeName(template.name) ===
+                    normalizeName(change.templateName) ||
                 (!!change.templatePath &&
-                    normalizeName(template.path) === normalizeName(change.templatePath))) || null;
+                    normalizeName(template.path) ===
+                        normalizeName(change.templatePath))) || null;
             if (!resolvedTemplate && change.templateId) {
                 const loadedItem = await editContext?.itemsRepository.getItem({
                     id: change.templateId,
@@ -1365,7 +1395,10 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                 ? sectionItem
                 : {
                     ...sectionItem,
-                    fields: [...sectionItem.fields, hydrateFieldFromPatch(change.field)],
+                    fields: [
+                        ...sectionItem.fields,
+                        hydrateFieldFromPatch(change.field),
+                    ],
                 }));
             clearSuggestion(suggestionId);
             return;
@@ -1413,9 +1446,11 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
     const getBaseTemplateSuggestions = useCallback((template) => pendingSuggestions.filter((entry) => entry.kind === "baseTemplate" &&
         ((!!entry.templateId &&
             normalizeGuid(entry.templateId) === normalizeGuid(template.id)) ||
-            normalizeName(entry.templateName) === normalizeName(template.name) ||
+            normalizeName(entry.templateName) ===
+                normalizeName(template.name) ||
             (!!entry.templatePath &&
-                normalizeName(entry.templatePath) === normalizeName(template.path)))), [pendingSuggestions]);
+                normalizeName(entry.templatePath) ===
+                    normalizeName(template.path)))), [pendingSuggestions]);
     const getSectionSuggestions = useCallback((sectionLocalId) => pendingSuggestions.filter((entry) => entry.kind === "section" &&
         entry.action !== "add" &&
         entry.targetSectionLocalId === sectionLocalId), [pendingSuggestions]);
@@ -1426,25 +1461,31 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
         entry.action === "add" &&
         entry.sectionLocalId === sectionLocalId), [pendingSuggestions]);
     if (isLoading) {
-        return _jsx("div", { className: "p-4 text-sm text-gray-500", children: "Loading template structure..." });
+        return (_jsx("div", { className: "text-neutral-grey-50 p-4 text-sm", children: "Loading template structure..." }));
     }
     /* ────────────────────────────────────────────────────────────
      *  Shared sub-renderers
      * ──────────────────────────────────────────────────────────── */
     const cls = {
-        input: "w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm outline-none transition focus:border-blue-400 focus:ring-2 focus:ring-blue-100",
-        select: "w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm outline-none transition focus:border-blue-400 focus:ring-2 focus:ring-blue-100",
+        input: "w-full rounded-md border border-border-default bg-white px-3 py-2 text-sm outline-none transition focus:border-feedback-blue focus:ring-2 focus:ring-feedback-blue",
+        select: "w-full rounded-md border border-border-default bg-white px-3 py-2 text-sm outline-none transition focus:border-feedback-blue focus:ring-2 focus:ring-feedback-blue",
     };
-    const renderToggle = (checked, onClick) => (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition ${checked ? "bg-blue-600" : "bg-gray-300"}`, onClick: onClick, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition ${checked ? "translate-x-4" : "translate-x-0.5"}` }) }));
+    const renderToggle = (checked, onClick) => (_jsx("button", { type: "button", role: "switch", "aria-checked": checked, className: `relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition ${checked ? "bg-feedback-blue" : "bg-neutral-grey-10"}`, onClick: onClick, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition ${checked ? "translate-x-4" : "translate-x-0.5"}` }) }));
     const renderTypeSelect = (value, onChange) => (_jsx("select", { className: cls.select, value: value, onChange: (e) => onChange(e.target.value), children: fieldTypeGroups.map((group) => (_jsx("optgroup", { label: group.name, children: (group.types || []).map((t) => (_jsx("option", { value: t, children: t }, `${group.name}-${t}`))) }, group.name))) }));
-    const renderSuggestionActions = (change) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", className: "rounded border border-violet-200 bg-white px-2 py-0.5 text-xs font-semibold text-violet-700 transition hover:bg-violet-50", onClick: (event) => {
+    const renderSuggestionActions = (change) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", className: "border-highlight-100 badge-pad-sm text-highlight-100 hover:bg-highlight-10 rounded border bg-white text-xs font-semibold transition", onClick: (event) => {
                     event.stopPropagation();
                     void approveSuggestion(change.id);
-                }, children: "Approve" }), _jsx("button", { type: "button", className: "rounded border border-gray-200 bg-white px-2 py-0.5 text-xs font-semibold text-gray-600 transition hover:bg-gray-50", onClick: (event) => {
+                }, children: "Approve" }), _jsx("button", { type: "button", className: "border-border-default badge-pad-sm text-neutral-grey-50 hover:bg-neutral-grey-5 rounded border bg-white text-xs font-semibold transition", onClick: (event) => {
                     event.stopPropagation();
                     clearSuggestion(change.id);
                 }, children: "Reject" })] }));
-    const renderFooter = () => (_jsxs(DialogButtons, { className: "mt-auto items-center justify-between border-t bg-gray-50/80 px-4 py-4 backdrop-blur-sm", children: [_jsxs("label", { className: "inline-flex items-center gap-2 text-xs font-medium text-gray-500", children: ["Standard Values", renderToggle(hasStandardValues, () => setHasStandardValues((v) => !v))] }), _jsxs("div", { className: "flex items-center gap-2", children: [onClose && (_jsx(Button, { variant: "ghost", onClick: onClose, disabled: isSaving, children: "Cancel" })), _jsx(Button, { onClick: save, disabled: isSaving, className: "min-w-[140px] shadow-sm", children: isSaving ? (isCreateMode ? "Creating..." : "Updating...") : isCreateMode ? "Create" : "Update" })] })] }));
+    const renderFooter = () => (_jsxs(DialogButtons, { className: "bg-neutral-grey-5/80 mt-auto items-center justify-between border-t px-4 py-4 backdrop-blur-sm", children: [_jsxs("label", { className: "text-neutral-grey-50 inline-flex items-center gap-2 text-xs font-medium", children: ["Standard Values", renderToggle(hasStandardValues, () => setHasStandardValues((v) => !v))] }), _jsxs("div", { className: "flex items-center gap-2", children: [onClose && (_jsx(Button, { variant: "ghost", onClick: onClose, disabled: isSaving, children: "Cancel" })), _jsx(Button, { onClick: save, disabled: isSaving, className: "min-w-[140px] shadow-sm", children: isSaving
+                            ? isCreateMode
+                                ? "Creating..."
+                                : "Updating..."
+                            : isCreateMode
+                                ? "Create"
+                                : "Update" })] })] }));
     /* ────────────────────────────────────────────────────────────
      *  Studio Layout
      *  Three-column: left = inheritance tree, center = field list,
@@ -1470,19 +1511,20 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
     const section = selectedFieldRef?.section;
     const si = selectedFieldRef?.si;
     const fi = selectedFieldRef?.fi;
-    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col gap-0 overflow-hidden rounded-lg border border-gray-200 bg-white text-gray-900", children: [_jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-1 gap-0 lg:grid-cols-[240px_1fr_280px_420px]", children: [_jsx("div", { className: "flex flex-col gap-0 overflow-y-auto border-r border-gray-100 bg-gray-50/30", children: _jsx("div", { className: "flex-1 overflow-y-auto p-3", children: _jsxs("div", { className: "flex min-h-full flex-col", children: [(isCreateMode || item) && (_jsxs("div", { className: "mb-3 border-b border-gray-100 pb-3", children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Template name" }), _jsx("input", { className: cls.input, value: templateName, onChange: (e) => setTemplateName(e.target.value), placeholder: "New Template" })] })), _jsx("div", { className: "mb-1.5 text-xs font-bold uppercase tracking-widest text-gray-400", children: "Base templates" }), _jsxs("div", { className: "space-y-1", children: [baseTemplates.length === 0 && pendingBaseTemplateAdditions.length === 0 && (_jsx("div", { className: "text-xs text-gray-400 italic", children: "None" })), baseTemplates.map((t) => {
+    return (_jsxs("div", { className: "border-border-default text-neutral-grey-100 flex h-full min-h-0 flex-col gap-0 overflow-hidden rounded-lg border bg-white", children: [_jsxs("div", { className: "grid min-h-0 flex-1 grid-cols-1 gap-0 lg:grid-cols-[240px_1fr_280px_420px]", children: [_jsx("div", { className: "border-border-default bg-neutral-grey-5/30 flex flex-col gap-0 overflow-y-auto border-r", children: _jsx("div", { className: "flex-1 overflow-y-auto p-3", children: _jsxs("div", { className: "flex min-h-full flex-col", children: [(isCreateMode || item) && (_jsxs("div", { className: "border-border-default mb-3 border-b pb-3", children: [_jsx("div", { className: "text-neutral-grey-50 mb-1 text-xs font-bold tracking-wider", children: "Template name" }), _jsx("input", { className: cls.input, value: templateName, onChange: (e) => setTemplateName(e.target.value), placeholder: "New Template" })] })), _jsx("div", { className: "text-neutral-grey-50 mb-1.5 text-xs font-bold tracking-widest", children: "Base templates" }), _jsxs("div", { className: "space-y-1", children: [baseTemplates.length === 0 &&
+                                                pendingBaseTemplateAdditions.length === 0 && (_jsx("div", { className: "text-neutral-grey-50 text-xs italic", children: "None" })), baseTemplates.map((t) => {
                                                 const templateSuggestions = getBaseTemplateSuggestions(t);
                                                 const hasRemoveSuggestion = templateSuggestions.some((entry) => entry.action === "remove");
-                                                return (_jsxs("div", { className: `space-y-1 rounded border px-2 py-1 text-xs ${hasRemoveSuggestion
-                                                        ? "border-violet-200 bg-violet-50/80 text-violet-900"
-                                                        : "border-gray-200 bg-white text-gray-700"}`, children: [_jsxs("div", { className: "group flex items-center gap-1", children: [t.icon && _jsx("img", { src: t.icon, className: "h-3 w-3 shrink-0" }), _jsx("span", { className: `flex-1 truncate ${hasRemoveSuggestion ? "line-through" : ""}`, children: t.name }), _jsx("button", { className: "text-gray-400 transition hover:text-red-500", onClick: () => removeBaseTemplates([t]), children: _jsx(X, { className: "h-2.5 w-2.5" }) })] }), templateSuggestions.map((entry) => (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded border border-violet-200 bg-white/80 px-2 py-1 text-xs text-violet-700", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: ["AI suggests ", entry.action === "remove" ? "removing" : "adding", " this base template", entry.reason ? ` · ${entry.reason}` : ""] }), renderSuggestionActions(entry)] }, entry.id)))] }, t.id));
-                                            }), pendingBaseTemplateAdditions.map((entry) => (_jsx("div", { className: "rounded border border-dashed border-violet-300 bg-violet-50 px-2 py-1 text-xs text-violet-800", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-semibold", children: entry.templateName }), _jsxs("div", { className: "truncate text-xs text-violet-600", children: ["AI suggestion", entry.reason ? ` · ${entry.reason}` : ""] })] }), renderSuggestionActions(entry)] }) }, entry.id))), _jsx("div", { className: "flex justify-end pt-1", children: _jsxs(Popover, { open: templatePickerOpen, onOpenChange: (nextOpen) => {
+                                                return (_jsxs("div", { className: `badge-pad space-y-1 rounded border text-xs ${hasRemoveSuggestion
+                                                        ? "border-highlight-100 bg-highlight-10/80 text-highlight-100"
+                                                        : "border-border-default text-neutral-grey-100 bg-white"}`, children: [_jsxs("div", { className: "group flex items-center gap-1", children: [t.icon && (_jsx("img", { src: t.icon, className: "h-3 w-3 shrink-0" })), _jsx("span", { className: `flex-1 truncate ${hasRemoveSuggestion ? "line-through" : ""}`, children: t.name }), _jsx("button", { className: "text-neutral-grey-50 hover:text-feedback-red transition", onClick: () => removeBaseTemplates([t]), children: _jsx(X, { className: "h-2.5 w-2.5" }) })] }), templateSuggestions.map((entry) => (_jsxs("div", { className: "border-highlight-100 badge-pad text-highlight-100 flex items-center justify-between gap-2 rounded border bg-white/80 text-xs", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: ["AI suggests", " ", entry.action === "remove" ? "removing" : "adding", " ", "this base template", entry.reason ? ` · ${entry.reason}` : ""] }), renderSuggestionActions(entry)] }, entry.id)))] }, t.id));
+                                            }), pendingBaseTemplateAdditions.map((entry) => (_jsx("div", { className: "border-highlight-100 bg-highlight-10 badge-pad text-highlight-100 rounded border border-dashed text-xs", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-semibold", children: entry.templateName }), _jsxs("div", { className: "text-highlight-100 truncate text-xs", children: ["AI suggestion", entry.reason ? ` · ${entry.reason}` : ""] })] }), renderSuggestionActions(entry)] }) }, entry.id))), _jsx("div", { className: "flex justify-end pt-1", children: _jsxs(Popover, { open: templatePickerOpen, onOpenChange: (nextOpen) => {
                                                         if (nextOpen && templatePickerTriggerRef.current) {
                                                             const dialogContent = templatePickerTriggerRef.current.closest('[data-slot="dialog-content"]');
                                                             setTemplatePickerPortalContainer(dialogContent);
                                                         }
                                                         setTemplatePickerOpen(nextOpen);
-                                                    }, enableIframeClickDetection: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { ref: templatePickerTriggerRef, variant: "default", size: "iconSm", className: "h-7 w-7 rounded-md shadow-sm", title: "Add inherited template", "aria-label": "Add inherited template", children: _jsx(Plus, { className: "h-4 w-4" }) }) }), _jsxs(PopoverContent, { className: "w-[420px] p-0", side: "top", align: "start", container: templatePickerPortalContainer, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "border-b border-gray-100 px-3 py-2", children: [_jsx("div", { className: "text-xs font-semibold text-gray-700", children: "Select template" }), _jsx("div", { className: "text-xs text-gray-500", children: "Choose a template to add to inherited templates." })] }), _jsx("div", { className: "h-[320px] overflow-hidden rounded-b-md bg-white", children: _jsx(TreeListSelector, { language: activeLanguage, rootItemIds: [TEMPLATES_ROOT_ID], selectedItemIds: selectedTemplateNodesInTree.map((x) => x.id), onSelectionChange: (nodes) => {
+                                                    }, enableIframeClickDetection: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { ref: templatePickerTriggerRef, variant: "default", size: "iconSm", className: "h-7 w-7 rounded-md shadow-sm", title: "Add inherited template", "aria-label": "Add inherited template", children: _jsx(Plus, { className: "h-4 w-4" }) }) }), _jsxs(PopoverContent, { className: "w-[420px] p-0", side: "top", align: "start", container: templatePickerPortalContainer, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "border-border-default border-b px-3 py-2", children: [_jsx("div", { className: "text-neutral-grey-100 text-xs font-semibold", children: "Select template" }), _jsx("div", { className: "text-neutral-grey-50 text-xs", children: "Choose a template to add to inherited templates." })] }), _jsx("div", { className: "h-[320px] overflow-hidden rounded-b-md bg-white", children: _jsx(TreeListSelector, { language: activeLanguage, rootItemIds: [TEMPLATES_ROOT_ID], selectedItemIds: selectedTemplateNodesInTree.map((x) => x.id), onSelectionChange: (nodes) => {
                                                                             const selected = nodes
                                                                                 .filter((n) => normalizeGuid(n.templateId) ===
                                                                                 normalizeGuid(TEMPLATE_TEMPLATE_ID))
@@ -1495,7 +1537,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                             }));
                                                                             setSelectedTemplateNodesInTree(selected);
                                                                         }, onDoubleClick: (node) => {
-                                                                            if (normalizeGuid(node.templateId) === normalizeGuid(TEMPLATE_TEMPLATE_ID)) {
+                                                                            if (normalizeGuid(node.templateId) ===
+                                                                                normalizeGuid(TEMPLATE_TEMPLATE_ID)) {
                                                                                 addBaseTemplates([
                                                                                     {
                                                                                         id: node.id,
@@ -1514,7 +1557,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                                 version: 0,
                                                                             });
                                                                             if (sel &&
-                                                                                normalizeGuid(sel.templateId) === normalizeGuid(TEMPLATE_TEMPLATE_ID)) {
+                                                                                normalizeGuid(sel.templateId) ===
+                                                                                    normalizeGuid(TEMPLATE_TEMPLATE_ID)) {
                                                                                 addBaseTemplates([
                                                                                     {
                                                                                         id: sel.id,
@@ -1526,7 +1570,7 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                                 ]);
                                                                                 setTemplatePickerOpen(false);
                                                                             }
-                                                                        } }) })] })] }) })] })] }) }) }), _jsxs("div", { className: "flex flex-col overflow-y-auto bg-white", children: [_jsx("div", { className: "border-b border-gray-100 bg-gray-50/30 px-3 py-2", children: _jsx(FilterInput, { value: fieldSearchQuery, onChange: setFieldSearchQuery, placeholder: "Search fields or sections...", size: "sm" }) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [sections.map((sectionItem, si_idx) => {
+                                                                        } }) })] })] }) })] })] }) }) }), _jsxs("div", { className: "flex flex-col overflow-y-auto bg-white", children: [_jsx("div", { className: "border-border-default bg-neutral-grey-5/30 border-b px-3 py-2", children: _jsx(FilterInput, { value: fieldSearchQuery, onChange: setFieldSearchQuery, placeholder: "Search fields or sections...", size: "sm" }) }), _jsxs("div", { className: "flex-1 overflow-y-auto", children: [sections.map((sectionItem, si_idx) => {
                                         const isSectionDragging = draggedSectionIdx === si_idx;
                                         const isSectionDragOver = dragOverSectionIdx === si_idx;
                                         const sectionSuggestions = getSectionSuggestions(sectionItem.localId);
@@ -1536,11 +1580,13 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                             .map((fld, fi_idx) => ({ fld, fi_idx }))
                                             .filter(({ fld }) => fieldMatchesSearch(fld));
                                         const hasSearchMatch = sectionMatches || matchingFields.length > 0;
-                                        const isCollapsed = isSearching ? !hasSearchMatch : !!collapsedSections[si_idx];
+                                        const isCollapsed = isSearching
+                                            ? !hasSearchMatch
+                                            : !!collapsedSections[si_idx];
                                         const visibleFields = isSearching && sectionMatches
                                             ? sectionItem.fields.map((fld, fi_idx) => ({ fld, fi_idx }))
                                             : matchingFields;
-                                        return (_jsxs("div", { className: "border-b border-gray-100", children: [_jsxs("div", { draggable: !isSearching, onDragStart: (e) => {
+                                        return (_jsxs("div", { className: "border-border-default border-b", children: [_jsxs("div", { draggable: !isSearching, onDragStart: (e) => {
                                                         if (isSearching)
                                                             return;
                                                         setDraggedSectionIdx(si_idx);
@@ -1574,7 +1620,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                             setDragOverFieldRef(null);
                                                             return;
                                                         }
-                                                        if (draggedSectionIdx !== null && draggedSectionIdx !== si_idx) {
+                                                        if (draggedSectionIdx !== null &&
+                                                            draggedSectionIdx !== si_idx) {
                                                             moveSection(draggedSectionIdx, si_idx);
                                                         }
                                                         setDraggedSectionIdx(null);
@@ -1582,36 +1629,39 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                         setIsDragOverSectionEnd(false);
                                                     }, className: `group flex items-center gap-2 px-3 py-2 transition ${isSectionDragOver && draggedSectionIdx !== null
                                                         ? draggedSectionIdx < si_idx
-                                                            ? "border-b-2 border-blue-500"
-                                                            : "border-t-2 border-blue-500"
-                                                        : ""} ${isSectionDragging ? "opacity-40" : ""} ${sectionSuggestions.length > 0 ? "bg-violet-50/70" : ""}`, onClick: () => {
+                                                            ? "border-feedback-blue border-b-2"
+                                                            : "border-feedback-blue border-t-2"
+                                                        : ""} ${isSectionDragging ? "opacity-40" : ""} ${sectionSuggestions.length > 0 ? "bg-highlight-10/70" : ""}`, onClick: () => {
                                                         setSelectedSectionIndex(si_idx);
                                                         setSelectedFieldKey(null);
-                                                    }, children: [_jsx(GripVertical, { className: "h-3.5 w-3.5 cursor-grab text-gray-300 active:cursor-grabbing" }), _jsx("button", { className: "text-gray-400 hover:text-gray-600", onClick: (e) => {
+                                                    }, children: [_jsx(GripVertical, { className: "text-neutral-grey-50 h-3.5 w-3.5 cursor-grab active:cursor-grabbing" }), _jsx("button", { className: "text-neutral-grey-50 hover:text-neutral-grey-50", onClick: (e) => {
                                                                 e.stopPropagation();
                                                                 toggleSectionCollapsed(si_idx);
-                                                            }, children: isCollapsed ? (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) }), _jsx("input", { className: `flex-1 rounded-md border bg-white px-3 py-1.5 text-sm font-semibold shadow-sm outline-none placeholder:text-gray-400 focus:border-blue-400 focus:ring-2 focus:ring-blue-100 ${sectionSuggestions.length > 0
-                                                                ? "border-violet-200 text-violet-900"
-                                                                : "border-gray-200 text-gray-900"}`, value: sectionItem.name || "", placeholder: `Section ${si_idx + 1}`, onChange: (e) => updateSectionName(si_idx, e.target.value), onClick: (e) => e.stopPropagation() }), _jsx("span", { className: "text-xs text-gray-400", children: sectionItem.fields.length }), _jsxs("div", { className: "relative h-5 w-12 shrink-0", children: [_jsx("div", { className: `absolute inset-0 flex items-center justify-center transition-all duration-150 ${sectionDeleteConfirmIdx === si_idx
-                                                                        ? "scale-90 opacity-0 pointer-events-none"
-                                                                        : "scale-100 opacity-100"}`, children: _jsx("button", { className: "text-gray-300 transition hover:text-red-500", onClick: (e) => {
+                                                            }, children: isCollapsed ? (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) }), _jsx("input", { className: `placeholder:text-neutral-grey-50 focus:border-feedback-blue focus:ring-feedback-blue flex-1 rounded-md border bg-white px-3 py-1.5 text-sm font-semibold shadow-sm outline-none focus:ring-2 ${sectionSuggestions.length > 0
+                                                                ? "border-highlight-100 text-highlight-100"
+                                                                : "border-border-default text-neutral-grey-100"}`, value: sectionItem.name || "", placeholder: `Section ${si_idx + 1}`, onChange: (e) => updateSectionName(si_idx, e.target.value), onClick: (e) => e.stopPropagation() }), _jsx("span", { className: "text-neutral-grey-50 text-xs", children: sectionItem.fields.length }), _jsxs("div", { className: "relative h-5 w-12 shrink-0", children: [_jsx("div", { className: `absolute inset-0 flex items-center justify-center transition-all duration-150 ${sectionDeleteConfirmIdx === si_idx
+                                                                        ? "pointer-events-none scale-90 opacity-0"
+                                                                        : "scale-100 opacity-100"}`, children: _jsx("button", { className: "text-neutral-grey-50 hover:text-neutral-grey-50 transition", onClick: (e) => {
                                                                             e.stopPropagation();
                                                                             setSectionDeleteConfirmIdx(si_idx);
-                                                                        }, title: "Delete section", "aria-label": "Delete section", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) }), _jsxs("div", { className: `absolute inset-0 flex items-center justify-center gap-1 transition-all duration-150 ${sectionDeleteConfirmIdx === si_idx
+                                                                        }, title: "Delete section", "aria-label": "Delete section", children: _jsx(DeleteIcon, { size: "md" }) }) }), _jsxs("div", { className: `absolute inset-0 flex items-center justify-center gap-1 transition-all duration-150 ${sectionDeleteConfirmIdx === si_idx
                                                                         ? "scale-100 opacity-100"
-                                                                        : "scale-90 opacity-0 pointer-events-none"}`, children: [_jsx("button", { className: "text-green-600 transition hover:text-green-700", onClick: (e) => {
+                                                                        : "pointer-events-none scale-90 opacity-0"}`, children: [_jsx("button", { className: "text-feedback-green hover:text-feedback-green transition", onClick: (e) => {
                                                                                 e.stopPropagation();
                                                                                 removeSection(si_idx);
                                                                                 setSectionDeleteConfirmIdx(null);
-                                                                            }, title: "Confirm section delete", "aria-label": "Confirm section delete", children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("button", { className: "text-red-500 transition hover:text-red-600", onClick: (e) => {
+                                                                            }, title: "Confirm section delete", "aria-label": "Confirm section delete", children: _jsx(Check, { className: "h-3.5 w-3.5" }) }), _jsx("button", { className: "text-feedback-red hover:text-feedback-red transition", onClick: (e) => {
                                                                                 e.stopPropagation();
                                                                                 setSectionDeleteConfirmIdx(null);
-                                                                            }, title: "Cancel section delete", "aria-label": "Cancel section delete", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] })] }), sectionSuggestions.length > 0 && (_jsx("div", { className: "mx-3 mb-2 rounded border border-violet-200 bg-violet-50 px-3 py-2 text-xs text-violet-800", children: sectionSuggestions.map((entry) => (_jsxs("div", { className: "flex items-center justify-between gap-3 py-1", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [entry.action === "remove"
+                                                                            }, title: "Cancel section delete", "aria-label": "Cancel section delete", children: _jsx(X, { className: "h-3.5 w-3.5" }) })] })] })] }), sectionSuggestions.length > 0 && (_jsx("div", { className: "border-highlight-100 bg-highlight-10 text-highlight-100 mx-3 mb-2 rounded border px-3 py-2 text-xs", children: sectionSuggestions.map((entry) => (_jsxs("div", { className: "flex items-center justify-between gap-3 py-1", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate", children: [entry.action === "remove"
                                                                         ? "AI suggests removing this section"
                                                                         : `AI suggests renaming this section to "${entry.section.name}"`, entry.reason ? ` · ${entry.reason}` : ""] }), renderSuggestionActions(entry)] }, entry.id))) })), !isCollapsed && (_jsxs("div", { className: "pb-2", children: [_jsxs("div", { className: "space-y-1 px-3", children: [visibleFields.map(({ fld, fi_idx }) => {
-                                                                    const isSelected = selectedFieldKey?.si === si_idx && selectedFieldKey?.fi === fi_idx;
-                                                                    const isDragging = draggedFieldRef?.si === si_idx && draggedFieldRef?.fi === fi_idx;
-                                                                    const isDragOver = dragOverFieldRef?.si === si_idx && dragOverFieldRef?.fi === fi_idx;
+                                                                    const isSelected = selectedFieldKey?.si === si_idx &&
+                                                                        selectedFieldKey?.fi === fi_idx;
+                                                                    const isDragging = draggedFieldRef?.si === si_idx &&
+                                                                        draggedFieldRef?.fi === fi_idx;
+                                                                    const isDragOver = dragOverFieldRef?.si === si_idx &&
+                                                                        dragOverFieldRef?.fi === fi_idx;
                                                                     const fieldSuggestions = getFieldSuggestions(fld.localId);
                                                                     const hasFieldRemovalSuggestion = fieldSuggestions.some((entry) => entry.action === "remove");
                                                                     const fieldUpdateSuggestion = fieldSuggestions.find((entry) => entry.action === "update");
@@ -1632,7 +1682,8 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                             e.preventDefault();
                                                                             if (!draggedFieldRef)
                                                                                 return;
-                                                                            const isOwnRow = draggedFieldRef.si === si_idx && draggedFieldRef.fi === fi_idx;
+                                                                            const isOwnRow = draggedFieldRef.si === si_idx &&
+                                                                                draggedFieldRef.fi === fi_idx;
                                                                             if (isOwnRow) {
                                                                                 setDragOverFieldRef(null);
                                                                                 setDragOverFieldEndSectionIdx(null);
@@ -1645,30 +1696,36 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                                 return;
                                                                             e.preventDefault();
                                                                             if (draggedFieldRef &&
-                                                                                (draggedFieldRef.si !== si_idx || draggedFieldRef.fi !== fi_idx)) {
+                                                                                (draggedFieldRef.si !== si_idx ||
+                                                                                    draggedFieldRef.fi !== fi_idx)) {
                                                                                 moveFieldToSection(draggedFieldRef.si, draggedFieldRef.fi, si_idx, fi_idx);
                                                                             }
                                                                             setDraggedFieldRef(null);
                                                                             setDragOverFieldRef(null);
                                                                             setDragOverFieldEndSectionIdx(null);
                                                                         }, className: `ml-8 flex cursor-pointer items-center gap-3 rounded px-3 py-2 transition ${isSelected
-                                                                            ? "bg-blue-50/70 ring-1 ring-inset ring-blue-200"
-                                                                            : "hover:bg-gray-50"} ${isDragging ? "bg-gray-100 opacity-30" : ""} ${isDragOver && draggedFieldRef
-                                                                            ? draggedFieldRef.si === si_idx && draggedFieldRef.fi < fi_idx
-                                                                                ? "shadow-[inset_0_-2px_0_0_#3b82f6]"
-                                                                                : "shadow-[inset_0_2px_0_0_#3b82f6]"
-                                                                            : ""} ${fieldSuggestions.length > 0 ? "bg-violet-50/60 ring-1 ring-violet-200" : ""} ${hasFieldRemovalSuggestion ? "opacity-80" : ""}`, onClick: () => setSelectedFieldKey({ si: si_idx, fi: fi_idx }), children: [_jsx(GripVertical, { className: "h-3.5 w-3.5 cursor-grab text-gray-300 active:cursor-grabbing" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: `text-sm font-semibold ${fieldSuggestions.length > 0
-                                                                                            ? "text-violet-800"
+                                                                            ? "bg-feedback-blue-light/70 ring-feedback-blue ring-1 ring-inset"
+                                                                            : "hover:bg-neutral-grey-5"} ${isDragging ? "bg-neutral-grey-5 opacity-30" : ""} ${isDragOver && draggedFieldRef
+                                                                            ? draggedFieldRef.si === si_idx &&
+                                                                                draggedFieldRef.fi < fi_idx
+                                                                                ? "shadow-[inset_0_-2px_0_0_var(--color-component-default)]"
+                                                                                : "shadow-[inset_0_2px_0_0_var(--color-component-default)]"
+                                                                            : ""} ${fieldSuggestions.length > 0 ? "bg-highlight-10/60 ring-highlight-100 ring-1" : ""} ${hasFieldRemovalSuggestion ? "opacity-80" : ""}`, onClick: () => setSelectedFieldKey({ si: si_idx, fi: fi_idx }), children: [_jsx(GripVertical, { className: "text-neutral-grey-50 h-3.5 w-3.5 cursor-grab active:cursor-grabbing" }), _jsxs("div", { className: "flex-1", children: [_jsx("div", { className: `text-sm font-semibold ${fieldSuggestions.length > 0
+                                                                                            ? "text-highlight-100"
                                                                                             : isSelected
-                                                                                                ? "text-blue-700"
-                                                                                                : "text-gray-700"} ${hasFieldRemovalSuggestion ? "line-through" : ""}`, children: fieldUpdateSuggestion?.field.name ||
-                                                                                            fld.name || (_jsx("span", { className: "font-normal italic text-gray-400", children: "Unnamed" })) }), _jsxs("div", { className: "text-xs text-gray-500", children: [fld.type, fld.source ? ` · ${fld.source}` : ""] }), fieldSuggestions.map((entry) => (_jsxs("div", { className: "mt-1 flex items-center justify-between gap-2 text-xs text-violet-700", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.action === "remove"
+                                                                                                ? "text-feedback-blue"
+                                                                                                : "text-neutral-grey-100"} ${hasFieldRemovalSuggestion ? "line-through" : ""}`, children: fieldUpdateSuggestion?.field.name ||
+                                                                                            fld.name || (_jsx("span", { className: "text-neutral-grey-50 font-normal italic", children: "Unnamed" })) }), _jsxs("div", { className: "text-neutral-grey-50 text-xs", children: [fld.type, fld.source ? ` · ${fld.source}` : ""] }), fieldSuggestions.map((entry) => (_jsxs("div", { className: "text-highlight-100 mt-1 flex items-center justify-between gap-2 text-xs", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: entry.action === "remove"
                                                                                                     ? "AI suggests removing this field"
-                                                                                                    : `AI suggests updating this field${entry.reason ? ` · ${entry.reason}` : ""}` }), renderSuggestionActions(entry)] }, entry.id)))] }), _jsxs("div", { className: "flex items-center gap-2", children: [fld.shared && _jsx("span", { className: "rounded border border-blue-100 bg-blue-50 px-1.5 py-0.5 text-xs font-bold text-blue-600", children: "S" }), fld.unversioned && _jsx("span", { className: "rounded border border-amber-100 bg-amber-50 px-1.5 py-0.5 text-xs font-bold text-amber-600", children: "U" })] }), _jsx("button", { className: "text-gray-300 transition hover:text-red-500", onClick: (e) => { e.stopPropagation(); removeField(si_idx, fi_idx); }, children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }, fld.localId));
-                                                                }), visibleFields.length === 0 && normalizedFieldSearchQuery ? (_jsx("div", { className: "ml-8 px-3 py-2 text-xs text-gray-400 italic", children: "No matching fields" })) : null] }), !isSearching &&
-                                                            pendingFieldAdditions.map((entry) => (_jsx("div", { className: "mt-2 mr-3 ml-11 rounded border border-dashed border-violet-300 bg-violet-50 px-3 py-2 text-xs text-violet-800", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-semibold", children: entry.field.name || "Suggested field" }), _jsxs("div", { className: "truncate text-xs text-violet-600", children: [entry.field.type, entry.reason ? ` · ${entry.reason}` : ""] })] }), renderSuggestionActions(entry)] }) }, entry.id))), !isSearching && draggedFieldRef ? (_jsx("div", { className: `mt-2 mr-3 ml-11 rounded border border-dashed px-2 py-1.5 text-xs transition ${dragOverFieldEndSectionIdx === si_idx
-                                                                ? "border-blue-300 bg-blue-50 text-blue-600"
-                                                                : "border-gray-200 bg-white text-gray-400"}`, onDragOver: (e) => {
+                                                                                                    : `AI suggests updating this field${entry.reason ? ` · ${entry.reason}` : ""}` }), renderSuggestionActions(entry)] }, entry.id)))] }), _jsxs("div", { className: "flex items-center gap-2", children: [fld.shared && (_jsx("span", { className: "border-feedback-blue bg-feedback-blue-light badge-pad-sm text-feedback-blue rounded border text-xs font-bold", children: "S" })), fld.unversioned && (_jsx("span", { className: "border-feedback-orange bg-feedback-orange-light badge-pad-sm text-feedback-orange rounded border text-xs font-bold", children: "U" }))] }), _jsx("button", { className: "text-neutral-grey-50 hover:text-neutral-grey-50 transition", onClick: (e) => {
+                                                                                    e.stopPropagation();
+                                                                                    removeField(si_idx, fi_idx);
+                                                                                }, children: _jsx(DeleteIcon, { size: "md" }) })] }, fld.localId));
+                                                                }), visibleFields.length === 0 &&
+                                                                    normalizedFieldSearchQuery ? (_jsx("div", { className: "text-neutral-grey-50 ml-8 px-3 py-2 text-xs italic", children: "No matching fields" })) : null] }), !isSearching &&
+                                                            pendingFieldAdditions.map((entry) => (_jsx("div", { className: "border-highlight-100 bg-highlight-10 text-highlight-100 mt-2 mr-3 ml-11 rounded border border-dashed px-3 py-2 text-xs", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate font-semibold", children: entry.field.name || "Suggested field" }), _jsxs("div", { className: "text-highlight-100 truncate text-xs", children: [entry.field.type, entry.reason ? ` · ${entry.reason}` : ""] })] }), renderSuggestionActions(entry)] }) }, entry.id))), !isSearching && draggedFieldRef ? (_jsx("div", { className: `mt-2 mr-3 ml-11 rounded border border-dashed px-2 py-1.5 text-xs transition ${dragOverFieldEndSectionIdx === si_idx
+                                                                ? "border-feedback-blue bg-feedback-blue-light text-feedback-blue"
+                                                                : "border-border-default text-neutral-grey-50 bg-white"}`, onDragOver: (e) => {
                                                                 e.preventDefault();
                                                                 setDragOverFieldRef(null);
                                                                 setDragOverFieldEndSectionIdx(si_idx);
@@ -1678,12 +1735,16 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                                                 setDraggedFieldRef(null);
                                                                 setDragOverFieldRef(null);
                                                                 setDragOverFieldEndSectionIdx(null);
-                                                            }, children: "Drop field here to place at end" })) : !isSearching ? (_jsxs("div", { className: "mt-2 mr-3 ml-11 flex items-center gap-2", children: [_jsx("input", { ref: (el) => { newFieldNameInputRefs.current[si_idx] = el; }, className: "flex-1 rounded border border-gray-200 bg-white px-2 py-1.5 text-sm text-gray-800 outline-none placeholder:text-gray-400 focus:border-blue-400", placeholder: "Add field...", value: getFieldDraft(si_idx).name, onChange: (e) => updateFieldDraft(si_idx, { name: e.target.value }), onKeyDown: (e) => { if (e.key === "Enter")
-                                                                        appendFieldToSection(si_idx); } }), _jsx("button", { className: "rounded bg-theme-secondary p-1.5 text-white transition hover:bg-theme-secondary/90 shadow-sm", onClick: () => appendFieldToSection(si_idx), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })) : null] }))] }, sectionItem.localId));
+                                                            }, children: "Drop field here to place at end" })) : !isSearching ? (_jsxs("div", { className: "mt-2 mr-3 ml-11 flex items-center gap-2", children: [_jsx("input", { ref: (el) => {
+                                                                        newFieldNameInputRefs.current[si_idx] = el;
+                                                                    }, className: "border-border-default text-neutral-grey-100 placeholder:text-neutral-grey-50 focus:border-feedback-blue flex-1 rounded border bg-white px-2 py-1.5 text-sm outline-none", placeholder: "Add field...", value: getFieldDraft(si_idx).name, onChange: (e) => updateFieldDraft(si_idx, { name: e.target.value }), onKeyDown: (e) => {
+                                                                        if (e.key === "Enter")
+                                                                            appendFieldToSection(si_idx);
+                                                                    } }), _jsx("button", { className: "bg-highlight-100 hover:bg-highlight-100/90 rounded p-1.5 text-white shadow-sm transition", onClick: () => appendFieldToSection(si_idx), children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })) : null] }))] }, sectionItem.localId));
                                     }), !isSearching &&
-                                        pendingSectionAdditions.map((entry) => (_jsx("div", { className: "mx-3 mt-2 rounded border border-dashed border-violet-300 bg-violet-50 px-3 py-3 text-violet-900", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold", children: entry.section.name || "Suggested section" }), _jsxs("div", { className: "text-xs text-violet-700", children: ["AI section suggestion", entry.reason ? ` · ${entry.reason}` : ""] }), entry.section.fields.length > 0 && (_jsx("div", { className: "mt-2 space-y-1", children: entry.section.fields.map((field) => (_jsxs("div", { className: "rounded border border-violet-200 bg-white/70 px-2 py-1 text-xs text-violet-700", children: [field.name || "Suggested field", " \u00B7 ", field.type] }, field.localId))) }))] }), renderSuggestionActions(entry)] }) }, entry.id))), !isSearching && draggedSectionIdx !== null ? (_jsx("div", { className: `mx-3 mt-2 mb-3 rounded border border-dashed px-2 py-1.5 text-xs transition ${isDragOverSectionEnd
-                                            ? "border-blue-300 bg-blue-50 text-blue-600"
-                                            : "border-gray-200 bg-white text-gray-400"}`, onDragOver: (e) => {
+                                        pendingSectionAdditions.map((entry) => (_jsx("div", { className: "border-highlight-100 bg-highlight-10 text-highlight-100 mx-3 mt-2 rounded border border-dashed px-3 py-3", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-sm font-semibold", children: entry.section.name || "Suggested section" }), _jsxs("div", { className: "text-highlight-100 text-xs", children: ["AI section suggestion", entry.reason ? ` · ${entry.reason}` : ""] }), entry.section.fields.length > 0 && (_jsx("div", { className: "mt-2 space-y-1", children: entry.section.fields.map((field) => (_jsxs("div", { className: "border-highlight-100 badge-pad text-highlight-100 rounded border bg-white/70 text-xs", children: [field.name || "Suggested field", " \u00B7", " ", field.type] }, field.localId))) }))] }), renderSuggestionActions(entry)] }) }, entry.id))), !isSearching && draggedSectionIdx !== null ? (_jsx("div", { className: `mx-3 mt-2 mb-3 rounded border border-dashed px-2 py-1.5 text-xs transition ${isDragOverSectionEnd
+                                            ? "border-feedback-blue bg-feedback-blue-light text-feedback-blue"
+                                            : "border-border-default text-neutral-grey-50 bg-white"}`, onDragOver: (e) => {
                                             e.preventDefault();
                                             setDragOverSectionIdx(sections.length > 0 ? sections.length - 1 : null);
                                             setIsDragOverSectionEnd(true);
@@ -1695,7 +1756,12 @@ export function TemplateStructureInlineEditor({ item, parentItem, initialName, i
                                             setDraggedSectionIdx(null);
                                             setDragOverSectionIdx(null);
                                             setIsDragOverSectionEnd(false);
-                                        }, children: "Drop section here to place at end" })) : !isSearching ? (_jsxs("div", { className: "mx-3 mt-2 mb-3 flex items-center gap-2", children: [_jsx("input", { className: "flex-1 rounded border border-gray-200 bg-white px-2 py-1 text-sm text-gray-800 outline-none placeholder:text-gray-400 focus:border-blue-400", placeholder: "New section...", value: newSectionName, onChange: (e) => setNewSectionName(e.target.value), onKeyDown: (e) => { if (e.key === "Enter")
-                                                    appendSection(); } }), _jsx("button", { className: "rounded bg-theme-secondary p-1 text-white transition hover:bg-theme-secondary/90 shadow-sm", onClick: appendSection, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })) : null] })] }), _jsxs("div", { className: "flex flex-col overflow-y-auto border-l border-gray-100 bg-gray-50/20", children: [_jsx("div", { className: "border-b border-gray-100 px-4 py-2 bg-gray-50/30", children: _jsxs("div", { className: "flex items-center gap-2 text-xs font-bold text-gray-500 uppercase tracking-wider", children: [_jsx(Settings2, { className: "h-3.5 w-3.5" }), " Properties"] }) }), field && section && si !== undefined && fi !== undefined ? (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Name" }), _jsx("input", { className: cls.input, value: field.name, onChange: (e) => updateField(si, fi, { name: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Type" }), renderTypeSelect(field.type, (v) => updateField(si, fi, { type: v }))] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Source" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.source, onChange: (e) => updateField(si, fi, { source: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Short description" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.shortDescription, onChange: (e) => updateField(si, fi, { shortDescription: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-1 text-xs font-bold uppercase tracking-wider text-gray-400", children: "Default value" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.defaultValue, onChange: (e) => updateField(si, fi, { defaultValue: e.target.value }) })] }), _jsxs("div", { className: "space-y-3 border-t border-gray-100 pt-3", children: [_jsxs("label", { className: "flex items-center justify-between text-xs text-gray-600 font-medium", children: [_jsx("span", { children: "Shared" }), renderToggle(field.shared, () => updateField(si, fi, { shared: !field.shared }))] }), _jsxs("label", { className: "flex items-center justify-between text-xs text-gray-600 font-medium", children: [_jsx("span", { children: "Unversioned" }), renderToggle(field.unversioned, () => updateField(si, fi, { unversioned: !field.unversioned }))] })] }), _jsxs("button", { className: "mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border border-red-200 bg-red-50 py-2 text-xs font-semibold text-red-600 transition hover:bg-red-100", onClick: () => { removeField(si, fi); setSelectedFieldKey(null); }, children: [_jsx(Trash2, { className: "h-3.5 w-3.5" }), " Remove field"] })] })) : (_jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-2 p-6 text-gray-300", children: [_jsx(Settings2, { className: "h-8 w-8" }), _jsx("p", { className: "text-xs font-medium", children: "Select a field to inspect" })] }))] }), _jsx("div", { className: "flex min-h-0 flex-col border-l border-gray-100 bg-white", children: canUseAi ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-b border-gray-100 bg-gray-50/30 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-gray-500", children: [_jsx(Bot, { className: "h-3.5 w-3.5" }), " Template Builder AI"] }) }), _jsxs("div", { className: "border-b border-gray-100 px-4 py-3", children: [latestSuggestionSummary && (_jsxs("div", { className: "rounded border border-violet-200 bg-violet-50 px-3 py-2 text-xs text-violet-800", children: [_jsx("span", { className: "font-semibold", children: "Latest suggestion:" }), " ", latestSuggestionSummary] })), suggestionStatus && (_jsx("div", { className: "mt-2 text-xs text-gray-500", children: suggestionStatus })), suggestionParseError && (_jsxs("div", { className: "mt-2 rounded border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700", children: ["Failed to parse AI response: ", suggestionParseError] })), pendingSuggestions.length > 0 && (_jsxs("div", { className: "mt-2 text-xs text-gray-600", children: [pendingSuggestions.length, " pending suggestion", pendingSuggestions.length === 1 ? "" : "s", " highlighted in purple."] }))] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(AgentTerminal, { agentStub: templateBuilderAgent, profiles: effectiveAiProfiles, compact: true, simpleMode: true, hideContext: true, defaultCollapseJson: true, initialMetadata: templateBuilderAgentMetadata, onMessage: handleAgentMessage, className: "h-full" }) })] })) : (_jsx("div", { className: "flex h-full items-center justify-center p-6 text-center text-sm text-gray-500", children: "Template Builder AI is unavailable with the current license." })) })] }), renderFooter()] }));
+                                        }, children: "Drop section here to place at end" })) : !isSearching ? (_jsxs("div", { className: "mx-3 mt-2 mb-3 flex items-center gap-2", children: [_jsx("input", { className: "border-border-default badge-pad text-neutral-grey-100 placeholder:text-neutral-grey-50 focus:border-feedback-blue flex-1 rounded border bg-white text-sm outline-none", placeholder: "New section...", value: newSectionName, onChange: (e) => setNewSectionName(e.target.value), onKeyDown: (e) => {
+                                                    if (e.key === "Enter")
+                                                        appendSection();
+                                                } }), _jsx("button", { className: "bg-highlight-100 hover:bg-highlight-100/90 rounded p-1 text-white shadow-sm transition", onClick: appendSection, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })) : null] })] }), _jsxs("div", { className: "border-border-default bg-neutral-grey-5/20 flex flex-col overflow-y-auto border-l", children: [_jsx("div", { className: "border-border-default bg-neutral-grey-5/30 border-b px-4 py-2", children: _jsxs("div", { className: "text-neutral-grey-50 flex items-center gap-2 text-xs font-bold tracking-wider", children: [_jsx(Settings2, { className: "h-3.5 w-3.5" }), " Properties"] }) }), field && section && si !== undefined && fi !== undefined ? (_jsxs("div", { className: "space-y-4 p-4", children: [_jsxs("div", { children: [_jsx("div", { className: "text-neutral-grey-50 mb-1 text-xs font-bold tracking-wider", children: "Name" }), _jsx("input", { className: cls.input, value: field.name, onChange: (e) => updateField(si, fi, { name: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-neutral-grey-50 mb-1 text-xs font-bold tracking-wider", children: "Type" }), renderTypeSelect(field.type, (v) => updateField(si, fi, { type: v }))] }), _jsxs("div", { children: [_jsx("div", { className: "text-neutral-grey-50 mb-1 text-xs font-bold tracking-wider", children: "Source" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.source, onChange: (e) => updateField(si, fi, { source: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-neutral-grey-50 mb-1 text-xs font-bold tracking-wider", children: "Short description" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.shortDescription, onChange: (e) => updateField(si, fi, { shortDescription: e.target.value }) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-neutral-grey-50 mb-1 text-xs font-bold tracking-wider", children: "Default value" }), _jsx("input", { className: cls.input, placeholder: "Optional", value: field.defaultValue, onChange: (e) => updateField(si, fi, { defaultValue: e.target.value }) })] }), _jsxs("div", { className: "border-border-default space-y-3 border-t pt-3", children: [_jsxs("label", { className: "text-neutral-grey-50 flex items-center justify-between text-xs font-medium", children: [_jsx("span", { children: "Shared" }), renderToggle(field.shared, () => updateField(si, fi, { shared: !field.shared }))] }), _jsxs("label", { className: "text-neutral-grey-50 flex items-center justify-between text-xs font-medium", children: [_jsx("span", { children: "Unversioned" }), renderToggle(field.unversioned, () => updateField(si, fi, { unversioned: !field.unversioned }))] })] }), _jsxs("button", { className: "border-border-default bg-neutral-grey-5 text-neutral-grey-50 hover:bg-neutral-grey-5 mt-2 flex w-full items-center justify-center gap-1.5 rounded-md border py-2 text-xs font-semibold transition", onClick: () => {
+                                            removeField(si, fi);
+                                            setSelectedFieldKey(null);
+                                        }, children: [_jsx(DeleteIcon, { size: "md" }), " Remove field"] })] })) : (_jsxs("div", { className: "text-neutral-grey-50 flex flex-1 flex-col items-center justify-center gap-2 p-6", children: [_jsx(Settings2, { className: "h-8 w-8" }), _jsx("p", { className: "text-xs font-medium", children: "Select a field to inspect" })] }))] }), _jsx("div", { className: "border-border-default flex min-h-0 flex-col border-l bg-white", children: canUseAi ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "border-border-default bg-neutral-grey-5/30 border-b px-4 py-2", children: _jsxs("div", { className: "text-neutral-grey-50 flex items-center gap-2 text-xs font-bold tracking-wider", children: [_jsx(Bot, { className: "h-3.5 w-3.5" }), " Template Builder AI"] }) }), _jsxs("div", { className: "border-border-default border-b px-4 py-3", children: [latestSuggestionSummary && (_jsxs("div", { className: "border-highlight-100 bg-highlight-10 text-highlight-100 rounded border px-3 py-2 text-xs", children: [_jsx("span", { className: "font-semibold", children: "Latest suggestion:" }), " ", latestSuggestionSummary] })), suggestionStatus && (_jsx("div", { className: "text-neutral-grey-50 mt-2 text-xs", children: suggestionStatus })), suggestionParseError && (_jsxs("div", { className: "border-feedback-red bg-feedback-red-light text-feedback-red mt-2 rounded border px-3 py-2 text-xs", children: ["Failed to parse AI response: ", suggestionParseError] })), pendingSuggestions.length > 0 && (_jsxs("div", { className: "text-neutral-grey-50 mt-2 text-xs", children: [pendingSuggestions.length, " pending suggestion", pendingSuggestions.length === 1 ? "" : "s", " highlighted in purple."] }))] }), _jsx("div", { className: "min-h-0 flex-1", children: _jsx(AgentTerminal, { agentStub: templateBuilderAgent, profiles: effectiveAiProfiles, compact: true, simpleMode: true, hideContext: true, defaultCollapseJson: true, initialMetadata: templateBuilderAgentMetadata, onMessage: handleAgentMessage, className: "h-full" }) })] })) : (_jsx("div", { className: "text-neutral-grey-50 flex h-full items-center justify-center p-6 text-center text-sm", children: "Template Builder AI is unavailable with the current license." })) })] }), renderFooter()] }));
 }
 //# sourceMappingURL=TemplateStructureInlineEditor.js.map