@ultrst-armada/floks 1.2.4 → 1.2.5

package/packages/ui/dist/chunk-YDOKOBRJ.js

@@ -0,0 +1,1217 @@
+import {
+  useFloksFrnlStore
+} from "./chunk-X4B3EBMY.js";
+import {
+  BottomStripProvider,
+  useBottomStrip
+} from "./chunk-62ITRDJX.js";
+
+// src/frnl/frnlButton.tsx
+import { useId, useMemo } from "react";
+import { defineFrnlComponent } from "@ultrst-armada/frnlts";
+import { useFrnlComponent } from "@ultrst-armada/frnlts/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var frnlButtonDefinition = defineFrnlComponent({
+  name: "frnlButton",
+  states: {
+    idle: {
+      name: "idle",
+      events: { click: { functionId: "frnlButton.idle.click" } },
+      visualParameters: { opacity: 1 },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    },
+    hover: {
+      name: "hover",
+      events: { click: { functionId: "frnlButton.hover.click" } },
+      visualParameters: { opacity: 1 },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    },
+    active: {
+      name: "active",
+      events: { click: { functionId: "frnlButton.active.click" } },
+      visualParameters: { opacity: 1 },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    },
+    disabled: {
+      name: "disabled",
+      events: { click: { functionId: "frnlButton.disabled.click" } },
+      visualParameters: { opacity: 0.4 },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    },
+    loading: {
+      name: "loading",
+      events: { click: { functionId: "frnlButton.loading.click" } },
+      visualParameters: { opacity: 0.6 },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    }
+  }
+});
+var SIZE_CLASSES = {
+  xs: "px-1.5 py-0.5 text-[10px] gap-1 h-6",
+  sm: "px-2.5 py-1 text-xs gap-1.5 h-7",
+  md: "px-3.5 py-1.5 text-xs gap-2 h-8",
+  lg: "px-4 py-2 text-sm gap-2.5 h-10",
+  xl: "px-5 py-2.5 text-base gap-3 h-12"
+};
+var VARIANT_STYLES = {
+  primary: {
+    backgroundColor: "var(--skipo-bg-surface, #1e293b)",
+    borderColor: "var(--skipo-border-subtle, #334155)",
+    color: "var(--skipo-text-primary, #f8fafc)"
+  },
+  secondary: {
+    backgroundColor: "var(--skipo-bg-panel, #0f172a)",
+    borderColor: "var(--skipo-border-subtle, #334155)",
+    color: "var(--skipo-text-muted, #94a3b8)"
+  },
+  accent: {
+    backgroundColor: "var(--skipo-accent, #38bdf8)",
+    borderColor: "var(--skipo-accent-contrast, #0284c7)",
+    color: "#000000",
+    fontWeight: 700
+  },
+  dock: {
+    backgroundColor: "var(--skipo-bg-subtle, #1e293b)",
+    borderColor: "var(--skipo-border-color, #334155)",
+    color: "var(--skipo-text-primary, #f8fafc)"
+  },
+  danger: {
+    backgroundColor: "rgba(239, 68, 68, 0.15)",
+    borderColor: "rgba(239, 68, 68, 0.4)",
+    color: "#f87171"
+  },
+  success: {
+    backgroundColor: "rgba(16, 185, 129, 0.15)",
+    borderColor: "rgba(16, 185, 129, 0.4)",
+    color: "#34d399"
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    borderColor: "transparent",
+    color: "var(--skipo-text-muted, #94a3b8)"
+  },
+  outline: {
+    backgroundColor: "transparent",
+    borderColor: "var(--skipo-border-subtle, #334155)",
+    color: "var(--skipo-text-primary, #f8fafc)"
+  }
+};
+var frnlButton = ({
+  id,
+  variant = "secondary",
+  size = "md",
+  label,
+  tooltip,
+  description,
+  isActive = false,
+  loading = false,
+  icon,
+  disabled = false,
+  children,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onFocus,
+  onBlur,
+  className = "",
+  style,
+  ...rest
+}) => {
+  const store = useFloksFrnlStore();
+  const { setInspectionText } = useBottomStrip();
+  const generatedId = useId().replace(/[:/]/g, "");
+  const componentId = id ?? `frnlButton.${label ? label.toLowerCase().replace(/[^a-z0-9]/g, "-") : generatedId}`;
+  const resolvedState = disabled ? "disabled" : loading ? "loading" : isActive ? "active" : "idle";
+  const handlers = useMemo(
+    () => ({
+      "frnlButton.idle.click": (payload) => onClick?.(payload),
+      "frnlButton.hover.click": (payload) => onClick?.(payload),
+      "frnlButton.active.click": (payload) => onClick?.(payload),
+      "frnlButton.disabled.click": () => {
+      },
+      "frnlButton.loading.click": () => {
+      }
+    }),
+    [onClick]
+  );
+  const frnl = useFrnlComponent({
+    id: componentId,
+    definition: frnlButtonDefinition,
+    store,
+    state: resolvedState,
+    properties: { variant, size, label, isActive, disabled, loading },
+    handlers
+  });
+  const handleHoverStart = (e) => {
+    onMouseEnter?.(e);
+    const effLabel = label || tooltip || (typeof children === "string" ? children : void 0);
+    if (effLabel || description) {
+      setInspectionText(effLabel || null, description || null);
+    }
+  };
+  const handleHoverEnd = (e) => {
+    onMouseLeave?.(e);
+    setInspectionText(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...rest,
+      id: componentId,
+      type: "button",
+      disabled: disabled || loading,
+      "data-frnl-component": "frnlButton",
+      "data-frnl-state": frnl.state,
+      onClick: (e) => {
+        if (disabled || loading) return;
+        frnl.events.click(e);
+      },
+      onMouseEnter: handleHoverStart,
+      onMouseLeave: handleHoverEnd,
+      onFocus: (e) => {
+        onFocus?.(e);
+        const effLabel = label || tooltip || (typeof children === "string" ? children : void 0);
+        if (effLabel || description) setInspectionText(effLabel || null, description || null);
+      },
+      onBlur: (e) => {
+        onBlur?.(e);
+        setInspectionText(null);
+      },
+      className: `inline-flex items-center justify-center font-mono font-bold uppercase tracking-wider border rounded transition-all duration-150 select-none cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed active:scale-[0.98] ${SIZE_CLASSES[size]} ${className}`,
+      style: {
+        ...VARIANT_STYLES[variant],
+        ...isActive ? { borderColor: "var(--skipo-accent, #38bdf8)", boxShadow: "0 0 10px rgba(56, 189, 248, 0.25)" } : {},
+        ...style
+      },
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { className: "w-3.5 h-3.5 border-2 border-current border-t-transparent rounded-full animate-spin shrink-0" }) : icon ? /* @__PURE__ */ jsx("span", { className: "shrink-0 flex items-center justify-center", children: icon }) : null,
+        children ? /* @__PURE__ */ jsx("span", { children }) : label ? /* @__PURE__ */ jsx("span", { children: label }) : null
+      ]
+    }
+  );
+};
+frnlButton.displayName = "frnlButton";
+
+// src/frnl/frnlTextInput.tsx
+import { useId as useId2, useMemo as useMemo2 } from "react";
+import { defineFrnlComponent as defineFrnlComponent2 } from "@ultrst-armada/frnlts";
+import { useFrnlComponent as useFrnlComponent2 } from "@ultrst-armada/frnlts/react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var frnlTextInputDefinition = defineFrnlComponent2({
+  name: "frnlTextInput",
+  states: {
+    idle: {
+      name: "idle",
+      events: {
+        change: { functionId: "frnlTextInput.idle.change" },
+        focus: { functionId: "frnlTextInput.idle.focus" }
+      },
+      visualParameters: { borderColor: "var(--skipo-border-subtle, #334155)" },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    },
+    focused: {
+      name: "focused",
+      events: {
+        change: { functionId: "frnlTextInput.focused.change" },
+        blur: { functionId: "frnlTextInput.focused.blur" }
+      },
+      visualParameters: { borderColor: "var(--skipo-accent, #38bdf8)" },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    },
+    error: {
+      name: "error",
+      events: {
+        change: { functionId: "frnlTextInput.error.change" }
+      },
+      visualParameters: { borderColor: "#ef4444" },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    },
+    disabled: {
+      name: "disabled",
+      events: {},
+      visualParameters: { opacity: 0.5 },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    }
+  }
+});
+var frnlTextInput = ({
+  id,
+  label,
+  description,
+  error,
+  size = "md",
+  leadingIcon,
+  trailingIcon,
+  onClear,
+  disabled = false,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  onMouseEnter,
+  onMouseLeave,
+  className = "",
+  style,
+  ...rest
+}) => {
+  const store = useFloksFrnlStore();
+  const { setInspectionText } = useBottomStrip();
+  const generatedId = useId2().replace(/[:/]/g, "");
+  const componentId = id ?? `frnlTextInput.${label ? label.toLowerCase().replace(/[^a-z0-9]/g, "-") : generatedId}`;
+  const resolvedState = disabled ? "disabled" : error ? "error" : "idle";
+  const handlers = useMemo2(
+    () => ({
+      "frnlTextInput.idle.change": (payload) => onChange?.(payload),
+      "frnlTextInput.idle.focus": (payload) => onFocus?.(payload),
+      "frnlTextInput.focused.change": (payload) => onChange?.(payload),
+      "frnlTextInput.focused.blur": (payload) => onBlur?.(payload),
+      "frnlTextInput.error.change": (payload) => onChange?.(payload)
+    }),
+    [onChange, onFocus, onBlur]
+  );
+  const frnl = useFrnlComponent2({
+    id: componentId,
+    definition: frnlTextInputDefinition,
+    store,
+    state: resolvedState,
+    properties: { label, error: Boolean(error), disabled },
+    handlers
+  });
+  const handleHover = (e) => {
+    onMouseEnter?.(e);
+    if (label || description) {
+      setInspectionText(label || null, description || null);
+    }
+  };
+  const handleLeave = (e) => {
+    onMouseLeave?.(e);
+    setInspectionText(null);
+  };
+  const heightClass = size === "sm" ? "h-7 text-xs" : size === "lg" ? "h-10 text-sm" : "h-8 text-xs";
+  return /* @__PURE__ */ jsxs2("div", { className: `flex flex-col gap-1 font-mono select-none ${className}`, children: [
+    label && /* @__PURE__ */ jsx2(
+      "label",
+      {
+        htmlFor: componentId,
+        className: "text-[10px] font-bold uppercase tracking-wider text-[var(--skipo-text-muted,#94a3b8)]",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: `relative flex items-center border rounded transition-colors bg-[var(--skipo-bg-panel,#0f172a)] ${error ? "border-rose-500" : "border-[var(--skipo-border-subtle,#334155)] focus-within:border-[var(--skipo-accent,#38bdf8)]"}`,
+        style,
+        children: [
+          leadingIcon && /* @__PURE__ */ jsx2("span", { className: "pl-2.5 text-[var(--skipo-text-muted,#94a3b8)] flex items-center justify-center shrink-0", children: leadingIcon }),
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              ...rest,
+              id: componentId,
+              value,
+              disabled,
+              "data-frnl-component": "frnlTextInput",
+              "data-frnl-state": frnl.state,
+              onChange: (e) => {
+                onChange?.(e);
+                frnl.events.change?.(e);
+              },
+              onFocus: (e) => {
+                onFocus?.(e);
+                frnl.events.focus?.(e);
+                if (label || description) setInspectionText(label || null, description || null);
+              },
+              onBlur: (e) => {
+                onBlur?.(e);
+                frnl.events.blur?.(e);
+                setInspectionText(null);
+              },
+              onMouseEnter: handleHover,
+              onMouseLeave: handleLeave,
+              className: `w-full bg-transparent px-3 py-1 text-[var(--skipo-text-primary,#f8fafc)] focus:outline-none placeholder-[var(--skipo-text-muted,#64748b)] disabled:opacity-40 disabled:cursor-not-allowed ${heightClass}`
+            }
+          ),
+          trailingIcon && /* @__PURE__ */ jsx2("span", { className: "pr-2.5 text-[var(--skipo-text-muted,#94a3b8)] flex items-center justify-center shrink-0", children: trailingIcon }),
+          onClear && value && !disabled && /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: onClear,
+              className: "pr-2.5 text-[var(--skipo-text-muted,#94a3b8)] hover:text-white cursor-pointer",
+              "aria-label": "Clear Input",
+              children: "\xD7"
+            }
+          )
+        ]
+      }
+    ),
+    typeof error === "string" && /* @__PURE__ */ jsx2("span", { className: "text-[10px] text-rose-400 font-semibold", children: error })
+  ] });
+};
+frnlTextInput.displayName = "frnlTextInput";
+
+// src/frnl/frnlControls.tsx
+import { useId as useId3, useMemo as useMemo3 } from "react";
+import { defineFrnlComponent as defineFrnlComponent3 } from "@ultrst-armada/frnlts";
+import { useFrnlComponent as useFrnlComponent3 } from "@ultrst-armada/frnlts/react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var frnlSelectDefinition = defineFrnlComponent3({
+  name: "frnlSelect",
+  states: {
+    idle: {
+      name: "idle",
+      events: { change: { functionId: "frnlSelect.idle.change" } },
+      visualParameters: {},
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    },
+    disabled: {
+      name: "disabled",
+      events: {},
+      visualParameters: { opacity: 0.5 },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    }
+  }
+});
+var frnlSelect = ({
+  id,
+  label,
+  description,
+  options,
+  size = "md",
+  disabled = false,
+  value,
+  onChange,
+  onMouseEnter,
+  onMouseLeave,
+  className = "",
+  style,
+  ...rest
+}) => {
+  const store = useFloksFrnlStore();
+  const { setInspectionText } = useBottomStrip();
+  const generatedId = useId3().replace(/[:/]/g, "");
+  const componentId = id ?? `frnlSelect.${label ? label.toLowerCase().replace(/[^a-z0-9]/g, "-") : generatedId}`;
+  const handlers = useMemo3(
+    () => ({
+      "frnlSelect.idle.change": (payload) => onChange?.(payload)
+    }),
+    [onChange]
+  );
+  const frnl = useFrnlComponent3({
+    id: componentId,
+    definition: frnlSelectDefinition,
+    store,
+    state: disabled ? "disabled" : "idle",
+    properties: { label, disabled },
+    handlers
+  });
+  const heightClass = size === "sm" ? "h-7 text-xs" : size === "lg" ? "h-10 text-sm" : "h-8 text-xs";
+  return /* @__PURE__ */ jsxs3("div", { className: `flex flex-col gap-1 font-mono select-none ${className}`, children: [
+    label && /* @__PURE__ */ jsx3(
+      "label",
+      {
+        htmlFor: componentId,
+        className: "text-[10px] font-bold uppercase tracking-wider text-[var(--skipo-text-muted,#94a3b8)]",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "select",
+      {
+        ...rest,
+        id: componentId,
+        value,
+        disabled,
+        "data-frnl-component": "frnlSelect",
+        "data-frnl-state": frnl.state,
+        onChange: (e) => {
+          onChange?.(e);
+          frnl.events.change?.(e);
+        },
+        onMouseEnter: (e) => {
+          onMouseEnter?.(e);
+          if (label || description) setInspectionText(label || null, description || null);
+        },
+        onMouseLeave: (e) => {
+          onMouseLeave?.(e);
+          setInspectionText(null);
+        },
+        className: `w-full bg-[var(--skipo-bg-panel,#0f172a)] text-[var(--skipo-text-primary,#f8fafc)] border border-[var(--skipo-border-subtle,#334155)] rounded px-2.5 py-1 focus:outline-none focus:border-[var(--skipo-accent,#38bdf8)] disabled:opacity-40 disabled:cursor-not-allowed ${heightClass}`,
+        style,
+        children: options.map((opt) => /* @__PURE__ */ jsx3("option", { value: opt.value, disabled: opt.disabled, className: "bg-[#0f172a] text-white", children: opt.label }, opt.value))
+      }
+    )
+  ] });
+};
+frnlSelect.displayName = "frnlSelect";
+var frnlToggleDefinition = defineFrnlComponent3({
+  name: "frnlToggle",
+  states: {
+    off: {
+      name: "off",
+      events: { toggle: { functionId: "frnlToggle.off.toggle" } },
+      visualParameters: { checked: false },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    },
+    on: {
+      name: "on",
+      events: { toggle: { functionId: "frnlToggle.on.toggle" } },
+      visualParameters: { checked: true },
+      phases: {
+        attackPhase: { visualDefinition: { parameters: {} } },
+        sustainPhase: { visualDefinition: { parameters: {} } },
+        releasePhase: { visualDefinition: { parameters: {} } }
+      }
+    }
+  }
+});
+var frnlToggle = ({
+  id,
+  checked,
+  onChange,
+  label,
+  description,
+  disabled = false,
+  className = ""
+}) => {
+  const store = useFloksFrnlStore();
+  const { setInspectionText } = useBottomStrip();
+  const generatedId = useId3().replace(/[:/]/g, "");
+  const componentId = id ?? `frnlToggle.${label ? label.toLowerCase().replace(/[^a-z0-9]/g, "-") : generatedId}`;
+  const handlers = useMemo3(
+    () => ({
+      "frnlToggle.off.toggle": () => onChange(true),
+      "frnlToggle.on.toggle": () => onChange(false)
+    }),
+    [onChange]
+  );
+  const frnl = useFrnlComponent3({
+    id: componentId,
+    definition: frnlToggleDefinition,
+    store,
+    state: checked ? "on" : "off",
+    properties: { label, checked, disabled },
+    handlers
+  });
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id: componentId,
+      "aria-checked": checked,
+      disabled,
+      "data-frnl-component": "frnlToggle",
+      "data-frnl-state": frnl.state,
+      onClick: () => {
+        if (disabled) return;
+        frnl.events.toggle?.(void 0);
+      },
+      onMouseEnter: () => {
+        if (label || description) setInspectionText(label || null, description || null);
+      },
+      onMouseLeave: () => setInspectionText(null),
+      className: `inline-flex items-center gap-2 select-none font-mono text-xs cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed ${className}`,
+      children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: `w-8 h-4 rounded-full transition-colors relative flex items-center p-0.5 ${checked ? "bg-[var(--skipo-accent,#38bdf8)]" : "bg-[var(--skipo-border-subtle,#334155)]"}`,
+            children: /* @__PURE__ */ jsx3(
+              "div",
+              {
+                className: `w-3 h-3 rounded-full bg-black transition-transform ${checked ? "translate-x-4" : "translate-x-0"}`
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsx3("span", { className: "text-[var(--skipo-text-primary,#f8fafc)] uppercase text-[11px] font-semibold", children: label })
+      ]
+    }
+  );
+};
+frnlToggle.displayName = "frnlToggle";
+var frnlSlider = ({
+  id,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  unit = "",
+  description,
+  disabled = false,
+  className = ""
+}) => {
+  const { setInspectionText } = useBottomStrip();
+  const generatedId = useId3().replace(/[:/]/g, "");
+  const componentId = id ?? `frnlSlider.${label ? label.toLowerCase().replace(/[^a-z0-9]/g, "-") : generatedId}`;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      id: componentId,
+      "data-frnl-component": "frnlSlider",
+      onMouseEnter: () => {
+        if (label || description) setInspectionText(label || null, description || null);
+      },
+      onMouseLeave: () => setInspectionText(null),
+      className: `flex flex-col gap-1 font-mono select-none ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex justify-between items-center text-[10px] uppercase font-bold tracking-wider", children: [
+          label && /* @__PURE__ */ jsx3("span", { className: "text-[var(--skipo-text-muted,#94a3b8)]", children: label }),
+          /* @__PURE__ */ jsxs3("span", { className: "text-[var(--skipo-accent,#38bdf8)]", children: [
+            value,
+            unit
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "range",
+            min,
+            max,
+            step,
+            value,
+            disabled,
+            onChange: (e) => onChange(parseFloat(e.target.value)),
+            className: "w-full h-1.5 bg-[var(--skipo-border-subtle,#334155)] accent-[var(--skipo-accent,#38bdf8)] cursor-pointer disabled:opacity-40"
+          }
+        )
+      ]
+    }
+  );
+};
+frnlSlider.displayName = "frnlSlider";
+var BADGE_STYLES = {
+  neutral: "bg-[var(--skipo-bg-subtle,#1e293b)] border-[var(--skipo-border-subtle,#334155)] text-[var(--skipo-text-muted,#94a3b8)]",
+  accent: "bg-cyan-500/10 border-cyan-500/30 text-cyan-400",
+  success: "bg-emerald-500/10 border-emerald-500/30 text-emerald-400",
+  danger: "bg-rose-500/10 border-rose-500/30 text-rose-400",
+  warning: "bg-amber-500/10 border-amber-500/30 text-amber-400",
+  info: "bg-blue-500/10 border-blue-500/30 text-blue-400"
+};
+var frnlBadge = ({
+  variant = "neutral",
+  size = "md",
+  dot = false,
+  children,
+  className = "",
+  ...rest
+}) => {
+  const sizeClasses = size === "sm" ? "px-1.5 py-0.2 text-[9px]" : "px-2 py-0.5 text-[10px]";
+  return /* @__PURE__ */ jsxs3(
+    "span",
+    {
+      ...rest,
+      "data-frnl-component": "frnlBadge",
+      className: `inline-flex items-center gap-1.5 font-mono font-bold uppercase tracking-wider border rounded select-none ${BADGE_STYLES[variant]} ${sizeClasses} ${className}`,
+      children: [
+        dot && /* @__PURE__ */ jsx3("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-pulse" }),
+        children
+      ]
+    }
+  );
+};
+frnlBadge.displayName = "frnlBadge";
+
+// src/frnl/frnlTabWindow.tsx
+import { useState } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var frnlTabWindow = ({
+  id = "frnl-tab-window",
+  tabs,
+  activeTabId,
+  onTabChange,
+  className = "",
+  children
+}) => {
+  const [internalActiveTab, setInternalActiveTab] = useState(tabs[0]?.id);
+  const activeId = activeTabId ?? internalActiveTab;
+  const { setInspectionText } = useBottomStrip();
+  const handleSelect = (tab) => {
+    if (tab.disabled) return;
+    if (onTabChange) onTabChange(tab.id);
+    else setInternalActiveTab(tab.id);
+  };
+  const currentTab = tabs.find((t) => t.id === activeId);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      id,
+      "data-frnl-component": "frnlTabWindow",
+      className: `flex flex-col w-full h-full min-h-0 bg-[var(--skipo-bg,#0a0c10)] text-[var(--skipo-text-primary,#f8fafc)] font-mono ${className}`,
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "h-10 border-b border-[var(--skipo-border-color,#334155)] bg-[var(--skipo-surface,#14171f)] px-3 flex items-center gap-1 shrink-0 select-none overflow-x-auto", children: tabs.map((tab) => {
+          const isActive = tab.id === activeId;
+          return /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              role: "tab",
+              "aria-selected": isActive,
+              disabled: tab.disabled,
+              onClick: () => handleSelect(tab),
+              onMouseEnter: () => {
+                if (tab.label || tab.description) {
+                  setInspectionText(
+                    `TAB: ${tab.label.toUpperCase()}`,
+                    tab.description || `Switch to ${tab.label} tab view`
+                  );
+                }
+              },
+              onMouseLeave: () => setInspectionText(null),
+              className: `flex items-center gap-2 px-3 py-1.5 text-xs font-bold uppercase tracking-wider rounded transition-all cursor-pointer disabled:opacity-40 disabled:cursor-not-allowed ${isActive ? "bg-[var(--skipo-bg-panel,#0f172a)] text-[var(--skipo-accent,#38bdf8)] border border-[var(--skipo-border-subtle,#334155)]" : "text-[var(--skipo-text-muted,#94a3b8)] hover:text-white hover:bg-[var(--skipo-bg-subtle,#1e293b)] border border-transparent"}`,
+              children: [
+                tab.icon && /* @__PURE__ */ jsx4("span", { className: "w-3.5 h-3.5 shrink-0 flex items-center", children: tab.icon }),
+                /* @__PURE__ */ jsx4("span", { children: tab.label })
+              ]
+            },
+            tab.id
+          );
+        }) }),
+        /* @__PURE__ */ jsx4("div", { className: "flex-1 overflow-auto p-4 min-h-0 relative", children: currentTab?.content ?? children })
+      ]
+    }
+  );
+};
+frnlTabWindow.displayName = "frnlTabWindow";
+
+// src/frnl/frnlTopBar.tsx
+import React5, { useState as useState2, useRef, useEffect } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var frnlTopBar = ({
+  id = "frnl-top-bar",
+  breadcrumbs = [],
+  appLogo,
+  appName,
+  tabs = [],
+  activeTabId,
+  onTabChange,
+  user,
+  onLogout,
+  onOpenSettings,
+  actions,
+  className = ""
+}) => {
+  const { setInspectionText } = useBottomStrip();
+  const [profileOpen, setProfileOpen] = useState2(false);
+  const profileMenuRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (profileMenuRef.current && !profileMenuRef.current.contains(e.target)) {
+        setProfileOpen(false);
+      }
+    };
+    if (profileOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [profileOpen]);
+  return /* @__PURE__ */ jsxs5(
+    "header",
+    {
+      id,
+      "data-frnl-component": "frnlTopBar",
+      className: `h-11 border-b border-[var(--skipo-border-color,#334155)] bg-[var(--skipo-surface,#14171f)] px-3 flex items-center justify-between select-none shrink-0 font-mono text-xs z-40 relative ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 min-w-0", children: [
+          appLogo ? /* @__PURE__ */ jsx5("div", { className: "shrink-0 flex items-center justify-center", children: appLogo }) : appName ? /* @__PURE__ */ jsx5(
+            "div",
+            {
+              className: "w-6 h-6 rounded bg-[var(--skipo-accent,#38bdf8)] text-black font-black flex items-center justify-center text-xs shrink-0 cursor-default",
+              onMouseEnter: () => setInspectionText(`APPLICATION: ${appName.toUpperCase()}`),
+              onMouseLeave: () => setInspectionText(null),
+              children: appName.slice(0, 2).toUpperCase()
+            }
+          ) : null,
+          breadcrumbs.length > 0 && /* @__PURE__ */ jsx5("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-1.5 text-xs text-[var(--skipo-text-muted,#94a3b8)]", children: breadcrumbs.map((crumb, idx) => /* @__PURE__ */ jsxs5(React5.Fragment, { children: [
+            crumb.onClick ? /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: crumb.onClick,
+                onMouseEnter: () => setInspectionText(`NAVIGATE: ${crumb.label.toUpperCase()}`),
+                onMouseLeave: () => setInspectionText(null),
+                className: "hover:text-white transition-colors cursor-pointer truncate max-w-[140px]",
+                children: crumb.label
+              }
+            ) : crumb.href ? /* @__PURE__ */ jsx5(
+              "a",
+              {
+                href: crumb.href,
+                onMouseEnter: () => setInspectionText(`NAVIGATE: ${crumb.label.toUpperCase()}`),
+                onMouseLeave: () => setInspectionText(null),
+                className: "hover:text-white transition-colors truncate max-w-[140px]",
+                children: crumb.label
+              }
+            ) : /* @__PURE__ */ jsx5("span", { className: "text-[var(--skipo-text-primary,#f8fafc)] font-semibold truncate max-w-[140px]", children: crumb.label }),
+            idx < breadcrumbs.length - 1 && /* @__PURE__ */ jsx5("span", { className: "opacity-40", children: "/" })
+          ] }, idx)) })
+        ] }),
+        tabs.length > 0 && /* @__PURE__ */ jsx5(
+          "nav",
+          {
+            role: "tablist",
+            className: "flex items-center gap-1 bg-[var(--skipo-bg-panel,#0f172a)] p-0.5 rounded border border-[var(--skipo-border-subtle,#334155)]",
+            children: tabs.map((tab) => {
+              const isActive = tab.id === activeTabId;
+              return /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": isActive,
+                  disabled: tab.disabled,
+                  onClick: () => onTabChange?.(tab.id),
+                  onMouseEnter: () => setInspectionText(
+                    `TAB: ${tab.label.toUpperCase()}`,
+                    tab.description || `Switch view to ${tab.label}`
+                  ),
+                  onMouseLeave: () => setInspectionText(null),
+                  className: `p-1.5 rounded transition-all flex items-center justify-center cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed ${isActive ? "bg-[var(--skipo-accent,#38bdf8)] text-black shadow-xs" : "text-[var(--skipo-text-muted,#94a3b8)] hover:text-white hover:bg-[var(--skipo-surface,#14171f)]"}`,
+                  "aria-label": tab.label,
+                  children: /* @__PURE__ */ jsx5("span", { className: "w-4 h-4 flex items-center justify-center", children: tab.icon })
+                },
+                tab.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1.5 shrink-0", children: [
+          actions,
+          onOpenSettings && /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              onClick: onOpenSettings,
+              onMouseEnter: () => setInspectionText("SETTINGS", "Open system preferences, theme and configurations"),
+              onMouseLeave: () => setInspectionText(null),
+              className: "p-1.5 rounded border border-[var(--skipo-border-subtle,#334155)] bg-[var(--skipo-bg-panel,#0f172a)] text-[var(--skipo-text-muted,#94a3b8)] hover:text-white hover:border-[var(--skipo-accent,#38bdf8)] cursor-pointer transition-colors",
+              "aria-label": "Settings",
+              children: /* @__PURE__ */ jsxs5("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "3" }),
+                /* @__PURE__ */ jsx5("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+              ] })
+            }
+          ),
+          user && /* @__PURE__ */ jsxs5("div", { className: "relative", ref: profileMenuRef, children: [
+            /* @__PURE__ */ jsx5(
+              "button",
+              {
+                type: "button",
+                onClick: () => setProfileOpen((prev) => !prev),
+                onMouseEnter: () => setInspectionText(
+                  `USER: ${user.name || user.username || "PROFILE"}`,
+                  `Active session as ${user.email || user.username || "user"}`
+                ),
+                onMouseLeave: () => setInspectionText(null),
+                className: "w-7 h-7 rounded border border-[var(--skipo-border-subtle,#334155)] bg-[var(--skipo-bg-panel,#0f172a)] text-[var(--skipo-text-primary,#f8fafc)] hover:border-[var(--skipo-accent,#38bdf8)] flex items-center justify-center cursor-pointer transition-colors",
+                "aria-label": "User Profile",
+                "aria-expanded": profileOpen,
+                children: /* @__PURE__ */ jsx5("span", { children: user.avatarGlyph || "\u{1F464}" })
+              }
+            ),
+            profileOpen && /* @__PURE__ */ jsxs5("div", { className: "absolute right-0 top-full mt-1.5 w-56 rounded border border-[var(--skipo-border-color,#334155)] bg-[var(--skipo-surface,#14171f)] p-3 shadow-xl z-50 flex flex-col gap-2.5 font-mono animate-fade-in", children: [
+              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 pb-2 border-b border-[var(--skipo-border-subtle,#334155)]", children: [
+                /* @__PURE__ */ jsx5("div", { className: "w-8 h-8 rounded bg-[var(--skipo-bg-panel,#0f172a)] border border-[var(--skipo-border-subtle,#334155)] flex items-center justify-center text-sm", children: user.avatarGlyph || "\u{1F464}" }),
+                /* @__PURE__ */ jsxs5("div", { className: "flex flex-col min-w-0", children: [
+                  /* @__PURE__ */ jsx5("span", { className: "font-bold text-[var(--skipo-text-primary,#f8fafc)] truncate text-xs", children: user.name || user.username || "User" }),
+                  /* @__PURE__ */ jsx5("span", { className: "text-[10px] text-[var(--skipo-text-muted,#94a3b8)] truncate", children: user.email || `@${user.username || "active"}` })
+                ] })
+              ] }),
+              user.role && /* @__PURE__ */ jsxs5("div", { className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--skipo-bg-panel,#0f172a)] border border-[var(--skipo-border-subtle,#334155)] text-[var(--skipo-accent,#38bdf8)] uppercase font-bold self-start", children: [
+                "ROLE: ",
+                user.role
+              ] }),
+              onLogout && /* @__PURE__ */ jsxs5(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setProfileOpen(false);
+                    onLogout();
+                  },
+                  className: "w-full flex items-center gap-2 px-2.5 py-1.5 rounded text-rose-400 hover:bg-rose-500/10 border border-transparent hover:border-rose-500/30 text-xs font-bold uppercase tracking-wider transition-colors cursor-pointer",
+                  children: [
+                    /* @__PURE__ */ jsxs5("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx5("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+                      /* @__PURE__ */ jsx5("polyline", { points: "16 17 21 12 16 7" }),
+                      /* @__PURE__ */ jsx5("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+                    ] }),
+                    /* @__PURE__ */ jsx5("span", { children: "Sign Out" })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+frnlTopBar.displayName = "frnlTopBar";
+
+// src/frnl/frnlBottomBar.tsx
+import { useState as useState3, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var frnlBottomBar = ({
+  id = "frnl-bottom-bar",
+  onManualSave,
+  isSaving = false,
+  recentApiRequests = [],
+  className = ""
+}) => {
+  const {
+    inspectionText,
+    inspectionDescription,
+    isDKeyPressed,
+    autoSave,
+    apiActivity,
+    setInspectionText
+  } = useBottomStrip();
+  const [apiPanelOpen, setApiPanelOpen] = useState3(false);
+  const apiPanelRef = useRef2(null);
+  useEffect2(() => {
+    const handleClick = (e) => {
+      if (apiPanelRef.current && !apiPanelRef.current.contains(e.target)) {
+        setApiPanelOpen(false);
+      }
+    };
+    if (apiPanelOpen) document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [apiPanelOpen]);
+  const showDescription = isDKeyPressed && Boolean(inspectionDescription);
+  const displayText = showDescription ? inspectionDescription : inspectionText || 'HOVER UI ELEMENT // HOLD "D" TO INSPECT';
+  return /* @__PURE__ */ jsxs6(
+    "footer",
+    {
+      id,
+      "data-frnl-component": "frnlBottomBar",
+      className: `h-[30px] min-h-[30px] border-t border-[var(--skipo-border-color,#334155)] bg-[var(--skipo-surface,#14171f)] px-3 flex items-center justify-between select-none shrink-0 font-mono text-[11px] z-40 relative text-[var(--skipo-text-muted,#94a3b8)] ${className}`,
+      children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              onClick: () => autoSave.toggle(),
+              onMouseEnter: () => setInspectionText(
+                autoSave.enabled ? "AUTO-SAVE: ACTIVE" : "AUTO-SAVE: PAUSED",
+                autoSave.enabled ? "Automatic background persistence active" : "Changes require manual save"
+              ),
+              onMouseLeave: () => setInspectionText(null),
+              className: `flex items-center gap-1.5 px-2 py-0.5 rounded border transition-colors cursor-pointer ${autoSave.enabled ? "border-emerald-500/40 bg-emerald-500/10 text-emerald-400" : "border-[var(--skipo-border-subtle,#334155)] bg-[var(--skipo-bg-panel,#0f172a)] text-[var(--skipo-text-muted,#64748b)]"}`,
+              "aria-label": "Toggle Auto Save",
+              children: [
+                /* @__PURE__ */ jsx6(
+                  "span",
+                  {
+                    className: `w-1.5 h-1.5 rounded-full ${autoSave.enabled ? "bg-emerald-400 animate-pulse" : "bg-slate-500"}`
+                  }
+                ),
+                /* @__PURE__ */ jsx6("span", { className: "text-[10px] font-bold uppercase tracking-wider", children: autoSave.enabled ? "AUTO" : "MANUAL" })
+              ]
+            }
+          ),
+          onManualSave && /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              disabled: isSaving,
+              onClick: () => onManualSave(),
+              onMouseEnter: () => setInspectionText("MANUAL SAVE", "Trigger immediate persistence to disk / database"),
+              onMouseLeave: () => setInspectionText(null),
+              className: "flex items-center gap-1 px-2 py-0.5 rounded border border-[var(--skipo-border-subtle,#334155)] bg-[var(--skipo-bg-panel,#0f172a)] text-[var(--skipo-text-primary,#f8fafc)] hover:border-[var(--skipo-accent,#38bdf8)] hover:text-[var(--skipo-accent,#38bdf8)] transition-colors cursor-pointer disabled:opacity-40",
+              "aria-label": "Save Now",
+              children: [
+                isSaving ? /* @__PURE__ */ jsx6("span", { className: "w-2.5 h-2.5 border-2 border-current border-t-transparent rounded-full animate-spin" }) : /* @__PURE__ */ jsxs6("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx6("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+                  /* @__PURE__ */ jsx6("polyline", { points: "17 21 17 13 7 13 7 21" }),
+                  /* @__PURE__ */ jsx6("polyline", { points: "7 3 7 8 15 8" })
+                ] }),
+                /* @__PURE__ */ jsx6("span", { className: "text-[10px] font-bold uppercase tracking-wider", children: "Save" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx6("div", { className: "flex-1 flex items-center justify-center px-4 overflow-hidden", children: /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            "data-testid": "frnl-bottom-strip-center",
+            className: "flex items-center gap-1.5 truncate transition-all duration-150 max-w-2xl",
+            children: [
+              showDescription && /* @__PURE__ */ jsx6("span", { className: "px-1 py-0.2 rounded text-[9px] font-bold uppercase tracking-wider bg-amber-400 text-black shrink-0", children: "D-INSPECT" }),
+              /* @__PURE__ */ jsx6(
+                "span",
+                {
+                  className: `truncate ${showDescription ? "text-[11px] font-light italic text-[var(--skipo-text-primary,#f8fafc)]" : inspectionText ? "text-xs font-bold text-[var(--skipo-accent,#38bdf8)]" : "text-xs font-medium text-[var(--skipo-text-muted,#64748b)]"}`,
+                  children: displayText
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 shrink-0 relative", ref: apiPanelRef, children: [
+          /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              onClick: () => setApiPanelOpen((prev) => !prev),
+              onMouseEnter: () => setInspectionText(
+                `API: ${apiActivity.activeCount} IN-FLIGHT`,
+                "Toggle recent API requests inspector log"
+              ),
+              onMouseLeave: () => setInspectionText(null),
+              className: `flex items-center gap-1.5 px-2 py-0.5 rounded border transition-colors cursor-pointer ${apiActivity.activeCount > 0 ? "border-cyan-500/40 bg-cyan-500/10 text-cyan-400" : "border-[var(--skipo-border-subtle,#334155)] bg-[var(--skipo-bg-panel,#0f172a)] text-[var(--skipo-text-muted,#94a3b8)] hover:text-white"}`,
+              "aria-label": "API Requests",
+              "aria-expanded": apiPanelOpen,
+              children: [
+                /* @__PURE__ */ jsx6(
+                  "svg",
+                  {
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    className: apiActivity.activeCount > 0 ? "animate-pulse" : "",
+                    children: /* @__PURE__ */ jsx6("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs6("span", { className: "text-[10px] font-bold uppercase tracking-wider", children: [
+                  "API ",
+                  apiActivity.activeCount > 0 ? `(${apiActivity.activeCount})` : "LOG"
+                ] })
+              ]
+            }
+          ),
+          apiPanelOpen && /* @__PURE__ */ jsxs6("div", { className: "absolute right-0 bottom-full mb-1.5 w-80 rounded border border-[var(--skipo-border-color,#334155)] bg-[var(--skipo-surface,#14171f)] p-3 shadow-2xl z-50 flex flex-col gap-2 font-mono text-xs animate-fade-in max-h-72 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between pb-1.5 border-b border-[var(--skipo-border-subtle,#334155)]", children: [
+              /* @__PURE__ */ jsx6("span", { className: "font-bold text-[var(--skipo-text-primary,#f8fafc)] uppercase text-[10px] tracking-wider", children: "Recent API Requests" }),
+              /* @__PURE__ */ jsxs6("span", { className: "text-[10px] text-[var(--skipo-accent,#38bdf8)] font-bold", children: [
+                apiActivity.activeCount,
+                " In-Flight"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx6("div", { className: "overflow-y-auto max-h-52 flex flex-col gap-1.5 pr-1", children: recentApiRequests.length > 0 ? recentApiRequests.map((req) => /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                className: "p-1.5 rounded bg-[var(--skipo-bg-panel,#0f172a)] border border-[var(--skipo-border-subtle,#334155)] flex items-center justify-between text-[10px]",
+                children: [
+                  /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5 truncate mr-2", children: [
+                    /* @__PURE__ */ jsx6("span", { className: "font-bold text-[var(--skipo-accent,#38bdf8)]", children: req.method }),
+                    /* @__PURE__ */ jsx6("span", { className: "truncate text-[var(--skipo-text-primary,#f8fafc)]", children: req.endpoint })
+                  ] }),
+                  /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 shrink-0", children: [
+                    req.status && /* @__PURE__ */ jsx6(
+                      "span",
+                      {
+                        className: `font-bold ${req.status < 400 ? "text-emerald-400" : "text-rose-400"}`,
+                        children: req.status
+                      }
+                    ),
+                    req.durationMs !== void 0 && /* @__PURE__ */ jsxs6("span", { className: "text-[var(--skipo-text-muted,#64748b)]", children: [
+                      req.durationMs,
+                      "ms"
+                    ] })
+                  ] })
+                ]
+              },
+              req.id
+            )) : /* @__PURE__ */ jsx6("div", { className: "py-4 text-center text-[var(--skipo-text-muted,#64748b)] text-[10px]", children: "No recent backend requests recorded." }) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+frnlBottomBar.displayName = "frnlBottomBar";
+
+// src/frnl/frnlPage.tsx
+import React7, { useEffect as useEffect3, useState as useState4 } from "react";
+import { mountFrnlOrchestration } from "@ultrst-armada/frnlts";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function FrnlGlobalHoverInspector() {
+  const { setInspectionText } = useBottomStrip();
+  useEffect3(() => {
+    const handleMouseOver = (e) => {
+      const target = e.target;
+      if (!target) return;
+      const el = target.closest(
+        '[data-skipo-label], [data-hover], [title], [aria-label], button, a, input, select, textarea, [role="tab"], [role="button"]'
+      );
+      if (el) {
+        const label = el.getAttribute("data-skipo-label") || el.getAttribute("data-hover") || el.getAttribute("title") || el.getAttribute("aria-label");
+        const desc = el.getAttribute("data-skipo-desc");
+        if (label || desc) {
+          if (el.hasAttribute("title") && !el.hasAttribute("data-frnl-original-title")) {
+            el.setAttribute("data-frnl-original-title", el.getAttribute("title") || "");
+            el.removeAttribute("title");
+          }
+          setInspectionText(label || null, desc || null);
+        }
+      }
+    };
+    const handleMouseOut = (e) => {
+      const target = e.target;
+      if (!target) return;
+      const el = target.closest("[data-frnl-original-title]");
+      if (el) {
+        const orig = el.getAttribute("data-frnl-original-title");
+        if (orig) {
+          el.setAttribute("title", orig);
+          el.removeAttribute("data-frnl-original-title");
+        }
+      }
+      setInspectionText(null);
+    };
+    document.addEventListener("mouseover", handleMouseOver);
+    document.addEventListener("mouseout", handleMouseOut);
+    return () => {
+      document.removeEventListener("mouseover", handleMouseOver);
+      document.removeEventListener("mouseout", handleMouseOut);
+    };
+  }, [setInspectionText]);
+  return null;
+}
+function FrnlPageInner({
+  id = "frnl-page",
+  appName = "Skipo App",
+  appLogo,
+  breadcrumbs,
+  tabs = [],
+  activeTabId,
+  onTabChange,
+  showTopBar = true,
+  showBottomBar = true,
+  topBarActions,
+  user,
+  onLogout,
+  onOpenSettings,
+  onSave,
+  isSaving = false,
+  recentApiRequests = [],
+  orchestrations = [],
+  className = "",
+  children
+}) {
+  const store = useFloksFrnlStore();
+  const [internalActiveTab, setInternalActiveTab] = useState4(tabs[0]?.id);
+  const activeTab = activeTabId ?? internalActiveTab;
+  useEffect3(() => {
+    const cleanups = orchestrations.map(
+      (orchestration) => mountFrnlOrchestration(store, orchestration)
+    );
+    return () => {
+      for (const cleanup of cleanups.reverse()) cleanup();
+    };
+  }, [orchestrations, store]);
+  const handleTabChange = (tabId) => {
+    if (onTabChange) onTabChange(tabId);
+    else setInternalActiveTab(tabId);
+  };
+  const currentTab = tabs.find((t) => t.id === activeTab);
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      id,
+      "data-frnl-component": "frnlPage",
+      className: `h-screen w-screen flex flex-col bg-[var(--skipo-bg,#0a0c10)] text-[var(--skipo-text-primary,#f8fafc)] font-mono select-none overflow-hidden ${className}`,
+      children: [
+        /* @__PURE__ */ jsx7(FrnlGlobalHoverInspector, {}),
+        showTopBar && React7.createElement(frnlTopBar, {
+          appName,
+          appLogo,
+          breadcrumbs,
+          tabs,
+          activeTabId: activeTab,
+          onTabChange: handleTabChange,
+          user,
+          onLogout,
+          onOpenSettings,
+          actions: topBarActions
+        }),
+        /* @__PURE__ */ jsx7("main", { className: "flex-1 flex flex-col min-h-0 overflow-y-auto relative p-4", children: currentTab?.content ?? children }),
+        showBottomBar && React7.createElement(frnlBottomBar, {
+          onManualSave: onSave,
+          isSaving,
+          recentApiRequests
+        })
+      ]
+    }
+  );
+}
+var frnlPage = (props) => {
+  return /* @__PURE__ */ jsx7(BottomStripProvider, { initialAutoSave: props.autoSaveEnabled ?? true, children: /* @__PURE__ */ jsx7(FrnlPageInner, { ...props }) });
+};
+frnlPage.displayName = "frnlPage";
+
+export {
+  frnlButtonDefinition,
+  frnlButton,
+  frnlTextInputDefinition,
+  frnlTextInput,
+  frnlSelectDefinition,
+  frnlSelect,
+  frnlToggleDefinition,
+  frnlToggle,
+  frnlSlider,
+  frnlBadge,
+  frnlTabWindow,
+  frnlTopBar,
+  frnlBottomBar,
+  frnlPage
+};