@floegence/floe-webapp-core 0.86.62 → 0.86.64

package/dist/surface.css

@@ -121,7 +121,12 @@
       .floe-floating-presence,
       [data-floe-surface-part='switch-thumb'],
       [data-floe-surface-part='radio-dot'],
-      [data-floe-surface-part='progress-fill']
+      [data-floe-surface-part='progress-fill'],
+      /* The travelling pill's transition is a motion timeline, not a palette
+       * fade. This rule sits after the segment-pill rule and shares its
+       * specificity, so without this exemption it would win and freeze the
+       * pill's transform. */
+      [data-floe-surface-part='segment-pill']
     )
   ) {
   transition-property: color, background-color, border-color, opacity;
@@ -171,6 +176,45 @@
   transition: none;
 }
 
+/* A tab strip that continues past its box fades toward that edge. The fade is
+ * part of the rail, not a decoration on the tabs, so it follows the scroll
+ * state instead of any one item's position. */
+[data-floe-surface-part='tab-rail'] {
+  --floe-rail-fade: 20px;
+  mask-image: none;
+}
+[data-floe-surface-part='tab-rail'][data-floe-overflow-start][data-floe-overflow-end] {
+  mask-image: linear-gradient(
+    to right,
+    transparent 0,
+    #000 var(--floe-rail-fade),
+    #000 calc(100% - var(--floe-rail-fade)),
+    transparent 100%
+  );
+}
+[data-floe-surface-part='tab-rail'][data-floe-overflow-start]:not([data-floe-overflow-end]) {
+  mask-image: linear-gradient(to right, transparent 0, #000 var(--floe-rail-fade));
+}
+[data-floe-surface-part='tab-rail'][data-floe-overflow-end]:not([data-floe-overflow-start]) {
+  mask-image: linear-gradient(to right, #000 calc(100% - var(--floe-rail-fade)), transparent 100%);
+}
+
+/* A travelling pill is the selection, not a second copy of it: the faces under
+ * it stay flat so the only thing that moves is the material. It keeps the
+ * language's one motion family, and a reduced-motion request lands it in place
+ * without the sweep. */
+[data-floe-surface-part='segment-pill'] {
+  transition:
+    transform var(--floe-duration-base) var(--floe-ease-out),
+    width var(--floe-duration-base) var(--floe-ease-out);
+  will-change: transform, width;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-floe-surface-part='segment-pill'] {
+    transition: none;
+  }
+}
+
 /* A compound input has one decorative boundary, including host compositions
  * that contain an Input component. Dense nested actions stay flat. */
 [data-floe-input-surface] [data-floe-surface],
@@ -334,6 +378,14 @@
       border-color: var(--floe-line);
       --floe-surface-decoration: var(--floe-elevation-raised);
     }
+    /* The travelling pill is a selected tab at rest: same fill, same hairline,
+     * same first elevation step. It carries them by itself because it has no
+     * per-option state to inherit from. */
+    & [data-floe-surface-part='segment-pill'] {
+      background-color: var(--card);
+      border: 1px solid var(--floe-line);
+      --floe-surface-decoration: var(--floe-elevation-raised);
+    }
     & [data-floe-surface-part='segment'][aria-checked='false'] {
       background-color: transparent;
     }

package/dist/ui.js

@@ -1,8 +1,8 @@
 import { AffixInput as e, Input as t, NumberInput as a, Textarea as i } from "./components/ui/Input.js";
 import { AreaChart as c, DataBarChart as p, DataPieChart as l, LineChart as m, MonitoringChart as T } from "./components/ui/Charts.js";
 import { Button as s } from "./components/ui/Button.js";
-import { CANVAS_WHEEL_INTERACTIVE_ATTR as E, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as C, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR as x, DEFAULT_WORKBENCH_TEXT_SELECTION_SURFACE_SELECTOR as _, DEFAULT_WORKBENCH_WIDGET_ACTIVATION_SURFACE_SELECTOR as R, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR as A, LOCAL_INTERACTION_SURFACE_ATTR as u, WORKBENCH_TEXT_SELECTION_SURFACE_ATTR as g, WORKBENCH_WIDGET_ACTIVATION_SURFACE_ATTR as F, WORKBENCH_WIDGET_SHELL_ATTR as L, isLocalInteractionSurfaceTarget as d, resolveSurfaceInteractionTargetRole as P, resolveSurfaceWheelRouting as I, resolveWorkbenchWidgetEventOwnership as O, resolveWorkbenchWidgetLocalTypingTarget as W, resolveWorkbenchWidgetTextSelectionTarget as v, shouldActivateWorkbenchWidgetLocalTarget as D } from "./components/ui/localInteractionSurface.js";
-import { Card as k, CardContent as h, CardDescription as B, CardFooter as b, CardHeader as U, CardTitle as H } from "./components/ui/Card.js";
+import { CANVAS_WHEEL_INTERACTIVE_ATTR as E, DEFAULT_CANVAS_WHEEL_INTERACTIVE_SELECTOR as C, DEFAULT_LOCAL_INTERACTION_SURFACE_SELECTOR as x, DEFAULT_WORKBENCH_TEXT_SELECTION_SURFACE_SELECTOR as _, DEFAULT_WORKBENCH_WIDGET_ACTIVATION_SURFACE_SELECTOR as R, DEFAULT_WORKBENCH_WIDGET_SHELL_SELECTOR as A, LOCAL_INTERACTION_SURFACE_ATTR as g, WORKBENCH_TEXT_SELECTION_SURFACE_ATTR as u, WORKBENCH_WIDGET_ACTIVATION_SURFACE_ATTR as F, WORKBENCH_WIDGET_SHELL_ATTR as L, isLocalInteractionSurfaceTarget as d, resolveSurfaceInteractionTargetRole as P, resolveSurfaceWheelRouting as I, resolveWorkbenchWidgetEventOwnership as O, resolveWorkbenchWidgetLocalTypingTarget as W, resolveWorkbenchWidgetTextSelectionTarget as v, shouldActivateWorkbenchWidgetLocalTarget as D } from "./components/ui/localInteractionSurface.js";
+import { Card as h, CardContent as k, CardDescription as b, CardFooter as B, CardHeader as H, CardTitle as U } from "./components/ui/Card.js";
 import { Checkbox as M, CheckboxGroup as w, CheckboxList as K } from "./components/ui/Checkbox.js";
 import { CircularProgress as V, LinearProgress as z, SegmentedProgress as j, StepsProgress as X } from "./components/ui/Progress.js";
 import { CommandPalette as Q } from "./components/ui/CommandPalette.js";
@@ -12,10 +12,10 @@ import { DialogPlacementProvider as So } from "./components/ui/DialogPlacementCo
 import { DirectoryFavoriteButton as Co } from "./components/ui/picker/DirectoryFavorites.js";
 import { DirectoryInput as _o } from "./components/ui/DirectoryInput.js";
 import { DirectoryPicker as Ao } from "./components/ui/DirectoryPicker.js";
-import { Dropdown as go, Select as Fo } from "./components/ui/Dropdown.js";
+import { Dropdown as uo, Select as Fo } from "./components/ui/Dropdown.js";
 import { ErrorBlock as Po, HighlightBlock as Io, InfoBlock as Oo, NoteBlock as Wo, SuccessBlock as vo, TipBlock as Do, WarningBlock as No } from "./components/ui/HighlightBlock.js";
-import { FeedbackIndicator as ho } from "./components/ui/FeedbackIndicator.js";
-import { FileOpenPicker as bo, normalizeFileOpenSelection as Uo, updateFileOpenSelection as Ho } from "./components/ui/FileOpenPicker.js";
+import { FeedbackIndicator as ko } from "./components/ui/FeedbackIndicator.js";
+import { FileOpenPicker as Bo, normalizeFileOpenSelection as Ho, updateFileOpenSelection as Uo } from "./components/ui/FileOpenPicker.js";
 import { FileSavePicker as Mo } from "./components/ui/FileSavePicker.js";
 import { FloatingWindow as Ko } from "./components/ui/FloatingWindow.js";
 import { Form as Vo, FormActions as zo, FormControl as jo, FormDescription as Xo, FormDivider as Yo, FormField as Qo, FormLabel as Zo, FormMessage as qo, FormRow as Jo, FormSection as $o, useFormSubmitting as or } from "./components/ui/Form.js";
@@ -25,13 +25,13 @@ import { MENU_ITEM_SELECTOR as nr, focusMenuItem as cr, getMenuItems as pr, hand
 import { MobileKeyboard as fr } from "./components/ui/MobileKeyboard.js";
 import { Pagination as Sr } from "./components/ui/Pagination.js";
 import { PersistentHorizontalScrollbar as Cr } from "./components/ui/PersistentHorizontalScrollbar.js";
-import { PickerNavigationError as _r, createFilesystemPickerDataSource as Rr, formatPickerPath as Ar, parsePickerPath as ur } from "./components/ui/picker/PickerNavigation.js";
+import { PickerNavigationError as _r, createFilesystemPickerDataSource as Rr, formatPickerPath as Ar, parsePickerPath as gr } from "./components/ui/picker/PickerNavigation.js";
 import { Popover as Fr } from "./components/ui/Popover.js";
 import { ProcessingIndicator as dr } from "./components/ui/ProcessingIndicator.js";
 import { QuoteBlock as Ir } from "./components/ui/QuoteBlock.js";
 import { RadioGroup as Wr, RadioList as vr, RadioOption as Dr } from "./components/ui/Radio.js";
-import { SegmentedControl as kr } from "./components/ui/SegmentedControl.js";
-import { SettingRow as Br, SettingsLayout as br, SettingsList as Ur, SettingsNavigation as Hr, SettingsSection as yr } from "./components/ui/Settings.js";
+import { SegmentedControl as hr } from "./components/ui/SegmentedControl.js";
+import { SettingRow as br, SettingsLayout as Br, SettingsList as Hr, SettingsNavigation as Ur, SettingsSection as yr } from "./components/ui/Settings.js";
 import { StableText as wr } from "./components/ui/StableText.js";
 import { StatusRegion as Gr } from "./components/ui/StatusRegion.js";
 import { Stepper as zr, Wizard as jr, useWizard as Xr } from "./components/ui/Stepper.js";
@@ -45,19 +45,20 @@ import { Tooltip as pe } from "./components/ui/Tooltip.js";
 import { clientToCanvasLocal as me, clientToCanvasWorld as Te, createViewportFromZoomAnchor as fe, isPointInsideCanvasRect as se, localToCanvasWorld as Se } from "./components/ui/canvasGeometry.js";
 import { createFloatingPresence as Ce } from "./components/ui/floatingPresence.js";
 import { intersectSurfaceRects as _e } from "./components/ui/surfaceFloatingBoundary.js";
-import { resolveFloatingWindowViewport as Ae } from "./components/ui/floatingWindowGeometry.js";
-import { startPointerSession as ge } from "./components/ui/pointerSession.js";
+import { observeDialogHeight as Ae } from "./components/ui/dialogHeightMotion.js";
+import { resolveFloatingWindowViewport as ue } from "./components/ui/floatingWindowGeometry.js";
+import { startPointerSession as Le } from "./components/ui/pointerSession.js";
 export {
   e as AffixInput,
   c as AreaChart,
   s as Button,
   E as CANVAS_WHEEL_INTERACTIVE_ATTR,
-  k as Card,
-  h as CardContent,
-  B as CardDescription,
-  b as CardFooter,
-  U as CardHeader,
-  H as CardTitle,
+  h as Card,
+  k as CardContent,
+  b as CardDescription,
+  B as CardFooter,
+  H as CardHeader,
+  U as CardTitle,
   M as Checkbox,
   w as CheckboxGroup,
   K as CheckboxList,
@@ -78,10 +79,10 @@ export {
   Co as DirectoryFavoriteButton,
   _o as DirectoryInput,
   Ao as DirectoryPicker,
-  go as Dropdown,
+  uo as Dropdown,
   Po as ErrorBlock,
-  ho as FeedbackIndicator,
-  bo as FileOpenPicker,
+  ko as FeedbackIndicator,
+  Bo as FileOpenPicker,
   Mo as FileSavePicker,
   Ko as FloatingWindow,
   Vo as Form,
@@ -99,7 +100,7 @@ export {
   Oo as InfoBlock,
   t as Input,
   ar as KeyedFor,
-  u as LOCAL_INTERACTION_SURFACE_ATTR,
+  g as LOCAL_INTERACTION_SURFACE_ATTR,
   m as LineChart,
   z as LinearProgress,
   nr as MENU_ITEM_SELECTOR,
@@ -118,13 +119,13 @@ export {
   Dr as RadioOption,
   eo as SURFACE_PORTAL_HOST_ATTR,
   to as SURFACE_PORTAL_LAYER_ATTR,
-  kr as SegmentedControl,
+  hr as SegmentedControl,
   j as SegmentedProgress,
   Fo as Select,
-  Br as SettingRow,
-  br as SettingsLayout,
-  Ur as SettingsList,
-  Hr as SettingsNavigation,
+  br as SettingRow,
+  Br as SettingsLayout,
+  Hr as SettingsList,
+  Ur as SettingsNavigation,
   yr as SettingsSection,
   wr as StableText,
   Gr as StatusRegion,
@@ -141,7 +142,7 @@ export {
   i as Textarea,
   Do as TipBlock,
   pe as Tooltip,
-  g as WORKBENCH_TEXT_SELECTION_SURFACE_ATTR,
+  u as WORKBENCH_TEXT_SELECTION_SURFACE_ATTR,
   F as WORKBENCH_WIDGET_ACTIVATION_SURFACE_ATTR,
   L as WORKBENCH_WIDGET_SHELL_ATTR,
   No as WarningBlock,
@@ -163,11 +164,12 @@ export {
   no as isSurfacePortalMode,
   Se as localToCanvasWorld,
   mr as moveMenuFocus,
-  Uo as normalizeFileOpenSelection,
-  ur as parsePickerPath,
+  Ho as normalizeFileOpenSelection,
+  Ae as observeDialogHeight,
+  gr as parsePickerPath,
   co as projectSurfacePortalPosition,
   po as projectSurfacePortalRect,
-  Ae as resolveFloatingWindowViewport,
+  ue as resolveFloatingWindowViewport,
   P as resolveSurfaceInteractionTargetRole,
   lo as resolveSurfacePortalBoundaryRect,
   mo as resolveSurfacePortalHost,
@@ -178,8 +180,8 @@ export {
   W as resolveWorkbenchWidgetLocalTypingTarget,
   v as resolveWorkbenchWidgetTextSelectionTarget,
   D as shouldActivateWorkbenchWidgetLocalTarget,
-  ge as startPointerSession,
-  Ho as updateFileOpenSelection,
+  Le as startPointerSession,
+  Uo as updateFileOpenSelection,
   or as useFormSubmitting,
   Xr as useWizard
 };

package/package.json

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