@treenity/mods 3.0.1 → 3.0.2

package/brahman/views/chat-editor.tsx

@@ -21,11 +21,16 @@ import {
 import { CSS } from '@dnd-kit/utilities';
 import type { NodeData } from '@treenity/core';
 import { getDefaults } from '@treenity/core/comp';
+import { Button } from '@treenity/react/components/ui/button';
+import { Checkbox } from '@treenity/react/components/ui/checkbox';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@treenity/react/components/ui/dialog';
+import { Input } from '@treenity/react/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@treenity/react/components/ui/select';
 import { set, useChildren, usePath } from '@treenity/react/hooks';
+import { sanitizeHref } from '@treenity/react/lib/sanitize-href';
 import { trpc } from '@treenity/react/trpc';
-import { Camera, File, GripVertical, Mic, MoreHorizontal, Plus, Trash2, Video, X } from 'lucide-react';
+import { Camera, File, GripVertical, Mic, MoreHorizontal, Plus, Trash2, Video } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { ACTION_TYPES, MENU_TYPES, type MenuButton, type MenuRow, type MenuType, type TString } from '../types';
 import { actionIcon, actionSummary } from './action-cards';
 import { TStringLineInput, tstringPreview } from './tstring-input';
@@ -97,7 +102,8 @@ function sanitizeHtml(html: string): string {
     if (!ALLOWED_TAGS.has(tag)) return inner;
     if (tag === 'a') {
       const href = el.getAttribute('href');
-      return href ? `<a href="${href}">${inner}</a>` : inner;
+      const safe = href ? sanitizeHref(href) : null;
+      return safe ? `<a href="${safe}">${inner}</a>` : inner;
     }
     return `<${tag}>${inner}</${tag}>`;
   }
@@ -144,6 +150,7 @@ function EditableText({
 }
 
 // ── Bubble shells ──
+// NOTE: These use hardcoded Telegram dark-theme colors intentionally to emulate the TG chat UI
 
 function BotBubble({ children, first, tools }: { children: React.ReactNode; first?: boolean; tools?: React.ReactNode }) {
   return (
@@ -187,9 +194,9 @@ function SystemPill({ children, onClick }: { children: React.ReactNode; onClick?
   );
 }
 
-// ── Settings popover ──
+// ── Settings dialog ──
 
-function SettingsPopover({
+function SettingsDialog({
   node,
   onUpdate,
   onDelete,
@@ -202,65 +209,60 @@ function SettingsPopover({
 }) {
   const type = node.$type;
 
-  return createPortal(
-    <div className="fixed inset-0 z-50" onClick={onClose}>
-      <div
-        className="absolute bg-[#1c2733] border border-[#2b3945] rounded-lg shadow-xl p-3 space-y-2 w-64"
-        style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between mb-1">
-          <span className="text-xs font-medium text-[#e1e3e6]">
+  return (
+    <Dialog open onOpenChange={open => { if (!open) onClose(); }}>
+      <DialogContent className="sm:max-w-xs">
+        <DialogHeader>
+          <DialogTitle className="text-sm">
             {ACTION_TYPES.find(a => a.type === type)?.label ?? type.split('.').at(-1)}
-          </span>
-          <button type="button" onClick={onClose} className="text-[#6c7883] hover:text-[#e1e3e6]">
-            <X className="h-3.5 w-3.5" />
-          </button>
-        </div>
-
-        {/* Type-specific settings */}
-        {type === 'brahman.action.message' && (
-          <>
-            <SettingSelect label="Menu" value={(node.menuType as string) ?? 'none'}
-              options={MENU_TYPES.map(m => ({ value: m.value, label: m.label }))}
-              onChange={v => onUpdate({ menuType: v })} />
-            <SettingCheckbox label="Disable links" checked={!!node.disableLinks}
-              onChange={v => onUpdate({ disableLinks: v })} />
-          </>
-        )}
-
-        {type === 'brahman.action.question' && (
-          <>
-            <SettingSelect label="Input type" value={(node.inputType as string) ?? 'text'}
-              options={[{ value: 'text', label: 'Text' }, { value: 'photo', label: 'Photo' }]}
-              onChange={v => onUpdate({ inputType: v })} />
-            <SettingInput label="Save to" value={(node.saveTo as string) ?? ''}
-              placeholder="session.field" onChange={v => onUpdate({ saveTo: v })} />
-          </>
-        )}
-
-        {type === 'brahman.action.file' && (
-          <SettingSelect label="Send as" value={(node.asType as string) ?? ''}
-            options={[
-              { value: '', label: 'Auto' }, { value: 'photo', label: 'Photo' },
-              { value: 'document', label: 'Document' }, { value: 'video', label: 'Video' },
-              { value: 'audio', label: 'Audio' }, { value: 'voice', label: 'Voice' },
-            ]}
-            onChange={v => onUpdate({ asType: v })} />
-        )}
-
-        <div className="pt-1 border-t border-[#2b3945]">
-          <button
-            type="button"
-            onClick={onDelete}
-            className="flex items-center gap-1.5 text-xs text-red-400 hover:text-red-300 py-1"
-          >
-            <Trash2 className="h-3 w-3" /> Delete action
-          </button>
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-2">
+          {/* Type-specific settings */}
+          {type === 'brahman.action.message' && (
+            <>
+              <SettingSelect label="Menu" value={(node.menuType as string) ?? 'none'}
+                options={MENU_TYPES.map(m => ({ value: m.value, label: m.label }))}
+                onChange={v => onUpdate({ menuType: v })} />
+              <SettingCheckbox label="Disable links" checked={!!node.disableLinks}
+                onChange={v => onUpdate({ disableLinks: v })} />
+            </>
+          )}
+
+          {type === 'brahman.action.question' && (
+            <>
+              <SettingSelect label="Input type" value={(node.inputType as string) ?? 'text'}
+                options={[{ value: 'text', label: 'Text' }, { value: 'photo', label: 'Photo' }]}
+                onChange={v => onUpdate({ inputType: v })} />
+              <SettingInput label="Save to" value={(node.saveTo as string) ?? ''}
+                placeholder="session.field" onChange={v => onUpdate({ saveTo: v })} />
+            </>
+          )}
+
+          {type === 'brahman.action.file' && (
+            <SettingSelect label="Send as" value={(node.asType as string) ?? ''}
+              options={[
+                { value: '', label: 'Auto' }, { value: 'photo', label: 'Photo' },
+                { value: 'document', label: 'Document' }, { value: 'video', label: 'Video' },
+                { value: 'audio', label: 'Audio' }, { value: 'voice', label: 'Voice' },
+              ]}
+              onChange={v => onUpdate({ asType: v })} />
+          )}
+
+          <div className="pt-1 border-t border-border">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onDelete}
+              className="text-destructive hover:text-destructive p-0 h-auto text-xs"
+            >
+              <Trash2 className="h-3 w-3 mr-1" /> Delete action
+            </Button>
+          </div>
         </div>
-      </div>
-    </div>,
-    document.body,
+      </DialogContent>
+    </Dialog>
   );
 }
 
@@ -269,13 +271,15 @@ function SettingSelect({ label, value, options, onChange }: {
 }) {
   return (
     <div className="flex items-center justify-between gap-2">
-      <span className="text-[11px] text-[#6c7883]">{label}</span>
-      <select
-        className="bg-[#0e1621] border border-[#2b3945] rounded text-xs text-[#e1e3e6] px-2 py-1"
-        value={value} onChange={e => onChange(e.target.value)}
-      >
-        {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
-      </select>
+      <span className="text-[11px] text-muted-foreground">{label}</span>
+      <Select value={value} onValueChange={onChange}>
+        <SelectTrigger size="sm" className="w-auto">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {options.map(o => <SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>)}
+        </SelectContent>
+      </Select>
     </div>
   );
 }
@@ -285,9 +289,8 @@ function SettingCheckbox({ label, checked, onChange }: {
 }) {
   return (
     <label className="flex items-center justify-between gap-2 cursor-pointer">
-      <span className="text-[11px] text-[#6c7883]">{label}</span>
-      <input type="checkbox" checked={checked} onChange={e => onChange(e.target.checked)}
-        className="rounded border-[#2b3945]" />
+      <span className="text-[11px] text-muted-foreground">{label}</span>
+      <Checkbox checked={checked} onChange={e => onChange(e.target.checked)} />
     </label>
   );
 }
@@ -297,9 +300,9 @@ function SettingInput({ label, value, placeholder, onChange }: {
 }) {
   return (
     <div className="flex items-center justify-between gap-2">
-      <span className="text-[11px] text-[#6c7883] shrink-0">{label}</span>
-      <input
-        className="bg-[#0e1621] border border-[#2b3945] rounded text-xs text-[#e1e3e6] px-2 py-1 w-32 font-mono"
+      <span className="text-[11px] text-muted-foreground shrink-0">{label}</span>
+      <Input
+        className="w-32 h-7 text-xs font-mono"
         value={value} placeholder={placeholder} onChange={e => onChange(e.target.value)}
       />
     </div>
@@ -387,9 +390,9 @@ function EditableButtons({
         + row
       </button>
 
-      {/* Button edit modal */}
+      {/* Button edit dialog */}
       {editBtn && rows[editBtn.ri]?.buttons[editBtn.bi] && (
-        <ButtonEditPopover
+        <ButtonEditDialog
           button={rows[editBtn.ri].buttons[editBtn.bi]}
           onSave={btn => updateButton(editBtn.ri, editBtn.bi, btn)}
           onDelete={() => deleteButton(editBtn.ri, editBtn.bi)}
@@ -400,7 +403,7 @@ function EditableButtons({
   );
 }
 
-function ButtonEditPopover({
+function ButtonEditDialog({
   button,
   onSave,
   onDelete,
@@ -413,54 +416,46 @@ function ButtonEditPopover({
 }) {
   const [draft, setDraft] = useState(() => ({ ...button }));
 
-  return createPortal(
-    <div className="fixed inset-0 z-50" onClick={onClose}>
-      <div
-        className="absolute bg-[#1c2733] border border-[#2b3945] rounded-lg shadow-xl p-3 space-y-2 w-72"
-        style={{ top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div className="flex items-center justify-between mb-1">
-          <span className="text-xs font-medium text-[#e1e3e6]">Edit button</span>
-          <button type="button" onClick={onClose} className="text-[#6c7883] hover:text-[#e1e3e6]">
-            <X className="h-3.5 w-3.5" />
-          </button>
-        </div>
-
-        <div>
-          <span className="text-[11px] text-[#6c7883]">Title</span>
-          <TStringLineInput
-            value={draft.title}
-            onChange={title => setDraft(d => ({ ...d, title }))}
-            langs={['ru', 'en']}
-          />
-        </div>
+  return (
+    <Dialog open onOpenChange={open => { if (!open) onClose(); }}>
+      <DialogContent className="sm:max-w-xs">
+        <DialogHeader>
+          <DialogTitle className="text-sm">Edit button</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-2">
+          <div>
+            <span className="text-[11px] text-muted-foreground">Title</span>
+            <TStringLineInput
+              value={draft.title}
+              onChange={title => setDraft(d => ({ ...d, title }))}
+              langs={['ru', 'en']}
+            />
+          </div>
 
-        <div className="flex items-center gap-2">
-          <span className="text-[11px] text-[#6c7883] shrink-0">URL</span>
-          <input
-            className="flex-1 bg-[#0e1621] border border-[#2b3945] rounded text-xs text-[#e1e3e6] px-2 py-1"
-            placeholder="https://..."
-            value={draft.url ?? ''}
-            onChange={e => setDraft(d => ({ ...d, url: e.target.value || undefined }))}
-          />
+          <div className="flex items-center gap-2">
+            <span className="text-[11px] text-muted-foreground shrink-0">URL</span>
+            <Input
+              className="flex-1 h-7 text-xs"
+              placeholder="https://..."
+              value={draft.url ?? ''}
+              onChange={e => setDraft(d => ({ ...d, url: e.target.value || undefined }))}
+            />
+          </div>
         </div>
 
-        <div className="flex justify-between pt-1 border-t border-[#2b3945]">
-          <button type="button" onClick={onDelete}
-            className="text-xs text-red-400 hover:text-red-300 flex items-center gap-1">
-            <Trash2 className="h-3 w-3" /> Delete
-          </button>
+        <DialogFooter>
+          <Button variant="ghost" size="sm" onClick={onDelete}
+            className="text-destructive hover:text-destructive text-xs">
+            <Trash2 className="h-3 w-3 mr-1" /> Delete
+          </Button>
           <div className="flex gap-1">
-            <button type="button" onClick={onClose}
-              className="text-xs text-[#6c7883] hover:text-[#e1e3e6] px-2 py-1">Cancel</button>
-            <button type="button" onClick={() => { onSave(draft); onClose(); }}
-              className="text-xs bg-[#2b5278] text-[#e1e3e6] px-3 py-1 rounded hover:bg-[#3d6a99]">Save</button>
+            <Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
+            <Button size="sm" onClick={() => { onSave(draft); onClose(); }}>Save</Button>
           </div>
-        </div>
-      </div>
-    </div>,
-    document.body,
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
 
@@ -614,7 +609,7 @@ function SortableAction({
       {dragHandle}
       {content}
       {showSettings && (
-        <SettingsPopover
+        <SettingsDialog
           node={n}
           onUpdate={update}
           onDelete={onDelete}
@@ -644,12 +639,12 @@ function ChatActionPalette({ onSelect }: { onSelect: (type: string) => void }) {
 
         {open && (
           <div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-1 z-50 w-52
-            bg-[#1c2733] border border-[#2b3945] rounded-lg shadow-xl py-1 max-h-64 overflow-y-auto">
+            bg-popover border border-border rounded-lg shadow-xl py-1 max-h-64 overflow-y-auto">
             {ACTION_TYPES.map(at => (
               <button
                 key={at.type}
                 type="button"
-                className="w-full text-left px-3 py-1.5 text-xs text-[#e1e3e6] hover:bg-[#2b3945] flex items-center gap-2"
+                className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent flex items-center gap-2"
                 onClick={() => { onSelect(at.type); setOpen(false); }}
               >
                 {actionIcon(at.type)}

package/brahman/views/menu-editor.tsx

@@ -15,41 +15,15 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 import { CSS } from '@dnd-kit/utilities';
 import { Badge } from '@treenity/react/components/ui/badge';
 import { Button } from '@treenity/react/components/ui/button';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@treenity/react/components/ui/dialog';
 import { Input } from '@treenity/react/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@treenity/react/components/ui/select';
 import { trpc } from '@treenity/react/trpc';
 import { ArrowRight, Plus, X } from 'lucide-react';
 import { useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import { ACTION_TYPES, MENU_TYPES, type MenuButton, type MenuRow, type MenuType, type TString } from '../types';
 import { TStringLineInput, tstringPreview } from './tstring-input';
 
-// ── Modal (lightweight, no radix dependency) ──
-
-function Modal({ open, onClose, title, children }: {
-  open: boolean;
-  onClose: () => void;
-  title: string;
-  children: React.ReactNode;
-}) {
-  if (!open) return null;
-
-  return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
-      <div className="relative bg-background border border-border rounded-lg shadow-lg w-full max-w-md mx-4">
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-          <h3 className="text-sm font-semibold">{title}</h3>
-          <button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground">
-            <X className="h-4 w-4" />
-          </button>
-        </div>
-        <div className="p-4 space-y-4">{children}</div>
-      </div>
-    </div>,
-    document.body,
-  );
-}
-
 // ── Tag editor (for button tags) ──
 
 function TagEditor({ tags, onChange }: { tags: string[]; onChange: (tags: string[]) => void }) {
@@ -107,56 +81,66 @@ function ButtonEditModal({
   }
 
   return (
-    <Modal open title="Edit Button" onClose={onClose}>
-      <div className="space-y-3">
-        <div>
-          <label className="text-xs font-medium text-muted-foreground">Title</label>
-          <TStringLineInput value={draft.title} onChange={t => update('title', t)} langs={langs} />
-        </div>
-
-        <div>
-          <label className="text-xs font-medium text-muted-foreground">URL (optional)</label>
-          <Input className="h-8 text-sm" placeholder="https://..."
-            value={draft.url ?? ''} onChange={e => update('url', e.target.value || undefined)} />
-        </div>
-
-        <div>
-          <label className="text-xs font-medium text-muted-foreground">Tags</label>
-          <TagEditor tags={draft.tags ?? []} onChange={t => update('tags', t)} />
+    <Dialog open onOpenChange={open => { if (!open) onClose(); }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Edit Button</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3">
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">Title</label>
+            <TStringLineInput value={draft.title} onChange={t => update('title', t)} langs={langs} />
+          </div>
+
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">URL (optional)</label>
+            <Input className="h-8 text-sm" placeholder="https://..."
+              value={draft.url ?? ''} onChange={e => update('url', e.target.value || undefined)} />
+          </div>
+
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">Tags</label>
+            <TagEditor tags={draft.tags ?? []} onChange={t => update('tags', t)} />
+          </div>
+
+          <div>
+            <label className="text-xs font-medium text-muted-foreground">Button action</label>
+            <Select
+              value={draft.action?.type ?? ''}
+              onValueChange={v => {
+                if (!v) { update('action', undefined); return; }
+                update('action', { type: v });
+              }}
+            >
+              <SelectTrigger size="sm" className="w-full">
+                <SelectValue placeholder="No action" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="">No action</SelectItem>
+                {ACTION_TYPES.map(at => (
+                  <SelectItem key={at.type} value={at.type}>{at.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+
+            {draft.action?.type === 'brahman.action.page' && (
+              <Input className="h-8 text-sm mt-1" placeholder="Target page path"
+                value={(draft.action.target as string) ?? ''}
+                onChange={e => update('action', { ...draft.action!, target: e.target.value })} />
+            )}
+          </div>
         </div>
 
-        <div>
-          <label className="text-xs font-medium text-muted-foreground">Button action</label>
-          <select
-            className="w-full h-8 text-sm border border-border rounded-md bg-background px-2"
-            value={draft.action?.type ?? ''}
-            onChange={e => {
-              if (!e.target.value) { update('action', undefined); return; }
-              update('action', { type: e.target.value });
-            }}
-          >
-            <option value="">No action</option>
-            {ACTION_TYPES.map(at => (
-              <option key={at.type} value={at.type}>{at.label}</option>
-            ))}
-          </select>
-
-          {draft.action?.type === 'brahman.action.page' && (
-            <Input className="h-8 text-sm mt-1" placeholder="Target page path"
-              value={(draft.action.target as string) ?? ''}
-              onChange={e => update('action', { ...draft.action!, target: e.target.value })} />
-          )}
-        </div>
-      </div>
-
-      <div className="flex justify-between pt-2">
-        <Button variant="destructive" size="sm" onClick={onDelete}>Delete</Button>
-        <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
-          <Button size="sm" onClick={() => { onSave(draft); onClose(); }}>Save</Button>
-        </div>
-      </div>
-    </Modal>
+        <DialogFooter>
+          <Button variant="destructive" size="sm" onClick={onDelete}>Delete</Button>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
+            <Button size="sm" onClick={() => { onSave(draft); onClose(); }}>Save</Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }
 
@@ -354,15 +338,16 @@ export function MenuEditor({ menuType = 'none', rows = [], langs, onChangeType,
       {/* Menu type selector */}
       <div className="flex items-center gap-3">
         <label className="text-xs font-medium text-muted-foreground w-20">Menu type</label>
-        <select
-          className="flex-1 h-8 text-sm border border-border rounded-md bg-background px-2"
-          value={menuType}
-          onChange={e => onChangeType(e.target.value as MenuType)}
-        >
-          {MENU_TYPES.map(mt => (
-            <option key={mt.value} value={mt.value}>{mt.label}</option>
-          ))}
-        </select>
+        <Select value={menuType} onValueChange={v => onChangeType(v as MenuType)}>
+          <SelectTrigger size="sm" className="flex-1">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {MENU_TYPES.map(mt => (
+              <SelectItem key={mt.value} value={mt.value}>{mt.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       </div>
 
       {/* Rows & buttons grid */}
@@ -409,14 +394,15 @@ export function MenuEditor({ menuType = 'none', rows = [], langs, onChangeType,
                     </div>
                   </SortableContext>
 
-                  <button
-                    type="button"
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="p-1 h-auto"
                     onClick={() => addButton(ri)}
-                    className="p-1 text-muted-foreground hover:text-foreground"
                     title="Add button to row"
                   >
                     <Plus className="h-3.5 w-3.5" />
-                  </button>
+                  </Button>
                 </div>
               </div>
             ))}

package/brahman/views/page-layout.tsx

@@ -112,22 +112,24 @@ function SortableAction({
           )}
         </div>
 
-        <button
-          type="button"
+        <Button
+          variant="ghost"
+          size="sm"
+          className="p-0 h-auto text-[10px] text-muted-foreground opacity-0 group-hover:opacity-100"
           onClick={e => { e.stopPropagation(); onSelect(); }}
-          className="text-muted-foreground hover:text-foreground text-[10px] opacity-0 group-hover:opacity-100"
           title="Select in tree"
         >
           &#8599;
-        </button>
+        </Button>
 
-        <button
-          type="button"
+        <Button
+          variant="ghost"
+          size="sm"
+          className="p-0 h-auto opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive"
           onClick={e => { e.stopPropagation(); onRemove(); }}
-          className="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-destructive transition-opacity"
         >
           <Trash2 className="h-3.5 w-3.5" />
-        </button>
+        </Button>
       </div>
 
       {/* Inline editor */}