orbital-command 0.1.4 → 0.3.0

package/src/components/ui/tabs.tsx

@@ -1,52 +0,0 @@
-import * as React from 'react';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cn } from '@/lib/utils';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      'card-glass inline-flex h-8 items-center justify-center rounded bg-surface p-0.5 border border-border text-muted-foreground',
-      className
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-2.5 py-1 text-xxs uppercase tracking-wider font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface-light data-[state=active]:text-foreground data-[state=active]:shadow-sm',
-      className
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ComponentRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      className
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/toggle-switch.tsx

@@ -1,35 +0,0 @@
-import { cn } from '@/lib/utils';
-
-interface ToggleSwitchProps {
-  checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
-  disabled?: boolean;
-}
-
-export function ToggleSwitch({ checked, onCheckedChange, disabled }: ToggleSwitchProps) {
-  return (
-    <button
-      type="button"
-      role="switch"
-      aria-checked={checked}
-      disabled={disabled}
-      onClick={() => onCheckedChange(!checked)}
-      className={cn(
-        'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border transition-colors duration-200',
-        checked
-          ? 'border-[rgba(0,188,212,0.4)] bg-[rgba(0,188,212,0.25)]'
-          : 'border-[rgba(255,255,255,0.1)] bg-[rgba(255,255,255,0.05)]',
-        disabled && 'cursor-not-allowed opacity-40'
-      )}
-    >
-      <span
-        className={cn(
-          'pointer-events-none block h-3.5 w-3.5 rounded-full transition-all duration-200',
-          checked
-            ? 'translate-x-[18px] bg-[rgb(0,188,212)] shadow-[0_0_8px_rgba(0,188,212,0.5)]'
-            : 'translate-x-[2px] bg-[rgba(255,255,255,0.4)]'
-        )}
-      />
-    </button>
-  );
-}

package/src/components/ui/tooltip.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { cn } from '@/lib/utils';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ComponentRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      'card-glass z-50 overflow-hidden rounded border bg-popover px-2 py-1 text-xxs text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-      className
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/workflow/AddEdgeDialog.tsx

@@ -1,217 +0,0 @@
-import { useState, useMemo, useCallback } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { X, Plus } from 'lucide-react';
-import type { WorkflowEdge, WorkflowConfig, EdgeDirection, ConfirmLevel } from '../../../shared/workflow-config';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface AddEdgeDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  config: WorkflowConfig;
-  onAdd: (edge: WorkflowEdge) => void;
-}
-
-const DIRECTIONS: EdgeDirection[] = ['forward', 'backward', 'shortcut'];
-const CONFIRM_LEVELS: ConfirmLevel[] = ['quick', 'full'];
-
-const DIRECTION_COLORS: Record<string, string> = {
-  forward: '#22c55e',
-  backward: '#f59e0b',
-  shortcut: '#6366f1',
-};
-
-// ─── Component ──────────────────────────────────────────
-
-export function AddEdgeDialog({ open, onOpenChange, config, onAdd }: AddEdgeDialogProps) {
-  const [from, setFrom] = useState('');
-  const [to, setTo] = useState('');
-  const [direction, setDirection] = useState<EdgeDirection>('forward');
-  const [label, setLabel] = useState('');
-  const [command, setCommand] = useState('');
-  const [confirmLevel, setConfirmLevel] = useState<ConfirmLevel>('quick');
-
-  const listIds = useMemo(() => config.lists.map((l) => l.id), [config.lists]);
-
-  const errors = useMemo(() => {
-    const errs: string[] = [];
-    if (!from) errs.push('From is required');
-    if (!to) errs.push('To is required');
-    if (from && to && from === to) errs.push('From and To must be different');
-    if (from && to && config.edges.some((e) => e.from === from && e.to === to)) {
-      errs.push('An edge with this from:to already exists');
-    }
-    if (!label.trim()) errs.push('Label is required');
-    return errs;
-  }, [from, to, label, config.edges]);
-
-  const resetForm = useCallback(() => {
-    setFrom('');
-    setTo('');
-    setDirection('forward');
-    setLabel('');
-    setCommand('');
-    setConfirmLevel('quick');
-  }, []);
-
-  const handleSubmit = useCallback(() => {
-    if (errors.length > 0) return;
-    const edge: WorkflowEdge = {
-      from,
-      to,
-      direction,
-      label: label.trim(),
-      description: `Transition from ${from} to ${to}`,
-      command: command.trim() || null,
-      confirmLevel,
-    };
-    onAdd(edge);
-    resetForm();
-    onOpenChange(false);
-  }, [errors, from, to, direction, label, command, confirmLevel, onAdd, resetForm, onOpenChange]);
-
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" />
-        <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-96 -translate-x-1/2 -translate-y-1/2 rounded-lg border border-zinc-800 bg-zinc-900 shadow-xl">
-          {/* Header */}
-          <div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
-            <Dialog.Title className="flex items-center gap-2 text-sm font-medium text-zinc-100">
-              <Plus className="h-4 w-4 text-cyan-400" />
-              Add Edge
-            </Dialog.Title>
-            <Dialog.Close className="rounded p-1 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300">
-              <X className="h-4 w-4" />
-            </Dialog.Close>
-          </div>
-
-          {/* Form */}
-          <div className="space-y-4 p-5 text-xs">
-            {/* From / To */}
-            <div className="grid grid-cols-2 gap-3">
-              <FieldGroup label="From">
-                <select
-                  value={from}
-                  onChange={(e) => setFrom(e.target.value)}
-                  className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none focus:border-zinc-500"
-                >
-                  <option value="">Select...</option>
-                  {listIds.map((id) => <option key={id} value={id}>{id}</option>)}
-                </select>
-              </FieldGroup>
-              <FieldGroup label="To">
-                <select
-                  value={to}
-                  onChange={(e) => setTo(e.target.value)}
-                  className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none focus:border-zinc-500"
-                >
-                  <option value="">Select...</option>
-                  {listIds.map((id) => <option key={id} value={id}>{id}</option>)}
-                </select>
-              </FieldGroup>
-            </div>
-
-            {/* Direction */}
-            <FieldGroup label="Direction">
-              <div className="flex gap-1">
-                {DIRECTIONS.map((d) => {
-                  const color = DIRECTION_COLORS[d];
-                  return (
-                    <button
-                      key={d}
-                      onClick={() => setDirection(d)}
-                      className="flex-1 rounded px-2 py-1.5 text-[10px] font-medium uppercase transition-colors"
-                      style={{
-                        backgroundColor: direction === d ? `${color}20` : 'transparent',
-                        color: direction === d ? color : '#71717a',
-                        border: `1px solid ${direction === d ? `${color}40` : '#27272a'}`,
-                      }}
-                    >
-                      {d}
-                    </button>
-                  );
-                })}
-              </div>
-            </FieldGroup>
-
-            {/* Label */}
-            <FieldGroup label="Label">
-              <input
-                value={label}
-                onChange={(e) => setLabel(e.target.value)}
-                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
-                placeholder="e.g. Implement"
-              />
-            </FieldGroup>
-
-            {/* Command */}
-            <FieldGroup label="Command (optional)">
-              <input
-                value={command}
-                onChange={(e) => setCommand(e.target.value)}
-                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 font-mono text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
-                placeholder="/scope-implement {id}"
-              />
-            </FieldGroup>
-
-            {/* Confirm Level */}
-            <FieldGroup label="Confirm Level">
-              <div className="flex gap-1">
-                {CONFIRM_LEVELS.map((cl) => (
-                  <button
-                    key={cl}
-                    onClick={() => setConfirmLevel(cl)}
-                    className="flex-1 rounded px-2 py-1.5 text-[10px] font-medium uppercase transition-colors"
-                    style={{
-                      backgroundColor: confirmLevel === cl ? '#22c55e20' : 'transparent',
-                      color: confirmLevel === cl ? '#22c55e' : '#71717a',
-                      border: `1px solid ${confirmLevel === cl ? '#22c55e40' : '#27272a'}`,
-                    }}
-                  >
-                    {cl}
-                  </button>
-                ))}
-              </div>
-            </FieldGroup>
-
-            {/* Errors */}
-            {errors.length > 0 && from.length > 0 && to.length > 0 && (
-              <div className="rounded border border-red-500/30 bg-red-500/10 p-2.5">
-                {errors.map((e) => (
-                  <p key={e} className="text-[10px] text-red-400">{e}</p>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-zinc-800 px-5 py-4">
-            <Dialog.Close className="rounded px-3 py-1.5 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200">
-              Cancel
-            </Dialog.Close>
-            <button
-              onClick={handleSubmit}
-              disabled={errors.length > 0}
-              className="flex items-center gap-1.5 rounded bg-cyan-600 px-4 py-1.5 text-xs font-medium text-white hover:bg-cyan-500 disabled:opacity-40"
-            >
-              <Plus className="h-3.5 w-3.5" />
-              Add Edge
-            </button>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
-
-// ─── Sub-components ─────────────────────────────────────
-
-function FieldGroup({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div>
-      <label className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{label}</label>
-      {children}
-    </div>
-  );
-}

package/src/components/workflow/AddListDialog.tsx

@@ -1,201 +0,0 @@
-import { useState, useMemo, useCallback } from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { X, Plus } from 'lucide-react';
-import type { WorkflowList, WorkflowConfig } from '../../../shared/workflow-config';
-
-// ─── Types ──────────────────────────────────────────────
-
-interface AddListDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  config: WorkflowConfig;
-  onAdd: (list: WorkflowList) => void;
-}
-
-// ─── Color Utility ──────────────────────────────────────
-
-function hexToHsl(hex: string): string {
-  const r = parseInt(hex.slice(1, 3), 16) / 255;
-  const g = parseInt(hex.slice(3, 5), 16) / 255;
-  const b = parseInt(hex.slice(5, 7), 16) / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const l = (max + min) / 2;
-  if (max === min) return `0 0% ${Math.round(l * 100)}%`;
-  const d = max - min;
-  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-  let h = 0;
-  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-  else if (max === g) h = ((b - r) / d + 2) / 6;
-  else h = ((r - g) / d + 4) / 6;
-  return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
-}
-
-// ─── Component ──────────────────────────────────────────
-
-export function AddListDialog({ open, onOpenChange, config, onAdd }: AddListDialogProps) {
-  const [id, setId] = useState('');
-  const [label, setLabel] = useState('');
-  const [hex, setHex] = useState('#3b82f6');
-  const [group, setGroup] = useState('');
-
-  const existingGroups = useMemo(() => {
-    const groups = new Set(config.lists.map((l) => l.group).filter(Boolean));
-    return [...groups] as string[];
-  }, [config.lists]);
-
-  const maxOrder = useMemo(() => {
-    return Math.max(0, ...config.lists.map((l) => l.order));
-  }, [config.lists]);
-
-  const errors = useMemo(() => {
-    const errs: string[] = [];
-    if (!id) errs.push('ID is required');
-    else if (!/^[a-z0-9-]+$/.test(id)) errs.push('ID must be lowercase alphanumeric + hyphens');
-    else if (config.lists.some((l) => l.id === id)) errs.push('ID already exists');
-    if (!label.trim()) errs.push('Label is required');
-    return errs;
-  }, [id, label, config.lists]);
-
-  const resetForm = useCallback(() => {
-    setId('');
-    setLabel('');
-    setHex('#3b82f6');
-    setGroup('');
-  }, []);
-
-  const handleSubmit = useCallback(() => {
-    if (errors.length > 0) return;
-    const newList: WorkflowList = {
-      id,
-      label: label.trim(),
-      order: maxOrder + 1,
-      color: hexToHsl(hex),
-      hex,
-      hasDirectory: true,
-      ...(group ? { group } : {}),
-    };
-    onAdd(newList);
-    resetForm();
-    onOpenChange(false);
-  }, [errors, id, label, hex, group, maxOrder, onAdd, resetForm, onOpenChange]);
-
-  return (
-    <Dialog.Root open={open} onOpenChange={onOpenChange}>
-      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm" />
-        <Dialog.Content className="fixed left-1/2 top-1/2 z-50 w-96 -translate-x-1/2 -translate-y-1/2 rounded-lg border border-zinc-800 bg-zinc-900 shadow-xl">
-          {/* Header */}
-          <div className="flex items-center justify-between border-b border-zinc-800 px-5 py-4">
-            <Dialog.Title className="flex items-center gap-2 text-sm font-medium text-zinc-100">
-              <Plus className="h-4 w-4 text-cyan-400" />
-              Add List
-            </Dialog.Title>
-            <Dialog.Close className="rounded p-1 text-zinc-500 hover:bg-zinc-800 hover:text-zinc-300">
-              <X className="h-4 w-4" />
-            </Dialog.Close>
-          </div>
-
-          {/* Form */}
-          <div className="space-y-4 p-5 text-xs">
-            {/* Preview */}
-            <div className="flex items-center gap-3 rounded border border-zinc-800 bg-zinc-950/50 p-3">
-              <div className="h-5 w-5 rounded" style={{ backgroundColor: hex }} />
-              <div>
-                <p className="text-sm text-zinc-200">{label || 'New List'}</p>
-                <p className="font-mono text-[10px] text-zinc-500">{id || 'list-id'}</p>
-              </div>
-            </div>
-
-            {/* ID */}
-            <FieldGroup label="ID">
-              <input
-                value={id}
-                onChange={(e) => setId(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
-                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 font-mono text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
-                placeholder="e.g. review"
-                autoFocus
-              />
-            </FieldGroup>
-
-            {/* Label */}
-            <FieldGroup label="Label">
-              <input
-                value={label}
-                onChange={(e) => setLabel(e.target.value)}
-                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none placeholder:text-zinc-600 focus:border-zinc-500"
-                placeholder="e.g. Review"
-              />
-            </FieldGroup>
-
-            {/* Color */}
-            <FieldGroup label="Color">
-              <div className="flex items-center gap-2">
-                <input
-                  type="color"
-                  value={hex}
-                  onChange={(e) => setHex(e.target.value)}
-                  className="h-8 w-8 cursor-pointer rounded border border-zinc-700 bg-zinc-800 p-0.5"
-                />
-                <input
-                  value={hex}
-                  onChange={(e) => setHex(e.target.value)}
-                  className="flex-1 rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 font-mono text-zinc-200 outline-none focus:border-zinc-500"
-                />
-              </div>
-            </FieldGroup>
-
-            {/* Group */}
-            <FieldGroup label="Group">
-              <select
-                value={group}
-                onChange={(e) => setGroup(e.target.value)}
-                className="w-full rounded border border-zinc-700 bg-zinc-800 px-2.5 py-2 text-zinc-200 outline-none focus:border-zinc-500"
-              >
-                <option value="">None</option>
-                {existingGroups.map((g) => (
-                  <option key={g} value={g}>{g}</option>
-                ))}
-              </select>
-            </FieldGroup>
-
-            {/* Errors */}
-            {errors.length > 0 && id.length > 0 && (
-              <div className="rounded border border-red-500/30 bg-red-500/10 p-2.5">
-                {errors.map((e) => (
-                  <p key={e} className="text-[10px] text-red-400">{e}</p>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Footer */}
-          <div className="flex items-center justify-end gap-2 border-t border-zinc-800 px-5 py-4">
-            <Dialog.Close className="rounded px-3 py-1.5 text-xs text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200">
-              Cancel
-            </Dialog.Close>
-            <button
-              onClick={handleSubmit}
-              disabled={errors.length > 0}
-              className="flex items-center gap-1.5 rounded bg-cyan-600 px-4 py-1.5 text-xs font-medium text-white hover:bg-cyan-500 disabled:opacity-40"
-            >
-              <Plus className="h-3.5 w-3.5" />
-              Add List
-            </button>
-          </div>
-        </Dialog.Content>
-      </Dialog.Portal>
-    </Dialog.Root>
-  );
-}
-
-// ─── Sub-components ─────────────────────────────────────
-
-function FieldGroup({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <div>
-      <label className="mb-1.5 block text-[10px] font-semibold uppercase tracking-wider text-zinc-500">{label}</label>
-      {children}
-    </div>
-  );
-}