@assistkick/create 1.7.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/CompositionPlaceholder.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { AbsoluteFill, useCurrentFrame, useVideoConfig, interpolate } from 'remotion';
+
+interface CompositionPlaceholderProps {
+  compositionId: string;
+  width: number;
+  height: number;
+}
+
+/**
+ * A placeholder composition component rendered by the Remotion Player
+ * when the actual composition bundle hasn't been loaded yet.
+ *
+ * Shows the composition ID, dimensions, and a simple animated progress bar
+ * to verify the player timeline and scrubbing work correctly.
+ */
+export const CompositionPlaceholder: React.FC<CompositionPlaceholderProps> = ({
+  compositionId,
+  width,
+  height,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps, durationInFrames } = useVideoConfig();
+  const progress = frame / durationInFrames;
+  const seconds = (frame / fps).toFixed(1);
+
+  const opacity = interpolate(frame, [0, 15], [0, 1], {
+    extrapolateRight: 'clamp',
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: '#0e100e',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontFamily: 'system-ui, sans-serif',
+        color: '#bbdedd',
+        opacity,
+      }}
+    >
+      <div
+        style={{
+          fontSize: 14,
+          letterSpacing: '0.1em',
+          textTransform: 'uppercase',
+          marginBottom: 16,
+          color: '#6b7280',
+        }}
+      >
+        Composition Preview
+      </div>
+      <div
+        style={{
+          fontSize: 28,
+          fontWeight: 600,
+          marginBottom: 8,
+        }}
+      >
+        {compositionId}
+      </div>
+      <div
+        style={{
+          fontSize: 13,
+          color: '#6b7280',
+          marginBottom: 32,
+        }}
+      >
+        {width}x{height} &middot; {fps}fps &middot; {seconds}s / {(durationInFrames / fps).toFixed(1)}s
+      </div>
+
+      {/* Progress bar */}
+      <div
+        style={{
+          width: '60%',
+          maxWidth: 400,
+          height: 4,
+          borderRadius: 2,
+          backgroundColor: '#1f2937',
+          overflow: 'hidden',
+        }}
+      >
+        <div
+          style={{
+            width: `${progress * 100}%`,
+            height: '100%',
+            borderRadius: 2,
+            backgroundColor: '#bbdedd',
+            transition: 'none',
+          }}
+        />
+      </div>
+    </AbsoluteFill>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/DesignSystemView.tsx

@@ -3,6 +3,8 @@ import { Columns3, Clock, FileText, Search, Settings } from 'lucide-react';
 import { NavBarSidekick } from './ds/NavBarSidekick';
 import type { NavItem as SidekickNavItem } from './ds/NavBarSidekick';
 import { KanbanCardShowcase } from './ds/KanbanCardShowcase';
+import { ButtonShowcase } from './ds/ButtonShowcase';
+import { SidePanelShowcase } from './ds/SidePanelShowcase';
 
 interface DesignSystemViewProps {
   visible: boolean;
@@ -222,6 +224,15 @@ export function DesignSystemView({ visible }: DesignSystemViewProps) {
           </div>
         </Section>
 
+        {/* ── Side Panel ── */}
+        <Section title="Side Panel" defaultOpen>
+          <p className="mb-5 text-[13px] text-content-muted">
+            Card stack layout for the node detail side panel. Collapsible sections for description,
+            acceptance criteria, open questions, resolved questions, notes, work summaries, and relationships.
+          </p>
+          <SidePanelShowcase />
+        </Section>
+
         {/* ── Kanban Card ── */}
         <Section title="Kanban Card" defaultOpen>
           <p className="mb-5 text-[13px] text-content-muted">
@@ -231,6 +242,15 @@ export function DesignSystemView({ visible }: DesignSystemViewProps) {
           <KanbanCardShowcase />
         </Section>
 
+        {/* ── Buttons ── */}
+        <Section title="Buttons" defaultOpen>
+          <p className="mb-5 text-[13px] text-content-muted">
+            Four button variants: Primary (accent fill with glow), Secondary (outline that fills on hover),
+            Ghost (subtle border), and Danger (dashed error border). Three sizes, icon-only, and grouped layouts.
+          </p>
+          <ButtonShowcase />
+        </Section>
+
         {/* ── Colors ── */}
         <Section title="Color Palette">
           <p className="mb-5 text-[13px] text-content-muted">

package/templates/assistkick-product-system/packages/frontend/src/components/EditorTabBar.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback } from 'react';
+import { X } from 'lucide-react';
+
+export interface EditorTab {
+  path: string;
+  name: string;
+  language: string;
+}
+
+interface EditorTabBarProps {
+  tabs: EditorTab[];
+  activeTabPath: string | null;
+  dirtyPaths: Set<string>;
+  onSelectTab: (path: string) => void;
+  onCloseTab: (path: string) => void;
+}
+
+export const EditorTabBar = ({ tabs, activeTabPath, dirtyPaths, onSelectTab, onCloseTab }: EditorTabBarProps) => {
+  const handleMiddleClick = useCallback((e: React.MouseEvent, path: string) => {
+    if (e.button === 1) {
+      e.preventDefault();
+      onCloseTab(path);
+    }
+  }, [onCloseTab]);
+
+  const handleCloseClick = useCallback((e: React.MouseEvent, path: string) => {
+    e.stopPropagation();
+    onCloseTab(path);
+  }, [onCloseTab]);
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <div className="editor-tab-bar">
+      {tabs.map((tab) => (
+        <button
+          key={tab.path}
+          className={`editor-tab ${tab.path === activeTabPath ? 'editor-tab--active' : ''}`}
+          onClick={() => onSelectTab(tab.path)}
+          onMouseDown={(e) => handleMiddleClick(e, tab.path)}
+          title={tab.path}
+        >
+          {dirtyPaths.has(tab.path) && <span className="editor-tab__dirty">●</span>}
+          <span className="editor-tab__name">{tab.name}</span>
+          <span
+            className="editor-tab__close"
+            onClick={(e) => handleCloseClick(e, tab.path)}
+            role="button"
+            tabIndex={-1}
+          >
+            <X size={12} strokeWidth={2} />
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/FileTree.tsx

@@ -0,0 +1,313 @@
+import React, { useState, useCallback, useRef } from 'react';
+import { ChevronRight, ChevronDown, File, Folder, FolderOpen } from 'lucide-react';
+import { FileTreeContextMenu } from './FileTreeContextMenu';
+import { FileTreeInlineInput } from './FileTreeInlineInput';
+import { getParentPath } from '../utils/file_utils';
+import type { ContextMenuItem } from './FileTreeContextMenu';
+
+export interface TreeEntry {
+  name: string;
+  path: string;
+  type: 'file' | 'directory';
+  children?: TreeEntry[];
+}
+
+export interface InlineInputState {
+  parentPath: string;
+  type: 'file' | 'directory';
+  mode: 'create' | 'rename';
+  initialValue: string;
+  targetPath?: string;
+  depth: number;
+}
+
+interface ContextMenuState {
+  x: number;
+  y: number;
+  items: ContextMenuItem[];
+}
+
+export interface FileTreeCallbacks {
+  onFileSelect: (path: string, name: string) => void;
+  onCreateFile: (parentPath: string, name: string, type: 'file' | 'directory') => void;
+  onRename: (oldPath: string, newName: string) => void;
+  onDelete: (path: string, type: 'file' | 'directory') => void;
+}
+
+interface FileTreeProps {
+  tree: TreeEntry[];
+  callbacks: FileTreeCallbacks;
+  selectedPath: string | null;
+  expandedPaths: Set<string>;
+  onToggleExpand: (path: string) => void;
+}
+
+interface FileTreeNodeProps {
+  entry: TreeEntry;
+  depth: number;
+  callbacks: FileTreeCallbacks;
+  selectedPath: string | null;
+  expandedPaths: Set<string>;
+  onToggleExpand: (path: string) => void;
+  inlineInput: InlineInputState | null;
+  onSetInlineInput: (state: InlineInputState | null) => void;
+  onContextMenu: (e: React.MouseEvent, entry: TreeEntry, depth: number) => void;
+}
+
+const ICON_SIZE = 14;
+
+const FileTreeNode = ({
+  entry, depth, callbacks, selectedPath,
+  expandedPaths, onToggleExpand,
+  inlineInput, onSetInlineInput, onContextMenu,
+}: FileTreeNodeProps) => {
+  const expanded = expandedPaths.has(entry.path);
+
+  const handleClick = useCallback(() => {
+    if (entry.type === 'directory') {
+      onToggleExpand(entry.path);
+    } else {
+      callbacks.onFileSelect(entry.path, entry.name);
+    }
+  }, [entry, callbacks, onToggleExpand]);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onContextMenu(e, entry, depth);
+  }, [entry, depth, onContextMenu]);
+
+  const isSelected = entry.type === 'file' && entry.path === selectedPath;
+  const isRenaming = inlineInput?.mode === 'rename' && inlineInput.targetPath === entry.path;
+
+  // Show inline input for rename
+  if (isRenaming) {
+    return (
+      <FileTreeInlineInput
+        depth={depth}
+        initialValue={inlineInput!.initialValue}
+        type={entry.type}
+        onSubmit={(newName) => {
+          callbacks.onRename(entry.path, newName);
+          onSetInlineInput(null);
+        }}
+        onCancel={() => onSetInlineInput(null)}
+      />
+    );
+  }
+
+  // Check if there's a create-input targeting this directory
+  const showCreateInput = inlineInput?.mode === 'create' && inlineInput.parentPath === entry.path;
+
+  return (
+    <>
+      <button
+        className={`file-tree-node ${isSelected ? 'file-tree-node--selected' : ''}`}
+        style={{ paddingLeft: `${depth * 16 + 8}px` }}
+        onClick={handleClick}
+        onContextMenu={handleContextMenu}
+        title={entry.path}
+      >
+        {entry.type === 'directory' ? (
+          <>
+            <span className="file-tree-node__chevron">
+              {expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+            </span>
+            {expanded
+              ? <FolderOpen size={ICON_SIZE} className="file-tree-node__icon file-tree-node__icon--folder" />
+              : <Folder size={ICON_SIZE} className="file-tree-node__icon file-tree-node__icon--folder" />
+            }
+          </>
+        ) : (
+          <>
+            <span className="file-tree-node__chevron file-tree-node__chevron--hidden" />
+            <File size={ICON_SIZE} className="file-tree-node__icon" />
+          </>
+        )}
+        <span className="file-tree-node__name">{entry.name}</span>
+      </button>
+      {entry.type === 'directory' && expanded && (
+        <>
+          {showCreateInput && (
+            <FileTreeInlineInput
+              depth={depth + 1}
+              initialValue=""
+              type={inlineInput!.type}
+              onSubmit={(name) => {
+                callbacks.onCreateFile(entry.path, name, inlineInput!.type);
+                onSetInlineInput(null);
+              }}
+              onCancel={() => onSetInlineInput(null)}
+            />
+          )}
+          {entry.children?.map((child) => (
+            <FileTreeNode
+              key={child.path}
+              entry={child}
+              depth={depth + 1}
+              callbacks={callbacks}
+              selectedPath={selectedPath}
+              expandedPaths={expandedPaths}
+              onToggleExpand={onToggleExpand}
+              inlineInput={inlineInput}
+              onSetInlineInput={onSetInlineInput}
+              onContextMenu={onContextMenu}
+            />
+          ))}
+        </>
+      )}
+    </>
+  );
+};
+
+export const FileTree = ({ tree, callbacks, selectedPath, expandedPaths, onToggleExpand }: FileTreeProps) => {
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [inlineInput, setInlineInput] = useState<InlineInputState | null>(null);
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  const handleContextMenu = useCallback((e: React.MouseEvent, entry: TreeEntry, depth: number) => {
+    const items: ContextMenuItem[] = [];
+
+    if (entry.type === 'directory') {
+      items.push({
+        label: 'New File',
+        action: () => {
+          // Ensure directory is expanded
+          if (!expandedPaths.has(entry.path)) {
+            onToggleExpand(entry.path);
+          }
+          setInlineInput({
+            parentPath: entry.path,
+            type: 'file',
+            mode: 'create',
+            initialValue: '',
+            depth: depth + 1,
+          });
+        },
+      });
+      items.push({
+        label: 'New Folder',
+        action: () => {
+          if (!expandedPaths.has(entry.path)) {
+            onToggleExpand(entry.path);
+          }
+          setInlineInput({
+            parentPath: entry.path,
+            type: 'directory',
+            mode: 'create',
+            initialValue: '',
+            depth: depth + 1,
+          });
+        },
+      });
+    }
+
+    items.push({
+      label: 'Rename',
+      action: () => {
+        setInlineInput({
+          parentPath: entry.type === 'directory' ? entry.path : getParentPath(entry.path),
+          type: entry.type,
+          mode: 'rename',
+          initialValue: entry.name,
+          targetPath: entry.path,
+          depth,
+        });
+      },
+    });
+
+    items.push({
+      label: 'Delete',
+      action: () => {
+        const confirmMsg = entry.type === 'directory'
+          ? `Delete folder "${entry.name}" and all its contents?`
+          : `Delete "${entry.name}"?`;
+        if (window.confirm(confirmMsg)) {
+          callbacks.onDelete(entry.path, entry.type);
+        }
+      },
+    });
+
+    setContextMenu({ x: e.clientX, y: e.clientY, items });
+  }, [callbacks, expandedPaths, onToggleExpand]);
+
+  const handleRootContextMenu = useCallback((e: React.MouseEvent) => {
+    // Only trigger if clicking on the empty area (not on a tree node)
+    if ((e.target as HTMLElement).closest('.file-tree-node')) return;
+
+    e.preventDefault();
+    setContextMenu({
+      x: e.clientX,
+      y: e.clientY,
+      items: [
+        {
+          label: 'New File',
+          action: () => {
+            setInlineInput({
+              parentPath: '',
+              type: 'file',
+              mode: 'create',
+              initialValue: '',
+              depth: 0,
+            });
+          },
+        },
+        {
+          label: 'New Folder',
+          action: () => {
+            setInlineInput({
+              parentPath: '',
+              type: 'directory',
+              mode: 'create',
+              initialValue: '',
+              depth: 0,
+            });
+          },
+        },
+      ],
+    });
+  }, []);
+
+  // Check if there's a root-level create input (parentPath === '')
+  const showRootCreateInput = inlineInput?.mode === 'create' && inlineInput.parentPath === '';
+
+  return (
+    <div className="file-tree" ref={treeRef} onContextMenu={handleRootContextMenu}>
+      {showRootCreateInput && (
+        <FileTreeInlineInput
+          depth={0}
+          initialValue=""
+          type={inlineInput!.type}
+          onSubmit={(name) => {
+            callbacks.onCreateFile('', name, inlineInput!.type);
+            setInlineInput(null);
+          }}
+          onCancel={() => setInlineInput(null)}
+        />
+      )}
+      {tree.map((entry) => (
+        <FileTreeNode
+          key={entry.path}
+          entry={entry}
+          depth={0}
+          callbacks={callbacks}
+          selectedPath={selectedPath}
+          expandedPaths={expandedPaths}
+          onToggleExpand={onToggleExpand}
+          inlineInput={inlineInput}
+          onSetInlineInput={setInlineInput}
+          onContextMenu={handleContextMenu}
+        />
+      ))}
+      {contextMenu && (
+        <FileTreeContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          items={contextMenu.items}
+          onClose={() => setContextMenu(null)}
+        />
+      )}
+    </div>
+  );
+};
+

package/templates/assistkick-product-system/packages/frontend/src/components/FileTreeContextMenu.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+
+export interface ContextMenuItem {
+  label: string;
+  action: () => void;
+}
+
+interface FileTreeContextMenuProps {
+  x: number;
+  y: number;
+  items: ContextMenuItem[];
+  onClose: () => void;
+}
+
+export const FileTreeContextMenu = ({ x, y, items, onClose }: FileTreeContextMenuProps) => {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = useCallback((e: MouseEvent) => {
+    if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+      onClose();
+    }
+  }, [onClose]);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [handleClickOutside]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [onClose]);
+
+  // Adjust position to stay within viewport
+  const style: React.CSSProperties = {
+    position: 'fixed',
+    left: x,
+    top: y,
+    zIndex: 1000,
+  };
+
+  return (
+    <div className="file-tree-context-menu" ref={menuRef} style={style}>
+      {items.map((item) => (
+        <button
+          key={item.label}
+          className="file-tree-context-menu__item"
+          onClick={() => {
+            item.action();
+            onClose();
+          }}
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/FileTreeInlineInput.tsx

@@ -0,0 +1,73 @@
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { File, Folder } from 'lucide-react';
+
+const ICON_SIZE = 14;
+
+interface FileTreeInlineInputProps {
+  depth: number;
+  initialValue: string;
+  type: 'file' | 'directory';
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
+export const FileTreeInlineInput = ({ depth, initialValue, type, onSubmit, onCancel }: FileTreeInlineInputProps) => {
+  const [value, setValue] = useState(initialValue);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      if (initialValue) {
+        // For rename: select the name part without extension
+        const dotIdx = initialValue.lastIndexOf('.');
+        if (dotIdx > 0 && type === 'file') {
+          inputRef.current.setSelectionRange(0, dotIdx);
+        } else {
+          inputRef.current.select();
+        }
+      }
+    }
+  }, [initialValue, type]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const trimmed = value.trim();
+      if (trimmed) {
+        onSubmit(trimmed);
+      } else {
+        onCancel();
+      }
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onCancel();
+    }
+  }, [value, onSubmit, onCancel]);
+
+  const handleBlur = useCallback(() => {
+    onCancel();
+  }, [onCancel]);
+
+  return (
+    <div
+      className="file-tree-inline-input"
+      style={{ paddingLeft: `${depth * 16 + 8}px` }}
+    >
+      <span className="file-tree-node__chevron file-tree-node__chevron--hidden" />
+      {type === 'directory'
+        ? <Folder size={ICON_SIZE} className="file-tree-node__icon file-tree-node__icon--folder" />
+        : <File size={ICON_SIZE} className="file-tree-node__icon" />
+      }
+      <input
+        ref={inputRef}
+        className="file-tree-inline-input__field"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        spellCheck={false}
+      />
+    </div>
+  );
+};