@ultrst-armada/floks 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,372 @@
+import {
+  useBottomStrip
+} from "./chunk-62ITRDJX.js";
+import {
+  BaseButton
+} from "./chunk-A2CDQISJ.js";
+
+// src/components/bottom-strip/StatusLight.tsx
+import { jsx } from "react/jsx-runtime";
+var StatusLight = ({
+  status = "idle",
+  label,
+  pulse = false,
+  className = "",
+  ...props
+}) => {
+  const { setInspectionText } = useBottomStrip();
+  const defaultLabels = {
+    idle: "STATUS: SYSTEM READY (IDLE)",
+    active: "STATUS: PROCESSING ACTIVE TASK",
+    saving: "STATUS: SAVING CHANGES TO DISK",
+    saved: "STATUS: ALL CHANGES SAVED",
+    error: "STATUS: SYSTEM ERROR DETECTED",
+    warning: "STATUS: SYSTEM WARNING"
+  };
+  const displayText = label || defaultLabels[status] || "STATUS: UNKNOWN";
+  const colorMap = {
+    idle: "var(--skipo-text-muted)",
+    active: "var(--skipo-info)",
+    saving: "var(--skipo-accent)",
+    saved: "var(--skipo-success)",
+    error: "var(--skipo-danger)",
+    warning: "var(--skipo-warning)"
+  };
+  const currentColor = colorMap[status];
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `skipo-status-light skipo-status-light--${status} ${pulse ? "skipo-status-light--pulse" : ""} ${className}`,
+      style: {
+        display: "inline-block",
+        width: "8px",
+        height: "8px",
+        borderRadius: "50%",
+        backgroundColor: currentColor,
+        boxShadow: pulse ? `0 0 8px ${currentColor}` : void 0,
+        cursor: "default",
+        transition: "all 0.2s ease"
+      },
+      onMouseEnter: () => setInspectionText(displayText),
+      onMouseLeave: () => setInspectionText(null),
+      onFocus: () => setInspectionText(displayText),
+      onBlur: () => setInspectionText(null),
+      tabIndex: 0,
+      "aria-label": displayText,
+      ...props
+    }
+  );
+};
+StatusLight.displayName = "StatusLight";
+
+// src/components/bottom-strip/AutoSaveToggle.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var AutoSaveToggle = ({
+  onToggle,
+  className = "",
+  ...props
+}) => {
+  const { autoSave, setInspectionText } = useBottomStrip();
+  const isEnabled = autoSave.enabled;
+  const handleClick = (e) => {
+    if (onToggle) onToggle();
+    else autoSave.toggle();
+    if (props.onClick) props.onClick(e);
+  };
+  const inspectionLabel = isEnabled ? "AUTO-SAVE: ACTIVE (AUTOMATIC BACKGROUND PERSISTENCE)" : "AUTO-SAVE: PAUSED (CHANGES REQUIRE MANUAL SAVE)";
+  return /* @__PURE__ */ jsx2(
+    BaseButton,
+    {
+      variant: "ghost",
+      size: "sm",
+      className: `skipo-autosave-toggle ${isEnabled ? "skipo-autosave-toggle--active" : ""} ${className}`,
+      onClick: handleClick,
+      onMouseEnter: () => setInspectionText(inspectionLabel),
+      onMouseLeave: () => setInspectionText(null),
+      onFocus: () => setInspectionText(inspectionLabel),
+      onBlur: () => setInspectionText(null),
+      "aria-label": inspectionLabel,
+      style: {
+        padding: "2px 4px",
+        color: isEnabled ? "var(--skipo-success)" : "var(--skipo-text-muted)"
+      },
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx2("path", { d: "M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" }),
+            /* @__PURE__ */ jsx2("polyline", { points: "17 21 17 13 7 13 7 21" }),
+            /* @__PURE__ */ jsx2("polyline", { points: "7 3 7 8 15 8" })
+          ]
+        }
+      )
+    }
+  );
+};
+AutoSaveToggle.displayName = "AutoSaveToggle";
+
+// src/components/bottom-strip/ApiCallIndicator.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var ApiCallIndicator = ({
+  activeCount,
+  className = "",
+  ...props
+}) => {
+  const { apiActivity, setInspectionText } = useBottomStrip();
+  const count = activeCount !== void 0 ? activeCount : apiActivity.activeCount;
+  const isBusy = count > 0;
+  const inspectionLabel = isBusy ? `API IN-FLIGHT: ${count} ACTIVE REQUEST(S)${apiActivity.lastEndpoint ? ` (${apiActivity.lastMethod || "REQ"} ${apiActivity.lastEndpoint})` : ""}` : "API NETWORK: IDLE (ZERO PENDING CALLS)";
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      className: `skipo-api-indicator ${isBusy ? "skipo-api-indicator--busy" : ""} ${className}`,
+      onMouseEnter: () => setInspectionText(inspectionLabel),
+      onMouseLeave: () => setInspectionText(null),
+      onFocus: () => setInspectionText(inspectionLabel),
+      onBlur: () => setInspectionText(null),
+      tabIndex: 0,
+      "aria-label": inspectionLabel,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "4px",
+        color: isBusy ? "var(--skipo-accent)" : "var(--skipo-text-muted)",
+        cursor: "default",
+        transition: "color 0.2s ease"
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx3(
+          "svg",
+          {
+            width: "13",
+            height: "13",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: {
+              animation: isBusy ? "skipo-pulse-glow 1.5s infinite ease-in-out" : void 0
+            },
+            children: /* @__PURE__ */ jsx3("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
+          }
+        ),
+        isBusy && /* @__PURE__ */ jsx3("span", { style: { fontSize: "10px", fontWeight: 900, fontFamily: "var(--skipo-font-mono)" }, children: count })
+      ]
+    }
+  );
+};
+ApiCallIndicator.displayName = "ApiCallIndicator";
+
+// src/components/bottom-strip/SystemMessageDisplay.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var SystemMessageDisplay = ({
+  className = "",
+  ...props
+}) => {
+  const { systemMessages, clearSystemMessage, setInspectionText } = useBottomStrip();
+  const latestMessage = systemMessages[systemMessages.length - 1];
+  if (!latestMessage) return null;
+  const colorMap = {
+    success: "var(--skipo-success)",
+    error: "var(--skipo-danger)",
+    warning: "var(--skipo-warning)",
+    info: "var(--skipo-info)"
+  };
+  const currentColor = colorMap[latestMessage.type] || "var(--skipo-text)";
+  const inspectionLabel = `SYSTEM [${latestMessage.type.toUpperCase()}]: ${latestMessage.message} (CLICK TO DISMISS)`;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `skipo-system-msg-display skipo-system-msg-display--${latestMessage.type} ${className}`,
+      onMouseEnter: () => setInspectionText(inspectionLabel),
+      onMouseLeave: () => setInspectionText(null),
+      onClick: () => {
+        clearSystemMessage(latestMessage.id);
+        setInspectionText(null);
+      },
+      role: "button",
+      tabIndex: 0,
+      "aria-label": inspectionLabel,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "5px",
+        color: currentColor,
+        fontSize: "11px",
+        fontFamily: "var(--skipo-font-mono)",
+        fontWeight: 700,
+        cursor: "pointer",
+        maxWidth: "220px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        textOverflow: "ellipsis"
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx4(
+          "span",
+          {
+            style: {
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              backgroundColor: currentColor,
+              flexShrink: 0
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx4("span", { style: { overflow: "hidden", textOverflow: "ellipsis" }, children: latestMessage.message })
+      ]
+    }
+  );
+};
+SystemMessageDisplay.displayName = "SystemMessageDisplay";
+
+// src/components/bottom-strip/BottomStrip.tsx
+import { forwardRef } from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var BottomStrip = forwardRef(({
+  leftSlot,
+  centerSlot,
+  rightSlot,
+  hideDefaultLeft = false,
+  hideDefaultRight = false,
+  className = "",
+  ...props
+}, ref) => {
+  const { inspectionText, inspectionDescription, isDKeyPressed } = useBottomStrip();
+  const showDescription = Boolean(isDKeyPressed && inspectionDescription);
+  const activeText = showDescription ? inspectionDescription : inspectionText;
+  return /* @__PURE__ */ jsxs4(
+    "footer",
+    {
+      ref,
+      className: `skipo-bottom-strip ${className}`,
+      style: {
+        height: "var(--skipo-bottom-strip-height, 30px)",
+        minHeight: "var(--skipo-bottom-strip-height, 30px)",
+        background: "var(--skipo-bottom-strip-bg, rgba(15, 17, 21, 0.95))",
+        borderTop: "var(--skipo-border, 2px solid rgba(255, 255, 255, 0.85))",
+        backdropFilter: "var(--skipo-matte-blur, blur(20px))",
+        WebkitBackdropFilter: "var(--skipo-matte-blur, blur(20px))",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "0 0.75rem",
+        fontSize: "11px",
+        fontFamily: "var(--skipo-font-mono)",
+        zIndex: 40,
+        position: "relative",
+        userSelect: "none"
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "skipo-bottom-strip__left",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "10px",
+              flexShrink: 0,
+              minWidth: "120px"
+            },
+            children: [
+              !hideDefaultLeft && /* @__PURE__ */ jsxs4(Fragment, { children: [
+                /* @__PURE__ */ jsx5(StatusLight, {}),
+                /* @__PURE__ */ jsx5(AutoSaveToggle, {})
+              ] }),
+              leftSlot
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            className: "skipo-bottom-strip__center",
+            style: {
+              flex: 1,
+              minWidth: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden",
+              padding: "0 0.5rem",
+              pointerEvents: "none",
+              textAlign: "center"
+            },
+            children: centerSlot || /* @__PURE__ */ jsx5(
+              "span",
+              {
+                className: "skipo-inspection-text",
+                "data-mode": showDescription ? "description" : "label",
+                style: {
+                  color: "var(--skipo-inspection-text-color, rgba(241, 245, 249, 0.85))",
+                  fontSize: showDescription ? "10px" : "clamp(8px, 1.1vw, 11px)",
+                  lineHeight: 1.15,
+                  fontWeight: showDescription ? 300 : 700,
+                  textTransform: showDescription ? "none" : "uppercase",
+                  letterSpacing: showDescription ? "0.01em" : "0.04em",
+                  whiteSpace: "normal",
+                  wordBreak: "break-word",
+                  overflowWrap: "anywhere",
+                  display: "-webkit-box",
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: "vertical",
+                  maxHeight: "100%",
+                  opacity: activeText ? 0.9 : 0,
+                  transform: activeText ? "translateY(0)" : "translateY(1px)",
+                  transition: "opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1)"
+                },
+                children: activeText || ""
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: "skipo-bottom-strip__right",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: "12px",
+              flexShrink: 0,
+              minWidth: "140px"
+            },
+            children: [
+              rightSlot,
+              !hideDefaultRight && /* @__PURE__ */ jsxs4(Fragment, { children: [
+                /* @__PURE__ */ jsx5(ApiCallIndicator, {}),
+                /* @__PURE__ */ jsx5(SystemMessageDisplay, {})
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+BottomStrip.displayName = "BottomStrip";
+
+export {
+  StatusLight,
+  AutoSaveToggle,
+  ApiCallIndicator,
+  SystemMessageDisplay,
+  BottomStrip
+};