@barefootjs/cli 0.1.3 → 0.3.0

package/dist/preview-globals.css

@@ -0,0 +1,173 @@
+/* CSS Cascade Layer ordering for UnoCSS + component class overrides.
+ * Priority (lowest → highest): preflights < base < shortcuts < components < default
+ * Base resets go into @layer base (above preflights, below component classes).
+ * Component base classes go into @layer components (via layer-components: prefix).
+ * User override classes stay in @layer default, so they always win. */
+@layer preflights, base, shortcuts, components, default;
+
+/* Theme transition - applied temporarily during theme switch */
+html.theme-transition,
+html.theme-transition *,
+html.theme-transition *::before,
+html.theme-transition *::after {
+  transition: background-color var(--duration-fast) var(--ease-default),
+              color var(--duration-fast) var(--ease-default),
+              border-color var(--duration-fast) var(--ease-default),
+              fill var(--duration-fast) var(--ease-default),
+              stroke var(--duration-fast) var(--ease-default) !important;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Base styles (Tailwind preflight compatible) — in @layer base
+ * so component classes (@layer components) can override these resets. */
+@layer base {
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    /* border-color: var(--border) is set via UnoCSS custom preflight
+     * (uno.config.ts) to ensure it runs after preset-wind4's reset. */
+  }
+
+  body {
+    font-family: var(--font-sans);
+    background-color: var(--background);
+    color: var(--foreground);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /* Reset heading/block element browser margins (Tailwind preflight equivalent) */
+  h1, h2, h3, h4, h5, h6,
+  blockquote, dl, dd, figure, p, pre, hr {
+    margin: 0;
+  }
+
+  /* Reset anchor browser defaults */
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  /* Reset list browser defaults */
+  ol,
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Reset button browser defaults */
+  button {
+    border-width: 0;
+    border-style: solid;
+    background-color: transparent;
+    color: inherit;
+    font: inherit;
+  }
+
+  /* Reset form element browser defaults */
+  input,
+  select,
+  textarea {
+    color: inherit;
+    font: inherit;
+  }
+
+  /* Monospace code elements */
+  code, kbd, samp, pre {
+    font-family: var(--font-mono);
+  }
+
+  /* Smooth scroll for anchor links */
+  html {
+    scroll-behavior: smooth;
+  }
+
+  @keyframes caret-blink {
+    0%, 70%, 100% { opacity: 1; }
+    20%, 50% { opacity: 0; }
+  }
+}
+
+/* Shiki syntax highlighting - dual theme support */
+/* Light mode: use --shiki-light color */
+:root span[style*="--shiki-light"] {
+  color: var(--shiki-light);
+}
+
+/* Dark mode: use --shiki-dark color */
+.dark span[style*="--shiki-dark"] {
+  color: var(--shiki-dark);
+}
+
+/* Dialog z-index - higher than fixed header (z-50) */
+.z-dialog {
+  z-index: 9999;
+}
+
+/* Tooltip visibility - controlled by data attribute */
+[data-tooltip-content] {
+  display: none;
+}
+[data-tooltip-content][data-tooltip-open="true"] {
+  display: block;
+}
+
+
+/* Ensure hidden attribute works with flexbox items */
+[hidden] {
+  display: none !important;
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Card hover action - show action button only on card hover */
+[data-slot="card"] [data-card-hover-action] {
+  opacity: 0;
+  transition: opacity 150ms ease;
+}
+[data-slot="card"]:hover [data-card-hover-action] {
+  opacity: 1;
+}
+
+/* Async validation status text — color is driven by the `--err` CSS
+   variable set inline from `errorLevel()` in the validation demo. The
+   variable holds the hue (0..360); the rest is fixed. */
+.async-validation-msg {
+  color: hsl(var(--err, 210) 70% 45%);
+  transition: color 150ms ease;
+}
+
+/* Per-source stat card accent — color is driven by the `--stat-c` CSS
+   variable set inline from `sourceColors[source]` in the admin
+   analytics demo. Replaces the previous class swap variant so the
+   visual treatment is data-driven (one inline style attribute per
+   card) instead of branching on a static utility-class lookup. */
+.source-stat-card {
+  border-left: 3px solid var(--stat-c, var(--border));
+}
+.source-stat-card [data-source-share] {
+  color: var(--stat-c, var(--muted-foreground));
+  font-weight: 600;
+}

package/dist/preview-uno.config.ts

@@ -0,0 +1,134 @@
+import { defineConfig, presetWind4 } from 'unocss'
+
+export default defineConfig({
+  presets: [presetWind4()],
+  // Custom preflight: re-apply border-color after preset-wind4's reset preflight.
+  // preset-wind4 uses `border: 0 solid` which implicitly sets border-color to
+  // currentColor. This preflight runs after the reset (same @layer base, later
+  // source order) so var(--border) wins.
+  preflights: [{
+    getCSS: () => '*, ::before, ::after { border-color: var(--border); }',
+    layer: 'base',
+  }],
+  // Wrap UnoCSS output in CSS @layer blocks for cascade ordering.
+  // Order: preflights < base < shortcuts < components < default
+  // Base resets (globals.css) go into @layer base.
+  // Component base classes (layer-components:) override base resets,
+  // and user override classes (default) beat component classes.
+  outputToCssLayers: true,
+  layers: {
+    preflights: -2,
+    components: -1,
+    default: 0,
+  },
+  // Safelist responsive classes used in dynamic contexts
+  safelist: [
+    'hidden', 'sm:block', 'sm:hidden', 'lg:block', 'sm:pl-56',
+    'border-input',
+    'border-destructive', 'ring-destructive/20',
+    'group/card', 'group-hover/card:opacity-100',
+  ],
+  // Theme configuration with CSS variable references (OKLCH colors)
+  theme: {
+    colors: {
+      background: 'var(--background)',
+      foreground: 'var(--foreground)',
+      card: {
+        DEFAULT: 'var(--card)',
+        foreground: 'var(--card-foreground)',
+      },
+      popover: {
+        DEFAULT: 'var(--popover)',
+        foreground: 'var(--popover-foreground)',
+      },
+      primary: {
+        DEFAULT: 'var(--primary)',
+        foreground: 'var(--primary-foreground)',
+      },
+      secondary: {
+        DEFAULT: 'var(--secondary)',
+        foreground: 'var(--secondary-foreground)',
+      },
+      muted: {
+        DEFAULT: 'var(--muted)',
+        foreground: 'var(--muted-foreground)',
+      },
+      accent: {
+        DEFAULT: 'var(--accent)',
+        foreground: 'var(--accent-foreground)',
+      },
+      destructive: {
+        DEFAULT: 'var(--destructive)',
+        foreground: 'var(--destructive-foreground)',
+      },
+      success: {
+        DEFAULT: 'var(--success)',
+        foreground: 'var(--success-foreground)',
+      },
+      warning: {
+        DEFAULT: 'var(--warning)',
+        foreground: 'var(--warning-foreground)',
+      },
+      info: {
+        DEFAULT: 'var(--info)',
+        foreground: 'var(--info-foreground)',
+      },
+      border: 'var(--border)',
+      input: 'var(--input)',
+      ring: 'var(--ring)',
+    },
+    radius: {
+      lg: 'var(--radius)',
+      md: 'calc(var(--radius) - 2px)',
+      sm: 'calc(var(--radius) - 4px)',
+    },
+    // Shadow scale - Use 'shadow-*' utilities
+    shadow: {
+      sm: 'var(--shadow-sm)',
+      DEFAULT: 'var(--shadow)',
+      md: 'var(--shadow-md)',
+      lg: 'var(--shadow-lg)',
+      xl: 'var(--shadow-xl)',
+      inner: 'var(--shadow-inner)',
+      none: 'none',
+    },
+    // Typography - Use 'font-*' utilities
+    font: {
+      sans: 'var(--font-sans)',
+      mono: 'var(--font-mono)',
+    },
+    // Letter spacing - Use 'tracking-*' utilities
+    tracking: {
+      tighter: 'var(--tracking-tighter)',
+      tight: 'var(--tracking-tight)',
+      normal: 'var(--tracking-normal)',
+      wide: 'var(--tracking-wide)',
+      wider: 'var(--tracking-wider)',
+    },
+    // Animation tokens - Use 'duration' for duration-* utilities
+    duration: {
+      fast: 'var(--duration-fast)',
+      normal: 'var(--duration-normal)',
+      slow: 'var(--duration-slow)',
+    },
+    // Use 'ease' for ease-* utilities
+    ease: {
+      DEFAULT: 'var(--ease-default)',
+      in: 'var(--ease-in)',
+      out: 'var(--ease-out)',
+      'in-out': 'var(--ease-in-out)',
+    },
+  },
+  // Scan component files for class names
+  content: {
+    filesystem: [
+      './*.tsx',
+      './**/index.tsx',
+      './pages/**/*.tsx',
+      '../../ui/components/**/*.tsx',
+      '../shared/components/**/*.tsx',
+      './components/**/*.tsx',
+      './dist/**/*.tsx',
+    ],
+  },
+})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/cli",
-  "version": "0.1.3",
+  "version": "0.3.0",
   "description": "CLI for agent-driven UI component discovery and scaffolding",
   "type": "module",
   "main": "./dist/index.js",
@@ -31,7 +31,7 @@
     "typescript": "^5.0.0"
   },
   "devDependencies": {
-    "@barefootjs/jsx": "0.1.3",
+    "@barefootjs/jsx": "0.3.0",
     "@types/node": "^22.0.0"
   }
 }