@floegence/floe-webapp-core 0.36.0 → 0.36.2

package/dist/components/workbench/workbenchHelpers.js

@@ -1,176 +1,139 @@
-import { DEFAULT_FILTERS as l, DEFAULT_WORKBENCH_VIEWPORT as _, WORKBENCH_WIDGET_TYPES as m } from "./types.js";
-function z() {
+import { DEFAULT_WORKBENCH_VIEWPORT as g } from "./types.js";
+import { resolveWorkbenchWidgetDefinitions as m, getWidgetEntry as x, createWorkbenchFilterState as b, isValidWorkbenchWidgetType as W } from "./widgets/widgetRegistry.js";
+function F() {
   const e = globalThis.crypto;
   return e && typeof e.randomUUID == "function" ? `wb-${e.randomUUID()}` : `wb-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
 }
-function p(e) {
+function M(e) {
   return e ? {
     x: Number.isFinite(e.x) ? e.x : 0,
     y: Number.isFinite(e.y) ? e.y : 0,
     scale: Number.isFinite(e.scale) && e.scale > 0 ? e.scale : 1
-  } : { ..._ };
+  } : { ...g };
 }
-function w(e) {
-  if (!e) return { ...l };
-  const i = { ...l };
-  for (const n of m)
-    typeof e[n] == "boolean" && (i[n] = e[n]);
-  return i;
+function k(e, n) {
+  return b(n, e);
 }
-function W(e) {
-  return typeof e == "string" && m.includes(e);
-}
-function E(e) {
-  const i = e;
-  return !i || i.version !== 1 || !Array.isArray(i.widgets) ? M() : {
-    version: 1,
-    widgets: i.widgets.filter(
-      (t) => !!t && typeof t.id == "string" && W(t.type) && typeof t.title == "string"
-    ).map((t) => ({
+function z(e, n = {}) {
+  const r = m(n.widgetDefinitions), a = n.createFallbackState ?? (() => N(r)), i = e;
+  if (!i || i.version !== 1 || !Array.isArray(i.widgets))
+    return a();
+  const s = i.widgets.filter(
+    (t) => !!t && typeof t.id == "string" && W(t.type, r) && typeof t.title == "string"
+  ).map((t) => {
+    const u = x(t.type, r);
+    return {
       id: t.id,
       type: t.type,
       title: t.title,
       x: Number.isFinite(t.x) ? t.x : 0,
       y: Number.isFinite(t.y) ? t.y : 0,
-      width: Number.isFinite(t.width) && t.width > 0 ? t.width : 300,
-      height: Number.isFinite(t.height) && t.height > 0 ? t.height : 200,
+      width: Number.isFinite(t.width) && t.width > 0 ? t.width : u.defaultSize.width,
+      height: Number.isFinite(t.height) && t.height > 0 ? t.height : u.defaultSize.height,
       z_index: Number.isFinite(t.z_index) && t.z_index >= 0 ? t.z_index : 1,
       created_at_unix_ms: Number.isFinite(t.created_at_unix_ms) ? t.created_at_unix_ms : Date.now()
-    })),
-    viewport: p(i.viewport),
+    };
+  }), c = typeof i.selectedWidgetId == "string" && s.some((t) => t.id === i.selectedWidgetId) ? i.selectedWidgetId : null;
+  return {
+    version: 1,
+    widgets: s,
+    viewport: M(i.viewport),
     locked: typeof i.locked == "boolean" ? i.locked : !1,
-    filters: w(i.filters),
-    selectedWidgetId: typeof i.selectedWidgetId == "string" ? i.selectedWidgetId : null
+    filters: k(i.filters, r),
+    selectedWidgetId: c
   };
 }
-function M() {
-  const e = Date.now();
+function N(e) {
+  const n = m(e), r = Date.now(), a = [
+    { type: "terminal", title: "dev · terminal", x: 80, y: 80 },
+    { type: "file-browser", title: "project · files", x: 600, y: 80 },
+    { type: "system-monitor", title: "host · system monitor", x: 80, y: 420 },
+    { type: "log-viewer", title: "services · logs", x: 540, y: 500 },
+    { type: "code-editor", title: "Counter.tsx", x: 1e3, y: 180 }
+  ], i = a.filter((s) => n.some((c) => c.type === s.type)).map((s, c) => {
+    const t = x(s.type, n);
+    return {
+      id: `wb-seed-${c + 1}`,
+      type: s.type,
+      title: s.title,
+      x: s.x,
+      y: s.y,
+      width: t.defaultSize.width,
+      height: t.defaultSize.height,
+      z_index: c + 1,
+      created_at_unix_ms: r - (a.length - c) * 6e5
+    };
+  });
   return {
     version: 1,
-    widgets: [
-      {
-        id: "wb-seed-terminal",
-        type: "terminal",
-        title: "dev · terminal",
-        x: 80,
-        y: 80,
-        width: 480,
-        height: 300,
-        z_index: 1,
-        created_at_unix_ms: e - 36e5
-      },
-      {
-        id: "wb-seed-files",
-        type: "file-browser",
-        title: "project · files",
-        x: 600,
-        y: 80,
-        width: 360,
-        height: 380,
-        z_index: 2,
-        created_at_unix_ms: e - 3e6
-      },
-      {
-        id: "wb-seed-monitor",
-        type: "system-monitor",
-        title: "host · system monitor",
-        x: 80,
-        y: 420,
-        width: 420,
-        height: 260,
-        z_index: 3,
-        created_at_unix_ms: e - 24e5
-      },
-      {
-        id: "wb-seed-logs",
-        type: "log-viewer",
-        title: "services · logs",
-        x: 540,
-        y: 500,
-        width: 520,
-        height: 240,
-        z_index: 4,
-        created_at_unix_ms: e - 18e5
-      },
-      {
-        id: "wb-seed-code",
-        type: "code-editor",
-        title: "Counter.tsx",
-        x: 1e3,
-        y: 180,
-        width: 500,
-        height: 340,
-        z_index: 5,
-        created_at_unix_ms: e - 12e5
-      }
-    ],
-    viewport: { ..._ },
+    widgets: i,
+    viewport: { ...g },
     locked: !1,
-    filters: { ...l },
-    selectedWidgetId: null
+    filters: b(n),
+    selectedWidgetId: i[0]?.id ?? null
   };
 }
-const F = 1.18, T = 200;
-function I(e) {
-  const i = typeof window < "u" ? window.innerWidth : 1280, n = typeof window < "u" ? window.innerHeight : 800;
-  let t = e.clientX, s = e.clientY;
-  return t + e.menuWidth > i && (t = Math.max(0, i - e.menuWidth - 8)), s + e.menuHeight > n && (s = Math.max(0, n - e.menuHeight - 8)), { left: t, top: s };
+const D = 1.18, I = 200;
+function E(e) {
+  const n = typeof window < "u" ? window.innerWidth : 1280, r = typeof window < "u" ? window.innerHeight : 800;
+  let a = e.clientX, i = e.clientY;
+  return a + e.menuWidth > n && (a = Math.max(0, n - e.menuWidth - 8)), i + e.menuHeight > r && (i = Math.max(0, r - e.menuHeight - 8)), { left: a, top: i };
 }
-function k(e) {
-  return e.reduce((i, n) => Math.max(i, n.z_index), 1);
+function H(e) {
+  return e.reduce((n, r) => Math.max(n, r.z_index), 1);
 }
-function D(e, i, n, t) {
-  const s = e.filter((r) => t[r.type]);
-  if (s.length === 0) return null;
-  if (!i) return s[0] ?? null;
-  const o = s.find((r) => r.id === i);
-  if (!o) return s[0] ?? null;
-  const x = o.x + o.width / 2, g = o.y + o.height / 2;
-  let u = null, h = 1 / 0;
-  for (const r of s) {
-    if (r.id === i) continue;
-    const d = r.x + r.width / 2 - x, a = r.y + r.height / 2 - g;
-    let c = !1;
-    switch (n) {
+function T(e, n, r, a) {
+  const i = e.filter((o) => a[o.type]);
+  if (i.length === 0) return null;
+  if (!n) return i[0] ?? null;
+  const s = i.find((o) => o.id === n);
+  if (!s) return i[0] ?? null;
+  const c = s.x + s.width / 2, t = s.y + s.height / 2;
+  let u = null, f = 1 / 0;
+  for (const o of i) {
+    if (o.id === n) continue;
+    const d = o.x + o.width / 2 - c, l = o.y + o.height / 2 - t;
+    let h = !1;
+    switch (r) {
       case "up":
-        c = a < -10;
+        h = l < -10;
         break;
       case "down":
-        c = a > 10;
+        h = l > 10;
         break;
       case "left":
-        c = d < -10;
+        h = d < -10;
         break;
       case "right":
-        c = d > 10;
+        h = d > 10;
         break;
     }
-    if (!c) continue;
-    const y = Math.sqrt(d * d + a * a), b = Math.atan2(
-      Math.abs(n === "up" || n === "down" ? d : a),
-      Math.abs(n === "up" || n === "down" ? a : d)
-    ), f = y * (1 + b * 1.5);
-    f < h && (h = f, u = r);
+    if (!h) continue;
+    const p = Math.sqrt(d * d + l * l), _ = Math.atan2(
+      Math.abs(r === "up" || r === "down" ? d : l),
+      Math.abs(r === "up" || r === "down" ? l : d)
+    ), y = p * (1 + _ * 1.5);
+    y < f && (f = y, u = o);
   }
   return u;
 }
-function H(e, i = 0.45, n = 2.2) {
-  return Math.max(i, Math.min(n, e));
+function C(e, n = 0.45, r = 2.2) {
+  return Math.max(n, Math.min(r, e));
 }
-function S(e, i = 0) {
-  return 16 + Math.max(1, e) * 32 + Math.max(0, i) * 9;
+function O(e, n = 0) {
+  return 16 + Math.max(1, e) * 32 + Math.max(0, n) * 9;
 }
 export {
-  F as WORKBENCH_CANVAS_ZOOM_STEP,
-  T as WORKBENCH_CONTEXT_MENU_WIDTH_PX,
-  H as clampScale,
-  I as createContextMenuPosition,
-  M as createDefaultWorkbenchState,
-  z as createWorkbenchId,
-  S as estimateContextMenuHeight,
-  D as findNearestWidget,
-  k as getTopZIndex,
-  w as sanitizeFilters,
-  p as sanitizeViewport,
-  E as sanitizeWorkbenchState
+  D as WORKBENCH_CANVAS_ZOOM_STEP,
+  I as WORKBENCH_CONTEXT_MENU_WIDTH_PX,
+  C as clampScale,
+  E as createContextMenuPosition,
+  N as createDefaultWorkbenchState,
+  F as createWorkbenchId,
+  O as estimateContextMenuHeight,
+  T as findNearestWidget,
+  H as getTopZIndex,
+  k as sanitizeFilters,
+  M as sanitizeViewport,
+  z as sanitizeWorkbenchState
 };

package/dist/display-mode.css

@@ -0,0 +1,70 @@
+@layer components {
+  .display-mode-page-shell {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    background: var(--background, #fff);
+    color: var(--foreground, #111);
+  }
+
+  .display-mode-page-shell__body {
+    position: relative;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .display-mode-switcher {
+    display: inline-flex;
+    align-items: center;
+    gap: 1px;
+    padding: 2px;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 60%, transparent);
+    border-radius: 8px;
+    background: color-mix(in srgb, var(--muted, #f1f1f1) 70%, transparent);
+  }
+
+  .display-mode-switcher__pill {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 9px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: var(--muted-foreground, #888);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    cursor: pointer;
+    isolation: isolate;
+    transition: color 140ms ease;
+  }
+
+  .display-mode-switcher__pill:hover,
+  .display-mode-switcher__pill.is-active {
+    color: var(--foreground, #111);
+  }
+
+  .display-mode-switcher__pill-bg {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border: 1px solid color-mix(in srgb, var(--border, #e5e5e5) 70%, transparent);
+    border-radius: 6px;
+    background: var(--card, #fff);
+    box-shadow:
+      0 1px 2px color-mix(in srgb, var(--foreground, #000) 6%, transparent),
+      0 1px 0 color-mix(in srgb, white 60%, transparent) inset;
+  }
+
+  .display-mode-switcher__icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  .display-mode-switcher__label {
+    line-height: 1;
+  }
+}