@floegence/floe-webapp-core 0.86.58 → 0.86.62

package/dist/components/layout/TopBarIconButton.js

@@ -1,14 +1,14 @@
-import { createComponent as o, spread as i, mergeProps as s, insert as a, template as c } from "solid-js/web";
-import { splitProps as u, Show as p } from "solid-js";
-import { cn as d } from "../../utils/cn.js";
-import { Tooltip as b } from "../ui/Tooltip.js";
-var m = /* @__PURE__ */ c("<button type=button>");
-function y(n) {
-  const [e, l] = u(n, ["label", "children", "tooltip", "tooltipPlacement", "tooltipDelay", "class", "disabled"]), r = () => (() => {
-    var t = m();
-    return i(t, s({
+import { createComponent as r, spread as i, mergeProps as a, insert as s, template as c } from "solid-js/web";
+import { splitProps as u, Show as d } from "solid-js";
+import { cn as p } from "../../utils/cn.js";
+import { Tooltip as f } from "../ui/Tooltip.js";
+var b = /* @__PURE__ */ c("<button type=button>");
+function y(l) {
+  const [e, n] = u(l, ["label", "children", "tooltip", "tooltipPlacement", "tooltipDelay", "class", "disabled"]), o = () => (() => {
+    var t = b();
+    return i(t, a({
       get class() {
-        return d("inline-flex items-center justify-center", "w-8 h-8 rounded cursor-pointer", "hover:bg-muted/60 active:bg-muted/80 transition-colors", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", e.class);
+        return p("inline-flex items-center justify-center", "w-[var(--floe-control-height-md)] h-[var(--floe-control-height-md)]", "rounded-control cursor-pointer", "text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)]", "active:bg-[var(--floe-state-press)]", "transition-[background-color,color] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", e.class);
       },
       get "aria-label"() {
         return e.label;
@@ -16,17 +16,17 @@ function y(n) {
       get disabled() {
         return e.disabled;
       }
-    }, l), !1, !0), a(t, () => e.children), t;
+    }, n), !1, !0), s(t, () => e.children), t;
   })();
-  return o(p, {
+  return r(d, {
     get when() {
       return e.tooltip !== !1;
     },
     get fallback() {
-      return r();
+      return o();
     },
     get children() {
-      return o(b, {
+      return r(f, {
         get content() {
           return e.tooltip ?? e.label;
         },
@@ -37,7 +37,7 @@ function y(n) {
           return e.tooltipDelay ?? 0;
         },
         get children() {
-          return r();
+          return o();
         }
       });
     }

package/dist/components/loading/LoadingOverlay.js

@@ -1,12 +1,12 @@
-import { insert as n, createComponent as r, effect as o, className as d, Portal as m, template as c } from "solid-js/web";
+import { insert as n, createComponent as r, effect as o, className as m, Portal as d, template as c } from "solid-js/web";
 import { Show as l } from "solid-js";
-import { cn as u } from "../../utils/cn.js";
-import { SnakeLoader as f } from "./SnakeLoader.js";
-var g = /* @__PURE__ */ c('<p class="text-sm text-muted-foreground processing-text-glow">'), b = /* @__PURE__ */ c('<div><div class=relative><div class="absolute -inset-8 rounded-full floe-loader-ambient"style="background:radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 70%)">');
-function k(e) {
+import { cn as f } from "../../utils/cn.js";
+import { SnakeLoader as u } from "./SnakeLoader.js";
+var g = /* @__PURE__ */ c('<p class="text-sm text-[var(--floe-ink-soft)] processing-text-glow">'), b = /* @__PURE__ */ c('<div><div class=relative><div class="absolute -inset-8 rounded-full floe-loader-ambient"style="background:radial-gradient(circle, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 70%)">');
+function p(e) {
   const a = (() => {
     var t = b(), i = t.firstChild;
-    return i.firstChild, n(i, r(f, {
+    return i.firstChild, n(i, r(u, {
       size: "lg"
     }), null), n(t, r(l, {
       get when() {
@@ -16,7 +16,7 @@ function k(e) {
         var s = g();
         return n(s, () => e.message), s;
       }
-    }), null), o(() => d(t, u("flex flex-col items-center justify-center gap-4", "bg-background/80 backdrop-blur-sm", e.fullscreen ? "fixed inset-0 z-50" : "absolute inset-0", "animate-in fade-in", e.class))), t;
+    }), null), o(() => m(t, f("flex flex-col items-center justify-center gap-4", "bg-background/80 backdrop-blur-sm", e.fullscreen ? "fixed inset-0 z-50" : "absolute inset-0", "animate-in fade-in", e.class))), t;
   })();
   return r(l, {
     get when() {
@@ -29,7 +29,7 @@ function k(e) {
         },
         fallback: a,
         get children() {
-          return r(m, {
+          return r(d, {
             children: a
           });
         }
@@ -38,5 +38,5 @@ function k(e) {
   });
 }
 export {
-  k as LoadingOverlay
+  p as LoadingOverlay
 };

package/dist/components/loading/Skeleton.js

@@ -1,14 +1,14 @@
 import { effect as i, className as u, insert as s, createComponent as r, template as f } from "solid-js/web";
 import { For as h } from "solid-js";
 import { cn as o } from "../../utils/cn.js";
-var m = /* @__PURE__ */ f("<div>"), p = /* @__PURE__ */ f('<div><div class="flex items-center gap-3"><div class="space-y-2 flex-1">'), _ = /* @__PURE__ */ f('<div class="flex items-center gap-3"><div class="flex-1 space-y-1">');
+var m = /* @__PURE__ */ f("<div>"), p = /* @__PURE__ */ f('<div><div class="flex items-center gap-3"><div class="space-y-2 flex-1">'), v = /* @__PURE__ */ f('<div class="flex items-center gap-3"><div class="flex-1 space-y-1">');
 function c(n) {
   return (() => {
     var l = m();
     return i(() => u(l, o("rounded-md floe-skeleton", n.class))), l;
   })();
 }
-function v(n) {
+function _(n) {
   const l = () => n.lines ?? 3, a = () => Array.from({
     length: l()
   }, (e, t) => t);
@@ -26,7 +26,7 @@ function v(n) {
     })), i(() => u(e, o("space-y-2", n.class))), e;
   })();
 }
-function y(n) {
+function x(n) {
   return (() => {
     var l = p(), a = l.firstChild, e = a.firstChild;
     return s(a, r(c, {
@@ -35,12 +35,12 @@ function y(n) {
       class: "h-4 w-1/3"
     }), null), s(e, r(c, {
       class: "h-3 w-1/4"
-    }), null), s(l, r(v, {
+    }), null), s(l, r(_, {
       lines: 2
-    }), null), i(() => u(l, o("rounded-lg border border-border p-4 space-y-4", n.class))), l;
+    }), null), i(() => u(l, o("rounded-control border border-[var(--floe-line)] p-4 space-y-4", n.class))), l;
   })();
 }
-function x(n) {
+function y(n) {
   const l = () => n.count ?? 5, a = () => Array.from({
     length: l()
   }, (e, t) => t);
@@ -51,9 +51,9 @@ function x(n) {
         return a();
       },
       children: () => (() => {
-        var t = _(), d = t.firstChild;
+        var t = v(), d = t.firstChild;
         return s(t, r(c, {
-          class: "h-8 w-8 rounded"
+          class: "h-8 w-8 rounded-xs"
         }), d), s(d, r(c, {
           class: "h-4 w-2/3"
         }), null), s(d, r(c, {
@@ -65,7 +65,7 @@ function x(n) {
 }
 export {
   c as Skeleton,
-  y as SkeletonCard,
-  x as SkeletonList,
-  v as SkeletonText
+  x as SkeletonCard,
+  y as SkeletonList,
+  _ as SkeletonText
 };

package/dist/components/ui/Button.js

@@ -1,23 +1,23 @@
-import { spread as u, mergeProps as g, insert as n, createComponent as t, memo as m, Dynamic as h, effect as b, className as f, template as d } from "solid-js/web";
-import { splitProps as p, Show as i } from "solid-js";
-import { cn as s } from "../../utils/cn.js";
-import { Loader2 as v } from "../icons/index.js";
-var x = /* @__PURE__ */ d("<span aria-hidden=true>"), y = /* @__PURE__ */ d("<button type=button data-floe-control=button data-floe-surface-part=action>");
+import { spread as g, mergeProps as f, insert as n, createComponent as o, memo as u, Dynamic as v, effect as h, className as m, template as s } from "solid-js/web";
+import { splitProps as p, Show as l } from "solid-js";
+import { cn as i } from "../../utils/cn.js";
+import { Loader2 as b } from "../icons/index.js";
+var x = /* @__PURE__ */ s("<span aria-hidden=true>"), y = /* @__PURE__ */ s("<button type=button data-floe-control=button data-floe-surface-part=action>");
 const w = {
-  default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
-  primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 active:bg-primary/80",
-  secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 active:bg-secondary/70",
-  outline: "border border-border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
-  ghost: "hover:bg-accent hover:text-accent-foreground active:bg-accent/80",
-  "ghost-destructive": "bg-transparent text-muted-foreground hover:bg-error hover:text-error-foreground active:bg-error/80",
-  destructive: "bg-error text-error-foreground shadow-sm hover:bg-error/90 active:bg-error/80"
-}, z = {
-  xs: "h-6 px-2 text-[11px] rounded",
-  sm: "h-7 px-2.5 text-xs rounded",
-  md: "h-8 px-3 text-xs rounded-md",
-  lg: "h-9 px-4 text-sm rounded-md",
-  icon: "h-8 w-8 rounded-md"
-}, S = {
+  default: "bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--primary)_92%,var(--primary-foreground))]",
+  primary: "bg-primary text-primary-foreground hover:bg-[color-mix(in_srgb,var(--primary)_92%,var(--primary-foreground))]",
+  secondary: "bg-[var(--floe-well)] text-foreground hover:bg-[var(--floe-well-strong)]",
+  outline: "border border-[var(--floe-line-strong)] bg-transparent text-foreground hover:bg-[var(--floe-state-hover)] hover:border-[color-mix(in_srgb,var(--foreground)_26%,transparent)]",
+  ghost: "bg-transparent text-[var(--floe-ink-soft)] hover:bg-[var(--floe-state-hover)] hover:text-foreground",
+  "ghost-destructive": "bg-transparent text-[var(--floe-ink-soft)] hover:bg-[color-mix(in_srgb,var(--error)_12%,transparent)] hover:text-error",
+  destructive: "bg-error text-error-foreground hover:bg-[color-mix(in_srgb,var(--error)_88%,var(--foreground))]"
+}, _ = {
+  xs: "h-[var(--floe-control-height-xs)] px-2 text-[length:var(--floe-type-caption)] rounded-sm",
+  sm: "h-[var(--floe-control-height-sm)] px-2.5 text-[length:var(--floe-type-control)] rounded-md",
+  md: "h-[var(--floe-control-height-md)] px-3 text-[length:var(--floe-type-control)] rounded-control",
+  lg: "h-[var(--floe-control-height-lg)] px-3.5 text-[length:var(--floe-type-control)] rounded-control",
+  icon: "h-[var(--floe-control-height-md)] w-[var(--floe-control-height-md)] rounded-control"
+}, k = {
   xs: "w-3 h-3",
   sm: "w-3.5 h-3.5",
   md: "w-3.5 h-3.5",
@@ -25,48 +25,48 @@ const w = {
   icon: "w-4 h-4"
 };
 function P(a) {
-  const [e, c] = p(a, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), l = () => S[e.size ?? "md"];
+  const [r, c] = p(a, ["variant", "size", "loading", "icon", "class", "children", "disabled"]), d = () => k[r.size ?? "md"];
   return (() => {
-    var r = y();
-    return u(r, g({
+    var e = y();
+    return g(e, f({
       get "data-floe-surface"() {
-        return e.variant === "ghost" || e.variant === "ghost-destructive" ? void 0 : "raised";
+        return r.variant === "ghost" || r.variant === "ghost-destructive" || r.variant === "outline" ? void 0 : "flat";
       },
       get class() {
-        return s("inline-flex min-w-max items-center justify-center gap-1.5 whitespace-nowrap font-medium cursor-pointer", "transition-[color,background-color,border-color] duration-120", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", w[e.variant ?? "default"], z[e.size ?? "md"], e.class);
+        return i("inline-flex min-w-max items-center justify-center gap-1.5 whitespace-nowrap font-medium cursor-pointer", "tracking-[var(--floe-tracking-normal)]", "transition-[color,background-color,border-color,box-shadow,opacity,transform] duration-[var(--floe-duration-fast)] ease-[var(--floe-ease-out)]", "active:scale-[var(--floe-press-scale)]", "focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--floe-plane)]", "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed", w[r.variant ?? "default"], _[r.size ?? "md"], r.class);
       },
       get disabled() {
-        return e.disabled || e.loading;
+        return r.disabled || r.loading;
       },
       get "aria-busy"() {
-        return e.loading || void 0;
+        return r.loading || void 0;
       }
-    }, c), !1, !0), n(r, t(i, {
+    }, c), !1, !0), n(e, o(l, {
       get when() {
-        return e.icon || "loading" in a;
+        return r.icon || "loading" in a;
       },
       get children() {
-        var o = x();
-        return n(o, t(i, {
+        var t = x();
+        return n(t, o(l, {
           get when() {
-            return e.loading;
+            return r.loading;
           },
           get fallback() {
-            return m(() => !!e.icon)() && t(h, {
+            return u(() => !!r.icon)() && o(v, {
               get component() {
-                return e.icon;
+                return r.icon;
               },
               class: "h-full w-full"
             });
           },
           get children() {
-            return t(v, {
+            return o(b, {
               class: "h-full w-full animate-spin"
             });
           }
-        })), b(() => f(o, s("inline-flex shrink-0 items-center justify-center", l()))), o;
+        })), h(() => m(t, i("inline-flex shrink-0 items-center justify-center", d()))), t;
       }
-    }), null), n(r, () => e.children, null), r;
+    }), null), n(e, () => r.children, null), e;
   })();
 }
 export {

package/dist/components/ui/Card.d.ts

@@ -1,79 +1,28 @@
 import { type JSX } from 'solid-js';
-export type CardVariant = 'default' | 'hover-lift' | 'gradient-border' | 'glass' | 'spotlight' | 'shimmer' | 'glow';
+export type CardVariant = 'default' | 'interactive' | 'well';
 export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /**
+     * `default` is a filled content plane on the canvas. `interactive` adds the
+     * language's hover lift and first elevation step for clickable cards.
+     * `well` recesses the card into its host, for grouped secondary content.
+     */
     variant?: CardVariant;
-    /** Enable 3D perspective tilt on hover (works best with hover-lift and spotlight variants) */
-    enableTilt?: boolean;
-    /** Custom gradient colors for gradient-border variant */
-    gradientColors?: string;
-    /** Glow color for glow variant */
-    glowColor?: string;
 }
 /**
- * Base Card component
+ * Card — a plane, not a box.
+ *
+ * Separation comes from the fill step against the canvas and from the gutter
+ * around it; the card itself carries no contour and no resting shadow. That is
+ * what keeps a page of cards calm instead of drawing a grid of rectangles.
  */
 export declare function Card(props: CardProps): JSX.Element;
-/**
- * Card header component
- */
 export type CardHeaderProps = JSX.HTMLAttributes<HTMLDivElement>;
 export declare function CardHeader(props: CardHeaderProps): JSX.Element;
-/**
- * Card title component
- */
 export type CardTitleProps = JSX.HTMLAttributes<HTMLHeadingElement>;
 export declare function CardTitle(props: CardTitleProps): JSX.Element;
-/**
- * Card description component
- */
 export type CardDescriptionProps = JSX.HTMLAttributes<HTMLParagraphElement>;
 export declare function CardDescription(props: CardDescriptionProps): JSX.Element;
-/**
- * Card content component
- */
 export type CardContentProps = JSX.HTMLAttributes<HTMLDivElement>;
 export declare function CardContent(props: CardContentProps): JSX.Element;
-/**
- * Card footer component
- */
 export type CardFooterProps = JSX.HTMLAttributes<HTMLDivElement>;
 export declare function CardFooter(props: CardFooterProps): JSX.Element;
-/**
- * Interactive 3D Card with mouse tracking
- */
-export interface Interactive3DCardProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    /** Intensity of the 3D effect (1-20, default 10) */
-    intensity?: number;
-    /** Enable shine effect */
-    shine?: boolean;
-    /** Border glow on hover */
-    borderGlow?: boolean;
-}
-export declare function Interactive3DCard(props: Interactive3DCardProps): JSX.Element;
-/**
- * Animated Border Card with rotating gradient
- */
-export interface AnimatedBorderCardProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    /** Animation duration in seconds */
-    duration?: number;
-    /** Border width in pixels */
-    borderWidth?: number;
-    /** Gradient colors (Tailwind classes) */
-    colors?: string;
-}
-export declare function AnimatedBorderCard(props: AnimatedBorderCardProps): JSX.Element;
-/**
- * Neon Glow Card
- */
-export interface NeonCardProps extends JSX.HTMLAttributes<HTMLDivElement> {
-    /** Neon color (CSS color value) */
-    color?: string;
-    /** Pulse animation */
-    pulse?: boolean;
-}
-export declare function NeonCard(props: NeonCardProps): JSX.Element;
-/**
- * Morphing Card with blob-like background
- */
-export type MorphCardProps = JSX.HTMLAttributes<HTMLDivElement>;
-export declare function MorphCard(props: MorphCardProps): JSX.Element;