@assistkick/create 1.6.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

@@ -0,0 +1,383 @@
+import React, { useState } from 'react';
+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;
+}
+
+/* ── Collapsible card section ── */
+
+function Section({ title, defaultOpen = false, children }: {
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <section className="mb-5">
+      <button
+        onClick={() => setOpen(v => !v)}
+        className={[
+          'flex w-full items-center justify-between',
+          'rounded-2xl px-6 py-4',
+          'bg-surface-alt border border-edge',
+          'cursor-pointer text-left outline-none',
+          'transition-colors duration-150 hover:border-content/15',
+        ].join(' ')}
+      >
+        <span className="text-[13px] font-bold uppercase tracking-widest text-content">
+          {title}
+        </span>
+        <span
+          className="text-[12px] text-content-muted transition-transform duration-200"
+          style={{ transform: open ? 'rotate(180deg)' : 'rotate(0deg)' }}
+        >
+          &#9662;
+        </span>
+      </button>
+      {open && (
+        <div className="mt-3 rounded-2xl border border-edge bg-surface-alt p-6">
+          {children}
+        </div>
+      )}
+    </section>
+  );
+}
+
+/* ── Subsection label ── */
+
+function SubLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <h4 className="mb-3 mt-8 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+      {children}
+    </h4>
+  );
+}
+
+/* ── Token data ── */
+
+const COLOR_TOKENS = [
+  { name: '--bg-primary', token: 'surface', label: 'Surface', desc: 'Page background' },
+  { name: '--bg-secondary', token: 'surface-alt', label: 'Surface Alt', desc: 'Card background' },
+  { name: '--bg-tertiary', token: 'surface-raised', label: 'Surface Raised', desc: 'Raised elements' },
+  { name: '--border-color', token: 'edge', label: 'Edge', desc: 'Borders & dividers' },
+  { name: '--text-primary', token: 'content', label: 'Content', desc: 'Primary text' },
+  { name: '--text-secondary', token: 'content-secondary', label: 'Content 2nd', desc: 'Secondary text' },
+  { name: '--text-muted', token: 'content-muted', label: 'Muted', desc: 'Placeholder text' },
+  { name: '--accent', token: 'accent', label: 'Accent', desc: 'Primary — green' },
+  { name: '--accent-secondary', token: 'accent-secondary', label: 'Accent 2nd', desc: 'Secondary — orange' },
+  { name: '--error-color', token: 'error', label: 'Error', desc: 'Error states' },
+  { name: '--panel-bg', token: 'panel', label: 'Panel', desc: 'Side panel bg' },
+  { name: '--completeness-bg', token: 'completeness-bg', label: 'Progress BG', desc: 'Track' },
+  { name: '--completeness-fill', token: 'completeness-fill', label: 'Progress Fill', desc: 'Fill' },
+];
+
+const TYPOGRAPHY_SCALE = [
+  { name: '3xl', size: '28px', weight: '700', element: 'Page title' },
+  { name: '2xl', size: '22px', weight: '600', element: 'Section heading' },
+  { name: 'xl', size: '18px', weight: '600', element: 'Subsection' },
+  { name: 'lg', size: '16px', weight: '500', element: 'Large body' },
+  { name: 'base', size: '14px', weight: '400', element: 'Body text' },
+  { name: 'sm', size: '13px', weight: '400', element: 'Small text' },
+  { name: 'xs', size: '12px', weight: '400', element: 'Caption' },
+];
+
+const SPACING_SCALE = [
+  { name: '1', px: 4 },
+  { name: '2', px: 8 },
+  { name: '3', px: 12 },
+  { name: '4', px: 16 },
+  { name: '6', px: 24 },
+  { name: '8', px: 32 },
+  { name: '10', px: 40 },
+  { name: '12', px: 48 },
+  { name: '16', px: 64 },
+];
+
+/* ── Demo data ── */
+
+const DEMO_SIDEKICK_ITEMS: SidekickNavItem[] = [
+  { id: 'board', label: 'Board', icon: <Columns3 size={14} strokeWidth={2} />, description: 'Kanban board view' },
+  { id: 'timeline', label: 'Timeline', icon: <Clock size={14} strokeWidth={2} />, description: 'Gantt chart & milestones' },
+  { id: 'docs', label: 'Docs', icon: <FileText size={14} strokeWidth={2} />, description: 'Documentation & notes' },
+];
+
+/* ── Main ── */
+
+export function DesignSystemView({ visible }: DesignSystemViewProps) {
+  if (!visible) return null;
+
+  return (
+    <div className="absolute inset-0 overflow-y-auto bg-surface text-content">
+      <div className="px-10 py-14">
+
+        {/* Page Header */}
+        <div className="mb-10">
+          <h1 className="text-[32px] font-bold uppercase tracking-tight text-content">
+            Design System
+          </h1>
+          <p className="mt-2 text-[14px] leading-relaxed text-content-secondary">
+            Living style guide. Tailwind CSS + CSS custom properties. Toggle theme to see tokens adapt.
+          </p>
+        </div>
+
+        {/* ── NavBar Segmented ── */}
+        <Section title="Navigation Bar" defaultOpen>
+          <p className="mb-5 text-[13px] text-content-muted">
+            Segmented control with filled active state and an integrated command palette search.
+            Active item gets an accent fill with glow. Press '/' or click to open command palette.
+          </p>
+
+          <div className="rounded-2xl border border-edge overflow-hidden">
+            <NavBarSidekick
+              items={DEMO_SIDEKICK_ITEMS}
+              brand={
+                <div className="flex items-center gap-2">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-lg border border-accent/30 font-bold text-accent">
+                    <Columns3 size={16} strokeWidth={2} />
+                  </div>
+                  <div>
+                    <div className="text-[12px] font-semibold text-content leading-none">Workspace</div>
+                    <div className="text-[10px] text-content-muted">Pro plan</div>
+                  </div>
+                </div>
+              }
+              actions={
+                <div className="flex items-center gap-1.5">
+                  <button className="flex h-8 w-8 items-center justify-center rounded-lg border border-edge text-content-muted hover:border-content/20 hover:text-content cursor-pointer outline-none transition-colors">
+                    <Settings size={14} strokeWidth={2} />
+                  </button>
+                  <div className="h-5 w-px bg-edge mx-1" />
+                </div>
+              }
+              trailing={
+                <div className="flex items-center gap-1.5">
+                  <div className="flex h-8 w-8 items-center justify-center rounded-full bg-accent text-[11px] font-bold text-surface">
+                    VD
+                  </div>
+                </div>
+              }
+            />
+          </div>
+
+          <SubLabel>Segment States</SubLabel>
+          <div className="flex flex-wrap gap-3">
+            {[
+              { state: 'Default', label: 'Item', active: false },
+              { state: 'Hover', label: 'Item', active: false, hover: true },
+              { state: 'Active', label: 'Item', active: true },
+            ].map(({ state, label, active, hover }) => (
+              <div key={state} className="rounded-xl border border-edge px-4 py-2.5 text-center min-w-[100px]">
+                <div
+                  className={[
+                    'inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-[11px] font-semibold uppercase tracking-wider',
+                    active
+                      ? 'bg-accent text-surface'
+                      : hover
+                        ? 'bg-surface-raised text-content'
+                        : 'text-content-muted',
+                  ].join(' ')}
+                  style={active ? { boxShadow: '0 2px 8px -2px var(--accent)' } : {}}
+                >
+                  <Columns3 size={12} strokeWidth={2} />
+                  {label}
+                </div>
+                <div className="mt-1.5 text-[10px] text-content-muted">{state}</div>
+              </div>
+            ))}
+          </div>
+
+          <SubLabel>Command Palette</SubLabel>
+          <div className="flex flex-wrap gap-3">
+            <div className="rounded-xl border border-edge px-4 py-2.5 text-center">
+              <div className="flex h-8 items-center gap-2 rounded-lg border border-edge px-3 text-[12px] text-content-muted">
+                <Search size={13} strokeWidth={2} />
+                Search
+                <kbd className="ml-1 rounded border border-edge bg-surface-raised px-1 py-0.5 text-[9px] font-mono text-content-muted">/</kbd>
+              </div>
+              <div className="mt-1 text-[10px] text-content-muted">Closed</div>
+            </div>
+            <div className="rounded-xl border border-edge px-4 py-2.5 text-center">
+              <div className="flex h-8 items-center gap-2 rounded-lg border border-accent/40 bg-surface px-3 text-[12px] text-content">
+                <Search size={13} strokeWidth={2} />
+                Search
+                <kbd className="ml-1 rounded border border-edge bg-surface-raised px-1 py-0.5 text-[9px] font-mono text-content-muted">/</kbd>
+              </div>
+              <div className="mt-1 text-[10px] text-content-muted">Open</div>
+            </div>
+            <div className="rounded-xl border border-edge px-4 py-2.5">
+              <div className="rounded-lg border border-edge bg-surface px-3 py-1.5">
+                <div className="text-[12px] text-content">doc<span className="animate-pulse text-accent">|</span></div>
+                <div className="mt-1.5 flex items-center gap-2 rounded-md bg-accent/10 px-2 py-1 text-[11px] text-accent">
+                  <FileText size={12} strokeWidth={2} /> Docs
+                  <span className="text-[10px] text-content-muted">— Documentation & notes</span>
+                </div>
+              </div>
+              <div className="mt-1 text-[10px] text-content-muted text-center">With results</div>
+            </div>
+          </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">
+            Glass aesthetic with gradient accent strips, frosted backdrop, and floating pill badges.
+            States: idle, active pipeline, interrupted/rejected, and blocked.
+          </p>
+          <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">
+            Theme tokens for surfaces, text, accents, and borders. Adapts to light and dark themes.
+          </p>
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+            {COLOR_TOKENS.map(({ name, token, label, desc }) => (
+              <div
+                key={name}
+                className="overflow-hidden rounded-2xl border border-edge"
+              >
+                <div
+                  className="h-16"
+                  style={{ backgroundColor: `var(${name})` }}
+                />
+                <div className="bg-surface-alt px-4 py-3">
+                  <div className="text-[13px] font-semibold text-content">{label}</div>
+                  <div className="mt-0.5 font-mono text-[10px] text-accent">{token}</div>
+                  <div className="mt-0.5 text-[11px] text-content-muted">{desc}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        {/* ── Typography ── */}
+        <Section title="Typography">
+          <p className="mb-5 text-[13px] text-content-muted">
+            Inter / system-ui. Generous line-heights for comfortable reading.
+          </p>
+
+          <div className="rounded-2xl border border-edge overflow-hidden">
+            {TYPOGRAPHY_SCALE.map(({ name, size, weight, element }, i) => (
+              <div
+                key={name}
+                className={[
+                  'flex items-baseline gap-6 px-5 py-4',
+                  i > 0 ? 'border-t border-edge' : '',
+                ].join(' ')}
+              >
+                <div className="w-14 shrink-0">
+                  <div className="font-mono text-[10px] font-semibold text-accent">{name}</div>
+                  <div className="font-mono text-[10px] text-content-muted">{size}</div>
+                </div>
+                <div className="w-24 shrink-0 text-[11px] text-content-muted uppercase tracking-wide">
+                  {element}
+                </div>
+                <div
+                  className="min-w-0 flex-1 truncate text-content"
+                  style={{
+                    fontSize: size,
+                    fontWeight: Number(weight),
+                    fontFamily: 'var(--font-system)',
+                    lineHeight: 1.5,
+                  }}
+                >
+                  The quick brown fox
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <SubLabel>Weights</SubLabel>
+          <div className="flex flex-wrap gap-3">
+            {[
+              { label: 'Regular', value: 400 },
+              { label: 'Medium', value: 500 },
+              { label: 'Semibold', value: 600 },
+              { label: 'Bold', value: 700 },
+            ].map(({ label, value }) => (
+              <div
+                key={value}
+                className="rounded-2xl border border-edge px-5 py-3 text-center"
+              >
+                <div
+                  className="text-[16px] text-content"
+                  style={{ fontWeight: value, fontFamily: 'var(--font-system)' }}
+                >
+                  Aa
+                </div>
+                <div className="mt-1 text-[10px] uppercase tracking-wider text-content-muted">{label}</div>
+                <div className="font-mono text-[10px] text-accent">{value}</div>
+              </div>
+            ))}
+          </div>
+
+          <SubLabel>Monospace</SubLabel>
+          <div className="rounded-2xl border border-edge bg-surface px-5 py-4">
+            <div className="font-mono text-[13px] leading-relaxed text-content">
+              <span className="text-accent">const</span>{' '}graph{' '}={' '}
+              <span className="text-accent">await</span>{' '}readGraph(projectId);
+            </div>
+            <div className="mt-2 font-mono text-[10px] text-content-muted uppercase tracking-wide">
+              ui-monospace &middot; SF Mono &middot; Cascadia Code &middot; Fira Code
+            </div>
+          </div>
+        </Section>
+
+        {/* ── Spacing ── */}
+        <Section title="Spacing">
+          <p className="mb-5 text-[13px] text-content-muted">
+            4px base unit. Tailwind utilities: p-2 = 8px, m-4 = 16px, gap-6 = 24px.
+          </p>
+
+          <div className="flex flex-wrap gap-4">
+            {SPACING_SCALE.map(({ name, px }) => (
+              <div
+                key={name}
+                className="flex flex-col items-center gap-2 rounded-2xl border border-edge px-4 py-3"
+                style={{ minWidth: '64px' }}
+              >
+                <div
+                  className="rounded-lg bg-accent/25"
+                  style={{ width: `${Math.max(px, 8)}px`, height: `${Math.max(px, 8)}px` }}
+                />
+                <div className="font-mono text-[11px] font-semibold text-accent">{name}</div>
+                <div className="font-mono text-[10px] text-content-muted">{px}px</div>
+              </div>
+            ))}
+          </div>
+        </Section>
+
+        {/* Footer */}
+        <div className="mt-6 pb-12 text-center text-[11px] uppercase tracking-widest text-content-muted">
+          Toggle theme to preview token adaptation
+        </div>
+      </div>
+    </div>
+  );
+}

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>
+  );
+};