@floegence/floe-webapp-core 0.1.16 → 0.1.17

package/dist/floe.css

@@ -0,0 +1,442 @@
+/*
+ * Floe design tokens + base styles + custom utilities.
+ *
+ * This file is Tailwind v4 input CSS (it uses @theme/@layer) and is consumed by:
+ * - `@floegence/floe-webapp-core/styles` (precompiled bundle via `globals.css`)
+ * - `@floegence/floe-webapp-core/tailwind` (downstream Tailwind integration entry)
+ *
+ * It intentionally does NOT include:
+ * - `@import 'tailwindcss'` (owned by the application / precompiled entry)
+ * - any `@source` directives (owned by the entry that imports this file)
+ */
+
+
+/* Import theme definitions - they define the CSS variables */
+@import './themes/light.css';
+@import './themes/dark.css';
+
+/*
+ * TailwindCSS v4 requires @theme for utilities. However, CSS variable
+ * references don't work properly for background/text color utilities.
+ * Instead, we use @utility to define custom utilities that reference
+ * CSS variables at runtime.
+ */
+
+/* Border radius - these work fine with var() */
+@theme {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* Custom color utilities using CSS variables */
+@layer utilities {
+  /* Background colors */
+  .bg-background { background-color: var(--background); }
+  .bg-foreground { background-color: var(--foreground); }
+  .bg-primary { background-color: var(--primary); }
+  .bg-primary-foreground { background-color: var(--primary-foreground); }
+  .bg-secondary { background-color: var(--secondary); }
+  .bg-secondary-foreground { background-color: var(--secondary-foreground); }
+  .bg-muted { background-color: var(--muted); }
+  .bg-muted-foreground { background-color: var(--muted-foreground); }
+  .bg-accent { background-color: var(--accent); }
+  .bg-accent-foreground { background-color: var(--accent-foreground); }
+  .bg-card { background-color: var(--card); }
+  .bg-card-foreground { background-color: var(--card-foreground); }
+  .bg-popover { background-color: var(--popover); }
+  .bg-popover-foreground { background-color: var(--popover-foreground); }
+  .bg-border { background-color: var(--border); }
+  .bg-input { background-color: var(--input); }
+  .bg-ring { background-color: var(--ring); }
+  .bg-success { background-color: var(--success); }
+  .bg-success-foreground { background-color: var(--success-foreground); }
+  .bg-warning { background-color: var(--warning); }
+  .bg-warning-foreground { background-color: var(--warning-foreground); }
+  .bg-error { background-color: var(--error); }
+  .bg-error-foreground { background-color: var(--error-foreground); }
+  /* Alias: destructive == error (VSCode-style danger actions) */
+  .bg-destructive { background-color: var(--error); }
+  .bg-destructive-foreground { background-color: var(--error-foreground); }
+  .bg-info { background-color: var(--info); }
+  .bg-info-foreground { background-color: var(--info-foreground); }
+  .bg-sidebar { background-color: var(--sidebar); }
+  .bg-sidebar-foreground { background-color: var(--sidebar-foreground); }
+  .bg-sidebar-primary { background-color: var(--sidebar-primary); }
+  .bg-sidebar-primary-foreground { background-color: var(--sidebar-primary-foreground); }
+  .bg-sidebar-accent { background-color: var(--sidebar-accent); }
+  .bg-sidebar-accent-foreground { background-color: var(--sidebar-accent-foreground); }
+  .bg-sidebar-border { background-color: var(--sidebar-border); }
+  .bg-sidebar-ring { background-color: var(--sidebar-ring); }
+  .bg-activity-bar { background-color: var(--activity-bar); }
+  .bg-activity-bar-foreground { background-color: var(--activity-bar-foreground); }
+  .bg-activity-bar-foreground-active { background-color: var(--activity-bar-foreground-active); }
+  .bg-activity-bar-badge { background-color: var(--activity-bar-badge); }
+  .bg-activity-bar-badge-foreground { background-color: var(--activity-bar-badge-foreground); }
+  .bg-terminal-background { background-color: var(--terminal-background); }
+  .bg-terminal-foreground { background-color: var(--terminal-foreground); }
+
+  /* Text colors */
+  .text-background { color: var(--background); }
+  .text-foreground { color: var(--foreground); }
+  .text-primary { color: var(--primary); }
+  .text-primary-foreground { color: var(--primary-foreground); }
+  .text-secondary { color: var(--secondary); }
+  .text-secondary-foreground { color: var(--secondary-foreground); }
+  .text-muted { color: var(--muted); }
+  .text-muted-foreground { color: var(--muted-foreground); }
+  .text-accent { color: var(--accent); }
+  .text-accent-foreground { color: var(--accent-foreground); }
+  .text-card { color: var(--card); }
+  .text-card-foreground { color: var(--card-foreground); }
+  .text-popover { color: var(--popover); }
+  .text-popover-foreground { color: var(--popover-foreground); }
+  .text-border { color: var(--border); }
+  .text-input { color: var(--input); }
+  .text-ring { color: var(--ring); }
+  .text-success { color: var(--success); }
+  .text-success-foreground { color: var(--success-foreground); }
+  .text-warning { color: var(--warning); }
+  .text-warning-foreground { color: var(--warning-foreground); }
+  .text-error { color: var(--error); }
+  .text-error-foreground { color: var(--error-foreground); }
+  /* Alias: destructive == error */
+  .text-destructive { color: var(--error); }
+  .text-destructive-foreground { color: var(--error-foreground); }
+  .text-info { color: var(--info); }
+  .text-info-foreground { color: var(--info-foreground); }
+  .text-sidebar { color: var(--sidebar); }
+  .text-sidebar-foreground { color: var(--sidebar-foreground); }
+  .text-sidebar-primary { color: var(--sidebar-primary); }
+  .text-sidebar-primary-foreground { color: var(--sidebar-primary-foreground); }
+  .text-sidebar-accent { color: var(--sidebar-accent); }
+  .text-sidebar-accent-foreground { color: var(--sidebar-accent-foreground); }
+  .text-sidebar-border { color: var(--sidebar-border); }
+  .text-sidebar-ring { color: var(--sidebar-ring); }
+  .text-activity-bar { color: var(--activity-bar); }
+  .text-activity-bar-foreground { color: var(--activity-bar-foreground); }
+  .text-activity-bar-foreground-active { color: var(--activity-bar-foreground-active); }
+  .text-activity-bar-badge { color: var(--activity-bar-badge); }
+  .text-activity-bar-badge-foreground { color: var(--activity-bar-badge-foreground); }
+  .text-terminal-background { color: var(--terminal-background); }
+  .text-terminal-foreground { color: var(--terminal-foreground); }
+
+  /* Border colors */
+  .border-border { border-color: var(--border); }
+  .border-input { border-color: var(--input); }
+  .border-ring { border-color: var(--ring); }
+  .border-primary { border-color: var(--primary); }
+  .border-secondary { border-color: var(--secondary); }
+  .border-muted { border-color: var(--muted); }
+  .border-accent { border-color: var(--accent); }
+  .border-sidebar-border { border-color: var(--sidebar-border); }
+
+  /* Ring colors */
+  .ring-ring { --tw-ring-color: var(--ring); }
+  .ring-primary { --tw-ring-color: var(--primary); }
+  .ring-sidebar-ring { --tw-ring-color: var(--sidebar-ring); }
+
+  /* Hover states for primary */
+  .hover\:bg-primary\/90:hover { background-color: color-mix(in srgb, var(--primary) 90%, transparent); }
+  .hover\:bg-secondary\/80:hover { background-color: color-mix(in srgb, var(--secondary) 80%, transparent); }
+  .hover\:bg-accent:hover { background-color: var(--accent); }
+  .hover\:bg-accent\/50:hover { background-color: color-mix(in srgb, var(--accent) 50%, transparent); }
+  .hover\:bg-muted:hover { background-color: var(--muted); }
+  .hover\:text-accent-foreground:hover { color: var(--accent-foreground); }
+  .hover\:bg-error\/90:hover { background-color: color-mix(in srgb, var(--error) 90%, transparent); }
+  .hover\:bg-destructive\/10:hover { background-color: color-mix(in srgb, var(--error) 10%, transparent); }
+  .hover\:text-destructive:hover { color: var(--error); }
+
+  /* Opacity variants for overlays */
+  .bg-background\/60 { background-color: color-mix(in srgb, var(--background) 60%, transparent); }
+  .bg-background\/80 { background-color: color-mix(in srgb, var(--background) 80%, transparent); }
+  .bg-muted\/40 { background-color: color-mix(in srgb, var(--muted) 40%, transparent); }
+  .bg-muted\/50 { background-color: color-mix(in srgb, var(--muted) 50%, transparent); }
+  .bg-muted\/70 { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
+  .bg-muted\/80 { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }
+  .bg-muted-foreground\/30 { background-color: color-mix(in srgb, var(--muted-foreground) 30%, transparent); }
+  .bg-primary\/70 { background-color: color-mix(in srgb, var(--primary) 70%, transparent); }
+  .bg-accent\/40 { background-color: color-mix(in srgb, var(--accent) 40%, transparent); }
+  .bg-accent\/80 { background-color: color-mix(in srgb, var(--accent) 80%, transparent); }
+  .text-muted-foreground\/70 { color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); }
+  .placeholder\:text-muted-foreground\/60::placeholder { color: color-mix(in srgb, var(--muted-foreground) 60%, transparent); }
+
+  /* Additional hover states */
+  .hover\:bg-primary\/50:hover { background-color: color-mix(in srgb, var(--primary) 50%, transparent); }
+  .hover\:bg-muted\/70:hover { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
+  .hover\:bg-muted\/80:hover { background-color: color-mix(in srgb, var(--muted) 80%, transparent); }
+  .hover\:bg-accent\/40:hover { background-color: color-mix(in srgb, var(--accent) 40%, transparent); }
+  .hover\:bg-sidebar-accent\/80:hover { background-color: color-mix(in srgb, var(--sidebar-accent) 80%, transparent); }
+  .hover\:border-border\/50:hover { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
+  .border-border\/50 { border-color: color-mix(in srgb, var(--border) 50%, transparent); }
+
+  /* Gradient utilities with CSS variables */
+  .from-primary {
+    --tw-gradient-from: var(--primary);
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+  }
+  .to-primary\/70 {
+    --tw-gradient-to: color-mix(in srgb, var(--primary) 70%, transparent);
+  }
+}
+
+/* Base styles */
+@layer base {
+  * {
+    border-color: var(--border);
+    scrollbar-width: thin;
+    scrollbar-color: var(--muted) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--muted);
+    border-radius: 9999px;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
+  }
+
+  html {
+    height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
+    /* Prevent the viewport from rubber-banding; scroll should be inside app panels. */
+    overscroll-behavior: none;
+  }
+
+  body {
+    height: 100%;
+    overflow: hidden;
+    overscroll-behavior: none;
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family:
+      'Inter',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      sans-serif;
+  }
+
+  #root {
+    height: 100%;
+  }
+
+  /* Monospace for code and terminal */
+  code,
+  pre,
+  .font-mono {
+    font-family:
+      'JetBrains Mono',
+      'Fira Code',
+      'SF Mono',
+      Menlo,
+      Monaco,
+      Consolas,
+      monospace;
+  }
+
+  /* Focus styles */
+  :focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
+  }
+
+  :focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /* Selection */
+  ::selection {
+    background: color-mix(in srgb, var(--primary) 20%, transparent);
+    color: var(--foreground);
+  }
+}
+
+/* Animation utilities */
+@layer utilities {
+  .animate-in {
+    animation: animate-in 200ms ease-out;
+  }
+
+  .animate-out {
+    animation: animate-out 150ms ease-in;
+  }
+
+  .slide-in-from-top {
+    --tw-enter-translate-y: -100%;
+  }
+
+  .slide-in-from-bottom {
+    --tw-enter-translate-y: 100%;
+  }
+
+  .slide-in-from-left {
+    --tw-enter-translate-x: -100%;
+  }
+
+  .slide-in-from-right {
+    --tw-enter-translate-x: 100%;
+  }
+
+  .slide-in-from-top-2 {
+    --tw-enter-translate-y: -0.5rem;
+  }
+
+  .slide-in-from-top-4 {
+    --tw-enter-translate-y: -1rem;
+  }
+
+  .fade-in {
+    --tw-enter-opacity: 0;
+  }
+
+  .zoom-in-95 {
+    --tw-enter-scale: 0.95;
+  }
+
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@keyframes animate-in {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate(
+        var(--tw-enter-translate-x, 0),
+        var(--tw-enter-translate-y, 0)
+      )
+      scale(var(--tw-enter-scale, 1));
+  }
+}
+
+@keyframes animate-out {
+  to {
+    opacity: var(--tw-exit-opacity, 0);
+    transform: translate(
+        var(--tw-exit-translate-x, 0),
+        var(--tw-exit-translate-y, 0)
+      )
+      scale(var(--tw-exit-scale, 1));
+  }
+}
+
+/* Loading animation keyframes */
+@keyframes snake-move {
+  0%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.3;
+  }
+  50% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Safe area insets for mobile */
+@layer utilities {
+  .safe-bottom {
+    padding-bottom: env(safe-area-inset-bottom, 0);
+  }
+
+  .safe-top {
+    padding-top: env(safe-area-inset-top, 0);
+  }
+
+  .safe-left {
+    padding-left: env(safe-area-inset-left, 0);
+  }
+
+  .safe-right {
+    padding-right: env(safe-area-inset-right, 0);
+  }
+}
+
+/* Advanced Card animations */
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes morph {
+  0%, 100% {
+    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+    transform: translate(0, 0) rotate(0deg);
+  }
+  25% {
+    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
+    transform: translate(10%, 10%) rotate(90deg);
+  }
+  50% {
+    border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%;
+    transform: translate(0, 20%) rotate(180deg);
+  }
+  75% {
+    border-radius: 60% 40% 60% 30% / 60% 30% 40% 70%;
+    transform: translate(-10%, 10%) rotate(270deg);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@keyframes glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 5px var(--primary), 0 0 20px var(--primary);
+  }
+  50% {
+    box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary);
+  }
+}

package/dist/tailwind.css

@@ -0,0 +1,9 @@
+/*
+ * Tailwind v4 integration entry for downstream apps.
+ *
+ * - Do NOT `@import 'tailwindcss'` here. The application owns Tailwind base/utilities.
+ * - Scan this package's published dist JS output so core component utilities are generated.
+ */
+
+@source './**/*.{js}';
+@import './floe.css';

package/dist/themes/dark.css

@@ -0,0 +1,75 @@
+/* Dark theme - Blue-black ink */
+.dark {
+  color-scheme: dark;
+
+  /* Base - Blue-black ink */
+  --background: hsl(222 30% 8%);
+  --foreground: hsl(210 20% 98%);
+
+  /* Primary - Light text */
+  --primary: hsl(210 20% 98%);
+  --primary-foreground: hsl(222 30% 10%);
+
+  /* Secondary */
+  --secondary: hsl(220 25% 14%);
+  --secondary-foreground: hsl(210 20% 98%);
+
+  /* Muted */
+  --muted: hsl(220 25% 14%);
+  --muted-foreground: hsl(215 20% 60%);
+
+  /* Accent */
+  --accent: hsl(220 25% 16%);
+  --accent-foreground: hsl(210 20% 98%);
+
+  /* Border */
+  --border: hsl(220 20% 18%);
+  --input: hsl(220 25% 14%);
+  --ring: hsl(215 25% 70%);
+
+  /* Card */
+  --card: hsl(222 28% 10%);
+  --card-foreground: hsl(210 20% 98%);
+
+  /* Popover */
+  --popover: hsl(222 28% 10%);
+  --popover-foreground: hsl(210 20% 98%);
+
+  /* Status colors */
+  --success: oklch(0.72 0.19 150);
+  --success-foreground: hsl(222 30% 10%);
+  --warning: oklch(0.82 0.16 80);
+  --warning-foreground: hsl(222 30% 10%);
+  --error: oklch(0.7 0.22 25);
+  --error-foreground: hsl(0 0% 100%);
+  --info: oklch(0.7 0.15 250);
+  --info-foreground: hsl(0 0% 100%);
+
+  /* Sidebar */
+  --sidebar: hsl(222 28% 10%);
+  --sidebar-foreground: hsl(210 20% 98%);
+  --sidebar-primary: hsl(217 80% 55%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(220 25% 16%);
+  --sidebar-accent-foreground: hsl(210 20% 98%);
+  --sidebar-border: hsl(220 20% 18%);
+  --sidebar-ring: hsl(217 80% 55%);
+
+  /* Activity bar */
+  --activity-bar: hsl(222 30% 9%);
+  --activity-bar-foreground: hsl(215 20% 55%);
+  --activity-bar-foreground-active: hsl(210 20% 98%);
+  --activity-bar-badge: hsl(217 80% 55%);
+  --activity-bar-badge-foreground: hsl(0 0% 100%);
+
+  /* Terminal */
+  --terminal-background: hsl(222 32% 7%);
+  --terminal-foreground: hsl(210 15% 92%);
+
+  /* Chart colors */
+  --chart-1: hsl(210 20% 98%);
+  --chart-2: hsl(215 20% 60%);
+  --chart-3: oklch(0.7 0.15 250);
+  --chart-4: oklch(0.72 0.19 150);
+  --chart-5: oklch(0.82 0.16 80);
+}

package/dist/themes/light.css

@@ -0,0 +1,79 @@
+/* Light theme - Warm paper aesthetic */
+:root,
+.light {
+  color-scheme: light;
+
+  /* Base - Warm creamy paper */
+  --background: hsl(38 20% 98%);
+  --foreground: hsl(215 40% 13%);
+
+  /* Primary - Deep blue-black ink */
+  --primary: hsl(215 40% 13%);
+  --primary-foreground: hsl(0 0% 98%);
+
+  /* Secondary - Warm muted */
+  --secondary: hsl(38 10% 94%);
+  --secondary-foreground: hsl(215 30% 26%);
+
+  /* Muted - Warm gray */
+  --muted: hsl(38 10% 94%);
+  --muted-foreground: hsl(215 20% 46%);
+
+  /* Accent - Subtle warm highlight */
+  --accent: hsl(38 15% 94%);
+  --accent-foreground: hsl(215 40% 13%);
+
+  /* Border - Warm gray */
+  --border: hsl(38 8% 88%);
+  --input: hsl(38 8% 88%);
+  --ring: hsl(215 40% 13%);
+
+  /* Card */
+  --card: hsl(38 15% 99%);
+  --card-foreground: hsl(215 40% 13%);
+
+  /* Popover */
+  --popover: hsl(38 15% 99%);
+  --popover-foreground: hsl(215 40% 13%);
+
+  /* Status colors - Using OKLCH for perceptual consistency */
+  --success: oklch(0.68 0.16 150);
+  --success-foreground: hsl(0 0% 100%);
+  --warning: oklch(0.78 0.14 80);
+  --warning-foreground: hsl(240 5% 10%);
+  --error: oklch(0.65 0.2 25);
+  --error-foreground: hsl(0 0% 100%);
+  --info: oklch(0.65 0.13 250);
+  --info-foreground: hsl(0 0% 100%);
+
+  /* Sidebar - Slightly warmer */
+  --sidebar: hsl(38 15% 97.5%);
+  --sidebar-foreground: hsl(215 40% 13%);
+  --sidebar-primary: hsl(215 40% 13%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(38 15% 94%);
+  --sidebar-accent-foreground: hsl(215 40% 13%);
+  --sidebar-border: hsl(38 8% 90%);
+  --sidebar-ring: hsl(215 40% 13%);
+
+  /* Activity bar */
+  --activity-bar: hsl(38 10% 96%);
+  --activity-bar-foreground: hsl(215 20% 46%);
+  --activity-bar-foreground-active: hsl(215 40% 13%);
+  --activity-bar-badge: hsl(215 40% 13%);
+  --activity-bar-badge-foreground: hsl(0 0% 98%);
+
+  /* Terminal */
+  --terminal-background: hsl(215 40% 13%);
+  --terminal-foreground: hsl(0 0% 92%);
+
+  /* Chart colors */
+  --chart-1: hsl(215 40% 13%);
+  --chart-2: hsl(38 15% 60%);
+  --chart-3: oklch(0.65 0.13 250);
+  --chart-4: oklch(0.68 0.16 150);
+  --chart-5: oklch(0.78 0.14 80);
+
+  /* Radius - Slightly smaller for refined look */
+  --radius: 0.375rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -10,14 +10,16 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles": "./dist/styles.css"
+    "./styles": "./dist/styles.css",
+    "./tailwind": "./dist/tailwind.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "dev": "node ./scripts/dev.mjs",
-    "build": "pnpm clean && vite build && tsc -p tsconfig.build.json && pnpm build:styles",
+    "build": "pnpm clean && vite build && tsc -p tsconfig.build.json && pnpm build:styles && pnpm build:assets",
+    "build:assets": "node ./scripts/copy-style-assets.mjs",
     "build:styles": "vite build -c vite.styles.config.ts",
     "typecheck": "tsc --noEmit",
     "clean": "rm -rf dist *.tsbuildinfo"