@almadar/cli 0.3.1 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/MindMapNode.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { MindMapNode, MindMapNodeData } from "./MindMapNode";
+
+const meta: Meta<typeof MindMapNode> = {
+  title: "KFlow/Molecules/MindMapNode",
+  component: MindMapNode,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <svg width="300" height="150" style={{ border: "1px solid #e5e7eb" }}>
+        <Story />
+      </svg>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MindMapNode>;
+
+const baseNode: MindMapNodeData = {
+  id: "node-1",
+  x: 150,
+  y: 75,
+  width: 120,
+  height: 50,
+  title: "Sample Node",
+};
+
+export const Default: Story = {
+  args: {
+    node: baseNode,
+    isSelected: false,
+    isEditing: false,
+    zoom: 1,
+    pan: { x: 0, y: 0 },
+    onClick: action("UI:SELECT_NODE"),
+    onDoubleClick: action("UI:EDIT_NODE"),
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    node: baseNode,
+    isSelected: true,
+    isEditing: false,
+    onClick: action("UI:SELECT_NODE"),
+    onDoubleClick: action("UI:EDIT_NODE"),
+  },
+};
+
+export const Editing: Story = {
+  args: {
+    node: baseNode,
+    isSelected: true,
+    isEditing: true,
+    editValue: "Sample Node",
+    onClick: action("UI:SELECT_NODE"),
+    onSaveEdit: action("onSaveEdit"),
+    onCancelEdit: action("onCancelEdit"),
+    onEditChange: action("onEditChange"),
+  },
+};
+
+export const SeedNode: Story = {
+  args: {
+    node: {
+      ...baseNode,
+      id: "seed-node",
+      title: "Main Topic",
+      isSeed: true,
+    },
+    isSelected: false,
+    onClick: action("UI:SELECT_NODE"),
+    onDoubleClick: action("UI:EDIT_NODE"),
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    node: {
+      ...baseNode,
+      hasChildren: true,
+      isExpanded: true,
+    },
+    isSelected: false,
+    onClick: action("UI:SELECT_NODE"),
+    onToggleExpand: action("UI:EXPAND_NODE"),
+  },
+};
+
+export const CollapsedWithChildren: Story = {
+  args: {
+    node: {
+      ...baseNode,
+      hasChildren: true,
+      isExpanded: false,
+    },
+    isSelected: false,
+    onClick: action("UI:SELECT_NODE"),
+    onToggleExpand: action("UI:EXPAND_NODE"),
+  },
+};
+
+export const Layer1: Story = {
+  args: {
+    node: {
+      ...baseNode,
+      layer: 1,
+      title: "Layer 1 Node",
+    },
+    onClick: action("UI:SELECT_NODE"),
+  },
+};
+
+export const Layer2: Story = {
+  args: {
+    node: {
+      ...baseNode,
+      layer: 2,
+      title: "Layer 2 Node",
+    },
+    onClick: action("UI:SELECT_NODE"),
+  },
+};
+
+export const LongTitle: Story = {
+  args: {
+    node: {
+      ...baseNode,
+      title: "This is a very long title that will be truncated",
+    },
+    onClick: action("UI:SELECT_NODE"),
+  },
+};
+
+export const Zoomed: Story = {
+  args: {
+    node: {
+      id: "node-zoomed",
+      x: 100,
+      y: 50,
+      width: 120,
+      height: 50,
+      title: "Zoomed Node",
+    },
+    zoom: 1.5,
+    pan: { x: 0, y: 0 },
+    onClick: action("UI:SELECT_NODE"),
+  },
+};
+
+export const MultipleNodes: Story = {
+  render: () => (
+    <svg width="500" height="300" style={{ border: "1px solid #e5e7eb" }}>
+      <MindMapNode
+        node={{
+          id: "root",
+          x: 250,
+          y: 50,
+          width: 120,
+          height: 50,
+          title: "Root Topic",
+          isSeed: true,
+          hasChildren: true,
+          isExpanded: true,
+        }}
+        onClick={action("click-root")}
+      />
+      <MindMapNode
+        node={{
+          id: "child-1",
+          x: 100,
+          y: 150,
+          width: 100,
+          height: 40,
+          title: "Child A",
+          layer: 1,
+        }}
+        onClick={action("click-child-1")}
+      />
+      <MindMapNode
+        node={{
+          id: "child-2",
+          x: 250,
+          y: 150,
+          width: 100,
+          height: 40,
+          title: "Child B",
+          layer: 1,
+        }}
+        isSelected={true}
+        onClick={action("click-child-2")}
+      />
+      <MindMapNode
+        node={{
+          id: "child-3",
+          x: 400,
+          y: 150,
+          width: 100,
+          height: 40,
+          title: "Child C",
+          layer: 1,
+        }}
+        onClick={action("click-child-3")}
+      />
+    </svg>
+  ),
+};

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/MindMapNode.tsx

@@ -0,0 +1,294 @@
+/**
+ * MindMapNode Molecule Component
+ *
+ * SVG node for mindmap visualization with editing capabilities.
+ *
+ * Event Contract:
+ * - Emits: UI:SELECT_NODE { nodeId }
+ * - Emits: UI:EDIT_NODE { nodeId }
+ * - Emits: UI:EXPAND_NODE { nodeId }
+ * - Emits: UI:AI_GENERATE { nodeId }
+ * - entityAware: true
+ */
+
+import React, { useState } from "react";
+import { Edit2, ChevronDown, ChevronRight, Sparkles } from "lucide-react";
+import { useEventBus } from "../../../hooks/useEventBus";
+
+export interface MindMapNodeData {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  title: string;
+  content?: string;
+  isExpanded?: boolean;
+  hasChildren?: boolean;
+  layer?: number;
+  isSeed?: boolean;
+}
+
+export interface MindMapNodeProps {
+  /** Node data */
+  node: MindMapNodeData;
+  /** Whether this node is selected */
+  isSelected?: boolean;
+  /** Whether this node is being edited */
+  isEditing?: boolean;
+  /** Current edit value */
+  editValue?: string;
+  /** Current zoom level */
+  zoom?: number;
+  /** Current pan offset */
+  pan?: { x: number; y: number };
+  /** Callback when node is clicked */
+  onClick?: (node: MindMapNodeData) => void;
+  /** Callback when node is double-clicked */
+  onDoubleClick?: (node: MindMapNodeData) => void;
+  /** Callback when edit is saved */
+  onSaveEdit?: (nodeId: string, title: string) => void;
+  /** Callback when edit is cancelled */
+  onCancelEdit?: () => void;
+  /** Callback when edit value changes */
+  onEditChange?: (value: string) => void;
+  /** Callback when expand/collapse is toggled */
+  onToggleExpand?: (node: MindMapNodeData) => void;
+  /** Callback for AI generation */
+  onAIGenerate?: (node: MindMapNodeData) => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+// Node colors by layer
+const getNodeColor = (
+  node: MindMapNodeData,
+): { fill: string; stroke: string } => {
+  if (node.isSeed) {
+    return { fill: "#8b5cf6", stroke: "#7c3aed" };
+  }
+  const colors = [
+    { fill: "#3b82f6", stroke: "#2563eb" },
+    { fill: "#10b981", stroke: "#059669" },
+    { fill: "#f59e0b", stroke: "#d97706" },
+    { fill: "#ec4899", stroke: "#db2777" },
+    { fill: "#06b6d4", stroke: "#0891b2" },
+  ];
+  const layerIndex = (node.layer || 0) % colors.length;
+  return colors[layerIndex];
+};
+
+export const MindMapNode: React.FC<MindMapNodeProps> = ({
+  node,
+  isSelected = false,
+  isEditing = false,
+  editValue,
+  zoom = 1,
+  pan = { x: 0, y: 0 },
+  onClick,
+  onDoubleClick,
+  onSaveEdit,
+  onCancelEdit,
+  onEditChange,
+  onToggleExpand,
+  onAIGenerate,
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const [isHovered, setIsHovered] = useState(false);
+
+  // Apply transformations
+  const transformedX = (node.x - node.width / 2) * zoom + pan.x;
+  const transformedY = (node.y - node.height / 2) * zoom + pan.y;
+  const transformedWidth = node.width * zoom;
+  const transformedHeight = node.height * zoom;
+
+  const colors = getNodeColor(node);
+
+  const handleClick = () => {
+    eventBus.emit("UI:SELECT_NODE", { nodeId: node.id, entity: "Note" });
+    onClick?.(node);
+  };
+
+  const handleDoubleClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    eventBus.emit("UI:EDIT_NODE", { nodeId: node.id, entity: "Note" });
+    onDoubleClick?.(node);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onSaveEdit?.(node.id, editValue || node.title);
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      onCancelEdit?.();
+    }
+  };
+
+  const handleToggleExpand = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    eventBus.emit("UI:EXPAND_NODE", {
+      nodeId: node.id,
+      expanded: !node.isExpanded,
+    });
+    onToggleExpand?.(node);
+  };
+
+  const handleAIGenerate = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    eventBus.emit("UI:AI_GENERATE", { nodeId: node.id, entity: "Note" });
+    onAIGenerate?.(node);
+  };
+
+  return (
+    <g
+      transform={`translate(${transformedX}, ${transformedY})`}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className={`mindmap-node ${isSelected ? "selected" : ""} ${className || ""}`}
+      style={{ cursor: "pointer" }}
+    >
+      {/* Node background */}
+      <rect
+        x={0}
+        y={0}
+        width={transformedWidth}
+        height={transformedHeight}
+        rx={8 * zoom}
+        ry={8 * zoom}
+        fill={colors.fill}
+        stroke={colors.stroke}
+        strokeWidth={(isSelected ? 3 : isHovered ? 2 : 1) * zoom}
+        opacity={node.isExpanded === false && node.hasChildren ? 0.7 : 1}
+        strokeDasharray={
+          node.isExpanded === false && node.hasChildren ? "5,5" : "none"
+        }
+      />
+
+      {/* Node title */}
+      {isEditing ? (
+        <foreignObject x={5} y={10} width={transformedWidth - 10} height={30}>
+          <input
+            type="text"
+            value={editValue ?? node.title}
+            onChange={(e) => onEditChange?.(e.target.value)}
+            onKeyDown={handleKeyDown}
+            onBlur={() => onSaveEdit?.(node.id, editValue || node.title)}
+            autoFocus
+            style={{
+              width: "100%",
+              border: "none",
+              outline: "none",
+              background: "rgba(255,255,255,0.9)",
+              borderRadius: "4px",
+              padding: "4px 8px",
+              fontSize: `${Math.max(10, 12 * zoom)}px`,
+              textAlign: "center",
+            }}
+          />
+        </foreignObject>
+      ) : (
+        <text
+          x={transformedWidth / 2}
+          y={transformedHeight / 2}
+          textAnchor="middle"
+          dominantBaseline="middle"
+          fill="white"
+          fontSize={Math.max(10, 12 * zoom)}
+          fontWeight={node.isSeed ? "bold" : "normal"}
+        >
+          {node.title.length > 20
+            ? node.title.slice(0, 20) + "..."
+            : node.title}
+        </text>
+      )}
+
+      {/* Action buttons (visible on hover) */}
+      {isHovered && !isEditing && (
+        <>
+          {/* Edit button */}
+          <foreignObject x={5} y={5} width={20} height={20}>
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onDoubleClick?.(node);
+              }}
+              style={{
+                width: "100%",
+                height: "100%",
+                border: "none",
+                background: "rgba(255,255,255,0.9)",
+                borderRadius: "4px",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+              title="Edit"
+            >
+              <Edit2 size={12} color="#374151" />
+            </button>
+          </foreignObject>
+
+          {/* AI Generate button */}
+          <foreignObject x={transformedWidth - 25} y={5} width={20} height={20}>
+            <button
+              onClick={handleAIGenerate}
+              style={{
+                width: "100%",
+                height: "100%",
+                border: "none",
+                background: "rgba(255,255,255,0.9)",
+                borderRadius: "4px",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+              title="AI Generate Children"
+            >
+              <Sparkles size={12} color="#8b5cf6" />
+            </button>
+          </foreignObject>
+
+          {/* Expand/Collapse button */}
+          {node.hasChildren && (
+            <foreignObject
+              x={transformedWidth / 2 - 10}
+              y={transformedHeight - 5}
+              width={20}
+              height={20}
+            >
+              <button
+                onClick={handleToggleExpand}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  border: "none",
+                  background: "rgba(255,255,255,0.9)",
+                  borderRadius: "50%",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+                title={node.isExpanded ? "Collapse" : "Expand"}
+              >
+                {node.isExpanded ? (
+                  <ChevronDown size={12} color="#374151" />
+                ) : (
+                  <ChevronRight size={12} color="#374151" />
+                )}
+              </button>
+            </foreignObject>
+          )}
+        </>
+      )}
+    </g>
+  );
+};
+
+MindMapNode.displayName = "MindMapNode";

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/NoteContent.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { NoteContent } from "./NoteContent";
+
+const meta: Meta<typeof NoteContent> = {
+  title: "KFlow/Molecules/NoteContent",
+  component: NoteContent,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof NoteContent>;
+
+export const Default: Story = {
+  args: {
+    noteId: "note-1",
+    content:
+      "This is a sample note content. It can contain detailed information about the topic being studied.",
+    showFullContent: true,
+    onSave: action("UI:SAVE_NOTE_CONTENT"),
+    onStartEditing: action("UI:EDIT_NOTE_CONTENT"),
+  },
+};
+
+export const Truncated: Story = {
+  args: {
+    noteId: "note-2",
+    content:
+      "This is a much longer note content that will be truncated in the preview mode. It contains extensive information that the user has written about the topic. The full content would be shown when clicked to edit.",
+    showFullContent: false,
+    previewLength: 100,
+    onSave: action("UI:SAVE_NOTE_CONTENT"),
+  },
+};
+
+export const Editing: Story = {
+  args: {
+    noteId: "note-3",
+    content: "Edit this content...",
+    isEditing: true,
+    onChange: action("onChange"),
+    onSave: action("UI:SAVE_NOTE_CONTENT"),
+    onCancel: action("onCancel"),
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    noteId: "note-4",
+    content: "",
+    placeholder: "Start writing your notes here...",
+    onSave: action("UI:SAVE_NOTE_CONTENT"),
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    noteId: "note-5",
+    content: `# Photosynthesis Notes
+
+Photosynthesis is the process by which plants convert light energy into chemical energy.
+
+## Key Points:
+1. Takes place in chloroplasts
+2. Uses water and carbon dioxide
+3. Produces glucose and oxygen
+
+## The Light Reactions
+- Occur in thylakoid membranes
+- Convert light energy to ATP and NADPH
+- Split water molecules (photolysis)
+
+## The Calvin Cycle
+- Occurs in the stroma
+- Uses ATP and NADPH from light reactions
+- Fixes CO2 into glucose
+
+## Important Equations
+6CO2 + 6H2O + light energy → C6H12O6 + 6O2`,
+    showFullContent: true,
+    rows: 10,
+    onSave: action("UI:SAVE_NOTE_CONTENT"),
+  },
+};
+
+export const CustomPreviewLength: Story = {
+  args: {
+    noteId: "note-6",
+    content:
+      "This content will be truncated at a custom length. Only the first 50 characters will be shown in preview mode.",
+    showFullContent: false,
+    previewLength: 50,
+    onSave: action("UI:SAVE_NOTE_CONTENT"),
+  },
+};