// Right-side panels: Properties, Layers, Brand Kit, AI Assist, History.

// ============ LAYERS PANEL ============
const LAYERS = [
  { id: 'schedule',    name: 'Critical Dates · Table',   type: 'group',  depth: 0, visible: true, locked: false, children: [
    { id: 'sch-head',  name: 'Table Header',              type: 'rect',   depth: 1, visible: true, locked: false },
    { id: 'sch-row-1', name: 'Row · Publication',         type: 'group',  depth: 1, visible: true, locked: false },
    { id: 'sch-row-2', name: 'Row · Pre-Bid',             type: 'group',  depth: 1, visible: true, locked: false },
    { id: 'sch-row-3', name: 'Row · Submission',          type: 'group',  depth: 1, visible: true, locked: false },
    { id: 'sch-row-4', name: 'Row · Opening',             type: 'group',  depth: 1, visible: true, locked: false },
  ]},
  { id: 'body',        name: 'Notice Body · Bilingual',   type: 'text',   depth: 0, visible: true, locked: false },
  { id: 'notice-head', name: 'Notice Header · Title',     type: 'text',   depth: 0, visible: true, locked: false },
  { id: 'rule',        name: 'Rule · Double',             type: 'shape',  depth: 0, visible: true, locked: true  },
  { id: 'emblem',      name: 'Emblem · Ashoka',           type: 'symbol', depth: 0, visible: true, locked: true  },
  { id: 'emd',         name: 'Value Blocks · Grid',       type: 'group',  depth: 0, visible: true, locked: false },
  { id: 'footer',      name: 'Signature Block',           type: 'group',  depth: 0, visible: true, locked: false },
  { id: 'guides',      name: '· margins · guides',        type: 'guide',  depth: 0, visible: false, locked: true },
];

function LayersPanel({ selectedId, onSelect }) {
  const [expanded, setExpanded] = React.useState({ schedule: true });
  const rows = [];
  LAYERS.forEach((l) => {
    rows.push(l);
    if (l.children && expanded[l.id]) {
      l.children.forEach((c) => rows.push(c));
    }
  });

  return (
    <div>
      <PanelSection title="Page 01 · Cover" defaultOpen right={
        <Row gap={2}>
          <IconBtn icon={<I.plus size={11}/>} size={20} />
          <IconBtn icon={<I.trash size={11}/>} size={20} />
        </Row>
      }>
        <div style={{ margin: '0 -12px' }}>
          {rows.map((l) => {
            const isSel = selectedId === l.id;
            const hasChildren = LAYERS.find(x => x.id === l.id)?.children;
            return (
              <div
                key={l.id}
                onClick={() => onSelect(l.id)}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 6,
                  padding: '4px 12px',
                  paddingLeft: 12 + l.depth * 14,
                  background: isSel ? 'var(--bg-panel-2)' : 'transparent',
                  borderLeft: isSel ? '2px solid var(--gold)' : '2px solid transparent',
                  cursor: 'pointer',
                  fontSize: 11.5,
                }}
                onMouseEnter={(e) => { if (!isSel) e.currentTarget.style.background = 'rgba(0,0,0,0.02)'; }}
                onMouseLeave={(e) => { if (!isSel) e.currentTarget.style.background = 'transparent'; }}
              >
                {hasChildren ? (
                  <button onClick={(e) => { e.stopPropagation(); setExpanded({ ...expanded, [l.id]: !expanded[l.id] }); }} style={{ padding: 0, background: 'none', border: 'none', display: 'flex', color: 'var(--ink-muted)' }}>
                    <span style={{ display: 'inline-flex', transform: expanded[l.id] ? 'rotate(90deg)' : 'none', transition: 'transform 100ms' }}>
                      <I.chevronRight size={9}/>
                    </span>
                  </button>
                ) : <span style={{ width: 9 }}/>}
                <span style={{ color: 'var(--ink-subtle)', display: 'inline-flex' }}>
                  {l.type === 'group'  && <I.folder size={11}/>}
                  {l.type === 'text'   && <I.text size={11}/>}
                  {l.type === 'shape'  && <I.square size={11}/>}
                  {l.type === 'symbol' && <I.mark size={11}/>}
                  {l.type === 'rect'   && <I.frame size={11}/>}
                  {l.type === 'guide'  && <I.grid size={11}/>}
                </span>
                <span style={{ flex: 1, color: l.visible ? 'var(--ink)' : 'var(--ink-subtle)', textDecoration: l.visible ? 'none' : 'line-through' }}>
                  {l.name}
                </span>
                <span style={{ color: l.visible ? 'var(--ink-muted)' : 'var(--ink-subtle)' }}>
                  {l.visible ? <I.eye size={11}/> : <I.eyeOff size={11}/>}
                </span>
                <span style={{ color: l.locked ? 'var(--ink-muted)' : 'transparent' }}>
                  <I.lock size={11}/>
                </span>
              </div>
            );
          })}
        </div>
      </PanelSection>

      <PanelSection title="Pages · 04" defaultOpen={false}>
        <Col gap={4}>
          {[1,2,3,4].map((n) => (
            <Row key={n} justify="space-between" style={{ padding: '4px 0', fontSize: 11.5 }}>
              <Row gap={8}><Badge tone="neutral">{String(n).padStart(2, '0')}</Badge> Page {n}</Row>
              <span className="mono" style={{ color: 'var(--ink-subtle)', fontSize: 10 }}>A4</span>
            </Row>
          ))}
        </Col>
      </PanelSection>
    </div>
  );
}

// ============ PROPERTIES PANEL ============
function PropertiesPanel({ selectedId }) {
  const info = getSelectionInfo(selectedId);
  return (
    <div>
      <PanelSection title="Transform">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 8 }}>
          <Row gap={4}><span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)', width: 10 }}>X</span><NumInput value={info.x} unit="mm" width="100%"/></Row>
          <Row gap={4}><span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)', width: 10 }}>Y</span><NumInput value={info.y} unit="mm" width="100%"/></Row>
          <Row gap={4}><span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)', width: 10 }}>W</span><NumInput value={info.w} unit="mm" width="100%"/></Row>
          <Row gap={4}><span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)', width: 10 }}>H</span><NumInput value={info.h} unit="mm" width="100%"/></Row>
        </div>
        <Row gap={4}>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)' }}>ANGLE</span>
          <NumInput value={0} unit="°" width={70}/>
          <div style={{ flex: 1 }}/>
          <IconBtn icon={<I.link size={12}/>} title="Constrain proportions" size={22}/>
        </Row>
      </PanelSection>

      <PanelSection title="Appearance">
        <Field label="Fill">
          <Swatch color="#0A1F3D" active/>
          <Swatch color="#A67C1F"/>
          <Swatch color="#FFFFFF"/>
          <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-muted)' }}>#0A1F3D</span>
          <div style={{ flex: 1 }}/>
          <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-muted)' }}>100%</span>
        </Field>
        <div style={{ height: 6 }}/>
        <Field label="Stroke">
          <Swatch color="transparent" style={{ backgroundImage: 'linear-gradient(45deg, transparent 45%, var(--status-err) 45%, var(--status-err) 55%, transparent 55%)' }}/>
          <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-subtle)' }}>None</span>
          <div style={{ flex: 1 }}/>
          <NumInput value={0} unit="pt" width={64}/>
        </Field>
        <div style={{ height: 6 }}/>
        <Field label="Effects">
          <Btn size="sm" variant="ghost" icon={<I.plus size={10}/>}>Shadow</Btn>
          <Btn size="sm" variant="ghost" icon={<I.plus size={10}/>}>Blur</Btn>
        </Field>
      </PanelSection>

      {info.hasText && (
        <PanelSection title="Typography">
          <Col gap={6}>
            <select style={selectStyle}>
              <option>Fraunces · Serif</option>
              <option>Noto Sans Devanagari</option>
              <option>Inter</option>
              <option>JetBrains Mono</option>
            </select>
            <Row gap={4}>
              <select style={{ ...selectStyle, flex: 1 }}>
                <option>Semibold</option><option>Regular</option><option>Medium</option><option>Bold</option>
              </select>
              <NumInput value={26} unit="pt" width={64}/>
            </Row>
            <Row gap={4}>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)', width: 14 }}>A↕</span>
              <NumInput value={30} unit="pt" width={64}/>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)', width: 14 }}>A↔</span>
              <NumInput value={-10} unit="" width={64}/>
            </Row>
            <Row gap={2}>
              <IconBtn icon={<I.align_l size={13}/>} active/>
              <IconBtn icon={<I.align_c size={13}/>}/>
              <IconBtn icon={<I.align_r size={13}/>}/>
              <Divider vertical style={{ height: 16, margin: '0 4px' }}/>
              <IconBtn icon={<I.bold size={13}/>}/>
              <IconBtn icon={<I.italic size={13}/>}/>
              <IconBtn icon={<I.underline size={13}/>}/>
            </Row>
            <div style={{ padding: '6px 8px', background: 'var(--bg-panel-2)', border: '1px solid var(--line)', fontSize: 10.5, color: 'var(--ink-muted)' }}>
              <Row gap={4}><I.info size={11}/><span>OpenType · <span className="mono">liga · dlig · calt · ss01</span></span></Row>
            </div>
          </Col>
        </PanelSection>
      )}

      <PanelSection title="Alignment" defaultOpen={false}>
        <Row gap={2}>
          {[I.align_l, I.align_c, I.align_r].map((Ic, i) => <IconBtn key={i} icon={<Ic size={13}/>}/>)}
          <Divider vertical style={{ height: 16, margin: '0 4px' }}/>
          {[I.align_l, I.align_c, I.align_r].map((Ic, i) => <IconBtn key={'b'+i} icon={<Ic size={13} style={{ transform: 'rotate(90deg)' }}/>}/>)}
        </Row>
      </PanelSection>

      <PanelSection title="Metadata" defaultOpen={false}>
        <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-muted)', lineHeight: 1.8 }}>
          <div>id · {info.id || '—'}</div>
          <div>type · {info.type}</div>
          <div>parent · Page 01</div>
          <div>modified · 14:32:18 IST</div>
          <div>author · A. Rao</div>
        </div>
      </PanelSection>
    </div>
  );
}

function getSelectionInfo(id) {
  const map = {
    'emblem':      { id: 'emblem',      type: 'symbol',        x: 15, y: 15, w: 22, h: 22,  hasText: false },
    'notice-head': { id: 'notice-head', type: 'text · group',  x: 15, y: 45, w: 180, h: 40, hasText: true },
    'body':        { id: 'body',        type: 'text · frame',  x: 15, y: 100, w: 180, h: 60, hasText: true },
    'schedule':    { id: 'schedule',    type: 'group',         x: 15, y: 170, w: 180, h: 45, hasText: false },
    'emd':         { id: 'emd',         type: 'group · grid',  x: 15, y: 225, w: 180, h: 22, hasText: false },
  };
  return map[id] || { id: null, type: 'no selection', x: 0, y: 0, w: 0, h: 0, hasText: false };
}

const selectStyle = {
  width: '100%',
  height: 22,
  padding: '0 6px',
  background: 'var(--bg-elevated)',
  border: '1px solid var(--line-2)',
  borderRadius: 2,
  fontSize: 11.5,
  fontFamily: 'inherit',
  color: 'var(--ink)',
  appearance: 'none',
  backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' stroke='%235C6B85' fill='none' stroke-width='1.25'/></svg>")`,
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'right 6px center',
};

// ============ BRAND KIT PANEL ============
function BrandKitPanel() {
  return (
    <div>
      <div style={{ padding: '10px 12px', borderBottom: '1px solid var(--line)', background: 'var(--bg-panel-2)' }}>
        <select style={selectStyle} defaultValue="mord">
          <option value="mord">Ministry of Rural Development</option>
          <option value="meity">Ministry of Electronics &amp; IT</option>
          <option value="bsnl">Bharat Sanchar Nigam</option>
          <option value="internal">Internal — Design Cell</option>
        </select>
        <Row gap={8} style={{ marginTop: 8 }}>
          <Badge tone="ok"><I.ok size={9}/> Enforced</Badge>
          <span className="mono" style={{ fontSize: 10, color: 'var(--ink-muted)' }}>rev · 04 · 12 Jul 2026</span>
        </Row>
      </div>

      <PanelSection title="Palette · Official">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 4 }}>
          {[
            { c: '#0A1F3D', n: 'Ashoka Ink' },
            { c: '#1E4E8C', n: 'Bharat Blue' },
            { c: '#A67C1F', n: 'Emblem Gold' },
            { c: '#8B2E1F', n: 'Rakta Red' },
            { c: '#2F6B3E', n: 'Kaziranga' },
            { c: '#F5F1E8', n: 'Ivory' },
          ].map((s) => (
            <div key={s.c}>
              <div style={{ width: '100%', aspectRatio: '1', background: s.c, border: '1px solid var(--line-2)' }}/>
              <div className="mono" style={{ fontSize: 8.5, color: 'var(--ink-muted)', marginTop: 2, letterSpacing: 0 }}>{s.c}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 10, padding: 8, background: 'var(--bg-panel-2)', fontSize: 10.5, color: 'var(--ink-muted)' }}>
          <Row gap={6}><I.info size={11}/> CMYK · PMS mappings available for print.</Row>
        </div>
      </PanelSection>

      <PanelSection title="Typography · Approved">
        <Col gap={8}>
          {[
            { fam: 'Fraunces', role: 'Display · Headings', sample: 'Aa 123 गं' },
            { fam: 'Noto Sans Devanagari', role: 'Body · Devanagari', sample: 'क ख ग घ · अ' },
            { fam: 'Inter', role: 'UI · Labels', sample: 'Aa 123' },
            { fam: 'JetBrains Mono', role: 'Metadata · Codes', sample: 'Aa 0123' },
          ].map((t) => (
            <div key={t.fam} style={{ padding: '8px 10px', border: '1px solid var(--line)', background: 'var(--bg-elevated)' }}>
              <Row justify="space-between" align="baseline">
                <div>
                  <div style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 500 }}>{t.fam}</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)' }}>{t.role}</div>
                </div>
                <div style={{
                  fontFamily: t.fam === 'Noto Sans Devanagari' ? "'Noto Sans Devanagari', sans-serif"
                    : t.fam === 'Fraunces' ? "'Fraunces', serif"
                    : t.fam === 'JetBrains Mono' ? "'JetBrains Mono', monospace"
                    : "'Inter', sans-serif",
                  fontSize: 18,
                  color: 'var(--ink)',
                }}>{t.sample}</div>
              </Row>
            </div>
          ))}
        </Col>
      </PanelSection>

      <PanelSection title="Logos · Emblems" defaultOpen={false}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4 }}>
          {['Emblem · Colour','Emblem · Mono','Emblem · Reversed','Ministry Mark','Watermark','Seal · Round'].map((n) => (
            <div key={n} style={{ aspectRatio: '1', background: n.includes('Reversed') ? 'var(--ink)' : 'var(--bg-elevated)', border: '1px solid var(--line-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ color: n.includes('Reversed') ? 'var(--gold-2)' : 'var(--ink)', fontFamily: 'Fraunces', fontSize: 20, fontWeight: 600 }}>च</span>
            </div>
          ))}
        </div>
      </PanelSection>
    </div>
  );
}

// ============ AI ASSIST PANEL ============
function AIAssistPanel() {
  const [prompt, setPrompt] = React.useState('Make the schedule table more scannable — increase row spacing and align dates right.');
  const [loading, setLoading] = React.useState(false);
  const [output, setOutput] = React.useState(null);

  const suggestions = [
    'Convert schedule to a two-column layout',
    'Add bilingual footer with contact details',
    'Improve contrast for accessibility (WCAG AA)',
    'Generate an alternate cover in landscape',
  ];

  const run = async () => {
    if (!prompt.trim()) return;
    setLoading(true);
    setOutput(null);
    try {
      const text = await window.genspark.complete({
        messages: [
          { role: 'user', content: `You are a design assistant inside ChitraKar, an Indian government design platform. A designer is working on a bilingual (English + Hindi/Devanagari) tender notice cover for the Ministry of Rural Development. They ask: "${prompt}". Reply in 3–5 short bullet points with specific, formal design recommendations. Keep tone professional. Use plain text only, no markdown symbols.` },
        ],
      });
      setOutput(text);
    } catch (e) {
      setOutput('Unable to reach AI Studio. Please retry or check network policy.');
    }
    setLoading(false);
  };

  return (
    <div>
      <PanelSection title="AI Studio · Assist" right={<Badge tone="gold">Beta</Badge>}>
        <Col gap={8}>
          <div style={{ position: 'relative' }}>
            <textarea
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              rows={3}
              placeholder="Describe a change or design intent…"
              style={{
                width: '100%',
                background: 'var(--bg-elevated)',
                border: '1px solid var(--line-2)',
                borderRadius: 2,
                padding: '8px 10px',
                fontFamily: 'inherit',
                fontSize: 12,
                color: 'var(--ink)',
                resize: 'vertical',
                outline: 'none',
                lineHeight: 1.5,
              }}
            />
          </div>

          <Row justify="space-between">
            <Row gap={4}>
              <Badge tone="neutral">brand-aware</Badge>
              <Badge tone="neutral">on-prem model</Badge>
            </Row>
            <Btn size="sm" variant="solid" onClick={run} icon={loading ? null : <I.sparkle size={11}/>}>
              {loading ? 'Working…' : 'Run'}
            </Btn>
          </Row>

          {loading && (
            <div className="mono" style={{ fontSize: 10.5, color: 'var(--ink-muted)', padding: '8px 0' }}>
              <span style={{ display: 'inline-block', width: 6, height: 6, background: 'var(--gold)', marginRight: 6, animation: 'pulse 1.2s infinite ease-in-out' }}/>
              Consulting local inference · MoRD brand rules loaded
            </div>
          )}

          {output && (
            <div style={{ padding: '10px 12px', background: 'var(--bg-panel-2)', border: '1px solid var(--gold-soft)', borderLeft: '2px solid var(--gold)', fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.55, whiteSpace: 'pre-wrap' }}>
              {output}
              <Row gap={6} style={{ marginTop: 10, paddingTop: 8, borderTop: '1px dashed var(--line-2)' }}>
                <Btn size="sm" variant="line">Apply</Btn>
                <Btn size="sm" variant="ghost">Refine</Btn>
                <div style={{ flex: 1 }}/>
                <span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)' }}>gen · 1.2s</span>
              </Row>
            </div>
          )}
        </Col>
      </PanelSection>

      <PanelSection title="Suggestions">
        <Col gap={4}>
          {suggestions.map((s) => (
            <button
              key={s}
              onClick={() => setPrompt(s)}
              style={{
                textAlign: 'left',
                padding: '7px 10px',
                background: 'var(--bg-elevated)',
                border: '1px solid var(--line-2)',
                fontSize: 11.5,
                color: 'var(--ink-3)',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                gap: 8,
              }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = 'var(--gold)'}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--line-2)'}
            >
              <span style={{ color: 'var(--gold)' }}><I.sparkle size={11}/></span>
              <span style={{ flex: 1 }}>{s}</span>
              <span style={{ color: 'var(--ink-subtle)' }}><I.arrow size={10}/></span>
            </button>
          ))}
        </Col>
      </PanelSection>

      <PanelSection title="Generate" defaultOpen={false}>
        <Col gap={6}>
          <Btn variant="line" icon={<I.image size={12}/>} style={{ width: '100%', justifyContent: 'flex-start' }}>Text to Image</Btn>
          <Btn variant="line" icon={<I.vector size={12}/>} style={{ width: '100%', justifyContent: 'flex-start' }}>Text to Vector</Btn>
          <Btn variant="line" icon={<I.brand size={12}/>} style={{ width: '100%', justifyContent: 'flex-start' }}>Logo · Emblem</Btn>
          <Btn variant="line" icon={<I.swatch size={12}/>} style={{ width: '100%', justifyContent: 'flex-start' }}>Palette Extractor</Btn>
        </Col>
      </PanelSection>

      <PanelSection title="Checks · Automatic" defaultOpen={false}>
        <Col gap={4}>
          <CheckRow label="Contrast · WCAG AA" state="ok"/>
          <CheckRow label="Bleed · 3 mm all sides" state="ok"/>
          <CheckRow label="Fonts embedded" state="ok"/>
          <CheckRow label="Devanagari shaping" state="ok"/>
          <CheckRow label="Image resolution ≥ 300 dpi" state="warn" note="1 image at 254 dpi"/>
          <CheckRow label="Similarity · copyright" state="ok" note="No matches"/>
        </Col>
      </PanelSection>

      <style>{`@keyframes pulse { 0%,100% { opacity: 0.3 } 50% { opacity: 1 } }`}</style>
    </div>
  );
}

function CheckRow({ label, state, note }) {
  const stateMap = {
    ok:   { icon: <I.ok size={11}/>,   color: 'var(--status-ok)' },
    warn: { icon: <I.warn size={11}/>, color: 'var(--status-warn)' },
    err:  { icon: <I.warn size={11}/>, color: 'var(--status-err)' },
  }[state];
  return (
    <Row justify="space-between" style={{ fontSize: 11.5, padding: '4px 0' }}>
      <Row gap={6}>
        <span style={{ color: stateMap.color }}>{stateMap.icon}</span>
        <span style={{ color: 'var(--ink-3)' }}>{label}</span>
      </Row>
      {note && <span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)' }}>{note}</span>}
    </Row>
  );
}

// ============ HISTORY / COMMENTS PANEL ============
function HistoryPanel() {
  const events = [
    { t: '14:32', who: 'A. Rao',    what: 'Updated critical dates table',   me: true  },
    { t: '14:18', who: 'A. Rao',    what: 'Set body copy · Devanagari',     me: true  },
    { t: '13:50', who: 'S. Iyer',   what: 'Comment · "Right-align dates?"', me: false },
    { t: '13:22', who: 'A. Rao',    what: 'Added schedule table',           me: true  },
    { t: '12:47', who: 'M. Nair',   what: 'Placed emblem from Brand Kit',   me: false },
    { t: '11:30', who: 'A. Rao',    what: 'Created from Template · Tender', me: true  },
    { t: 'Yday',  who: 'System',    what: 'Version snapshot · v0.4',        me: false },
  ];
  return (
    <div>
      <PanelSection title="Activity · Today">
        <Col gap={0} style={{ margin: '0 -4px' }}>
          {events.map((e, i) => (
            <Row key={i} gap={10} align="flex-start" style={{ padding: '8px 4px', borderBottom: i < events.length - 1 ? '1px solid var(--line)' : 'none' }}>
              <span className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)', width: 32, flexShrink: 0, marginTop: 2 }}>{e.t}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{e.what}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-subtle)', marginTop: 2 }}>{e.who}{e.me ? ' · you' : ''}</div>
              </div>
            </Row>
          ))}
        </Col>
      </PanelSection>
    </div>
  );
}

Object.assign(window, { LayersPanel, PropertiesPanel, BrandKitPanel, AIAssistPanel, HistoryPanel });