@floegence/floe-webapp-core 0.35.6 → 0.35.8

package/dist/ui.js

@@ -1,50 +1,51 @@
 import { AffixInput as e, Input as t, NumberInput as i, Textarea as a } from "./components/ui/Input.js";
-import { AnimatedBorderCard as p, Card as n, CardContent as x, CardDescription as f, CardFooter as c, CardHeader as d, CardTitle as C, Interactive3DCard as l, MorphCard as s, NeonCard as g } from "./components/ui/Card.js";
+import { AnimatedBorderCard as p, Card as n, CardContent as x, CardDescription as f, CardFooter as c, CardHeader as d, CardTitle as l, Interactive3DCard as C, MorphCard as s, NeonCard as g } from "./components/ui/Card.js";
 import { AreaChart as u, DataBarChart as k, DataPieChart as h, LineChart as B, MonitoringChart as D } from "./components/ui/Charts.js";
-import { Button as S } from "./components/ui/Button.js";
+import { Button as b } from "./components/ui/Button.js";
 import { Checkbox as I, CheckboxGroup as T, CheckboxList as L } from "./components/ui/Checkbox.js";
-import { CircularProgress as A, LinearProgress as R, SegmentedProgress as W, StepsProgress as v } from "./components/ui/Progress.js";
-import { CommandPalette as N } from "./components/ui/CommandPalette.js";
+import { CircularProgress as A, LinearProgress as M, SegmentedProgress as R, StepsProgress as W } from "./components/ui/Progress.js";
+import { CommandPalette as y } from "./components/ui/CommandPalette.js";
 import { ConfirmDialog as z, Dialog as G } from "./components/ui/Dialog.js";
 import { DirectoryInput as E } from "./components/ui/DirectoryInput.js";
-import { DirectoryPicker as Q } from "./components/ui/DirectoryPicker.js";
-import { Dropdown as q, Select as J } from "./components/ui/Dropdown.js";
+import { DirectoryPicker as O } from "./components/ui/DirectoryPicker.js";
+import { Dropdown as j, Select as q } from "./components/ui/Dropdown.js";
 import { ErrorBlock as U, HighlightBlock as V, InfoBlock as X, NoteBlock as Y, SuccessBlock as Z, TipBlock as _, WarningBlock as $ } from "./components/ui/HighlightBlock.js";
 import { FileSavePicker as or } from "./components/ui/FileSavePicker.js";
 import { FloatingWindow as tr } from "./components/ui/FloatingWindow.js";
-import { Form as ar, FormActions as mr, FormControl as pr, FormDescription as nr, FormDivider as xr, FormField as fr, FormLabel as cr, FormMessage as dr, FormRow as Cr, FormSection as lr, useFormSubmitting as sr } from "./components/ui/Form.js";
-import { Pagination as Fr } from "./components/ui/Pagination.js";
-import { ProcessingIndicator as kr } from "./components/ui/ProcessingIndicator.js";
-import { QuoteBlock as Br } from "./components/ui/QuoteBlock.js";
-import { RadioGroup as Pr, RadioList as Sr, RadioOption as br } from "./components/ui/Radio.js";
-import { SegmentedControl as Tr } from "./components/ui/SegmentedControl.js";
-import { Stepper as wr, Wizard as Ar, useWizard as Rr } from "./components/ui/Stepper.js";
-import { Switch as vr } from "./components/ui/Switch.js";
-import { TabPanel as Nr, Tabs as yr } from "./components/ui/Tabs.js";
-import { Tooltip as Gr } from "./components/ui/Tooltip.js";
+import { Form as ar, FormActions as mr, FormControl as pr, FormDescription as nr, FormDivider as xr, FormField as fr, FormLabel as cr, FormMessage as dr, FormRow as lr, FormSection as Cr, useFormSubmitting as sr } from "./components/ui/Form.js";
+import { MobileKeyboard as Fr } from "./components/ui/MobileKeyboard.js";
+import { Pagination as kr } from "./components/ui/Pagination.js";
+import { ProcessingIndicator as Br } from "./components/ui/ProcessingIndicator.js";
+import { QuoteBlock as Pr } from "./components/ui/QuoteBlock.js";
+import { RadioGroup as Sr, RadioList as Ir, RadioOption as Tr } from "./components/ui/Radio.js";
+import { SegmentedControl as wr } from "./components/ui/SegmentedControl.js";
+import { Stepper as Mr, Wizard as Rr, useWizard as Wr } from "./components/ui/Stepper.js";
+import { Switch as yr } from "./components/ui/Switch.js";
+import { TabPanel as zr, Tabs as Gr } from "./components/ui/Tabs.js";
+import { Tooltip as Er } from "./components/ui/Tooltip.js";
 export {
   e as AffixInput,
   p as AnimatedBorderCard,
   u as AreaChart,
-  S as Button,
+  b as Button,
   n as Card,
   x as CardContent,
   f as CardDescription,
   c as CardFooter,
   d as CardHeader,
-  C as CardTitle,
+  l as CardTitle,
   I as Checkbox,
   T as CheckboxGroup,
   L as CheckboxList,
   A as CircularProgress,
-  N as CommandPalette,
+  y as CommandPalette,
   z as ConfirmDialog,
   k as DataBarChart,
   h as DataPieChart,
   G as Dialog,
   E as DirectoryInput,
-  Q as DirectoryPicker,
-  q as Dropdown,
+  O as DirectoryPicker,
+  j as Dropdown,
   U as ErrorBlock,
   or as FileSavePicker,
   tr as FloatingWindow,
@@ -56,39 +57,40 @@ export {
   fr as FormField,
   cr as FormLabel,
   dr as FormMessage,
-  Cr as FormRow,
-  lr as FormSection,
+  lr as FormRow,
+  Cr as FormSection,
   V as HighlightBlock,
   X as InfoBlock,
   t as Input,
-  l as Interactive3DCard,
+  C as Interactive3DCard,
   B as LineChart,
-  R as LinearProgress,
+  M as LinearProgress,
+  Fr as MobileKeyboard,
   D as MonitoringChart,
   s as MorphCard,
   g as NeonCard,
   Y as NoteBlock,
   i as NumberInput,
-  Fr as Pagination,
-  kr as ProcessingIndicator,
-  Br as QuoteBlock,
-  Pr as RadioGroup,
-  Sr as RadioList,
-  br as RadioOption,
-  Tr as SegmentedControl,
-  W as SegmentedProgress,
-  J as Select,
-  wr as Stepper,
-  v as StepsProgress,
+  kr as Pagination,
+  Br as ProcessingIndicator,
+  Pr as QuoteBlock,
+  Sr as RadioGroup,
+  Ir as RadioList,
+  Tr as RadioOption,
+  wr as SegmentedControl,
+  R as SegmentedProgress,
+  q as Select,
+  Mr as Stepper,
+  W as StepsProgress,
   Z as SuccessBlock,
-  vr as Switch,
-  Nr as TabPanel,
-  yr as Tabs,
+  yr as Switch,
+  zr as TabPanel,
+  Gr as Tabs,
   a as Textarea,
   _ as TipBlock,
-  Gr as Tooltip,
+  Er as Tooltip,
   $ as WarningBlock,
-  Ar as Wizard,
+  Rr as Wizard,
   sr as useFormSubmitting,
-  Rr as useWizard
+  Wr as useWizard
 };

package/dist/utils/touchSurfaceGuard.d.ts

@@ -0,0 +1,9 @@
+export declare const FLOE_TOUCH_SURFACE_ATTR = "data-floe-touch-surface";
+export declare const FLOE_TOUCH_SURFACE_VALUE = "true";
+export declare const preventTouchSurfaceNativeInteraction: (event: Event) => void;
+export declare const preventTouchSurfacePointerDown: (event: PointerEvent) => void;
+export declare const floeTouchSurfaceAttrs: {
+    readonly "data-floe-touch-surface": "true";
+    readonly onContextMenu: (event: Event) => void;
+    readonly onSelectStart: (event: Event) => void;
+};

package/dist/utils/touchSurfaceGuard.js

@@ -0,0 +1,16 @@
+const o = "data-floe-touch-surface", n = "true", e = (t) => {
+  t.preventDefault();
+}, c = (t) => {
+  t.preventDefault();
+}, r = {
+  [o]: n,
+  onContextMenu: e,
+  onSelectStart: e
+};
+export {
+  o as FLOE_TOUCH_SURFACE_ATTR,
+  n as FLOE_TOUCH_SURFACE_VALUE,
+  r as floeTouchSurfaceAttrs,
+  e as preventTouchSurfaceNativeInteraction,
+  c as preventTouchSurfacePointerDown
+};

package/dist/widgets/TerminalWidget.d.ts

@@ -1,5 +1,21 @@
+import { type Component } from 'solid-js';
 import type { WidgetProps } from '../context/WidgetRegistry';
+import { type TerminalRuntimeAdapter, type TerminalSuggestionProvider, type TerminalWorkspaceProfile } from '../terminal';
+export interface TerminalWidgetLine {
+    id: number;
+    type: 'input' | 'output' | 'error';
+    content: string;
+}
+export interface TerminalWidgetProps extends WidgetProps {
+    profile?: Partial<TerminalWorkspaceProfile>;
+    runtime?: TerminalRuntimeAdapter;
+    resolveNow?: () => string;
+    suggestionProviders?: readonly TerminalSuggestionProvider[];
+    quickInserts?: readonly string[];
+}
+export type CreateTerminalWidgetOptions = Omit<TerminalWidgetProps, 'widgetId' | 'config' | 'isEditMode'>;
+export declare function createTerminalWidget(options?: CreateTerminalWidgetOptions): Component<WidgetProps>;
 /**
  * Terminal widget
  */
-export declare function TerminalWidget(props: WidgetProps): import("solid-js").JSX.Element;
+export declare function TerminalWidget(props: TerminalWidgetProps): import("solid-js").JSX.Element;

package/dist/widgets/TerminalWidget.js

@@ -1,9 +1,19 @@
-import { insert as $, createComponent as E, effect as u, className as x, template as b, use as S, delegateEvents as T } from "solid-js/web";
-import { createSignal as y, For as k } from "solid-js";
-import { cn as g } from "../utils/cn.js";
-var z = /* @__PURE__ */ b('<div><div class="flex-1 overflow-y-auto p-2"><div class="flex items-center"><span class=text-green-400>$ </span><form class=flex-1><input type=text class="w-full bg-transparent outline-none text-zinc-100">'), I = /* @__PURE__ */ b("<div>");
-function F(p) {
-  const [_, d] = y([{
+import { insert as i, createComponent as d, memo as L, effect as y, className as W, spread as U, mergeProps as H, setStyleProperty as X, template as v, use as F, delegateEvents as Y } from "solid-js/web";
+import { createSignal as C, createMemo as P, createEffect as N, Show as M, For as Z } from "solid-js";
+import { useResolvedFloeConfig as ee } from "../context/FloeConfigContext.js";
+import { MobileKeyboard as te } from "../components/ui/MobileKeyboard.js";
+import { useMediaQuery as re } from "../hooks/useMediaQuery.js";
+import { cn as q } from "../utils/cn.js";
+import { floeTouchSurfaceAttrs as ne, preventTouchSurfacePointerDown as oe } from "../utils/touchSurfaceGuard.js";
+import { normalizeTerminalWorkspaceProfile as ie } from "../terminal/workspaceProfile.js";
+import { createTerminalSessionState as le, getTerminalPromptPreview as se, getTerminalSessionSuggestions as ae, applyTerminalSessionSuggestion as ue, setTerminalSessionInputValue as de, dispatchTerminalSessionKey as ce, submitTerminalSession as me } from "../terminal/sessionModel.js";
+import { runTerminalMockCommand as pe } from "../terminal/mockRuntime.js";
+var fe = /* @__PURE__ */ v('<button type=button class="rounded-full px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] transition-colors"style="background:color-mix(in srgb, var(--terminal-foreground) 8%, transparent);color:color-mix(in srgb, var(--terminal-foreground) 82%, transparent)">'), ge = /* @__PURE__ */ v('<form class=flex-1><input type=text class="w-full bg-transparent text-terminal-foreground outline-none">'), be = /* @__PURE__ */ v('<div><div class="flex h-full min-h-0 flex-col"><div class="flex items-center justify-between border-b px-3 py-2 text-[11px]"style="border-color:color-mix(in srgb, var(--terminal-foreground) 10%, transparent);color:color-mix(in srgb, var(--terminal-foreground) 72%, transparent)"><div class="flex items-center gap-2"><div class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-rose-400/80"></span><span class="h-2 w-2 rounded-full bg-amber-300/80"></span><span class="h-2 w-2 rounded-full bg-emerald-400/80"></span></div><span>Terminal Session</span></div></div><div class="flex-1 overflow-y-auto px-3 py-3 transition-[padding] duration-200"><div class="mt-2 rounded-xl px-3 py-2"style="background:color-mix(in srgb, var(--terminal-foreground) 5%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--terminal-foreground) 8%, transparent)"><div class="flex items-start gap-2"><span class="pt-0.5 text-emerald-300">$'), ve = /* @__PURE__ */ v("<div>"), xe = /* @__PURE__ */ v('<button><span class="whitespace-pre-wrap break-all text-terminal-foreground"><span class="mx-[1px] inline-block min-w-[0.65ch] rounded-[2px] bg-terminal-foreground text-terminal-background">');
+function Ee(n = {}) {
+  return (h) => d(ye, H(h, n));
+}
+function ye(n) {
+  const h = ee(), a = re(h.config.layout.mobileQuery), [E, $] = C([{
     id: 1,
     type: "output",
     content: "Welcome to Floe Terminal"
@@ -11,77 +21,162 @@ function F(p) {
     id: 2,
     type: "output",
     content: 'Type "help" for available commands'
-  }, {
-    id: 3,
-    type: "input",
-    content: "$ "
-  }]), [f, s] = y("");
-  let c, i = 4;
-  const w = (l) => {
-    l.preventDefault();
-    const e = f().trim();
-    if (!e) return;
-    const n = [{
-      id: i++,
+  }]), [c, w] = C(le()), [x, m] = C(!1);
+  let S, p, f = 3;
+  const I = () => c().editor.value, T = P(() => ie(n.profile)), Q = () => n.runtime ?? pe, _ = P(() => se(c().editor)), K = P(() => ae(c(), {
+    profile: T(),
+    providers: n.suggestionProviders
+  })), j = (e) => {
+    w((l) => de(l, e));
+  }, z = (e) => {
+    e.preventDefault(), J();
+  }, A = () => {
+    if (!n.isEditMode) {
+      if (a()) {
+        m(!0);
+        return;
+      }
+      S?.focus();
+    }
+  }, k = (e) => {
+    e.length && $((l) => [...l, ...e]);
+  }, B = (e, l) => {
+    const g = {
+      id: f++,
       type: "input",
       content: `$ ${e}`
-    }];
-    if (e === "help")
-      n.push({
-        id: i++,
-        type: "output",
-        content: "Available commands: help, clear, date, echo <text>"
-      });
-    else if (e === "clear") {
-      d([{
-        id: i++,
-        type: "input",
-        content: "$ "
-      }]), s("");
+    }, s = l.lines.map((b) => ({
+      id: f++,
+      type: b.type,
+      content: b.content
+    }));
+    if (l.clear) {
+      $([]);
       return;
-    } else e === "date" ? n.push({
-      id: i++,
-      type: "output",
-      content: (/* @__PURE__ */ new Date()).toString()
-    }) : e.startsWith("echo ") ? n.push({
-      id: i++,
-      type: "output",
-      content: e.slice(5)
-    }) : n.push({
-      id: i++,
-      type: "error",
-      content: `Command not found: ${e}`
-    });
-    n.push({
-      id: i++,
-      type: "input",
-      content: "$ "
-    }), d((a) => [...a.slice(0, -1), ...n]), s("");
-  }, C = () => {
-    c?.focus();
+    }
+    k([g, ...s]);
+  }, G = (e) => {
+    if (e.type !== "none") {
+      if (e.type === "submit") {
+        B(e.command, Q()(e.command, {
+          profile: T(),
+          resolveNow: n.resolveNow
+        }));
+        return;
+      }
+      if (e.type === "interrupt") {
+        e.command ? k([{
+          id: f++,
+          type: "input",
+          content: `$ ${e.command}`
+        }, {
+          id: f++,
+          type: "error",
+          content: "^C"
+        }]) : k([{
+          id: f++,
+          type: "error",
+          content: "^C"
+        }]);
+        return;
+      }
+      $([]);
+    }
+  }, R = (e) => {
+    w(e.state), G(e.effect);
+  }, J = () => {
+    R(me(c()));
+  }, O = (e) => {
+    !e || n.isEditMode || R(ce(c(), e, {
+      profile: T(),
+      providers: n.suggestionProviders
+    }));
   };
-  return (() => {
-    var l = z(), e = l.firstChild, n = e.firstChild, a = n.firstChild, m = a.nextSibling, r = m.firstChild;
-    l.$$click = C, $(e, E(k, {
+  return N(() => {
+    E(), I(), x(), p && (p.scrollTop = p.scrollHeight);
+  }), N(() => {
+    (!a() || n.isEditMode) && m(!1);
+  }), (() => {
+    var e = be(), l = e.firstChild, g = l.firstChild;
+    g.firstChild;
+    var s = g.nextSibling, b = s.firstChild, V = b.firstChild;
+    V.firstChild, e.$$click = A, i(g, d(M, {
+      get when() {
+        return L(() => !!a())() && !n.isEditMode;
+      },
+      get children() {
+        var t = fe();
+        return t.$$click = (r) => {
+          r.stopPropagation(), m((o) => !o);
+        }, i(t, () => x() ? "Hide Keys" : "Show Keys"), t;
+      }
+    }), null);
+    var D = p;
+    return typeof D == "function" ? F(D, s) : p = s, i(s, d(Z, {
       get each() {
-        return _().slice(0, -1);
+        return E();
       },
       children: (t) => (() => {
-        var o = I();
-        return $(o, () => t.content), u(() => x(o, g("whitespace-pre-wrap break-all", t.type === "error" && "text-red-400", t.type === "input" && "text-green-400"))), o;
+        var r = ve();
+        return i(r, () => t.content), y(() => W(r, q("whitespace-pre-wrap break-all leading-6", t.type === "error" && "text-rose-300", t.type === "input" && "text-emerald-300"))), r;
       })()
-    }), n), m.addEventListener("submit", w), r.$$input = (t) => s(t.currentTarget.value);
-    var v = c;
-    return typeof v == "function" ? S(v, r) : c = r, u((t) => {
-      var o = g("h-full bg-zinc-900 text-zinc-100 font-mono text-xs overflow-hidden flex flex-col", p.isEditMode && "pointer-events-none"), h = p.isEditMode;
-      return o !== t.e && x(l, t.e = o), h !== t.t && (r.disabled = t.t = h), t;
+    }), b), i(V, d(M, {
+      get when() {
+        return !a();
+      },
+      get fallback() {
+        return (() => {
+          var t = xe(), r = t.firstChild, o = r.firstChild;
+          return U(t, H(ne, {
+            type: "button",
+            class: "min-h-[1.5rem] flex-1 bg-transparent text-left outline-none",
+            "aria-label": "Terminal input surface",
+            onPointerDown: (u) => {
+              oe(u), u.stopPropagation();
+            },
+            onClick: (u) => {
+              u.stopPropagation(), m(!0);
+            }
+          }), !1, !0), i(r, () => _().before, o), i(o, () => _().cursor), i(r, () => _().after, null), t;
+        })();
+      },
+      get children() {
+        var t = ge(), r = t.firstChild;
+        t.addEventListener("submit", z), r.$$input = (u) => j(u.currentTarget.value);
+        var o = S;
+        return typeof o == "function" ? F(o, r) : S = r, y(() => r.disabled = n.isEditMode), y(() => r.value = I()), t;
+      }
+    }), null), i(e, d(M, {
+      get when() {
+        return L(() => !!a())() && !n.isEditMode;
+      },
+      get children() {
+        return d(te, {
+          get visible() {
+            return x();
+          },
+          get quickInserts() {
+            return n.quickInserts;
+          },
+          get suggestions() {
+            return K();
+          },
+          onKey: O,
+          onDismiss: () => m(!1),
+          onSuggestionSelect: (t) => w((r) => ue(r, t))
+        });
+      }
+    }), null), y((t) => {
+      var r = q("relative h-full overflow-hidden rounded-[inherit] bg-terminal-background text-terminal-foreground font-mono text-xs", n.isEditMode && "pointer-events-none"), o = a() && x() ? `calc(${K().length > 0 ? "16.5rem" : "15rem"} + env(safe-area-inset-bottom))` : void 0;
+      return r !== t.e && W(e, t.e = r), o !== t.t && X(s, "padding-bottom", t.t = o), t;
     }, {
       e: void 0,
       t: void 0
-    }), u(() => r.value = f()), l;
+    }), e;
   })();
 }
-T(["click", "input"]);
+Y(["click", "input"]);
 export {
-  F as TerminalWidget
+  ye as TerminalWidget,
+  Ee as createTerminalWidget
 };

package/dist/widgets/index.d.ts

@@ -1,3 +1,3 @@
 export { SidebarWidget, FilesSidebarWidget, SearchSidebarWidget, SettingsSidebarWidget, ShowcaseSidebarWidget, } from './SidebarWidget';
 export { MetricsWidget } from './MetricsWidget';
-export { TerminalWidget } from './TerminalWidget';
+export { TerminalWidget, createTerminalWidget, type TerminalWidgetLine, type TerminalWidgetProps, type CreateTerminalWidgetOptions, } from './TerminalWidget';

package/dist/widgets.js

@@ -1,12 +1,13 @@
 import { FilesSidebarWidget as r, SearchSidebarWidget as t, SettingsSidebarWidget as d, ShowcaseSidebarWidget as a, SidebarWidget as g } from "./widgets/SidebarWidget.js";
-import { MetricsWidget as o } from "./widgets/MetricsWidget.js";
-import { TerminalWidget as b } from "./widgets/TerminalWidget.js";
+import { MetricsWidget as W } from "./widgets/MetricsWidget.js";
+import { TerminalWidget as b, createTerminalWidget as m } from "./widgets/TerminalWidget.js";
 export {
   r as FilesSidebarWidget,
-  o as MetricsWidget,
+  W as MetricsWidget,
   t as SearchSidebarWidget,
   d as SettingsSidebarWidget,
   a as ShowcaseSidebarWidget,
   g as SidebarWidget,
-  b as TerminalWidget
+  b as TerminalWidget,
+  m as createTerminalWidget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.35.6",
+  "version": "0.35.8",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -60,6 +60,10 @@
       "types": "./dist/widgets.d.ts",
       "import": "./dist/widgets.js"
     },
+    "./terminal": {
+      "types": "./dist/terminal.d.ts",
+      "import": "./dist/terminal.js"
+    },
     "./styles": "./dist/styles.css",
     "./tailwind": "./dist/tailwind.css"
   },