@almadar/cli 1.0.6 → 1.0.7

package/shells/typescript-shell/packages/client/src/clients/kflow/organisms/MindMapCanvas.stories.tsx

@@ -1,256 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-import { MindMapCanvas } from "./MindMapCanvas";
-
-const meta: Meta<typeof MindMapCanvas> = {
-  title: "KFlow/Organisms/MindMapCanvas",
-  component: MindMapCanvas,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <div style={{ height: "500px", width: "100%", padding: "20px" }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof MindMapCanvas>;
-
-// Sample mindmap content for stories
-const SampleContent = () => (
-  <>
-    {/* Root node */}
-    <g transform="translate(300, 200)">
-      <rect
-        x="-60"
-        y="-25"
-        width="120"
-        height="50"
-        rx="8"
-        fill="#8b5cf6"
-        stroke="#7c3aed"
-        strokeWidth="2"
-      />
-      <text
-        x="0"
-        y="5"
-        textAnchor="middle"
-        fill="white"
-        fontSize="14"
-        fontWeight="bold"
-      >
-        Main Topic
-      </text>
-    </g>
-
-    {/* Child nodes */}
-    <g transform="translate(150, 100)">
-      <rect
-        x="-50"
-        y="-20"
-        width="100"
-        height="40"
-        rx="6"
-        fill="#3b82f6"
-        stroke="#2563eb"
-        strokeWidth="1"
-      />
-      <text x="0" y="5" textAnchor="middle" fill="white" fontSize="12">
-        Subtopic A
-      </text>
-    </g>
-
-    <g transform="translate(450, 100)">
-      <rect
-        x="-50"
-        y="-20"
-        width="100"
-        height="40"
-        rx="6"
-        fill="#3b82f6"
-        stroke="#2563eb"
-        strokeWidth="1"
-      />
-      <text x="0" y="5" textAnchor="middle" fill="white" fontSize="12">
-        Subtopic B
-      </text>
-    </g>
-
-    <g transform="translate(150, 300)">
-      <rect
-        x="-50"
-        y="-20"
-        width="100"
-        height="40"
-        rx="6"
-        fill="#10b981"
-        stroke="#059669"
-        strokeWidth="1"
-      />
-      <text x="0" y="5" textAnchor="middle" fill="white" fontSize="12">
-        Subtopic C
-      </text>
-    </g>
-
-    <g transform="translate(450, 300)">
-      <rect
-        x="-50"
-        y="-20"
-        width="100"
-        height="40"
-        rx="6"
-        fill="#10b981"
-        stroke="#059669"
-        strokeWidth="1"
-      />
-      <text x="0" y="5" textAnchor="middle" fill="white" fontSize="12">
-        Subtopic D
-      </text>
-    </g>
-
-    {/* Connections */}
-    <path
-      d="M 240 200 Q 195 150 150 120"
-      fill="none"
-      stroke="#94a3b8"
-      strokeWidth="2"
-    />
-    <path
-      d="M 360 200 Q 405 150 450 120"
-      fill="none"
-      stroke="#94a3b8"
-      strokeWidth="2"
-    />
-    <path
-      d="M 240 200 Q 195 250 150 280"
-      fill="none"
-      stroke="#94a3b8"
-      strokeWidth="2"
-    />
-    <path
-      d="M 360 200 Q 405 250 450 280"
-      fill="none"
-      stroke="#94a3b8"
-      strokeWidth="2"
-    />
-  </>
-);
-
-export const Default: Story = {
-  args: {
-    width: 600,
-    height: 400,
-    enablePan: true,
-    enableZoom: true,
-    onZoomChange: action("UI:MINDMAP_ZOOM"),
-    onPanChange: action("UI:MINDMAP_PAN"),
-  },
-  render: (args) => (
-    <MindMapCanvas {...args}>
-      <SampleContent />
-    </MindMapCanvas>
-  ),
-};
-
-export const ZoomedIn: Story = {
-  args: {
-    width: 600,
-    height: 400,
-    initialZoom: 1.5,
-    enablePan: true,
-    enableZoom: true,
-  },
-  render: (args) => (
-    <MindMapCanvas {...args}>
-      <SampleContent />
-    </MindMapCanvas>
-  ),
-};
-
-export const ZoomedOut: Story = {
-  args: {
-    width: 600,
-    height: 400,
-    initialZoom: 0.5,
-    enablePan: true,
-    enableZoom: true,
-  },
-  render: (args) => (
-    <MindMapCanvas {...args}>
-      <SampleContent />
-    </MindMapCanvas>
-  ),
-};
-
-export const PanOnly: Story = {
-  args: {
-    width: 600,
-    height: 400,
-    enablePan: true,
-    enableZoom: false,
-  },
-  render: (args) => (
-    <MindMapCanvas {...args}>
-      <SampleContent />
-    </MindMapCanvas>
-  ),
-};
-
-export const ZoomOnly: Story = {
-  args: {
-    width: 600,
-    height: 400,
-    enablePan: false,
-    enableZoom: true,
-  },
-  render: (args) => (
-    <MindMapCanvas {...args}>
-      <SampleContent />
-    </MindMapCanvas>
-  ),
-};
-
-export const NoInteraction: Story = {
-  args: {
-    width: 600,
-    height: 400,
-    enablePan: false,
-    enableZoom: false,
-  },
-  render: (args) => (
-    <MindMapCanvas {...args}>
-      <SampleContent />
-    </MindMapCanvas>
-  ),
-};
-
-export const AutoSize: Story = {
-  args: {
-    enablePan: true,
-    enableZoom: true,
-  },
-  render: (args) => (
-    <MindMapCanvas {...args}>
-      <SampleContent />
-    </MindMapCanvas>
-  ),
-};
-
-export const Empty: Story = {
-  args: {
-    width: 600,
-    height: 400,
-  },
-  render: (args) => (
-    <MindMapCanvas {...args}>
-      <text x="300" y="200" textAnchor="middle" fill="#9ca3af" fontSize="14">
-        Click to add a node
-      </text>
-    </MindMapCanvas>
-  ),
-};

package/shells/typescript-shell/packages/client/src/clients/kflow/organisms/MindMapCanvas.tsx

@@ -1,185 +0,0 @@
-/**
- * MindMapCanvas Organism Component
- *
- * SVG canvas container for mindmap visualization with pan and zoom support.
- *
- * Event Contract:
- * - Emits: UI:MINDMAP_PAN { x, y }
- * - Emits: UI:MINDMAP_ZOOM { zoom }
- * - Emits: UI:MINDMAP_FOCUS
- * - Emits: UI:MINDMAP_BLUR
- * - entityAware: false
- */
-
-import React, { useRef, useState, useCallback, useEffect } from "react";
-import { Box } from "../../../components/atoms/Box";
-import { useEventBus } from "../../../hooks/useEventBus";
-
-export interface MindMapCanvasProps {
-  /** Width of the canvas */
-  width?: number;
-  /** Height of the canvas */
-  height?: number;
-  /** Initial zoom level */
-  initialZoom?: number;
-  /** Minimum zoom level */
-  minZoom?: number;
-  /** Maximum zoom level */
-  maxZoom?: number;
-  /** Enable pan interaction */
-  enablePan?: boolean;
-  /** Enable zoom interaction */
-  enableZoom?: boolean;
-  /** Children to render in the SVG */
-  children?: React.ReactNode;
-  /** Callback when zoom changes */
-  onZoomChange?: (zoom: number) => void;
-  /** Callback when pan changes */
-  onPanChange?: (pan: { x: number; y: number }) => void;
-  /** Additional CSS classes */
-  className?: string;
-  // Entity-aware props (for schema compatibility)
-  /** Entity type */
-  entity?: string;
-  /** Data to display */
-  data?: Record<string, unknown> | unknown;
-  /** Actions available */
-  actions?: Array<{ label: string; event: string }>;
-  /** Fields to display */
-  displayFields?: string[];
-  /** Show learning goals */
-  showLearningGoals?: boolean;
-}
-
-export const MindMapCanvas: React.FC<MindMapCanvasProps> = ({
-  width,
-  height,
-  initialZoom = 1,
-  minZoom = 0.25,
-  maxZoom = 2,
-  enablePan = true,
-  enableZoom = true,
-  children,
-  onZoomChange,
-  onPanChange,
-  className,
-}) => {
-  const eventBus = useEventBus();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [dimensions, setDimensions] = useState({
-    width: width || 800,
-    height: height || 600,
-  });
-  const [isFocused, setIsFocused] = useState(false);
-  const [zoom, setZoom] = useState(initialZoom);
-  const [pan, setPan] = useState({ x: 0, y: 0 });
-  const [isPanning, setIsPanning] = useState(false);
-  const [panStart, setPanStart] = useState({ x: 0, y: 0 });
-
-  // Auto-size to container
-  useEffect(() => {
-    if (width && height) {
-      return;
-    }
-
-    const updateDimensions = () => {
-      if (containerRef.current) {
-        setDimensions({
-          width: containerRef.current.clientWidth || 800,
-          height: containerRef.current.clientHeight || 600,
-        });
-      }
-    };
-    updateDimensions();
-    window.addEventListener("resize", updateDimensions);
-    return () => window.removeEventListener("resize", updateDimensions);
-  }, [width, height]);
-
-  // Handle wheel zoom
-  const handleWheel = useCallback(
-    (e: React.WheelEvent) => {
-      if (!enableZoom) return;
-      e.preventDefault();
-
-      const delta = e.deltaY > 0 ? 0.9 : 1.1;
-      const newZoom = Math.max(minZoom, Math.min(maxZoom, zoom * delta));
-
-      setZoom(newZoom);
-      eventBus.emit("UI:MINDMAP_ZOOM", { zoom: newZoom });
-      onZoomChange?.(newZoom);
-    },
-    [enableZoom, zoom, minZoom, maxZoom, eventBus, onZoomChange],
-  );
-
-  // Handle pan start
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      if (!enablePan || e.button !== 0) return;
-      setIsPanning(true);
-      setPanStart({ x: e.clientX - pan.x, y: e.clientY - pan.y });
-    },
-    [enablePan, pan],
-  );
-
-  // Handle pan move
-  const handleMouseMove = useCallback(
-    (e: React.MouseEvent) => {
-      if (!isPanning) return;
-      const newPan = { x: e.clientX - panStart.x, y: e.clientY - panStart.y };
-      setPan(newPan);
-      eventBus.emit("UI:MINDMAP_PAN", newPan);
-      onPanChange?.(newPan);
-    },
-    [isPanning, panStart, eventBus, onPanChange],
-  );
-
-  // Handle pan end
-  const handleMouseUp = useCallback(() => {
-    setIsPanning(false);
-  }, []);
-
-  // Handle focus
-  const handleFocus = useCallback(() => {
-    setIsFocused(true);
-    eventBus.emit("UI:MINDMAP_FOCUS", {});
-  }, [eventBus]);
-
-  // Handle blur
-  const handleBlur = useCallback(() => {
-    setIsFocused(false);
-    eventBus.emit("UI:MINDMAP_BLUR", {});
-  }, [eventBus]);
-
-  return (
-    <Box
-      ref={containerRef}
-      className={`flex-1 bg-gray-50 dark:bg-gray-800 rounded-lg transition-all duration-200 ${
-        isFocused
-          ? "border-2 border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-800"
-          : "border border-gray-200 dark:border-gray-700"
-      } ${className || ""}`}
-      tabIndex={0}
-      onFocus={handleFocus}
-      onBlur={handleBlur}
-    >
-      <svg
-        width={dimensions.width}
-        height={dimensions.height}
-        onWheel={handleWheel}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
-        style={{
-          cursor: isPanning ? "grabbing" : enablePan ? "grab" : "default",
-        }}
-      >
-        <g transform={`translate(${pan.x}, ${pan.y}) scale(${zoom})`}>
-          {children}
-        </g>
-      </svg>
-    </Box>
-  );
-};
-
-MindMapCanvas.displayName = "MindMapCanvas";

package/shells/typescript-shell/packages/client/src/clients/kflow/organisms/NoteList.stories.tsx

@@ -1,178 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-import { NoteList } from "./NoteList";
-import { NoteData } from "../molecules/NoteListItem";
-
-const meta: Meta<typeof NoteList> = {
-  title: "KFlow/Organisms/NoteList",
-  component: NoteList,
-  parameters: {
-    layout: "padded",
-  },
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof NoteList>;
-
-const sampleNotes: NoteData[] = [
-  {
-    id: "note-1",
-    title: "Photosynthesis Overview",
-    content:
-      "The process by which plants convert light energy into chemical energy.",
-    tags: ["biology", "plants"],
-    level: 0,
-    hasChildren: true,
-    isExpanded: true,
-    updatedAt: "2024-01-15T10:30:00Z",
-  },
-  {
-    id: "note-2",
-    title: "Light Reactions",
-    content: "Occurs in the thylakoid membrane. Produces ATP and NADPH.",
-    tags: ["detail"],
-    level: 1,
-    hasChildren: false,
-    updatedAt: "2024-01-15T11:00:00Z",
-  },
-  {
-    id: "note-3",
-    title: "Calvin Cycle",
-    content: "Occurs in the stroma. Uses ATP and NADPH to fix CO2.",
-    tags: ["detail"],
-    level: 1,
-    hasChildren: false,
-    updatedAt: "2024-01-15T11:30:00Z",
-  },
-  {
-    id: "note-4",
-    title: "Cellular Respiration",
-    content: "The reverse process - converting glucose back to energy.",
-    tags: ["biology", "energy"],
-    level: 0,
-    hasChildren: false,
-    updatedAt: "2024-01-16T09:00:00Z",
-  },
-];
-
-export const Default: Story = {
-  args: {
-    notes: sampleNotes,
-    selectedNoteId: undefined,
-    onSelectNote: action("UI:SELECT_NOTE"),
-    onDeleteNote: action("UI:DELETE_NOTE"),
-    onEditNote: action("UI:EDIT_NOTE"),
-    onToggleExpand: action("UI:EXPAND_NOTE"),
-    onAddChild: action("UI:ADD_CHILD_NOTE"),
-  },
-};
-
-export const WithSelection: Story = {
-  args: {
-    notes: sampleNotes,
-    selectedNoteId: "note-2",
-    onSelectNote: action("UI:SELECT_NOTE"),
-    onDeleteNote: action("UI:DELETE_NOTE"),
-    onEditNote: action("UI:EDIT_NOTE"),
-  },
-};
-
-export const Loading: Story = {
-  args: {
-    notes: [],
-    isLoading: true,
-  },
-};
-
-export const ErrorState: Story = {
-  args: {
-    notes: [],
-    error: new globalThis.Error("Failed to load notes. Please try again."),
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    notes: [],
-    emptyMessage:
-      "No notes found. Click the button above to create your first note!",
-  },
-};
-
-export const FlatList: Story = {
-  args: {
-    notes: [
-      {
-        id: "flat-1",
-        title: "First Note",
-        content: "This is the first note in a flat list.",
-        tags: ["general"],
-        level: 0,
-      },
-      {
-        id: "flat-2",
-        title: "Second Note",
-        content: "This is the second note.",
-        tags: ["general"],
-        level: 0,
-      },
-      {
-        id: "flat-3",
-        title: "Third Note",
-        content: "This is the third note.",
-        tags: ["general"],
-        level: 0,
-      },
-    ],
-    onSelectNote: action("UI:SELECT_NOTE"),
-  },
-};
-
-export const ManyNotes: Story = {
-  args: {
-    notes: Array.from({ length: 10 }, (_, i) => ({
-      id: `note-${i}`,
-      title: `Note ${i + 1}`,
-      content: `This is the content of note ${i + 1}. It contains some sample text.`,
-      tags: i % 2 === 0 ? ["even"] : ["odd"],
-      level: 0,
-      hasChildren: false,
-      updatedAt: new Date(Date.now() - i * 86400000).toISOString(),
-    })),
-    onSelectNote: action("UI:SELECT_NOTE"),
-    onDeleteNote: action("UI:DELETE_NOTE"),
-  },
-};
-
-export const ShowFullContent: Story = {
-  args: {
-    notes: [
-      {
-        id: "long-1",
-        title: "Detailed Notes",
-        content: `# Photosynthesis
-
-Photosynthesis is the process used by plants, algae, and certain bacteria to convert light energy into chemical energy.
-
-## Key Components
-- Chlorophyll (green pigment)
-- Water (H2O)
-- Carbon dioxide (CO2)
-- Sunlight
-
-## The Process
-1. Light absorption by chlorophyll
-2. Water splitting (photolysis)
-3. Carbon fixation (Calvin cycle)
-
-## Equation
-6CO2 + 6H2O + light → C6H12O6 + 6O2`,
-        tags: ["biology", "comprehensive"],
-        level: 0,
-      },
-    ],
-    showFullContent: true,
-    onSelectNote: action("UI:SELECT_NOTE"),
-  },
-};