@ultrst-armada/floks 1.2.4 → 1.2.5

package/README.md

@@ -1,2 +1,12 @@
 # Floks
 This will be the counterpart Kloks but for the frontend components. This will store the canonical frontend elements that we will use in our Skipo projects. 
+
+## FrnlTS architecture
+
+Floks is the canonical concrete frontend element library built on FrnlTS. FrnlTS provides the semantic UI runtime; Floks provides concrete reusable elements and their visual behavior.
+
+- UI Primitive: use for atomic elements such as a simple Button.
+- UI Composite: use when an element requires multiple semantic children, Slots, coordinated state, or Flows. Complex Button variants may therefore be composites.
+- Shared runtime: Floks UI assets use the canonical FrnlTS Zustand store and Frnl semantic boundaries.
+
+FrnlTS is consumed as the published @dinilmusick/frnlts package. Floks owns the concrete UI vocabulary; FrnlTS owns the semantic model.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultrst-armada/floks",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "private": false,
   "publishConfig": {
     "access": "public",
@@ -61,20 +61,26 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
     "@types/node": "^22.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@ultrst-armada/kloks": "^1.4.0",
+    "@ultrst-armada/frnlts": "^0.2.2",
+    "happy-dom": "^21.0.3",
     "lucide-react": "^1.55.0",
     "react": "^19.0.1",
     "react-dom": "^19.0.1",
     "tsup": "^8.4.0",
     "typescript": "^5.7.3",
-    "vitest": "^3.1.0"
+    "vitest": "^3.1.0",
+    "zustand": "^5.0.3"
   },
   "pnpm": {
     "overrides": {
-      "@ultrst-armada/kloks": "file:../Kloks"
+      "@ultrst-armada/kloks": "file:../Kloks",
+      "@ultrst-armada/frnlts": "file:../FrnlTS"
     }
   },
   "packageManager": "pnpm@9.15.0"

package/packages/canvas-ui/dist/index.js

@@ -4,11 +4,6 @@ import {
   MiniMap,
   useCanvas
 } from "./chunk-34YRDZPJ.js";
-import {
-  DockBar,
-  DockItem,
-  useDock
-} from "./chunk-6VB74RCH.js";
 import {
   BIOME_CONFIGS,
   COORD_SCALE,
@@ -25,17 +20,6 @@ import {
   useCanvas2DCoordinates,
   useCanvas2DMagnetic
 } from "./chunk-XVAHT5WE.js";
-import {
-  MonacoEditor,
-  skipoDarkTheme,
-  useMonaco
-} from "./chunk-QTTWWBNN.js";
-import {
-  Tile,
-  TileCreateButton,
-  TileGrid,
-  useTileMenu
-} from "./chunk-SA3JADUG.js";
 import {
   PredictiveGhostNodeCard,
   PredictiveHudToolbar,
@@ -52,6 +36,22 @@ import {
   getSocketScreenPosition,
   renderSpriteIcon
 } from "./chunk-U2SC3RMJ.js";
+import {
+  DockBar,
+  DockItem,
+  useDock
+} from "./chunk-6VB74RCH.js";
+import {
+  MonacoEditor,
+  skipoDarkTheme,
+  useMonaco
+} from "./chunk-QTTWWBNN.js";
+import {
+  Tile,
+  TileCreateButton,
+  TileGrid,
+  useTileMenu
+} from "./chunk-SA3JADUG.js";
 
 // src/node-graph-ui/widgets/MidpointWidgets.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/packages/contracts/dist/index.js

@@ -319,7 +319,7 @@ var FLOKS_PUBLIC_SYMBOLS = [
   "SettingsTab",
   "WorkspaceTilesMenu",
   "UIParent",
-  "PanelModel",
+  "floksFrnlStore",
   "PanelProps",
   // UI Base Primitives & Forms
   "BaseButton",
@@ -328,7 +328,7 @@ var FLOKS_PUBLIC_SYMBOLS = [
   "BaseSelect",
   "BaseToggle",
   "BaseBadge",
-  "ButtonModel",
+  "FrnlStoreProvider",
   "ButtonProps",
   "CredentialField",
   "LoginModal",

package/packages/ui/dist/{chunk-KYFSUQVT.js → chunk-TORWRS3V.js}

@@ -1,3 +1,6 @@
+import {
+  useFloksFrnlStore
+} from "./chunk-X4B3EBMY.js";
 import {
   usePalette
 } from "./chunk-ZQK5I5ZL.js";
@@ -5,77 +8,8 @@ import {
   useBottomStrip
 } from "./chunk-62ITRDJX.js";
 
-// src/hierarchy/UIElementBase.ts
-import { GraphEntityParent } from "@ultrst-armada/kloks/state-graph";
-var activePaletteResolver = () => ({});
-function registerPaletteResolver(fn) {
-  activePaletteResolver = fn;
-}
-function getActivePalette() {
-  return activePaletteResolver();
-}
-var UIElementBase = class extends GraphEntityParent {
-  themeRole;
-  variant;
-  size;
-  isDisabled;
-  isHighlighted;
-  tooltipText;
-  tooltipDir;
-  constructor(id, name, themeRole, variant = "primary", size = "md", metadata = {}) {
-    super(id, name, "ui", metadata);
-    this.themeRole = themeRole;
-    this.variant = variant;
-    this.size = size;
-    this.isDisabled = false;
-    this.isHighlighted = false;
-    this.tooltipDir = "bottom";
-  }
-  getPalette() {
-    return getActivePalette();
-  }
-  setDisabled(disabled) {
-    if (this.isDisabled !== disabled) {
-      this.isDisabled = disabled;
-      this.emit("disabled_changed", disabled);
-    }
-  }
-  setHighlighted(highlighted) {
-    if (this.isHighlighted !== highlighted) {
-      this.isHighlighted = highlighted;
-      this.emit("highlighted_changed", highlighted);
-    }
-  }
-  setVariant(variant) {
-    this.variant = variant;
-    this.emit("variant_changed", variant);
-  }
-  initialize() {
-    this.emit("ui_element_initialized", { id: this.id, role: this.themeRole });
-  }
-  dispose() {
-    this.emit("ui_element_disposed", { id: this.id });
-  }
-  toJSON() {
-    return {
-      id: this.id,
-      name: this.name,
-      role: this.themeRole,
-      variant: this.variant,
-      size: this.size,
-      disabled: this.isDisabled,
-      metadata: this.metadata
-    };
-  }
-};
-
 // src/hierarchy/UIParent.tsx
 import React from "react";
-var UIModel = class extends UIElementBase {
-  constructor(id, name, variant = "primary", size = "md") {
-    super(id, name, "panel", variant, size);
-  }
-};
 var UIParent = ({
   as: Component = "div",
   children,
@@ -86,7 +20,7 @@ var UIParent = ({
 };
 
 // src/hierarchy/ButtonParent.tsx
-import { useMemo } from "react";
+import React2, { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var SIZE_STYLES = {
   xs: "px-1.5 py-0.5 text-[9px] gap-1",
@@ -190,20 +124,50 @@ var ButtonParent = ({
     const effectiveLabel = label || tooltip || (typeof children === "string" ? children : void 0);
     const effectiveDesc = description || (shortcutHint ? `[${shortcutHint}]` : void 0);
     if (effectiveLabel || effectiveDesc) {
-      setInspectionText({
-        label: effectiveLabel,
-        description: effectiveDesc
-      });
+      setInspectionText(effectiveLabel || null, effectiveDesc || null);
     }
   };
   const handleMouseLeave = () => {
     setInspectionText(null);
   };
+  const store = useFloksFrnlStore();
+  const autoId = React2.useId().replace(/[:/]/g, "");
+  const effectiveId = id ?? (label ? `floks.button.${label.toLowerCase().replace(/[^a-z0-9]/g, "-")}.${autoId}` : `floks.button.${autoId}`);
+  const effectiveState = disabled ? "disabled" : isActive ? "active" : "default";
+  React2.useEffect(() => {
+    store.getState().registerEntity(effectiveId, {
+      state: effectiveState,
+      properties: { variant, size, disabled, isActive, label, kind: "primitive" }
+    });
+    return () => {
+      store.getState().unregisterEntity(effectiveId);
+    };
+  }, [effectiveId, store]);
+  React2.useEffect(() => {
+    const entity = store.getState().entities[effectiveId];
+    if (entity) {
+      if (entity.state !== effectiveState) {
+        store.getState().setEntityState(effectiveId, effectiveState);
+      }
+      store.getState().setEntityProperties(effectiveId, {
+        variant,
+        size,
+        disabled,
+        isActive,
+        label,
+        kind: "primitive"
+      });
+    }
+  }, [effectiveId, effectiveState, variant, size, disabled, isActive, label, store]);
   return /* @__PURE__ */ jsxs(
     "button",
     {
-      id,
+      ...rest,
+      id: effectiveId,
       "data-ui-parent": "ButtonParent",
+      "data-frnl-id": effectiveId,
+      "data-frnl-kind": "ui-primitive",
+      "data-frnl-state": effectiveState,
       type: "button",
       disabled,
       onMouseEnter: handleMouseEnter,
@@ -214,9 +178,8 @@ var ButtonParent = ({
         if (disabled) return;
         onClick?.(e);
       },
-      style: { ...variantStyle, ...activeDynamicStyle, ...style },
       className: `inline-flex items-center justify-center font-mono font-bold uppercase tracking-wider border transition-all duration-150 active:scale-95 select-none disabled:opacity-40 disabled:pointer-events-none ${SIZE_STYLES[size]} ${className}`,
-      ...rest,
+      style: { ...variantStyle, ...activeDynamicStyle, ...style },
       children: [
         icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
         children && /* @__PURE__ */ jsx("span", { children })
@@ -224,10 +187,88 @@ var ButtonParent = ({
     }
   );
 };
-var ButtonModel = class extends UIElementBase {
-  constructor(id, name, variant = "primary", size = "md") {
-    super(id, name, "button", variant, size);
-  }
+var SplitButton = ({
+  id,
+  label,
+  onPrimaryClick,
+  onDropdownClick,
+  variant = "primary",
+  size = "md",
+  disabled = false,
+  isOpen = false,
+  dropdownMenu,
+  menuOccupants,
+  className = "",
+  style
+}) => {
+  const store = useFloksFrnlStore();
+  const autoId = React2.useId().replace(/[:/]/g, "");
+  const compositeId = id ?? (label ? `floks.splitbutton.${label.toLowerCase().replace(/[^a-z0-9]/g, "-")}.${autoId}` : `floks.splitbutton.${autoId}`);
+  const effectiveState = disabled ? "disabled" : isOpen ? "open" : "default";
+  React2.useEffect(() => {
+    store.getState().registerEntity(compositeId, {
+      state: effectiveState,
+      properties: { variant, size, isOpen, label, kind: "composite" }
+    });
+    return () => {
+      store.getState().unregisterEntity(compositeId);
+    };
+  }, [compositeId, store]);
+  React2.useEffect(() => {
+    const entity = store.getState().entities[compositeId];
+    if (entity) {
+      if (entity.state !== effectiveState) {
+        store.getState().setEntityState(compositeId, effectiveState);
+      }
+      store.getState().setEntityProperties(compositeId, {
+        variant,
+        size,
+        isOpen,
+        label,
+        kind: "composite"
+      });
+    }
+  }, [compositeId, effectiveState, variant, size, isOpen, label, store]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: compositeId,
+      "data-frnl-id": compositeId,
+      "data-frnl-kind": "ui-composite",
+      "data-frnl-state": effectiveState,
+      className: `inline-flex items-center relative ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          ButtonParent,
+          {
+            id: `${compositeId}.primaryAction`,
+            variant,
+            size,
+            disabled,
+            onClick: onPrimaryClick,
+            className: "rounded-r-none border-r-0",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ButtonParent,
+          {
+            id: `${compositeId}.dropdownAction`,
+            variant,
+            size,
+            disabled,
+            onClick: onDropdownClick,
+            className: "rounded-l-none px-2",
+            "aria-label": "Toggle Menu",
+            "aria-expanded": isOpen,
+            children: "\u25BE"
+          }
+        ),
+        isOpen && (dropdownMenu || menuOccupants) && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 mt-1 z-50", children: dropdownMenu || menuOccupants && Object.values(menuOccupants)[0] })
+      ]
+    }
+  );
 };
 var ActionButton = (props) => /* @__PURE__ */ jsx(ButtonParent, { variant: "accent", ...props });
 var IconButton = (props) => /* @__PURE__ */ jsx(ButtonParent, { variant: "secondary", ...props });
@@ -356,11 +397,6 @@ var PanelParent = ({
     }
   );
 };
-var PanelModel = class extends UIElementBase {
-  constructor(id, name, variant = "primary", size = "md") {
-    super(id, name, "panel", variant, size);
-  }
-};
 var ModalPanel = (props) => /* @__PURE__ */ jsx2(PanelParent, { zIndex: 100, ...props });
 var InspectorPanel = (props) => /* @__PURE__ */ jsx2(PanelParent, { ...props });
 var CardPanel = (props) => /* @__PURE__ */ jsx2(PanelParent, { ...props });
@@ -502,11 +538,6 @@ var ToggleInput = ({
     }
   );
 };
-var InputModel = class extends UIElementBase {
-  constructor(id, name, variant = "primary", size = "md") {
-    super(id, name, "input", variant, size);
-  }
-};
 
 // src/hierarchy/TileParent.tsx
 import { useState, useRef, useEffect } from "react";
@@ -597,11 +628,6 @@ var TileParent = ({
     }
   );
 };
-var TileModel = class extends UIElementBase {
-  constructor(id, name, variant = "primary", size = "md") {
-    super(id, name, "tile", variant, size);
-  }
-};
 var SpawnOptionTile = (props) => /* @__PURE__ */ jsx4(TileParent, { ...props });
 var CategoryCardTile = (props) => /* @__PURE__ */ jsx4(TileParent, { ...props });
 var ClipCardTile = (props) => /* @__PURE__ */ jsx4(TileParent, { ...props });
@@ -727,26 +753,17 @@ var StatusDot = ({
     }
   );
 };
-var BadgeModel = class extends UIElementBase {
-  constructor(id, name, variant = "primary", size = "md") {
-    super(id, name, "badge", variant, size);
-  }
-};
 
 export {
-  registerPaletteResolver,
-  UIElementBase,
-  UIModel,
   UIParent,
   ButtonParent,
-  ButtonModel,
+  SplitButton,
   ActionButton,
   IconButton,
   ToggleButton,
   DangerButton,
   GhostButton,
   PanelParent,
-  PanelModel,
   ModalPanel,
   InspectorPanel,
   CardPanel,
@@ -755,15 +772,12 @@ export {
   TextInput,
   SelectInput,
   ToggleInput,
-  InputModel,
   TileParent,
-  TileModel,
   SpawnOptionTile,
   CategoryCardTile,
   ClipCardTile,
   ChannelStripTile,
   Badge,
   TelemetryPill,
-  StatusDot,
-  BadgeModel
+  StatusDot
 };

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

@@ -0,0 +1,22 @@
+// src/frnl/store.ts
+import React, { createContext, useContext } from "react";
+import { createFrnlStore } from "@ultrst-armada/frnlts";
+var floksFrnlStore = createFrnlStore();
+function getFloksFrnlStore() {
+  return floksFrnlStore;
+}
+var FrnlStoreContext = createContext(null);
+var FrnlStoreProvider = ({ store, children }) => {
+  return React.createElement(FrnlStoreContext.Provider, { value: store }, children);
+};
+function useFloksFrnlStore() {
+  const contextStore = useContext(FrnlStoreContext);
+  return contextStore ?? floksFrnlStore;
+}
+
+export {
+  floksFrnlStore,
+  getFloksFrnlStore,
+  FrnlStoreProvider,
+  useFloksFrnlStore
+};