refactor: migrate remaining components to Design System v4

111 files across 14 directories: common, tree-editor, kb-accelerator,
copilot, assistant, analytics, library, procedural, procedural-editor,
public, script-editor, ui, admin, step-library.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:18:15 -04:00
parent 858f890ed3
commit d1a56f0529
111 changed files with 1330 additions and 1330 deletions

View File

@@ -107,7 +107,7 @@ export function ParameterDetectorStepper({
<div className="border border-primary/20 rounded-xl bg-primary/[0.03] p-4 space-y-3">
{/* Progress */}
<div className="flex items-center justify-between">
<p className="text-xs font-medium text-foreground">
<p className="text-xs font-medium text-[#e2e5eb]">
Candidate {currentIndex + 1} of {candidates.length}
</p>
<div className="flex items-center gap-1">
@@ -127,10 +127,10 @@ export function ParameterDetectorStepper({
{/* Matched line */}
<div className="rounded-lg bg-black/20 px-3 py-2">
<p className="font-label text-xs text-amber-400 break-all">
<p className="font-sans text-xs text-xs text-amber-400 break-all">
{current.matchedLine}
</p>
<p className="font-label text-[0.5rem] text-muted-foreground mt-1">
<p className="font-sans text-xs text-[0.5rem] text-[#848b9b] mt-1">
Line {current.lineNumber} · {current.source === 'param_block' ? 'param() block' : 'variable assignment'}
</p>
</div>
@@ -138,7 +138,7 @@ export function ParameterDetectorStepper({
{/* Editable fields */}
<div className="grid grid-cols-2 gap-3">
<div>
<label className="text-xs text-muted-foreground mb-1 block">Key</label>
<label className="text-xs text-[#848b9b] mb-1 block">Key</label>
<Input
value={key}
onChange={e => setKey(e.target.value.replace(/[^a-zA-Z0-9_]/g, ''))}
@@ -149,7 +149,7 @@ export function ParameterDetectorStepper({
)}
</div>
<div>
<label className="text-xs text-muted-foreground mb-1 block">Label</label>
<label className="text-xs text-[#848b9b] mb-1 block">Label</label>
<Input
value={label}
onChange={e => setLabel(e.target.value)}
@@ -160,12 +160,12 @@ export function ParameterDetectorStepper({
<div className="grid grid-cols-2 gap-3">
<div>
<label className="text-xs text-muted-foreground mb-1 flex items-center gap-1.5">
<label className="text-xs text-[#848b9b] mb-1 flex items-center gap-1.5">
Type
<button
type="button"
onClick={() => setShowInferenceInfo(!showInferenceInfo)}
className="text-muted-foreground hover:text-primary transition-colors"
className="text-[#848b9b] hover:text-[#22d3ee] transition-colors"
title={current.inferenceReason}
>
<Info size={11} />
@@ -174,20 +174,20 @@ export function ParameterDetectorStepper({
<select
value={type}
onChange={e => setType(e.target.value as ScriptParameter['type'])}
className="w-full rounded-[10px] border border-border bg-card text-foreground px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] text-[#e2e5eb] px-3 py-2 text-sm focus:outline-none focus:border-[rgba(6,182,212,0.3)]"
>
{PARAM_TYPES.map(t => (
<option key={t.value} value={t.value}>{t.label}</option>
))}
</select>
{showInferenceInfo && (
<p className="text-[0.625rem] text-primary/80 mt-1 italic">
<p className="text-[0.625rem] text-[#22d3ee]/80 mt-1 italic">
{current.inferenceReason}
</p>
)}
</div>
<div>
<label className="text-xs text-muted-foreground mb-1 block">Default value</label>
<label className="text-xs text-[#848b9b] mb-1 block">Default value</label>
<Input
value={defaultValue}
onChange={e => setDefaultValue(e.target.value)}
@@ -197,32 +197,32 @@ export function ParameterDetectorStepper({
</div>
<div className="flex items-center gap-4">
<label className="flex items-center gap-2 text-sm text-foreground">
<label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
<input
type="checkbox"
checked={required}
onChange={e => setRequired(e.target.checked)}
className="rounded border-border"
className="rounded border-[#1e2130]"
/>
Required
</label>
<label className="flex items-center gap-2 text-sm text-foreground">
<label className="flex items-center gap-2 text-sm text-[#e2e5eb]">
<input
type="checkbox"
checked={sensitive}
onChange={e => setSensitive(e.target.checked)}
className="rounded border-border"
className="rounded border-[#1e2130]"
/>
Sensitive
</label>
</div>
{/* Actions */}
<div className="flex items-center justify-end gap-2 pt-1 border-t border-border">
<div className="flex items-center justify-end gap-2 pt-1 border-t border-[#1e2130]">
<button
type="button"
onClick={handleSkip}
className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors px-3 py-1.5"
className="flex items-center gap-1.5 text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors px-3 py-1.5"
>
<SkipForward size={13} />
{isLast ? 'Skip & Finish' : 'Skip'}
@@ -231,7 +231,7 @@ export function ParameterDetectorStepper({
type="button"
onClick={handleAccept}
disabled={!key.trim() || !label.trim()}
className="flex items-center gap-1.5 bg-gradient-brand text-[#101114] font-semibold text-sm px-4 py-1.5 rounded-[10px] hover:opacity-90 active:scale-[0.97] transition-all shadow-lg shadow-primary/20 disabled:opacity-50 disabled:cursor-not-allowed"
className="flex items-center gap-1.5 bg-[#22d3ee] text-white font-semibold text-sm px-4 py-1.5 rounded-lg hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLast ? (
<><Check size={13} /> Accept &amp; Finish</>