@assistkick/create 1.7.0 → 1.8.0

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

@@ -0,0 +1,221 @@
+import { Play, Copy, Settings, Plus, Trash2, AlertTriangle, Check, ArrowRight, Download, ExternalLink } from 'lucide-react';
+import { Button } from './Button';
+import { IconButton } from './IconButton';
+import { ButtonGroup } from './ButtonGroup';
+
+/* ── Component ── */
+
+export const ButtonShowcase = () => {
+  return (
+    <div>
+      {/* ─── Primary ─── */}
+      <h4 className="mb-3 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+        Primary
+      </h4>
+      <p className="mb-4 text-[12px] text-content-muted">
+        Accent fill with glow. Use for the main call-to-action per view.
+      </p>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="primary" icon={<Plus size={14} strokeWidth={2} />}>
+          Create Feature
+        </Button>
+        <Button variant="primary">
+          Save Changes
+        </Button>
+        <Button variant="primary" disabled>
+          Disabled
+        </Button>
+      </div>
+
+      {/* ─── Secondary / Outline ─── */}
+      <h4 className="mb-3 mt-8 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+        Secondary (Outline)
+      </h4>
+      <p className="mb-4 text-[12px] text-content-muted">
+        Transparent with accent border. Fills on hover. Use alongside primary or for secondary actions.
+      </p>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="secondary" icon={<ArrowRight size={14} strokeWidth={2} />}>
+          Continue
+        </Button>
+        <Button variant="secondary">
+          Sign In
+        </Button>
+        <Button variant="secondary" disabled>
+          Disabled
+        </Button>
+      </div>
+
+      {/* ─── Ghost ─── */}
+      <h4 className="mb-3 mt-8 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+        Ghost
+      </h4>
+      <p className="mb-4 text-[12px] text-content-muted">
+        Transparent with subtle border. Use for toolbar actions, settings, and low-emphasis controls.
+      </p>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="ghost" icon={<Settings size={14} strokeWidth={2} />}>
+          Settings
+        </Button>
+        <Button variant="ghost" icon={<Download size={14} strokeWidth={2} />}>
+          Export
+        </Button>
+        <Button variant="ghost">
+          Cancel
+        </Button>
+      </div>
+
+      {/* ─── Danger ─── */}
+      <h4 className="mb-3 mt-8 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+        Danger
+      </h4>
+      <p className="mb-4 text-[12px] text-content-muted">
+        Dashed error border. Fills on hover. Use for destructive or irreversible actions.
+      </p>
+      <div className="flex flex-wrap items-center gap-3">
+        <Button variant="danger" icon={<Trash2 size={14} strokeWidth={2} />}>
+          Delete
+        </Button>
+        <Button variant="danger" icon={<AlertTriangle size={14} strokeWidth={2} />}>
+          Unblock
+        </Button>
+      </div>
+
+      {/* ─── Icon Buttons ─── */}
+      <h4 className="mb-3 mt-8 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+        Icon Buttons
+      </h4>
+      <p className="mb-4 text-[12px] text-content-muted">
+        Square icon-only buttons for compact controls. Available in multiple sizes and variants.
+      </p>
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex flex-col items-center gap-1.5">
+          <IconButton label="Settings" size="lg">
+            <Settings size={18} strokeWidth={2} />
+          </IconButton>
+          <span className="text-[10px] text-content-muted">lg</span>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <IconButton label="Settings" size="md">
+            <Settings size={14} strokeWidth={2} />
+          </IconButton>
+          <span className="text-[10px] text-content-muted">md</span>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <IconButton label="Copy" size="sm">
+            <Copy size={12} strokeWidth={2} />
+          </IconButton>
+          <span className="text-[10px] text-content-muted">sm</span>
+        </div>
+
+        <div className="mx-2 h-8 w-px bg-edge" />
+
+        <div className="flex flex-col items-center gap-1.5">
+          <IconButton label="Add" variant="accent">
+            <Plus size={14} strokeWidth={2} />
+          </IconButton>
+          <span className="text-[10px] text-content-muted">accent</span>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <IconButton label="Play" variant="accent" shape="circle">
+            <Play size={12} strokeWidth={2} fill="currentColor" />
+          </IconButton>
+          <span className="text-[10px] text-content-muted">circle</span>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <IconButton label="Delete" variant="danger">
+            <Trash2 size={14} strokeWidth={2} />
+          </IconButton>
+          <span className="text-[10px] text-content-muted">danger</span>
+        </div>
+      </div>
+
+      {/* ─── Sizes ─── */}
+      <h4 className="mb-3 mt-8 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+        Sizes
+      </h4>
+      <p className="mb-4 text-[12px] text-content-muted">
+        Three sizes for different contexts. Small for inline/card controls, medium for standard actions, large for hero CTAs.
+      </p>
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex flex-col items-center gap-1.5">
+          <Button variant="primary" size="sm" icon={<Check size={12} strokeWidth={2} />}>
+            Small
+          </Button>
+          <span className="text-[10px] text-content-muted">sm · 28px</span>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Button variant="primary" size="md" icon={<Check size={14} strokeWidth={2} />}>
+            Medium
+          </Button>
+          <span className="text-[10px] text-content-muted">md · 36px</span>
+        </div>
+        <div className="flex flex-col items-center gap-1.5">
+          <Button variant="primary" size="lg" icon={<Check size={16} strokeWidth={2} />}>
+            Large
+          </Button>
+          <span className="text-[10px] text-content-muted">lg · 44px</span>
+        </div>
+      </div>
+
+      {/* ─── Button Group ─── */}
+      <h4 className="mb-3 mt-8 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+        Button Group
+      </h4>
+      <p className="mb-4 text-[12px] text-content-muted">
+        Related actions grouped with merged borders.
+      </p>
+      <div className="flex flex-wrap items-center gap-3">
+        <ButtonGroup>
+          <button>Board</button>
+          <button className="bg-accent/10 font-semibold text-accent">List</button>
+          <button>Timeline</button>
+        </ButtonGroup>
+
+        <div className="mx-2 h-8 w-px bg-edge" />
+
+        <ButtonGroup>
+          <button className="flex items-center gap-1.5">
+            <Copy size={12} strokeWidth={2} />
+            Copy
+          </button>
+          <button className="flex items-center gap-1.5">
+            <Download size={12} strokeWidth={2} />
+            Export
+          </button>
+          <button className="flex items-center gap-1.5">
+            <ExternalLink size={12} strokeWidth={2} />
+            Share
+          </button>
+        </ButtonGroup>
+      </div>
+
+      {/* ─── States ─── */}
+      <h4 className="mb-3 mt-8 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+        Interactive States
+      </h4>
+      <p className="mb-4 text-[12px] text-content-muted">
+        All buttons follow the same state pattern: default, hover (brighter/fill), active (pressed), disabled (50% opacity).
+      </p>
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        {([
+          { state: 'Default', extraClass: '' },
+          { state: 'Hover', extraClass: 'brightness-110' },
+          { state: 'Active', extraClass: 'brightness-90' },
+          { state: 'Disabled', extraClass: '', disabled: true },
+        ] as const).map(({ state, extraClass, ...rest }) => (
+          <div key={state} className="rounded-xl border border-edge px-4 py-3 text-center">
+            <Button
+              variant="primary"
+              className={extraClass}
+              disabled={'disabled' in rest}
+            >
+              Action
+            </Button>
+            <div className="mt-2 text-[10px] text-content-muted">{state}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,141 @@
+import {
+  Play, AlertTriangle, Lock, CircleDot, Copy,
+} from 'lucide-react';
+import { KindBadge } from './KindBadge';
+
+/* ── Types ── */
+
+export interface DemoCard {
+  id: string;
+  name: string;
+  pct: number;
+  kind: 'new' | 'improvement' | 'bugfix';
+  rejections: number;
+  pipeline: 'idle' | 'active' | 'completed' | 'failed' | 'interrupted' | 'blocked';
+  blocked: boolean;
+  issues: number;
+  stage: 'in_progress' | 'in_review' | 'qa';
+}
+
+interface Props {
+  card: DemoCard;
+}
+
+/* ── Pipeline helpers ── */
+
+const pipelineStyle = (status: DemoCard['pipeline']): string => {
+  switch (status) {
+    case 'active': return 'bg-accent/10 text-accent animate-pulse';
+    case 'completed': return 'bg-emerald-500/10 text-emerald-400';
+    case 'failed': return 'bg-error/10 text-error';
+    case 'blocked': return 'bg-error/10 text-error';
+    case 'interrupted': return 'bg-amber-500/10 text-amber-400';
+    default: return '';
+  }
+};
+
+const pipelineLabel = (status: DemoCard['pipeline'], rejections: number): string => {
+  if (rejections >= 1 && status !== 'idle') return `Retry ${rejections + 1}`;
+  switch (status) {
+    case 'active': return 'Running...';
+    case 'completed': return 'Completed';
+    case 'failed': return 'Failed';
+    case 'blocked': return 'Blocked';
+    case 'interrupted': return 'Interrupted';
+    default: return '';
+  }
+};
+
+/* ── Component ── */
+
+export const CardGlass = ({ card }: Props) => {
+  const hasPipeline = card.pipeline !== 'idle';
+  const hasStatusRow = card.rejections > 0 || hasPipeline;
+  const stripColor = card.blocked
+    ? 'from-error/60 to-error/20'
+    : card.rejections >= 3
+      ? 'from-error/40 to-amber-500/20'
+      : card.pipeline === 'active'
+        ? 'from-accent/60 to-accent/20'
+        : card.pipeline === 'completed'
+          ? 'from-emerald-400/60 to-emerald-400/20'
+          : 'from-edge to-transparent';
+
+  return (
+    <div className="group relative overflow-hidden rounded-2xl bg-surface border border-edge shadow-lg shadow-black/10 backdrop-blur-sm transition-all duration-200 hover:border-content/15 hover:shadow-xl hover:shadow-black/15">
+      <div className={`absolute left-0 top-0 h-full w-1 bg-gradient-to-b ${stripColor}`} />
+      <div className="p-5 pl-6">
+        {/* Header */}
+        <div className="flex items-center gap-2.5">
+          <span className="font-mono text-[12px] text-content-secondary">{card.id}</span>
+          <KindBadge kind={card.kind} />
+          <button className="flex h-6 w-6 items-center justify-center rounded-md bg-white/[0.08] text-content-secondary transition-colors hover:bg-white/15 hover:text-content cursor-pointer">
+            <Copy size={12} strokeWidth={2} />
+          </button>
+          <div className="flex-1" />
+          {card.blocked ? (
+            <span className="flex items-center gap-1.5 rounded-full bg-error/15 px-2.5 py-1 text-[11px] font-bold text-error backdrop-blur">
+              <Lock size={11} strokeWidth={2.5} /> Blocked
+            </span>
+          ) : card.pipeline === 'idle' ? (
+            <button className="flex h-7 w-7 items-center justify-center rounded-full bg-accent/10 text-accent backdrop-blur transition-all hover:bg-accent hover:text-surface hover:shadow-[0_0_12px_-2px_var(--accent)] cursor-pointer">
+              <Play size={12} strokeWidth={2.5} fill="currentColor" />
+            </button>
+          ) : null}
+        </div>
+
+        {/* Name */}
+        <div className="mt-3 text-[15px] font-semibold leading-snug text-content">{card.name}</div>
+
+        {/* Spec disc */}
+        <div className="mt-3.5 flex items-center gap-2.5">
+          <svg width="24" height="24" viewBox="0 0 24 24" className="shrink-0 -rotate-90">
+            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2.5" className="text-white/5" />
+            <circle
+              cx="12" cy="12" r="10" fill="none" strokeWidth="2.5"
+              stroke="url(#specGrad)" strokeLinecap="round"
+              strokeDasharray={`${(card.pct / 100) * 2 * Math.PI * 10} ${2 * Math.PI * 10}`}
+            />
+            <defs>
+              <linearGradient id="specGrad" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stopColor="var(--completeness-fill)" />
+                <stop offset="100%" stopColor="var(--accent)" stopOpacity="0.6" />
+              </linearGradient>
+            </defs>
+          </svg>
+          <span className="font-mono text-[12px] text-content-secondary">{card.pct}%</span>
+        </div>
+
+        {/* Status pills */}
+        {hasStatusRow && (
+          <div className="mt-3.5">
+            <div className="flex gap-1.5">
+              {card.rejections > 0 && (
+                <span className="flex-1 rounded-full bg-amber-400/15 py-1 text-center text-[11px] font-semibold text-amber-400 backdrop-blur">
+                  {card.rejections}x rejected
+                </span>
+              )}
+              {hasPipeline && (
+                <span className={`flex-1 inline-flex items-center justify-center gap-1.5 rounded-full py-1 text-[11px] font-semibold backdrop-blur ${pipelineStyle(card.pipeline)}`}>
+                  {card.pipeline === 'active' && <CircleDot size={12} strokeWidth={2.5} />}
+                  {card.pipeline === 'failed' && <AlertTriangle size={12} strokeWidth={2.5} />}
+                  {pipelineLabel(card.pipeline, card.rejections)}
+                </span>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Issues */}
+        <button className={[
+          'mt-3.5 w-full rounded-full border py-2 text-center text-[12px] font-mono backdrop-blur transition-all cursor-pointer',
+          card.issues > 0
+            ? 'border-white/10 text-content-secondary hover:border-accent/30 hover:text-accent'
+            : 'border-white/5 text-content-muted/50 hover:border-white/10 hover:text-content-muted',
+        ].join(' ')}>
+          {card.issues > 0 ? `${card.issues} issue${card.issues !== 1 ? 's' : ''} reported` : 'No issues'}
+        </button>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,30 @@
+import React from 'react';
+
+export interface CompletionRingProps {
+  /** Completion percentage as 0–1 fraction */
+  pct: number;
+  /** Outer diameter in px */
+  size?: number;
+}
+
+export function CompletionRing({ pct, size = 40 }: CompletionRingProps) {
+  const r = (size - 6) / 2;
+  const circumference = 2 * Math.PI * r;
+  const offset = circumference * (1 - pct);
+  return (
+    <svg width={size} height={size} className="shrink-0">
+      <circle cx={size / 2} cy={size / 2} r={r} fill="none"
+        stroke="var(--completeness-bg)" strokeWidth={3} />
+      <circle cx={size / 2} cy={size / 2} r={r} fill="none"
+        stroke="var(--completeness-fill)" strokeWidth={3}
+        strokeDasharray={circumference} strokeDashoffset={offset}
+        strokeLinecap="round"
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        className="transition-all duration-500" />
+      <text x={size / 2} y={size / 2} textAnchor="middle" dominantBaseline="central"
+        className="fill-content text-[10px] font-bold">
+        {Math.round(pct * 100)}%
+      </text>
+    </svg>
+  );
+}

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

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+
+export interface ContentCardProps {
+  icon: React.ReactNode;
+  label: string;
+  badge?: React.ReactNode;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+export function ContentCard({ icon, label, badge, defaultOpen = false, children }: ContentCardProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className="rounded-xl border border-edge bg-surface-alt overflow-hidden">
+      <button
+        onClick={() => setOpen(v => !v)}
+        className="flex w-full items-center gap-2 px-3 py-2.5 text-left hover:bg-surface-raised/50 transition-colors"
+      >
+        <span className="text-content-muted shrink-0">{icon}</span>
+        <span className="text-[12px] font-medium text-content flex-1">{label}</span>
+        {badge}
+        {open
+          ? <ChevronDown size={13} className="text-content-muted" />
+          : <ChevronRight size={13} className="text-content-muted" />}
+      </button>
+      {open && (
+        <div className="border-t border-edge px-3 py-3">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+/* ── Types ── */
+
+type IconButtonVariant = 'ghost' | 'accent' | 'danger';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+type IconButtonShape = 'square' | 'circle';
+
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: IconButtonVariant;
+  size?: IconButtonSize;
+  shape?: IconButtonShape;
+  /** Accessible label — required since there is no visible text */
+  label: string;
+  children: React.ReactNode;
+}
+
+/* ── Style maps ── */
+
+const variantClasses: Record<IconButtonVariant, string> = {
+  ghost: [
+    'border border-edge bg-transparent text-content-muted',
+    'hover:border-content/20 hover:text-content',
+  ].join(' '),
+  accent: [
+    'border border-accent/30 bg-transparent text-accent',
+    'hover:bg-accent hover:text-surface',
+  ].join(' '),
+  danger: [
+    'border border-dashed border-error bg-transparent text-error',
+    'hover:bg-error hover:text-white',
+  ].join(' '),
+};
+
+const sizeClasses: Record<IconButtonSize, { box: string; radius: Record<IconButtonShape, string> }> = {
+  sm: { box: 'h-6 w-6', radius: { square: 'rounded-md', circle: 'rounded-full' } },
+  md: { box: 'h-8 w-8', radius: { square: 'rounded-lg', circle: 'rounded-full' } },
+  lg: { box: 'h-10 w-10', radius: { square: 'rounded-lg', circle: 'rounded-full' } },
+};
+
+/* ── Component ── */
+
+export const IconButton = ({
+  variant = 'ghost',
+  size = 'md',
+  shape = 'square',
+  label,
+  disabled,
+  className = '',
+  children,
+  ...rest
+}: Props) => {
+  const base = 'flex items-center justify-center outline-none cursor-pointer transition-all duration-150';
+  const disabledClass = disabled ? 'opacity-50 cursor-not-allowed' : '';
+  const sizeConfig = sizeClasses[size];
+
+  return (
+    <button
+      aria-label={label}
+      disabled={disabled}
+      className={[
+        base,
+        variantClasses[variant],
+        sizeConfig.box,
+        sizeConfig.radius[shape],
+        disabledClass,
+        className,
+      ].join(' ')}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};