@treenity/mods 3.0.1

package/launcher/view.tsx

@@ -0,0 +1,401 @@
+// Launcher view — dashboard with drag-drop from tree + context switching
+
+import { isRef, type NodeData, register, resolveExact } from '@treenity/core';
+import { Render, RenderContext, type View } from '@treenity/react/context';
+import { useChildren, useNavigate, usePath } from '@treenity/react/hooks';
+import { cn } from '@treenity/react/lib/utils';
+import { GenerateViewButton } from '@treenity/react/mods/editor-ui/default-view';
+import { Button } from '@treenity/react/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@treenity/react/ui/dropdown-menu';
+import { GripVertical, Plus, X } from 'lucide-react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import GridLayout from 'react-grid-layout';
+import 'react-grid-layout/css/styles.css';
+import { Launcher } from './types';
+
+type LauncherLayoutItem = { i: string; x: number; y: number; w: number; h: number; ctx?: string };
+
+// Available rendering contexts for the selector
+const CONTEXTS = ['auto', 'react', 'react:icon', 'react:widget', 'react:compact'] as const;
+
+function contextLabel(ctx: string) {
+  if (ctx === 'auto') return 'Auto';
+  if (ctx === 'react') return 'Full';
+  if (ctx === 'react:icon') return 'Icon';
+  if (ctx === 'react:widget') return 'Widget';
+  if (ctx === 'react:compact') return 'Compact';
+  return ctx;
+}
+
+// Resolve which context to render based on layout item
+function resolveContext(item: LauncherLayoutItem): string {
+  if (item.ctx && item.ctx !== 'auto') return item.ctx;
+  return item.w > 1 || item.h > 1 ? 'react:widget' : 'react:icon';
+}
+
+// ── Edit overlay — close + context dropdown menu ──
+
+function EditOverlay({
+  ctx,
+  onRemove,
+  onContextChange,
+}: {
+  ctx: string;
+  onRemove: () => void;
+  onContextChange: (ctx: string) => void;
+}) {
+  return (
+    <>
+      <button
+        className="launcher-btn absolute -right-1 -top-1 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-red-700 shadow-lg p-0"
+        onClick={(e) => { e.stopPropagation(); onRemove(); }}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <X className="h-3 w-3 text-white" />
+      </button>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            className="launcher-btn absolute -left-1 -top-1 z-10 flex h-auto min-w-5 items-center justify-center rounded-full bg-blue-600 px-1.5 py-0.5 shadow-lg text-[9px] font-medium text-white"
+            onMouseDown={(e) => e.stopPropagation()}
+          >
+            {contextLabel(ctx)}
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="min-w-24">
+          {CONTEXTS.map((c) => (
+            <DropdownMenuItem
+              key={c}
+              className={cn('text-xs', c === ctx && 'font-bold')}
+              onSelect={() => onContextChange(c)}
+            >
+              {contextLabel(c)}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+}
+
+// Stored ctx or 'auto' if none
+function getStoredCtx(item: LauncherLayoutItem): string {
+  return item.ctx || 'auto';
+}
+
+// ── App item — resolves ref target and renders via context ──
+
+function AppItem({
+  refNode,
+  context,
+  stored,
+  editing,
+  onRemove,
+  onContextChange,
+}: {
+  refNode: NodeData;
+  context: string;
+  stored: string;
+  editing?: boolean;
+  onRemove?: () => void;
+  onContextChange?: (ctx: string) => void;
+}) {
+  const targetPath = isRef(refNode) ? refNode.$ref : null;
+  const target = usePath(targetPath) as NodeData | undefined;
+  const navigate = useNavigate();
+
+  if (!target) {
+    return (
+      <div className="flex h-full w-full items-center justify-center rounded-2xl bg-zinc-700/50">
+        <span className="text-xs text-zinc-400">...</span>
+      </div>
+    );
+  }
+
+  const label = target.$path.split('/').at(-1) || '?';
+  const hasView = !!resolveExact(target.$type, context as 'react');
+
+  // No view registered for this context — offer AI generation
+  const renderContent = hasView
+    ? <RenderContext name={context}><Render value={target} /></RenderContext>
+    : <GenerateViewButton type={target.$type} sample={target} context={context} label="Make AI" />;
+
+  // Icon-style: centered icon + label
+  if (context === 'react:icon') {
+    return (
+      <div
+        className="relative flex h-full w-full cursor-pointer flex-col items-center justify-center gap-1 overflow-visible"
+        onClick={() => !editing && navigate(target.$path)}
+      >
+        {editing && onRemove && onContextChange && (
+          <EditOverlay ctx={stored} onRemove={onRemove} onContextChange={onContextChange} />
+        )}
+        <div className="h-14 w-14 shrink-0">
+          {renderContent}
+        </div>
+        <span className="max-w-16 truncate text-center text-[11px] font-medium text-white/90 drop-shadow-sm">
+          {label}
+        </span>
+      </div>
+    );
+  }
+
+  // Card-style: glass card with content
+  return (
+    <div
+      className="launcher-glass relative h-full w-full cursor-pointer overflow-visible rounded-2xl border border-white/10 bg-white/10 p-3"
+      onClick={() => !editing && navigate(target.$path)}
+    >
+      {editing && onRemove && onContextChange && (
+        <EditOverlay ctx={stored} onRemove={onRemove} onContextChange={onContextChange} />
+      )}
+      <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-white/50">
+        {label}
+      </div>
+      <div className="h-[calc(100%-1.5rem)] overflow-hidden text-white">
+        {renderContent}
+      </div>
+    </div>
+  );
+}
+
+// ── Drop zone overlay ──
+
+function DropZone({ visible }: { visible: boolean }) {
+  if (!visible) return null;
+  return (
+    <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-2xl border-2 border-dashed border-blue-400/60 bg-blue-500/10 backdrop-blur-sm">
+      <div className="flex flex-col items-center gap-1 text-blue-300">
+        <Plus className="h-8 w-8" />
+        <span className="text-sm font-medium">Drop node here</span>
+      </div>
+    </div>
+  );
+}
+
+// ── Main Launcher View ──
+
+const LauncherView: View<NodeData> = ({ value }) => {
+  const launcher = usePath(value.$path, Launcher);
+  const children = useChildren(value.$path, { watch: true, watchNew: true });
+
+  const [editing, setEditing] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+
+  // Measure container width for RGL
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [gridWidth, setGridWidth] = useState(400);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) setGridWidth(w);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  // Parse layout
+  const columns = typeof launcher?.columns === 'number' ? launcher.columns : 4;
+  const wallpaper = typeof launcher?.wallpaper === 'string' ? launcher.wallpaper : '';
+  const layoutStr = typeof launcher?.layout === 'string' ? launcher.layout : '[]';
+
+  let layoutItems: LauncherLayoutItem[];
+  try {
+    layoutItems = JSON.parse(layoutStr);
+  } catch {
+    layoutItems = [];
+  }
+
+  // Build child map
+  const childMap = new Map<string, NodeData>();
+  for (const c of children) {
+    const id = c.$path.split('/').at(-1) || '';
+    childMap.set(id, c);
+  }
+
+  // Auto-generate layout for children without layout entries
+  const layoutIds = new Set(layoutItems.map((l) => l.i));
+  let nextY = layoutItems.reduce((m, l) => Math.max(m, l.y + l.h), 0);
+  let nextX = 0;
+
+  for (const c of children) {
+    const id = c.$path.split('/').at(-1) || '';
+    if (!layoutIds.has(id)) {
+      layoutItems.push({ i: id, x: nextX, y: nextY, w: 1, h: 1 });
+      nextX++;
+      if (nextX >= columns) {
+        nextX = 0;
+        nextY++;
+      }
+    }
+  }
+
+  const rowHeight = 90;
+
+  const persistLayout = useCallback(
+    (newLayout: readonly LauncherLayoutItem[]) => {
+      // Preserve ctx from current layoutItems
+      const ctxMap = new Map(layoutItems.map((l) => [l.i, l.ctx]));
+      const clean = newLayout.map(({ i, x, y, w, h }) => ({
+        i, x, y, w, h,
+        ...(ctxMap.get(i) ? { ctx: ctxMap.get(i) } : {}),
+      }));
+      launcher.updateLayout({ layout: JSON.stringify(clean) });
+    },
+    [launcher, layoutItems],
+  );
+
+  const handleRemove = (id: string) => {
+    launcher.removeApp({ id });
+  };
+
+  const handleContextChange = (id: string, ctx: string) => {
+    const updated = layoutItems.map((l) =>
+      l.i === id ? { ...l, ctx: ctx === 'auto' ? undefined : ctx } : l,
+    );
+    launcher.updateLayout({ layout: JSON.stringify(updated) });
+  };
+
+  // ── External drop from tree sidebar ──
+
+  const handleExternalDrop = useCallback(
+    (_layout: unknown, _item: unknown, e: Event) => {
+      const de = e as DragEvent;
+      const path = de.dataTransfer?.getData('application/treenity-path')
+        || de.dataTransfer?.getData('text/plain');
+      if (!path || !path.startsWith('/')) return;
+      launcher.addApp({ path });
+      setDragOver(false);
+    },
+    [value.$path],
+  );
+
+  // Container-level drop for when grid is empty or drop misses grid items
+  const handleContainerDragOver = useCallback((e: React.DragEvent) => {
+    if (e.dataTransfer.types.includes('application/treenity-path')) {
+      e.preventDefault();
+      setDragOver(true);
+    }
+  }, []);
+
+  const handleContainerDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setDragOver(false);
+      const path = e.dataTransfer.getData('application/treenity-path')
+        || e.dataTransfer.getData('text/plain');
+      if (!path || !path.startsWith('/')) return;
+      launcher.addApp({ path });
+    },
+    [launcher],
+  );
+
+  return (
+    <div
+      className={cn(
+        'view-full relative min-h-screen select-none overflow-auto',
+        editing && 'launcher-editing',
+      )}
+      style={{ background: wallpaper || undefined }}
+      onDragOver={handleContainerDragOver}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={handleContainerDrop}
+    >
+      {/* Status bar */}
+      <div className="flex items-center justify-between px-5 pb-2 pt-3">
+        <span className="text-sm font-semibold text-white/80">Treenity</span>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="rounded-full text-xs text-white/60"
+          onClick={(e) => {
+            e.stopPropagation();
+            setEditing(!editing);
+          }}
+        >
+          {editing ? 'Done' : 'Edit'}
+        </Button>
+      </div>
+
+      {/* Drop zone overlay */}
+      <DropZone visible={dragOver && children.length === 0} />
+
+      {/* Grid */}
+      <div className="launcher-grid px-3 relative" ref={containerRef}>
+        <GridLayout
+          layout={layoutItems}
+          width={gridWidth}
+          gridConfig={{
+            cols: columns,
+            rowHeight,
+            margin: [12, 12] as const,
+            containerPadding: null,
+            maxRows: Infinity,
+          }}
+          dragConfig={{ enabled: editing, handle: '.launcher-item', cancel: '.launcher-btn' }}
+          resizeConfig={{ enabled: editing }}
+          dropConfig={{
+            enabled: true,
+            defaultItem: { w: 1, h: 1 },
+          }}
+          onDragStop={(layout) => persistLayout(layout)}
+          onResizeStop={(layout) => persistLayout(layout)}
+          onDrop={handleExternalDrop}
+        >
+          {layoutItems.map((item) => {
+            const child = childMap.get(item.i);
+            if (!child) return <div key={item.i} />;
+
+            return (
+              <div key={item.i} className="launcher-item h-full overflow-visible">
+                <div
+                  className={cn(
+                    'h-full overflow-visible transition-transform duration-300',
+                    editing && 'launcher-edit-item',
+                  )}
+                >
+                  <AppItem
+                    refNode={child}
+                    context={resolveContext(item)}
+                    stored={getStoredCtx(item)}
+                    editing={editing}
+                    onRemove={() => handleRemove(item.i)}
+                    onContextChange={(ctx) => handleContextChange(item.i, ctx)}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </GridLayout>
+
+        {/* Inline drop hint when grid has items */}
+        {dragOver && children.length > 0 && (
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 flex justify-center py-4">
+            <div className="rounded-full bg-blue-500/30 border border-blue-400/50 px-4 py-2 text-sm text-blue-200 backdrop-blur-sm">
+              Drop to add to launcher
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Empty state */}
+      {children.length === 0 && !dragOver && (
+        <div className="flex flex-col items-center justify-center gap-3 py-20 text-white/40">
+          <GripVertical className="h-12 w-12" />
+          <p className="text-sm">Drag nodes from the tree to add them here</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+register('launcher', 'react', LauncherView);

package/launcher/widgets.tsx

@@ -0,0 +1,171 @@
+// Launcher widgets — react:widget context for compact live views on the home screen
+
+import { type NodeData, register } from '@treenity/core';
+import type { RenderProps } from '@treenity/react/context';
+import { useChildren, usePath } from '@treenity/react/hooks';
+import { cn } from '@treenity/react/lib/utils';
+import type { FC } from 'react';
+import { TodoItem } from '../todo/types';
+
+const KanbanWidget: FC<RenderProps> = ({ value }) => {
+  const node = value as NodeData;
+  return <KanbanWidgetInner path={node.$path} />;
+};
+
+// Separate component to use hooks properly per column
+function KanbanWidgetInner({ path }: { path: string }) {
+  const columns = useChildren(path, { watch: true, watchNew: true })
+    .filter(c => c.$type === 'board.column')
+    .sort((a, b) => ((a as any).order ?? 0) - ((b as any).order ?? 0));
+
+  return (
+    <div className="flex h-full flex-col justify-between gap-1">
+      {columns.map(col => (
+        <ColumnRow key={col.$path} col={col} />
+      ))}
+    </div>
+  );
+}
+
+function ColumnRow({ col }: { col: NodeData }) {
+  const tasks = useChildren(col.$path, { watch: true, watchNew: true });
+  const label = typeof col.label === 'string' ? col.label : col.$path.split('/').at(-1) || '?';
+  const color = typeof col.color === 'string' ? col.color : 'border-zinc-400';
+  // Extract bg color from border color class
+  const dotColor = color.replace('border-', 'bg-');
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className={cn('h-2 w-2 shrink-0 rounded-full', dotColor)} />
+      <span className="flex-1 truncate text-[11px] text-white/70">{label}</span>
+      <span className="text-xs font-semibold text-white/90">{tasks.length}</span>
+    </div>
+  );
+}
+
+register('board.kanban', 'react:widget', KanbanWidget as any);
+
+// ── todo.list widget — compact checklist ──
+
+const TodoWidget: FC<RenderProps> = ({ value }) => {
+  const node = value as NodeData;
+  // value might be the todo dir — find the list child
+  const children = useChildren(node.$path, { watch: true, watchNew: true });
+  const list = children.find(c => c.$type === 'todo.list');
+
+  if (list) return <TodoListItems path={list.$path} />;
+
+  // value IS the list
+  return <TodoListItems path={node.$path} />;
+};
+
+function TodoListItems({ path }: { path: string }) {
+  const items = useChildren(path, { watch: true, watchNew: true });
+  const doneCount = items.filter(i => i.done).length;
+
+  return (
+    <div className="flex h-full flex-col">
+      <div className="mb-1 text-[10px] text-white/50">
+        {doneCount}/{items.length} done
+      </div>
+
+      <div className="flex flex-1 flex-col gap-0.5 overflow-hidden">
+        {items.slice(0, 5).map(item => (
+          <TodoItemCompact key={item.$path} value={item} />
+        ))}
+        {items.length > 5 && (
+          <span className="text-[10px] text-white/40">+{items.length - 5} more</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function TodoItemCompact({ value }: { value: NodeData }) {
+  const item = usePath(value.$path, TodoItem);
+
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className={cn(
+        'flex h-3 w-3 shrink-0 items-center justify-center rounded-sm border text-[8px]',
+        item.done
+          ? 'border-green-400/50 bg-green-500/30 text-green-300'
+          : 'border-white/20',
+      )}>
+        {item.done ? '✓' : ''}
+      </span>
+      <span className={cn(
+        'truncate text-[11px]',
+        item.done ? 'text-white/30 line-through' : 'text-white/80',
+      )}>
+        {item.title}
+      </span>
+    </div>
+  );
+}
+
+register('todo.list', 'react:widget', TodoWidget as any);
+
+// ── examples.demo.sensor widget — last value + mini bars ──
+
+const SensorWidget: FC<RenderProps> = ({ value }) => {
+  const node = value as NodeData;
+  const children = useChildren(node.$path, { watch: true, watchNew: true });
+  const last5 = children.slice(-5);
+  const latest = last5[last5.length - 1];
+
+  const latestVal = typeof latest?.value === 'number' ? latest.value : null;
+  const latestTs = typeof latest?.ts === 'number' ? new Date(latest.ts).toLocaleTimeString() : '--:--';
+
+  return (
+    <div className="flex h-full items-center gap-3">
+      {/* Big number */}
+      <div className="flex flex-col">
+        <span className="text-2xl font-bold tabular-nums text-white/90">
+          {latestVal !== null ? `${latestVal}°` : '—'}
+        </span>
+        <span className="text-[9px] text-white/40">{latestTs}</span>
+      </div>
+
+      {/* Mini bars */}
+      <div className="flex flex-1 items-end gap-0.5 self-end pb-1">
+        {last5.map((n, i) => {
+          const val = typeof n.value === 'number' ? n.value : 20;
+          const h = Math.max(4, Math.round(((val - 15) / 15) * 32));
+          return (
+            <div
+              key={n.$path}
+              className={cn(
+                'flex-1 rounded-sm',
+                i === last5.length - 1 ? 'bg-emerald-400' : 'bg-emerald-400/40',
+              )}
+              style={{ height: h }}
+            />
+          );
+        })}
+        {last5.length === 0 && (
+          <span className="text-[10px] text-white/30">No data</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+register('examples.demo.sensor', 'react:widget', SensorWidget as any);
+
+// ── Default widget fallback — type + icon ──
+
+const DefaultWidget: FC<RenderProps> = ({ value }) => {
+  const node = value as NodeData;
+  const typeParts = node.$type.split('.');
+  const name = typeParts[typeParts.length - 1] || node.$type;
+
+  return (
+    <div className="flex h-full flex-col items-center justify-center text-white/50">
+      <span className="text-lg font-bold capitalize">{name}</span>
+      <span className="text-[10px]">{node.$path}</span>
+    </div>
+  );
+};
+
+register('default', 'react:widget', DefaultWidget as any);