@floegence/floe-webapp-core 0.86.60 → 0.86.63

package/dist/workbench-composition.css

@@ -24,9 +24,9 @@
     max-width: 100%;
     background: var(--card);
     border: 1px solid var(--wb-window-edge);
-    border-radius: 10px;
+    border-radius: var(--floe-radius-card);
     color: var(--foreground);
-    box-shadow: 0 3px 10px -4px rgb(0 0 0 / 20%);
+    box-shadow: var(--floe-window-shadow);
   }
   .workbench-toolbar-main {
     display: flex;
@@ -45,7 +45,7 @@
     height: 30px;
     padding: 0;
     border: 0;
-    border-radius: 5px;
+    border-radius: var(--floe-radius-control);
     background: transparent;
     color: var(--foreground);
     font: inherit;
@@ -155,9 +155,9 @@
     overscroll-behavior: contain;
     padding: 5px;
     border: 1px solid var(--wb-window-edge);
-    border-radius: 9px;
+    border-radius: var(--floe-radius-group);
     background: var(--card);
-    box-shadow: 0 4px 12px -4px rgb(0 0 0 / 20%);
+    box-shadow: var(--floe-window-shadow);
   }
   .workbench-composition-toolbar .workbench-treatment-options {
     display: flex;
@@ -173,7 +173,7 @@
     padding: 5px 7px;
     gap: 10px;
     border: 1px solid transparent;
-    border-radius: 7px;
+    border-radius: var(--floe-radius-control);
     text-align: left;
   }
   .workbench-composition-toolbar .workbench-treatment-label {
@@ -200,7 +200,7 @@
     --region-hatch: color-mix(in oklab, var(--region-outline) 78%, var(--region-fill));
     --hatch-spacing: 7px;
     --hatch-line: 1px;
-    border-radius: 5px;
+    border-radius: var(--floe-radius-control);
     background-position: center;
   }
   .workbench-treatment-options .workbench-region-material__sample.is-material-dotted {
@@ -359,7 +359,7 @@
     background-color: var(--note-fill);
     color: var(--note-surface-ink);
     border: 1px solid var(--note-surface-edge);
-    border-radius: var(--surface-radius, 9px);
+    border-radius: var(--surface-radius, var(--floe-radius-card));
   }
   [data-note-material='tab'] {
     --note-fill: var(--note-paper);
@@ -374,7 +374,7 @@
     top: 0;
     bottom: 0;
     width: var(--stripe-width, 9px);
-    border-radius: var(--surface-radius, 8px) 0 0 var(--surface-radius, 8px);
+    border-radius: var(--surface-radius, var(--floe-radius-card)) 0 0 var(--surface-radius, var(--floe-radius-card));
     background: var(--note-marker);
     pointer-events: none;
   }
@@ -393,7 +393,7 @@
         calc(a * 0.35 + var(--note-edge-chroma) * var(--note-cos) * 0.65)
         calc(b * 0.35 + var(--note-edge-chroma) * var(--note-sin) * 0.65)
     );
-    border-radius: 3px;
+    border-radius: var(--surface-radius, var(--floe-radius-card));
   }
   [data-note-material='ruled']::before {
     content: '';
@@ -423,7 +423,7 @@
   .workbench-sticky {
     display: flex;
     overflow: visible;
-    border-radius: 9px;
+    border-radius: var(--floe-radius-card);
     transform-origin: 0 0;
     cursor: grab;
     font-family: var(--workbench-composition-font);
@@ -437,7 +437,7 @@
     position: relative;
     width: 100%;
     height: 100%;
-    box-shadow: 0 3px 7px -5px rgb(0 0 0 / 24%);
+    box-shadow: var(--floe-surface-shadow-raised, 0 1px 2px -1px var(--floe-surface-shade));
   }
   .workbench-sticky__content {
     position: relative;
@@ -661,9 +661,9 @@
     .workbench-region-visibility-outline
   ).is-material-glass {
     background-image: linear-gradient(
-      135deg,
-      color-mix(in srgb, white 10%, transparent),
-      transparent 60%
+      160deg,
+      color-mix(in oklab, var(--region-fill) 62%, var(--card)),
+      var(--region-fill)
     );
   }
   .workbench-background-region,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.86.60",
+  "version": "0.86.63",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",

package/dist/components/layout/BottomBar.d.ts

@@ -1,29 +0,0 @@
-import { type JSX } from 'solid-js';
-export interface BottomBarProps {
-    children?: JSX.Element;
-    class?: string;
-    /** Height class, defaults to 'h-5' (20px). Use Tailwind height classes like 'h-7' (28px). */
-    height?: string;
-}
-/**
- * Status bar at the bottom of the application
- */
-export declare function BottomBar(props: BottomBarProps): JSX.Element;
-/**
- * Bottom bar item
- */
-export interface BottomBarItemProps {
-    children: JSX.Element;
-    icon?: JSX.Element;
-    onClick?: () => void;
-    class?: string;
-}
-export declare function BottomBarItem(props: BottomBarItemProps): JSX.Element;
-/**
- * Status indicator dot
- */
-export interface StatusIndicatorProps {
-    status: 'connected' | 'disconnected' | 'connecting' | 'error';
-    label?: string;
-}
-export declare function StatusIndicator(props: StatusIndicatorProps): JSX.Element;

package/dist/components/layout/BottomBar.js

@@ -1,70 +0,0 @@
-import { insert as n, effect as a, className as u, createComponent as c, template as i, delegateEvents as b } from "solid-js/web";
-import { Show as s } from "solid-js";
-import { cn as m } from "../../utils/cn.js";
-import { useResolvedFloeConfig as f } from "../../context/FloeConfigContext.js";
-var h = /* @__PURE__ */ i("<footer data-floe-shell-slot=bottom-bar style=background-color:var(--activity-bar);border-top-color:var(--bottom-bar-border)>"), g = /* @__PURE__ */ i('<span class="w-2.5 h-2.5">'), v = /* @__PURE__ */ i("<button type=button>"), d = /* @__PURE__ */ i("<span>");
-function C(t) {
-  return (() => {
-    var r = h();
-    return n(r, () => t.children), a(() => u(r, m(t.height ?? "h-5", "shrink-0 flex items-center justify-between px-1.5", "bg-background border-t border-border", "text-[10px] text-muted-foreground font-mono", t.class))), r;
-  })();
-}
-function $(t) {
-  const r = () => m("flex items-center gap-1 px-1 py-0.5 rounded-sm", t.onClick && "hover:bg-muted/80 cursor-pointer", "transition-colors duration-75", t.class);
-  return c(s, {
-    get when() {
-      return t.onClick;
-    },
-    get fallback() {
-      return (() => {
-        var e = d();
-        return n(e, c(s, {
-          get when() {
-            return t.icon;
-          },
-          get children() {
-            var o = g();
-            return n(o, () => t.icon), o;
-          }
-        }), null), n(e, () => t.children, null), a(() => u(e, r())), e;
-      })();
-    },
-    get children() {
-      var e = v();
-      return e.$$click = () => t.onClick?.(), n(e, c(s, {
-        get when() {
-          return t.icon;
-        },
-        get children() {
-          var o = g();
-          return n(o, () => t.icon), o;
-        }
-      }), null), n(e, () => t.children, null), a(() => u(e, r())), e;
-    }
-  });
-}
-function y(t) {
-  const r = f(), e = {
-    connected: "bg-success",
-    disconnected: "bg-muted-foreground",
-    connecting: "bg-warning animate-pulse",
-    error: "bg-error"
-  }, o = () => r.config.strings.statusIndicator;
-  return c($, {
-    get children() {
-      return [(() => {
-        var l = d();
-        return a(() => u(l, m("w-1.5 h-1.5 rounded-full", e[t.status]))), l;
-      })(), (() => {
-        var l = d();
-        return n(l, () => t.label ?? o()[t.status]), l;
-      })()];
-    }
-  });
-}
-b(["click"]);
-export {
-  C as BottomBar,
-  $ as BottomBarItem,
-  y as StatusIndicator
-};