building and stying

Author: stevensJourney

packages/editor/package.json

@@ -28,6 +28,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.561.0",
+    "minimatch": "^10.2.2",
     "monaco-editor": "0.52.0",
     "monaco-yaml": "^5.4.1",
     "nitro": "npm:nitro-nightly@latest",

packages/editor/src/components/MonacoEditor.tsx

@@ -1,7 +1,7 @@
 import { YAML_SCHEMAS } from '@/utils/yaml-schemas';
 import Editor, { loader, type BeforeMount, type Monaco, type OnMount } from '@monaco-editor/react';
+import type { editor } from 'monaco-editor';
 import * as monaco from 'monaco-editor';
-import { editor } from 'monaco-editor';
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import { configureMonacoYaml } from 'monaco-yaml';
 import YamlWorker from 'monaco-yaml/yaml.worker?worker';

packages/editor/src/polyfills/minimatch.ts

@@ -0,0 +1,6 @@
+import { minimatch as m } from 'minimatch';
+
+export const minimatch = m;
+
+// Fixes Vite errors for "no default export" when importing minimatch in the editor package
+export default minimatch;

packages/editor/src/routes/files.tsx

@@ -15,58 +15,58 @@ function FilesLayout() {
   const filesError = error instanceof Error ? error.message : 'Unexpected error while loading files.';
 
   return (
-    <div className="flex min-h-screen flex-col bg-slate-950 text-white">
+    <div className="flex min-h-screen flex-col bg-background text-foreground">
       <div className="flex flex-1 min-h-0 overflow-hidden">
-        <aside className="w-80 border-r border-white/5 bg-slate-950/80 px-4 py-6 backdrop-blur">
+        <aside className="w-80 border-r border-border bg-card/60 px-4 py-6 backdrop-blur">
           <Accordion type="single" collapsible defaultValue="configuration" className="mt-6">
-            <AccordionItem value="configuration" className="border-white/10">
+            <AccordionItem value="configuration" className="border-border/60">
               <AccordionTrigger>Configuration files</AccordionTrigger>
               <AccordionContent>
                 {isPending ? (
-                  <div className="flex items-center gap-3 rounded-xl border border-white/10 bg-white/5 px-4 py-6 text-white/70">
-                    <Loader2 className="h-4 w-4 animate-spin" />
+                  <div className="flex items-center gap-3 rounded-xl border border-border/70 bg-muted/40 px-4 py-6 text-muted-foreground">
+                    <Loader2 className="h-4 w-4 animate-spin text-primary" />
                     Loading configuration list…
                   </div>
                 ) : error ? (
-                  <div className="space-y-3 rounded-xl border border-rose-500/50 bg-rose-500/10 p-4 text-sm text-rose-50">
-                    <p className="flex items-center gap-2 font-semibold">
+                  <div className="space-y-3 rounded-xl border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive-foreground">
+                    <p className="flex items-center gap-2 font-semibold text-destructive-foreground">
                       <AlertCircle size={16} /> Unable to load files
                     </p>
-                    <p className="text-rose-50/80">{filesError}</p>
+                    <p className="text-destructive-foreground/80">{filesError}</p>
                     <button
                       type="button"
                       onClick={() => refetch()}
-                      className="inline-flex items-center justify-center rounded-full border border-rose-200/40 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-rose-50 transition hover:border-rose-100">
+                      className="inline-flex items-center justify-center rounded-full border border-destructive/40 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-destructive-foreground transition hover:border-destructive/60">
                       Try again
                     </button>
                   </div>
                 ) : files.length === 0 ? (
-                  <p className="text-sm text-white/60">No PowerSync YAML files were detected.</p>
+                  <p className="text-sm text-muted-foreground">No PowerSync YAML files were detected.</p>
                 ) : (
                   <ul className="space-y-2">
                     {files.map((file) => (
                       <li key={file.filename}>
                         <Link
                           to="/files/$filename"
                           params={{ filename: file.filename }}
-                          className="flex items-center gap-3 rounded-xl border border-transparent px-4 py-3 text-sm text-white/80 transition hover:border-cyan-400/60 hover:bg-cyan-400/10"
+                          className="flex items-center gap-3 rounded-xl border border-transparent px-4 py-3 text-sm text-foreground transition hover:border-primary/50 hover:bg-primary/5"
                           activeProps={{
                             className:
-                              'flex items-center gap-3 rounded-xl border border-cyan-400 bg-cyan-400/10 px-4 py-3 text-sm text-white shadow-[0_0_25px_rgba(14,165,233,0.35)]'
+                              'flex items-center gap-3 rounded-xl border border-primary bg-primary/10 px-4 py-3 text-sm text-foreground shadow-[0_0_25px_rgba(14,165,233,0.25)]'
                           }}>
-                          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-white/10 text-white">
+                          <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10 text-primary">
                             <FileText size={18} />
                           </span>
                           <div>
                             <div className="flex items-center gap-2">
                               <p className="font-semibold">{file.label}</p>
                               {state[file.filename]?.hasChanges ? (
-                                <span className="rounded-full bg-amber-500/20 px-2 py-[2px] text-[10px] font-semibold uppercase tracking-wide text-amber-100 border border-amber-400/50">
+                                <span className="rounded-full border border-warning/40 bg-warning/15 px-2 py-[2px] text-[10px] font-semibold uppercase tracking-wide text-warning-foreground">
                                   Unsaved
                                 </span>
                               ) : null}
                             </div>
-                            <p className="text-xs text-white/60">{file.filename}</p>
+                            <p className="text-xs text-muted-foreground">{file.filename}</p>
                           </div>
                         </Link>
                       </li>

packages/editor/src/routes/files/$filename.tsx

@@ -148,20 +148,22 @@ function FileEditor() {
         };
 
   return (
-    <div className="flex h-full w-full flex-1 flex-col gap-6 bg-slate-900/20 px-10 py-8">
-      <header className="flex flex-wrap items-center justify-between gap-4 border-b border-white/10 pb-4">
+    <div className="flex h-full w-full flex-1 flex-col gap-6 bg-background px-10 py-8 text-foreground">
+      <header className="flex flex-wrap items-center justify-between gap-4 border-b border-border pb-4">
         <div>
-          <p className="text-xs font-semibold uppercase tracking-[0.4em] text-white/40">Editing</p>
-          <h2 className="text-2xl font-semibold text-white">{filename}</h2>
-          <p className="text-sm text-white/60">PowerSync CLI YAML configuration</p>
+          <p className="text-xs font-semibold uppercase tracking-[0.4em] text-muted-foreground">Editing</p>
+          <h2 className="text-2xl font-semibold text-foreground">{filename}</h2>
+          <p className="text-sm text-muted-foreground">PowerSync CLI YAML configuration</p>
         </div>
         <div className="flex flex-wrap items-center gap-3">
           <button
             type="button"
             disabled={validation.errors === 0 && validation.warnings === 0}
             onClick={() => setShowValidation((open) => !open)}
             className={`flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold transition ${validationBadge.tone} ${
-              validation.errors > 0 || validation.warnings > 0 ? 'hover:border-white/60 hover:bg-white/10' : ''
+              validation.errors > 0 || validation.warnings > 0
+                ? 'hover:border-destructive/50 hover:bg-destructive/5'
+                : ''
             } ${validation.errors === 0 && validation.warnings === 0 ? 'cursor-not-allowed opacity-60' : ''}`}>
             {validationBadge.icon}
             {validationBadge.label}
@@ -175,34 +177,34 @@ function FileEditor() {
             type="button"
             onClick={handleReset}
             disabled={!hasChanges || status === 'saving'}
-            className="inline-flex items-center gap-2 rounded-full border border-white/20 px-4 py-2 text-sm font-semibold text-white/80 transition hover:border-white/50 disabled:cursor-not-allowed disabled:opacity-50">
+            className="inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm font-semibold text-foreground transition hover:border-primary/50 disabled:cursor-not-allowed disabled:opacity-50">
             <RotateCcw size={16} /> Reset
           </button>
           <button
             type="button"
             onClick={handleSave}
             disabled={!hasChanges || status === 'saving'}
-            className="inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 px-5 py-2 text-sm font-semibold text-white shadow-lg shadow-cyan-500/30 transition hover:from-cyan-400 hover:to-blue-400 disabled:cursor-not-allowed disabled:opacity-60">
+            className="inline-flex items-center gap-2 rounded-full bg-primary px-5 py-2 text-sm font-semibold text-primary-foreground shadow-lg shadow-primary/30 transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-60">
             {status === 'saving' ? <Loader2 size={16} className="animate-spin" /> : <Save size={16} />} Save changes
           </button>
         </div>
       </header>
 
       {errorMessage && (
-        <div className="rounded-xl border border-rose-500/40 bg-rose-500/10 p-4 text-sm text-rose-100">
+        <div className="rounded-xl border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive-foreground">
           {errorMessage}
         </div>
       )}
 
       {showValidation && validationMarkers.length > 0 && (
-        <div className="rounded-xl border border-rose-400/40 bg-rose-500/5 px-4 py-3 text-sm text-white/90">
+        <div className="rounded-xl border border-destructive/25 bg-destructive/5 px-4 py-3 text-sm text-foreground">
           <div className="mb-2 flex items-center justify-between">
-            <div className="flex items-center gap-2 font-semibold text-rose-50">
-              <Info size={16} className="text-rose-200" /> Validation details
+            <div className="flex items-center gap-2 font-semibold text-destructive-foreground">
+              <Info size={16} className="text-destructive" /> Validation details
             </div>
             <button
               type="button"
-              className="text-xs font-semibold text-white/60 underline-offset-4 hover:text-white"
+              className="text-xs font-semibold text-muted-foreground underline-offset-4 hover:text-foreground"
               onClick={() => setShowValidation(false)}>
               Hide
             </button>
@@ -211,18 +213,18 @@ function FileEditor() {
             {validationMarkers.map((marker, idx) => {
               const isError = ERROR_SEVERITIES.has(marker.severity);
               const tone = isError
-                ? 'text-rose-100 bg-rose-500/15 border-rose-300/40'
-                : 'text-amber-100 bg-amber-500/15 border-amber-300/40';
-              const label = isError ? 'Error' : 'Warning';
+                ? 'text-destructive-foreground bg-destructive/15 border-destructive/40'
+                : 'text-warning-foreground bg-warning/15 border-warning/40';
+              const label = isError ? 'Error' : 'Info';
               return (
                 <li key={`${marker.message}-${marker.startLineNumber}-${idx}`} className="flex items-start gap-3">
                   <span
                     className={`mt-0.5 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold ${tone}`}>
                     {label}
                   </span>
-                  <div className="flex-1 leading-relaxed text-white/90">
-                    <div className="font-semibold text-white">Line {marker.startLineNumber}</div>
-                    <div className="text-white/80">{marker.message}</div>
+                  <div className="flex-1 leading-relaxed text-foreground">
+                    <div className="font-semibold text-foreground">Line {marker.startLineNumber}</div>
+                    <div className="text-muted-foreground">{marker.message}</div>
                   </div>
                 </li>
               );
@@ -231,7 +233,7 @@ function FileEditor() {
         </div>
       )}
 
-      <div className="flex flex-1 min-h-0 overflow-hidden rounded-3xl border border-white/10 bg-slate-950 shadow-[0_20px_120px_rgba(14,165,233,0.12)]">
+      <div className="flex flex-1 min-h-0 overflow-hidden rounded-3xl border border-border bg-card shadow-[0_16px_72px_rgba(0,0,0,0.08)]">
         {isBrowser ? (
           <MonacoEditor
             className="flex-1"