npm - @assistkick/create - Versions diffs - 1.5.0 → 1.7.0 - Mend

@assistkick/create 1.5.0 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/dist/bin/create.js CHANGED Viewed

File without changes

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@assistkick/create",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Scaffold assistkick-product-system into any project",
   "type": "module",
   "bin": {
@@ -10,16 +10,14 @@
     "dist",
     "templates"
   ],
-  "scripts": {
-    "build": "tsc",
-    "prepare_templates": "bash scripts/prepare_templates.sh",
-    "prepublishOnly": "bash scripts/prepare_templates.sh && pnpm build",
-    "publish": "npm publish",
-    "test": "tsx --test tests/**/*.test.ts"
-  },
   "devDependencies": {
     "@types/node": "^25.3.3",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsc",
+    "prepare_templates": "bash scripts/prepare_templates.sh",
+    "test": "tsx --test tests/**/*.test.ts"
   }
-}
+}

package/templates/assistkick-product-system/packages/frontend/index.html CHANGED Viewed

@@ -4,6 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
   <title>Dev Product System</title>
 </head>
 <body>

package/templates/assistkick-product-system/packages/frontend/package.json CHANGED Viewed

@@ -14,16 +14,20 @@
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
     "d3": "^7.9.0",
+    "lucide-react": "^0.577.0",
     "marked": "^15.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.6.0"
+    "react-router-dom": "^7.6.0",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.2.1",
     "@types/d3": "^7.4.3",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^4.5.2",
+    "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   }

package/templates/assistkick-product-system/packages/frontend/src/App.tsx CHANGED Viewed

@@ -6,7 +6,13 @@ import { RegisterRoute } from './routes/register';
 import { ForgotPasswordRoute } from './routes/forgot_password';
 import { ResetPasswordRoute } from './routes/reset_password';
 import { AcceptInvitationRoute } from './routes/accept_invitation';
-import { DashboardRoute } from './routes/dashboard';
+import { DashboardLayout } from './routes/DashboardLayout';
+import { GraphRoute } from './routes/GraphRoute';
+import { KanbanRoute } from './routes/KanbanRoute';
+import { CoherenceRoute } from './routes/CoherenceRoute';
+import { UsersRoute } from './routes/UsersRoute';
+import { TerminalRoute } from './routes/TerminalRoute';
+import { DesignSystemRoute } from './routes/DesignSystemRoute';
 export function App() {
   return (
@@ -17,12 +23,15 @@ export function App() {
       <Route path="/reset-password" element={<ResetPasswordRoute />} />
       <Route path="/accept-invitation" element={<AcceptInvitationRoute />} />
       <Route element={<ProtectedRoute />}>
-        <Route path="/" element={<Navigate to="/kanban" replace />} />
-        <Route path="/graph" element={<DashboardRoute />} />
-        <Route path="/kanban" element={<DashboardRoute />} />
-        <Route path="/coherence" element={<DashboardRoute />} />
-        <Route path="/users" element={<DashboardRoute />} />
-        <Route path="/terminal" element={<DashboardRoute />} />
+        <Route element={<DashboardLayout />}>
+          <Route path="/" element={<Navigate to="/kanban" replace />} />
+          <Route path="/graph" element={<GraphRoute />} />
+          <Route path="/kanban" element={<KanbanRoute />} />
+          <Route path="/coherence" element={<CoherenceRoute />} />
+          <Route path="/users" element={<UsersRoute />} />
+          <Route path="/terminal" element={<TerminalRoute />} />
+          <Route path="/design-system" element={<DesignSystemRoute />} />
+        </Route>
       </Route>
     </Routes>
   );

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

@@ -0,0 +1,363 @@
+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';
+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>
+        {/* ── 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>
+        {/* ── 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/GitRepoModal.tsx CHANGED Viewed

@@ -1,12 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { apiClient } from '../api/client';
-import type { Project } from '../hooks/useProjects';
-interface GitRepoModalProps {
-  project: Project;
-  onClose: () => void;
-  onProjectUpdated: () => void;
-}
+import { useGitModalStore } from '../stores/useGitModalStore';
+import { useProjectStore } from '../stores/useProjectStore';
 interface Installation {
   id: number;
@@ -24,7 +19,10 @@ interface Repo {
 type Tab = 'status' | 'github' | 'url' | 'init';
-export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModalProps) {
+export function GitRepoModal() {
+  const project = useGitModalStore((s) => s.project)!;
+  const onClose = useGitModalStore((s) => s.close);
+  const onProjectUpdated = useProjectStore((s) => s.refetchProjects);
   const [tab, setTab] = useState<Tab>('status');
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);