@treenity/mods 3.0.1

package/doc/text.ts

@@ -0,0 +1,20 @@
+import { register } from '@treenity/core';
+import { type TiptapNode, tiptapToMd } from './markdown';
+
+register('doc.page', 'text', (data: unknown) => {
+  const d = data as { title?: string; content?: string };
+  const lines: string[] = [];
+  if (d.title) lines.push(`# ${d.title}`);
+
+  if (d.content) {
+    try {
+      const doc = JSON.parse(d.content) as TiptapNode;
+      const text = tiptapToMd(doc);
+      if (text) lines.push(text);
+    } catch {
+      if (d.content) lines.push(d.content);
+    }
+  }
+
+  return lines.join('\n\n');
+});

package/doc/toolbar.tsx

@@ -0,0 +1,86 @@
+import type { Editor } from '@tiptap/react';
+import {
+  Bold,
+  Code,
+  Code2,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  List,
+  ListOrdered,
+  Minus,
+  Quote,
+} from 'lucide-react';
+
+function Btn({ active, onClick, title, children }: {
+  active?: boolean; onClick: () => void; title: string; children: React.ReactNode;
+}) {
+  return (
+    <button
+      onMouseDown={(e) => { e.preventDefault(); onClick(); }}
+      title={title}
+      className={`flex items-center justify-center w-7 h-7 rounded transition-colors ${
+        active
+          ? 'bg-[var(--accent-color)] text-white'
+          : 'text-[var(--text-2)] hover:text-[var(--text)] hover:bg-[var(--surface-3)]'
+      }`}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Sep() {
+  return <span className="w-px h-4 bg-[var(--border)] mx-1 flex-shrink-0" />;
+}
+
+export function Toolbar({ editor }: { editor: Editor }) {
+  const sz = 14;
+  return (
+    <div className="doc-toolbar flex items-center flex-wrap gap-0.5 px-1 py-1 mb-2 border-b border-[var(--border)]">
+      <Btn active={editor.isActive('bold')} onClick={() => editor.chain().focus().toggleBold().run()} title="Bold (⌘B)">
+        <Bold size={sz} />
+      </Btn>
+      <Btn active={editor.isActive('italic')} onClick={() => editor.chain().focus().toggleItalic().run()} title="Italic (⌘I)">
+        <Italic size={sz} />
+      </Btn>
+      <Btn active={editor.isActive('code')} onClick={() => editor.chain().focus().toggleCode().run()} title="Inline code">
+        <Code size={sz} />
+      </Btn>
+
+      <Sep />
+
+      <Btn active={editor.isActive('heading', { level: 1 })} onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} title="Heading 1">
+        <Heading1 size={sz} />
+      </Btn>
+      <Btn active={editor.isActive('heading', { level: 2 })} onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} title="Heading 2">
+        <Heading2 size={sz} />
+      </Btn>
+      <Btn active={editor.isActive('heading', { level: 3 })} onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} title="Heading 3">
+        <Heading3 size={sz} />
+      </Btn>
+
+      <Sep />
+
+      <Btn active={editor.isActive('bulletList')} onClick={() => editor.chain().focus().toggleBulletList().run()} title="Bullet list">
+        <List size={sz} />
+      </Btn>
+      <Btn active={editor.isActive('orderedList')} onClick={() => editor.chain().focus().toggleOrderedList().run()} title="Ordered list">
+        <ListOrdered size={sz} />
+      </Btn>
+      <Btn active={editor.isActive('blockquote')} onClick={() => editor.chain().focus().toggleBlockquote().run()} title="Quote">
+        <Quote size={sz} />
+      </Btn>
+      <Btn active={editor.isActive('codeBlock')} onClick={() => editor.chain().focus().toggleCodeBlock().run()} title="Code block">
+        <Code2 size={sz} />
+      </Btn>
+
+      <Sep />
+
+      <Btn onClick={() => editor.chain().focus().setHorizontalRule().run()} title="Horizontal rule">
+        <Minus size={sz} />
+      </Btn>
+    </div>
+  );
+}

package/doc/treenity-block-view.tsx

@@ -0,0 +1,116 @@
+import { NodeViewWrapper } from '@tiptap/react';
+import { getContextsForType } from '@treenity/core';
+import { getRegistryVersion, subscribeRegistry } from '@treenity/core/core/registry';
+import { Render, RenderContext } from '@treenity/react/context';
+import { usePath } from '@treenity/react/hooks';
+import { useSyncExternalStore } from 'react';
+
+export function TreenityBlockView({ node, updateAttributes, deleteNode, editor }: any) {
+  const ref = node.attrs.ref as string | null;
+  const type = node.attrs.type as string | null;
+  const ctx = (node.attrs.context as string | null) ?? 'react';
+  const refNode = usePath(ref);
+  const editable = editor?.isEditable;
+
+  // Re-check available contexts when registry changes (views load asynchronously)
+  useSyncExternalStore(subscribeRegistry, getRegistryVersion);
+
+  const effectiveType = refNode?.$type ?? type ?? '';
+  const availableContexts = effectiveType
+    ? getContextsForType(effectiveType).filter((c) => c.startsWith('react')).sort()
+    : [];
+
+  const renderContent = () => {
+    if (ref && refNode) {
+      return (
+        <RenderContext name={ctx}>
+          <Render value={refNode} />
+        </RenderContext>
+      );
+    }
+
+    if (ref && !refNode) {
+      return (
+        <div className="text-sm italic p-4" style={{ color: 'var(--text-3)' }}>
+          Loading {ref}…
+        </div>
+      );
+    }
+
+    if (type && node.attrs.props) {
+      return (
+        <RenderContext name={ctx}>
+          <Render value={{ $type: type, ...node.attrs.props }} />
+        </RenderContext>
+      );
+    }
+
+    return (
+      <div className="text-sm italic p-4" style={{ color: 'var(--text-3)' }}>
+        Empty component block
+      </div>
+    );
+  };
+
+  const label = effectiveType || ref?.split('/').at(-1) || '?';
+  const shortLabel = label.includes('.') ? label.slice(label.lastIndexOf('.') + 1) : label;
+  const shortCtx = ctx.startsWith('react:') ? ctx.slice(6) : ctx;
+
+  return (
+    <NodeViewWrapper className="my-2">
+      <div
+        className="relative group"
+        style={{ border: '1px solid var(--border)', borderRadius: 6, overflow: 'hidden', background: 'var(--surface)' }}
+      >
+        {editable && (
+          <div
+            className="absolute top-1 right-1 z-10 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity"
+            contentEditable={false}
+          >
+            {/* type badge */}
+            <span
+              className="text-[10px] px-1.5 py-0.5 rounded font-mono"
+              style={{ background: 'var(--surface-3)', color: 'var(--text-3)' }}
+            >
+              {shortLabel}
+            </span>
+
+            {/* context switcher — only when multiple react* contexts registered */}
+            {availableContexts.length > 1 ? (
+              <select
+                value={ctx}
+                onChange={(e) => updateAttributes({ context: e.target.value })}
+                className="text-[10px] rounded px-1 py-0.5 cursor-pointer"
+                style={{ background: 'var(--surface-3)', color: 'var(--text-2)', border: 'none' }}
+              >
+                {availableContexts.map((c) => (
+                  <option key={c} value={c}>
+                    {c.startsWith('react:') ? c.slice(6) : c}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <span
+                className="text-[10px] px-1.5 py-0.5 rounded font-mono"
+                style={{ background: 'var(--surface-3)', color: 'var(--text-3)' }}
+              >
+                {shortCtx}
+              </span>
+            )}
+
+            {/* delete */}
+            <button
+              onClick={deleteNode}
+              className="text-[12px] px-1.5 py-0.5 rounded leading-none cursor-pointer"
+              style={{ background: 'var(--surface-3)', color: 'var(--text-3)' }}
+            >
+              ×
+            </button>
+          </div>
+        )}
+
+        <div contentEditable={false}>{renderContent()}</div>
+      </div>
+    </NodeViewWrapper>
+  );
+}

package/doc/treenity-block.ts

@@ -0,0 +1,31 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { TreenityBlockView } from './treenity-block-view';
+
+export const TreenityBlock = Node.create({
+  name: 'treenityBlock',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      ref: { default: null },
+      type: { default: null },
+      props: { default: {} },
+      context: { default: 'react' },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'div[data-treenity-block]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-treenity-block': '' })];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(TreenityBlockView);
+  },
+});

package/doc/types.ts

@@ -0,0 +1,10 @@
+import { registerType } from '@treenity/core/comp';
+
+/** Rich document — Tiptap JSON with embedded Treenity components */
+class DocPage {
+  /** @title Title */
+  title = '';
+  /** @title Content @format hidden */
+  content = '';
+}
+registerType('doc.page', DocPage);

package/launcher/client.ts

@@ -0,0 +1,4 @@
+import './icons';
+import './widgets';
+import './view';
+import './launcher.css';

package/launcher/icons.tsx

@@ -0,0 +1,234 @@
+// Launcher icons — react:icon context with iOS-style SVG icons
+
+import { register } from '@treenity/core';
+import type { RenderProps } from '@treenity/react/context';
+import type { FC, ReactNode } from 'react';
+
+// ── Icon shell — rounded rect with gradient + glow ──
+
+function IconShell({ children, g1, g2, glow }: {
+  children: ReactNode; g1: string; g2: string; glow?: string;
+}) {
+  const id = `g-${g1.replace('#', '')}`;
+  return (
+    <svg viewBox="0 0 120 120" className="h-full w-full" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id={id} x1="0" y1="0" x2="0.5" y2="1">
+          <stop offset="0%" stopColor={g1} />
+          <stop offset="100%" stopColor={g2} />
+        </linearGradient>
+        {/* Highlight sheen */}
+        <linearGradient id={`${id}-sheen`} x1="0.5" y1="0" x2="0.5" y2="0.5">
+          <stop offset="0%" stopColor="white" stopOpacity="0.3" />
+          <stop offset="100%" stopColor="white" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      {/* Background */}
+      <rect x="4" y="4" width="112" height="112" rx="26" fill={`url(#${id})`} />
+      {/* Top sheen */}
+      <rect x="4" y="4" width="112" height="56" rx="26" fill={`url(#${id}-sheen)`} />
+      {/* Subtle inner border */}
+      <rect x="4" y="4" width="112" height="112" rx="26" fill="none"
+        stroke="white" strokeOpacity="0.15" strokeWidth="1" />
+      {/* Icon content */}
+      <g fill="white" fillOpacity="0.95">
+        {children}
+      </g>
+    </svg>
+  );
+}
+
+// ── Board (Kanban) ──
+const BoardIcon: FC<RenderProps> = () => (
+  <IconShell g1="#6366f1" g2="#4338ca">
+    {/* 4 cards in 2 columns */}
+    <rect x="28" y="32" width="26" height="20" rx="4" />
+    <rect x="28" y="58" width="26" height="30" rx="4" />
+    <rect x="66" y="32" width="26" height="30" rx="4" />
+    <rect x="66" y="68" width="26" height="20" rx="4" />
+    {/* Column divider */}
+    <rect x="59" y="30" width="2" height="62" rx="1" fillOpacity="0.3" />
+  </IconShell>
+);
+
+// ── Todo (Checklist) ──
+const TodoIcon: FC<RenderProps> = () => (
+  <IconShell g1="#22c55e" g2="#15803d">
+    {/* 3 checkbox rows */}
+    <rect x="30" y="34" width="14" height="14" rx="4" fillOpacity="0.4" />
+    <path d="M34 41 l3 3 l6-6" stroke="white" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+    <rect x="52" y="37" width="36" height="6" rx="3" fillOpacity="0.6" />
+
+    <rect x="30" y="54" width="14" height="14" rx="4" fillOpacity="0.4" />
+    <path d="M34 61 l3 3 l6-6" stroke="white" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+    <rect x="52" y="57" width="28" height="6" rx="3" fillOpacity="0.6" />
+
+    <rect x="30" y="74" width="14" height="14" rx="4" fillOpacity="0.25" />
+    <rect x="52" y="77" width="32" height="6" rx="3" fillOpacity="0.35" />
+  </IconShell>
+);
+
+// ── Contact (Mail) ──
+const ContactIcon: FC<RenderProps> = () => (
+  <IconShell g1="#f59e0b" g2="#d97706">
+    {/* Envelope body */}
+    <rect x="24" y="38" width="72" height="48" rx="8" fillOpacity="0.4" />
+    {/* Envelope flap — V shape */}
+    <path d="M24 42 l36 26 l36-26" fill="none" stroke="white" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round" strokeOpacity="0.9" />
+    {/* Bottom fold */}
+    <path d="M24 86 l24-18 M96 86 l-24-18" fill="none" stroke="white" strokeWidth="2" strokeOpacity="0.3" strokeLinecap="round" />
+  </IconShell>
+);
+
+// ── Docs (Files) ──
+const DocsIcon: FC<RenderProps> = () => (
+  <IconShell g1="#64748b" g2="#334155">
+    {/* Back page */}
+    <rect x="38" y="28" width="48" height="62" rx="6" fillOpacity="0.35" />
+    {/* Front page */}
+    <rect x="30" y="34" width="48" height="62" rx="6" fillOpacity="0.7" />
+    {/* Folded corner */}
+    <path d="M62 34 l16 0 l0 0 l-16 16 z" fillOpacity="0.3" />
+    {/* Text lines */}
+    <rect x="38" y="58" width="30" height="4" rx="2" fillOpacity="0.5" />
+    <rect x="38" y="68" width="24" height="4" rx="2" fillOpacity="0.4" />
+    <rect x="38" y="78" width="28" height="4" rx="2" fillOpacity="0.35" />
+  </IconShell>
+);
+
+// ── System (Gear) ──
+const SystemIcon: FC<RenderProps> = () => (
+  <IconShell g1="#475569" g2="#1e293b">
+    {/* Gear — outer ring with teeth */}
+    <path d="
+      M60 28 l5 0 l2 8 l7 3 l7-5 l4 4 l-5 7 l3 7 l8 2 l0 5 l-8 2 l-3 7 l5 7 l-4 4 l-7-5 l-7 3 l-2 8 l-5 0 l-2-8 l-7-3 l-7 5 l-4-4 l5-7 l-3-7 l-8-2 l0-5 l8-2 l3-7 l-5-7 l4-4 l7 5 l7-3 z
+    " fillOpacity="0.8" fillRule="evenodd" />
+    {/* Inner circle (hole) */}
+    <circle cx="60" cy="60" r="14" fill="#334155" />
+    <circle cx="60" cy="60" r="14" fill="white" fillOpacity="0.15" />
+  </IconShell>
+);
+
+// ── Whisper (Audio Waves) ──
+const WhisperIcon: FC<RenderProps> = () => (
+  <IconShell g1="#8b5cf6" g2="#6d28d9">
+    {/* Sound waveform bars */}
+    <rect x="30" y="50" width="6" height="20" rx="3" fillOpacity="0.6" />
+    <rect x="42" y="38" width="6" height="44" rx="3" fillOpacity="0.8" />
+    <rect x="54" y="30" width="6" height="60" rx="3" />
+    <rect x="66" y="42" width="6" height="36" rx="3" fillOpacity="0.8" />
+    <rect x="78" y="34" width="6" height="52" rx="3" fillOpacity="0.9" />
+    <rect x="90" y="48" width="6" height="24" rx="3" fillOpacity="0.5" />
+    {/* Subtle glow circle */}
+    <circle cx="60" cy="60" r="38" fill="white" fillOpacity="0.05" />
+  </IconShell>
+);
+
+// ── Sim (Network/Agents) ──
+const SimIcon: FC<RenderProps> = () => (
+  <IconShell g1="#06b6d4" g2="#0e7490">
+    {/* 3 connected nodes */}
+    <circle cx="60" cy="38" r="10" fillOpacity="0.9" />
+    <circle cx="38" cy="78" r="10" fillOpacity="0.7" />
+    <circle cx="82" cy="78" r="10" fillOpacity="0.7" />
+    {/* Connecting lines */}
+    <line x1="54" y1="46" x2="42" y2="70" stroke="white" strokeWidth="3" strokeOpacity="0.5" strokeLinecap="round" />
+    <line x1="66" y1="46" x2="78" y2="70" stroke="white" strokeWidth="3" strokeOpacity="0.5" strokeLinecap="round" />
+    <line x1="48" y1="78" x2="72" y2="78" stroke="white" strokeWidth="3" strokeOpacity="0.5" strokeLinecap="round" />
+    {/* Center pulse */}
+    <circle cx="60" cy="60" r="6" fillOpacity="0.4" />
+  </IconShell>
+);
+
+// ── LLM (Brain/AI) ──
+const LlmIcon: FC<RenderProps> = () => (
+  <IconShell g1="#a855f7" g2="#c026d3">
+    {/* Brain left half */}
+    <path d="M58 36 C48 36, 32 40, 32 56 C32 68, 40 78, 50 82 C52 82, 56 80, 58 76"
+      fill="none" stroke="white" strokeWidth="4" strokeLinecap="round" strokeOpacity="0.85" />
+    {/* Brain right half */}
+    <path d="M62 36 C72 36, 88 40, 88 56 C88 68, 80 78, 70 82 C68 82, 64 80, 62 76"
+      fill="none" stroke="white" strokeWidth="4" strokeLinecap="round" strokeOpacity="0.85" />
+    {/* Center line */}
+    <line x1="60" y1="34" x2="60" y2="84" stroke="white" strokeWidth="2" strokeOpacity="0.4" />
+    {/* Neural connection dots */}
+    <circle cx="44" cy="52" r="3" fillOpacity="0.7" />
+    <circle cx="76" cy="52" r="3" fillOpacity="0.7" />
+    <circle cx="48" cy="68" r="3" fillOpacity="0.5" />
+    <circle cx="72" cy="68" r="3" fillOpacity="0.5" />
+    {/* Sparkle top */}
+    <path d="M60 28 l0-4 M56 30 l-2-3 M64 30 l2-3" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeOpacity="0.6" />
+  </IconShell>
+);
+
+// ── Sensor (Thermometer + gauge) ──
+const SensorIcon: FC<RenderProps> = () => (
+  <IconShell g1="#10b981" g2="#047857">
+    {/* Thermometer body */}
+    <rect x="50" y="28" width="12" height="46" rx="6" fillOpacity="0.4" />
+    {/* Mercury */}
+    <rect x="53" y="42" width="6" height="32" rx="3" />
+    {/* Bulb */}
+    <circle cx="56" cy="80" r="12" fillOpacity="0.9" />
+    <circle cx="56" cy="80" r="7" fill="#047857" />
+    <circle cx="56" cy="80" r="7" fill="white" fillOpacity="0.8" />
+    {/* Tick marks */}
+    <rect x="64" y="34" width="10" height="2" rx="1" fillOpacity="0.4" />
+    <rect x="64" y="42" width="14" height="2" rx="1" fillOpacity="0.5" />
+    <rect x="64" y="50" width="10" height="2" rx="1" fillOpacity="0.4" />
+    <rect x="64" y="58" width="14" height="2" rx="1" fillOpacity="0.5" />
+  </IconShell>
+);
+
+// ── Folder ──
+const FolderIcon: FC<RenderProps> = () => (
+  <IconShell g1="#3b82f6" g2="#1d4ed8">
+    {/* Folder tab */}
+    <path d="M28 40 l0-6 a4 4 0 0 1 4-4 l18 0 l6 8 l36 0 a4 4 0 0 1 4 4 l0 0 z" fillOpacity="0.5" />
+    {/* Folder body */}
+    <rect x="28" y="40" width="64" height="48" rx="6" fillOpacity="0.8" />
+    {/* Subtle front face highlight */}
+    <rect x="28" y="52" width="64" height="36" rx="6" fillOpacity="0.15" />
+  </IconShell>
+);
+
+// ── Default fallback — hue from type hash ──
+
+const HUES = [0, 25, 45, 60, 90, 140, 170, 200, 220, 260, 290, 320];
+
+function hashHue(str: string): number {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = ((h << 5) - h + str.charCodeAt(i)) | 0;
+  return HUES[Math.abs(h) % HUES.length];
+}
+
+const DefaultIcon: FC<RenderProps> = ({ value }) => {
+  const hue = hashHue(value.$type);
+  const parts = value.$type.split('.');
+  const letter = (parts.at(-1) || value.$type)[0]?.toUpperCase() || '?';
+  const g1 = `hsl(${hue}, 65%, 55%)`;
+  const g2 = `hsl(${hue}, 70%, 35%)`;
+
+  return (
+    <IconShell g1={g1} g2={g2}>
+      <text x="60" y="68" textAnchor="middle" fontSize="40" fontWeight="700" fontFamily="system-ui"
+        fill="white" fillOpacity="0.9">
+        {letter}
+      </text>
+    </IconShell>
+  );
+};
+
+// ── Register all ──
+
+register('default', 'react:icon', DefaultIcon);
+register('dir', 'react:icon', FolderIcon);
+register('board.kanban', 'react:icon', BoardIcon);
+register('board.task', 'react:icon', BoardIcon);
+register('todo.list', 'react:icon', TodoIcon);
+register('cafe.contact', 'react:icon', ContactIcon);
+register('mount-point', 'react:icon', DocsIcon);
+register('treenity.system', 'react:icon', SystemIcon);
+register('whisper.service', 'react:icon', WhisperIcon);
+register('examples.demo.sensor', 'react:icon', SensorIcon);
+register('t.llm', 'react:icon', LlmIcon);

package/launcher/launcher.css

@@ -0,0 +1,64 @@
+/* Launcher — iPhone home screen styles */
+
+/* Edit mode — scale down + pulsing dashed border */
+@keyframes launcher-pulse {
+  0%, 100% { opacity: 0.15; }
+  50% { opacity: 0.4; }
+}
+
+.launcher-edit-item {
+  scale: 0.98;
+  position: relative;
+}
+
+.launcher-edit-item::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 1rem;
+  border: 1.5px dashed rgba(255, 255, 255, 0.3);
+  pointer-events: none;
+  animation: launcher-pulse 2s ease-in-out infinite;
+}
+
+.launcher-edit-item:nth-child(2n)::after { animation-delay: 0.4s; }
+.launcher-edit-item:nth-child(3n)::after { animation-delay: 0.8s; }
+
+/* Glass-morphism for widgets */
+.launcher-glass {
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+
+/* Override react-grid-layout defaults for launcher */
+.launcher-grid .react-grid-item {
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  overflow: visible !important;
+}
+
+.launcher-grid .react-grid-item.react-draggable-dragging {
+  z-index: 100;
+  transition: none !important;
+  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.4));
+}
+
+.launcher-grid .react-grid-item > .react-resizable-handle {
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.launcher-editing .react-grid-item > .react-resizable-handle {
+  opacity: 0.6;
+}
+
+/* Grid placeholder during drag */
+.launcher-grid .react-grid-placeholder {
+  background: rgba(255, 255, 255, 0.1) !important;
+  border: 2px dashed rgba(255, 255, 255, 0.3) !important;
+  border-radius: 1rem;
+}
+
+/* External drop placeholder */
+.launcher-grid .react-grid-item.dropping {
+  opacity: 0.6;
+}

package/launcher/seed.ts

@@ -0,0 +1,41 @@
+// Launcher seed — demo home screen with app shortcuts
+
+import type { NodeData } from '@treenity/core';
+import { registerPrefab } from '@treenity/core/mod';
+
+const layout = JSON.stringify([
+  { i: 'board', x: 0, y: 0, w: 1, h: 1 },
+  { i: 'todo', x: 1, y: 0, w: 1, h: 1 },
+  { i: 'contact', x: 2, y: 0, w: 1, h: 1 },
+  { i: 'docs', x: 3, y: 0, w: 1, h: 1 },
+  { i: 'sys', x: 0, y: 1, w: 1, h: 1 },
+  { i: 'whisper', x: 1, y: 1, w: 1, h: 1 },
+  { i: 'sim', x: 2, y: 1, w: 1, h: 1 },
+  { i: 'llm', x: 3, y: 1, w: 1, h: 1 },
+  { i: 'board-widget', x: 0, y: 2, w: 2, h: 2 },
+  { i: 'sensors', x: 2, y: 2, w: 2, h: 1 },
+]);
+
+registerPrefab('launcher', 'seed', [
+  {
+    $path: 'launcher',
+    $type: 'launcher',
+    columns: 4,
+    wallpaper: 'linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)',
+    layout,
+  },
+
+  // App icons (1×1)
+  { $path: 'launcher/board', $type: 'ref', $ref: '/board' },
+  { $path: 'launcher/todo', $type: 'ref', $ref: '/todo' },
+  { $path: 'launcher/contact', $type: 'ref', $ref: '/cafe/contact' },
+  { $path: 'launcher/docs', $type: 'ref', $ref: '/docs' },
+  { $path: 'launcher/sys', $type: 'ref', $ref: '/sys' },
+  { $path: 'launcher/whisper', $type: 'ref', $ref: '/whisper' },
+  { $path: 'launcher/sim', $type: 'ref', $ref: '/sim' },
+  { $path: 'launcher/llm', $type: 'ref', $ref: '/llm' },
+
+  // Widgets (larger)
+  { $path: 'launcher/board-widget', $type: 'ref', $ref: '/board' },
+  { $path: 'launcher/sensors', $type: 'ref', $ref: '/demo/sensors' },
+] as NodeData[]);

package/launcher/server.ts

@@ -0,0 +1,2 @@
+import './types';
+import './seed';

package/launcher/types.ts

@@ -0,0 +1,53 @@
+// Launcher — iPhone-like home screen for Treenity
+
+import type { NodeData } from '@treenity/core';
+import { getCtx, registerType } from '@treenity/core/comp';
+
+/** Home screen with icon grid + widgets. Layout via react-grid-layout. */
+export class Launcher {
+  columns = 4;
+  wallpaper = 'linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)';
+  /** JSON-stringified RGL layout: [{i, x, y, w, h}] */
+  layout = '[]';
+
+  /** Add an app shortcut (ref) to the launcher */
+  async addApp(data: { /** Target node path */ path: string; /** Layout item id */ id?: string }) {
+    if (!data.path?.trim()) throw new Error('path required');
+    const ctx = getCtx();
+    const id = data.id || data.path.split('/').at(-1) || Date.now().toString(36);
+    const refPath = `${ctx.node.$path}/${id}`;
+
+    await ctx.store.set({ $path: refPath, $type: 'ref', $ref: data.path } as NodeData);
+
+    // Auto-place in layout as 1×1
+    const items: { i: string; x: number; y: number; w: number; h: number }[] = JSON.parse(this.layout || '[]');
+    const maxY = items.reduce((m, it) => Math.max(m, it.y + it.h), 0);
+    const lastRowItems = items.filter(it => it.y + it.h === maxY);
+    const nextX = lastRowItems.reduce((m, it) => Math.max(m, it.x + it.w), 0);
+
+    if (nextX < this.columns) {
+      items.push({ i: id, x: nextX, y: maxY > 0 ? maxY - 1 : 0, w: 1, h: 1 });
+    } else {
+      items.push({ i: id, x: 0, y: maxY, w: 1, h: 1 });
+    }
+    this.layout = JSON.stringify(items);
+  }
+
+  /** Remove an app from the launcher */
+  async removeApp(data: { /** Child id (last path segment) */ id: string }) {
+    if (!data.id?.trim()) throw new Error('id required');
+    const ctx = getCtx();
+    await ctx.store.remove(`${ctx.node.$path}/${data.id}`);
+
+    const items: { i: string }[] = JSON.parse(this.layout || '[]');
+    this.layout = JSON.stringify(items.filter(it => it.i !== data.id));
+  }
+
+  /** Persist layout after drag/resize */
+  updateLayout(data: { /** JSON-stringified RGL layout */ layout: string }) {
+    if (!data.layout) throw new Error('layout required');
+    this.layout = data.layout;
+  }
+}
+
+registerType('launcher', Launcher);