@ultrst-armada/floks 1.0.0 → 1.1.0

package/packages/contracts/dist/index.js

@@ -0,0 +1,324 @@
+// src/schemas.ts
+import { z } from "zod";
+var VisualSlotSchema = z.object({
+  id: z.string(),
+  acceptedElementTypes: z.array(z.string()),
+  required: z.boolean().default(false),
+  constraints: z.record(z.unknown()).optional()
+});
+var VisualParameterSchema = z.object({
+  id: z.string(),
+  type: z.enum(["color", "dimension", "number", "string", "boolean", "gradient", "shadow"]),
+  default: z.union([z.string(), z.number(), z.boolean()]),
+  constraints: z.record(z.unknown()).optional()
+});
+var VisualStateSchema = z.object({
+  id: z.string(),
+  parameters: z.array(VisualParameterSchema),
+  transitions: z.record(z.string()).optional()
+});
+var ThemeTargetSchema = z.object({
+  library: z.literal("@ultrst-armada/floks"),
+  componentId: z.string(),
+  componentVersion: z.string(),
+  contractVersion: z.string().default("1.0.0")
+});
+var ComponentThemeContractSchema = z.object({
+  componentId: z.string(),
+  componentVersion: z.string(),
+  displayName: z.string().optional(),
+  slots: z.array(VisualSlotSchema),
+  states: z.array(VisualStateSchema),
+  parameters: z.array(VisualParameterSchema),
+  assets: z.array(z.string())
+});
+var ThemePackSlotBindingSchema = z.object({
+  slotId: z.string(),
+  elementType: z.string(),
+  assetRef: z.string().optional(),
+  styles: z.record(z.string()).optional()
+});
+var ThemePackStateMappingSchema = z.object({
+  stateId: z.string(),
+  parameterOverrides: z.record(z.union([z.string(), z.number(), z.boolean()]))
+});
+var ThemePackSchema = z.object({
+  themeId: z.string(),
+  name: z.string(),
+  version: z.string(),
+  target: ThemeTargetSchema,
+  slots: z.array(ThemePackSlotBindingSchema),
+  states: z.array(ThemePackStateMappingSchema),
+  parameters: z.record(z.union([z.string(), z.number(), z.boolean()])),
+  assetTypes: z.array(z.string()),
+  metadata: z.record(z.unknown()).optional()
+});
+
+// src/registry.ts
+var FLOKS_COMPONENT_REGISTRY = {
+  // 1. Button Parent
+  "floks.button": ComponentThemeContractSchema.parse({
+    componentId: "floks.button",
+    componentVersion: "1.0.0",
+    displayName: "Button Component",
+    slots: [
+      { id: "container", acceptedElementTypes: ["shape", "frame", "mesh"], required: true },
+      { id: "icon", acceptedElementTypes: ["icon", "svg", "glyph"], required: false },
+      { id: "label", acceptedElementTypes: ["text", "typography"], required: true },
+      { id: "indicator", acceptedElementTypes: ["badge", "dot", "counter"], required: false }
+    ],
+    states: [
+      { id: "idle", parameters: [] },
+      { id: "hover", parameters: [] },
+      { id: "active", parameters: [] },
+      { id: "disabled", parameters: [] },
+      { id: "focus", parameters: [] }
+    ],
+    parameters: [
+      { id: "background", type: "color", default: "var(--skipo-surface-2)" },
+      { id: "textColor", type: "color", default: "var(--skipo-text-primary)" },
+      { id: "borderColor", type: "color", default: "var(--skipo-border)" },
+      { id: "borderWidth", type: "dimension", default: "1px" },
+      { id: "borderRadius", type: "dimension", default: "6px" },
+      { id: "padding", type: "dimension", default: "8px 16px" },
+      { id: "fontSize", type: "dimension", default: "13px" }
+    ],
+    assets: ["svg", "bitmap"]
+  }),
+  // 2. Panel Parent
+  "floks.panel": ComponentThemeContractSchema.parse({
+    componentId: "floks.panel",
+    componentVersion: "1.0.0",
+    displayName: "Panel Component",
+    slots: [
+      { id: "header", acceptedElementTypes: ["frame", "strip"], required: false },
+      { id: "content", acceptedElementTypes: ["container", "layout"], required: true },
+      { id: "footer", acceptedElementTypes: ["strip", "action-bar"], required: false },
+      { id: "border-frame", acceptedElementTypes: ["frame", "shape"], required: false }
+    ],
+    states: [
+      { id: "default", parameters: [] },
+      { id: "expanded", parameters: [] },
+      { id: "collapsed", parameters: [] },
+      { id: "minimized", parameters: [] }
+    ],
+    parameters: [
+      { id: "background", type: "color", default: "var(--skipo-surface-1)" },
+      { id: "borderColor", type: "color", default: "var(--skipo-border)" },
+      { id: "borderRadius", type: "dimension", default: "8px" },
+      { id: "elevation", type: "shadow", default: "0 4px 12px rgba(0,0,0,0.4)" },
+      { id: "padding", type: "dimension", default: "12px" }
+    ],
+    assets: ["svg", "bitmap", "shader"]
+  }),
+  // 3. Slider Input
+  "floks.input.slider": ComponentThemeContractSchema.parse({
+    componentId: "floks.input.slider",
+    componentVersion: "1.0.0",
+    displayName: "Slider Input Component",
+    slots: [
+      { id: "track", acceptedElementTypes: ["bar", "curve"], required: true },
+      { id: "fill", acceptedElementTypes: ["bar", "gradient"], required: true },
+      { id: "thumb", acceptedElementTypes: ["handle", "circle", "icon"], required: true },
+      { id: "value-label", acceptedElementTypes: ["text", "bubble"], required: false }
+    ],
+    states: [
+      { id: "idle", parameters: [] },
+      { id: "hover", parameters: [] },
+      { id: "dragging", parameters: [] },
+      { id: "disabled", parameters: [] }
+    ],
+    parameters: [
+      { id: "trackColor", type: "color", default: "var(--skipo-surface-3)" },
+      { id: "fillColor", type: "color", default: "var(--skipo-accent)" },
+      { id: "thumbColor", type: "color", default: "var(--skipo-surface-1)" },
+      { id: "thumbSize", type: "dimension", default: "14px" },
+      { id: "height", type: "dimension", default: "6px" }
+    ],
+    assets: ["svg", "bitmap"]
+  }),
+  // 4. Badge
+  "floks.badge": ComponentThemeContractSchema.parse({
+    componentId: "floks.badge",
+    componentVersion: "1.0.0",
+    displayName: "Badge Component",
+    slots: [
+      { id: "pill", acceptedElementTypes: ["shape", "pill"], required: true },
+      { id: "indicator-dot", acceptedElementTypes: ["dot", "icon"], required: false },
+      { id: "text", acceptedElementTypes: ["typography"], required: true }
+    ],
+    states: [
+      { id: "default", parameters: [] },
+      { id: "pulse", parameters: [] }
+    ],
+    parameters: [
+      { id: "background", type: "color", default: "var(--skipo-surface-2)" },
+      { id: "textColor", type: "color", default: "var(--skipo-text-secondary)" },
+      { id: "dotColor", type: "color", default: "var(--skipo-accent)" }
+    ],
+    assets: ["svg"]
+  }),
+  // 5. 2D Graph Socket
+  "floks.socket2d": ComponentThemeContractSchema.parse({
+    componentId: "floks.socket2d",
+    componentVersion: "1.0.0",
+    displayName: "2D Graph Socket",
+    slots: [
+      { id: "ring", acceptedElementTypes: ["circle", "ring"], required: true },
+      { id: "indicator-dot", acceptedElementTypes: ["circle", "dot"], required: false },
+      { id: "glow", acceptedElementTypes: ["radial-glow"], required: false }
+    ],
+    states: [
+      { id: "idle", parameters: [] },
+      { id: "hover", parameters: [] },
+      { id: "connected", parameters: [] },
+      { id: "compatible-hover", parameters: [] }
+    ],
+    parameters: [
+      { id: "color", type: "color", default: "#ffaa00" },
+      { id: "radius", type: "dimension", default: "6px" },
+      { id: "glowRadius", type: "dimension", default: "12px" }
+    ],
+    assets: ["svg"]
+  }),
+  // 6. 2D Graph Wire
+  "floks.wire2d": ComponentThemeContractSchema.parse({
+    componentId: "floks.wire2d",
+    componentVersion: "1.0.0",
+    displayName: "2D Graph Wire",
+    slots: [
+      { id: "trace", acceptedElementTypes: ["path", "spline"], required: true },
+      { id: "pulse-particle", acceptedElementTypes: ["particle", "pulse"], required: false },
+      { id: "endpoint", acceptedElementTypes: ["handle", "arrow"], required: false }
+    ],
+    states: [
+      { id: "idle", parameters: [] },
+      { id: "active", parameters: [] },
+      { id: "selected", parameters: [] },
+      { id: "error", parameters: [] }
+    ],
+    parameters: [
+      { id: "strokeColor", type: "color", default: "#00ffff" },
+      { id: "strokeWidth", type: "dimension", default: "2px" },
+      { id: "opacity", type: "number", default: 1 }
+    ],
+    assets: ["svg", "particle"]
+  }),
+  // 7. 2D Node Base
+  "floks.node2d": ComponentThemeContractSchema.parse({
+    componentId: "floks.node2d",
+    componentVersion: "1.0.0",
+    displayName: "2D Graph Node Card",
+    slots: [
+      { id: "header", acceptedElementTypes: ["strip", "banner"], required: true },
+      { id: "body", acceptedElementTypes: ["container", "surface"], required: true },
+      { id: "footer", acceptedElementTypes: ["strip"], required: false },
+      { id: "socket-strip", acceptedElementTypes: ["column", "row"], required: true }
+    ],
+    states: [
+      { id: "idle", parameters: [] },
+      { id: "selected", parameters: [] },
+      { id: "running", parameters: [] },
+      { id: "bypassed", parameters: [] },
+      { id: "minimized", parameters: [] }
+    ],
+    parameters: [
+      { id: "headerColor", type: "color", default: "var(--skipo-surface-2)" },
+      { id: "bodyColor", type: "color", default: "var(--skipo-surface-1)" },
+      { id: "borderColor", type: "color", default: "var(--skipo-border)" },
+      { id: "cornerRadius", type: "dimension", default: "8px" }
+    ],
+    assets: ["svg", "bitmap"]
+  })
+};
+function getComponentContract(componentId) {
+  return FLOKS_COMPONENT_REGISTRY[componentId];
+}
+function listComponentContracts() {
+  return Object.values(FLOKS_COMPONENT_REGISTRY);
+}
+
+// src/validator.ts
+function validateThemePackAgainstContract(themePack, contract) {
+  const errors = [];
+  const warnings = [];
+  const targetCompId = themePack.target.componentId;
+  const targetContract = contract ?? FLOKS_COMPONENT_REGISTRY[targetCompId];
+  if (!targetContract) {
+    return {
+      valid: false,
+      errors: [`Target component '${targetCompId}' is not registered in Floks ComponentThemeContract registry.`],
+      warnings: [],
+      targetComponentId: targetCompId
+    };
+  }
+  if (themePack.target.library !== "@ultrst-armada/floks") {
+    errors.push(`Invalid target library '${themePack.target.library}'. Must be '@ultrst-armada/floks'.`);
+  }
+  const allowedSlotIds = new Set(targetContract.slots.map((s) => s.id));
+  for (const s of themePack.slots) {
+    if (!allowedSlotIds.has(s.slotId)) {
+      errors.push(`Slot '${s.slotId}' is not defined in contract for '${targetCompId}'.`);
+    } else {
+      const slotDef = targetContract.slots.find((slot) => slot.id === s.slotId);
+      if (slotDef && !slotDef.acceptedElementTypes.includes(s.elementType)) {
+        errors.push(
+          `Slot '${s.slotId}' rejects element type '${s.elementType}'. Accepted types: [${slotDef.acceptedElementTypes.join(", ")}]`
+        );
+      }
+    }
+  }
+  const presentSlotIds = new Set(themePack.slots.map((s) => s.slotId));
+  for (const requiredSlot of targetContract.slots.filter((s) => s.required)) {
+    if (!presentSlotIds.has(requiredSlot.id)) {
+      warnings.push(`Required slot '${requiredSlot.id}' is not explicitly bound in theme.`);
+    }
+  }
+  const allowedStateIds = new Set(targetContract.states.map((st) => st.id));
+  for (const st of themePack.states) {
+    if (!allowedStateIds.has(st.stateId)) {
+      errors.push(`State '${st.stateId}' is not recognized by contract for '${targetCompId}'.`);
+    }
+  }
+  const allowedParamIds = new Set(targetContract.parameters.map((p) => p.id));
+  for (const paramKey of Object.keys(themePack.parameters)) {
+    if (!allowedParamIds.has(paramKey)) {
+      warnings.push(`Unknown visual parameter '${paramKey}' ignored by '${targetCompId}'.`);
+    }
+  }
+  const allowedAssets = new Set(targetContract.assets);
+  for (const asset of themePack.assetTypes) {
+    if (!allowedAssets.has(asset)) {
+      errors.push(`Asset type '${asset}' is not accepted by '${targetCompId}'. Allowed: [${targetContract.assets.join(", ")}]`);
+    }
+  }
+  return {
+    valid: errors.length === 0,
+    errors,
+    warnings,
+    targetComponentId: targetCompId
+  };
+}
+function loadThemePack(raw) {
+  const parsed = ThemePackSchema.parse(raw);
+  const result = validateThemePackAgainstContract(parsed);
+  if (!result.valid) {
+    throw new Error(`Invalid Floks ThemePack: ${result.errors.join("; ")}`);
+  }
+  return parsed;
+}
+export {
+  ComponentThemeContractSchema,
+  FLOKS_COMPONENT_REGISTRY,
+  ThemePackSchema,
+  ThemePackSlotBindingSchema,
+  ThemePackStateMappingSchema,
+  ThemeTargetSchema,
+  VisualParameterSchema,
+  VisualSlotSchema,
+  VisualStateSchema,
+  getComponentContract,
+  listComponentContracts,
+  loadThemePack,
+  validateThemePackAgainstContract
+};

package/packages/contracts/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@floks/contracts",
+  "version": "1.0.0",
+  "description": "Floks Canonical Component Theme Contracts, Visual Slots, States, Parameters, and Compatibility Validation for Theta Engine",
+  "type": "module",
+  "private": false,
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "skipoManifest": "./floks.manifest.json",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --external zod",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  },
+  "dependencies": {
+    "zod": "^3.24.1"
+  }
+}

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

@@ -70,11 +70,20 @@ var UIElementBase = class extends GraphEntityParent {
 };
 
 // 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,
+  className = "",
+  ...props
+}) => {
+  return React.createElement(Component, { className, ...props }, children);
+};
 
 // src/hierarchy/ButtonParent.tsx
 import { useMemo } from "react";
@@ -215,6 +224,16 @@ var ButtonParent = ({
     }
   );
 };
+var ButtonModel = class extends UIElementBase {
+  constructor(id, name, variant = "primary", size = "md") {
+    super(id, name, "button", variant, size);
+  }
+};
+var ActionButton = (props) => /* @__PURE__ */ jsx(ButtonParent, { variant: "accent", ...props });
+var IconButton = (props) => /* @__PURE__ */ jsx(ButtonParent, { variant: "secondary", ...props });
+var ToggleButton = (props) => /* @__PURE__ */ jsx(ButtonParent, { variant: "dock", ...props });
+var DangerButton = (props) => /* @__PURE__ */ jsx(ButtonParent, { variant: "danger", ...props });
+var GhostButton = (props) => /* @__PURE__ */ jsx(ButtonParent, { variant: "ghost", ...props });
 
 // src/hierarchy/PanelParent.tsx
 import { useMemo as useMemo2 } from "react";
@@ -337,6 +356,15 @@ 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 });
+var ToolbarPanel = (props) => /* @__PURE__ */ jsx2(PanelParent, { ...props });
 
 // src/hierarchy/InputParent.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -474,6 +502,11 @@ 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";
@@ -564,9 +597,18 @@ 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 });
+var ChannelStripTile = (props) => /* @__PURE__ */ jsx4(TileParent, { ...props });
 
 // src/hierarchy/BadgeParent.tsx
-import React4 from "react";
+import React5 from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var Badge = ({
   id,
@@ -576,7 +618,7 @@ var Badge = ({
   className = ""
 }) => {
   const palette = usePalette();
-  const colorStyle = React4.useMemo(() => {
+  const colorStyle = React5.useMemo(() => {
     switch (variant) {
       case "accent":
         return {
@@ -685,19 +727,43 @@ 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,
+  ActionButton,
+  IconButton,
+  ToggleButton,
+  DangerButton,
+  GhostButton,
   PanelParent,
+  PanelModel,
+  ModalPanel,
+  InspectorPanel,
+  CardPanel,
+  ToolbarPanel,
   SliderInput,
   TextInput,
   SelectInput,
   ToggleInput,
+  InputModel,
   TileParent,
+  TileModel,
+  SpawnOptionTile,
+  CategoryCardTile,
+  ClipCardTile,
+  ChannelStripTile,
   Badge,
   TelemetryPill,
-  StatusDot
+  StatusDot,
+  BadgeModel
 };

package/packages/ui/dist/components/base/index.js

@@ -5,6 +5,9 @@ import {
   CredentialField,
   KNOWN_CREDENTIAL_URLS
 } from "../../chunk-KIFQA7L6.js";
+import {
+  BaseTooltip
+} from "../../chunk-GKP6KHTI.js";
 import {
   BaseBadge,
   BaseCard
@@ -12,9 +15,6 @@ import {
 import {
   BaseInput
 } from "../../chunk-W42SJGOJ.js";
-import {
-  BaseTooltip
-} from "../../chunk-GKP6KHTI.js";
 import "../../chunk-62ITRDJX.js";
 import {
   BaseButton

package/packages/ui/dist/components/composite/index.js

@@ -7,16 +7,16 @@ import {
   SearchableList,
   StatusIndicator,
   useSearchKeyboardNavigation
-} from "../../chunk-DABYTYOU.js";
+} from "../../chunk-VEWPTZGO.js";
+import {
+  IconOnlyButton
+} from "../../chunk-OR5ZNJI4.js";
 import {
   CopyableLogViewer
 } from "../../chunk-RLQ2ALJG.js";
+import "../../chunk-GKP6KHTI.js";
 import "../../chunk-UOR4P6PO.js";
 import "../../chunk-W42SJGOJ.js";
-import {
-  IconOnlyButton
-} from "../../chunk-OR5ZNJI4.js";
-import "../../chunk-GKP6KHTI.js";
 import "../../chunk-62ITRDJX.js";
 import "../../chunk-A2CDQISJ.js";
 export {

package/packages/ui/dist/components/settings/index.js

@@ -1,9 +1,9 @@
 import {
   SettingsTab,
   ThemeSettingsSection
-} from "../../chunk-QWXEW7WH.js";
-import "../../chunk-RLQ2ALJG.js";
+} from "../../chunk-ATQPZLJX.js";
 import "../../chunk-DZJ3NSCX.js";
+import "../../chunk-RLQ2ALJG.js";
 import "../../chunk-UOR4P6PO.js";
 import "../../chunk-A2CDQISJ.js";
 export {

package/packages/ui/dist/hierarchy/index.d.ts

@@ -2,6 +2,27 @@ import React__default from 'react';
 import { GraphEntityParent } from '@ultrst-armada/kloks/state-graph';
 
 type GraphEntityMetadata = Record<string, any>;
+interface UIInteractionState {
+    isHovered?: boolean;
+    isActive?: boolean;
+    isFocused?: boolean;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+}
+interface UIStyleTokens {
+    bgPrimary?: string;
+    bgSecondary?: string;
+    bgSurface?: string;
+    bgElevated?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+    textMuted?: string;
+    accentPrimary?: string;
+    accentSecondary?: string;
+    borderSubtle?: string;
+    borderMedium?: string;
+    [key: string]: any;
+}
 type ColorPalette = Record<string, any>;
 declare function registerPaletteResolver(fn: () => ColorPalette): void;
 type UIRole = 'panel' | 'button' | 'input' | 'tile' | 'badge';
@@ -49,6 +70,10 @@ type UIProps = UIBaseProps;
 declare abstract class UIModel extends UIElementBase {
     constructor(id: string, name: string, variant?: UIVariant, size?: UISize);
 }
+interface UIParentProps extends UIBaseProps {
+    as?: React__default.ElementType;
+}
+declare const UIParent: React__default.FC<UIParentProps>;
 
 interface ButtonParentProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: UIVariant;
@@ -63,6 +88,18 @@ interface ButtonParentProps extends React__default.ButtonHTMLAttributes<HTMLButt
 }
 declare const ButtonParent: React__default.FC<ButtonParentProps>;
 
+declare class ButtonModel extends UIElementBase {
+    constructor(id: string, name: string, variant?: UIVariant, size?: UISize);
+}
+type ButtonVariant = UIVariant;
+type ButtonSize = UISize;
+type ButtonProps = ButtonParentProps;
+declare const ActionButton: React__default.FC<ButtonParentProps>;
+declare const IconButton: React__default.FC<ButtonParentProps>;
+declare const ToggleButton: React__default.FC<ButtonParentProps>;
+declare const DangerButton: React__default.FC<ButtonParentProps>;
+declare const GhostButton: React__default.FC<ButtonParentProps>;
+
 interface PanelParentProps {
     id?: string;
     title: string;
@@ -86,6 +123,16 @@ interface PanelParentProps {
 }
 declare const PanelParent: React__default.FC<PanelParentProps>;
 
+declare class PanelModel extends UIElementBase {
+    constructor(id: string, name: string, variant?: UIVariant, size?: UISize);
+}
+type PanelVariant = 'modal' | 'inspector' | 'card' | 'toolbar' | 'default';
+type PanelProps = PanelParentProps;
+declare const ModalPanel: React__default.FC<PanelParentProps>;
+declare const InspectorPanel: React__default.FC<PanelParentProps>;
+declare const CardPanel: React__default.FC<PanelParentProps>;
+declare const ToolbarPanel: React__default.FC<PanelParentProps>;
+
 interface SliderInputProps {
     id?: string;
     value: number;
@@ -120,6 +167,10 @@ interface ToggleInputProps {
 }
 declare const ToggleInput: React__default.FC<ToggleInputProps>;
 
+declare class InputModel extends UIElementBase {
+    constructor(id: string, name: string, variant?: UIVariant, size?: UISize);
+}
+
 interface TileParentProps {
     id: string;
     icon?: React__default.ReactNode;
@@ -141,6 +192,15 @@ interface TileParentProps {
 }
 declare const TileParent: React__default.FC<TileParentProps>;
 
+declare class TileModel extends UIElementBase {
+    constructor(id: string, name: string, variant?: UIVariant, size?: UISize);
+}
+type TileVariant = 'default' | 'clip' | 'category' | 'strip';
+declare const SpawnOptionTile: React__default.FC<TileParentProps>;
+declare const CategoryCardTile: React__default.FC<TileParentProps>;
+declare const ClipCardTile: React__default.FC<TileParentProps>;
+declare const ChannelStripTile: React__default.FC<TileParentProps>;
+
 interface BadgeProps {
     id?: string;
     label: string;
@@ -165,4 +225,9 @@ interface StatusDotProps {
 }
 declare const StatusDot: React__default.FC<StatusDotProps>;
 
-export { Badge, type BadgeProps, ButtonParent, type ButtonParentProps, type ColorPalette, type GraphEntityMetadata, PanelParent, type PanelParentProps, SelectInput, type SelectInputProps, SliderInput, type SliderInputProps, StatusDot, type StatusDotProps, TelemetryPill, type TelemetryPillProps, TextInput, type TextInputProps, TileParent, type TileParentProps, ToggleInput, type ToggleInputProps, type TooltipDirection, type UIBaseProps, UIElementBase, UIModel, type UIProps, type UIRole, type UISize, type UIVariant, registerPaletteResolver };
+declare class BadgeModel extends UIElementBase {
+    constructor(id: string, name: string, variant?: UIVariant, size?: UISize);
+}
+type BadgeTone = 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+
+export { ActionButton, Badge, BadgeModel, type BadgeProps, type BadgeTone, ButtonModel, ButtonParent, type ButtonParentProps, type ButtonProps, type ButtonSize, type ButtonVariant, CardPanel, CategoryCardTile, ChannelStripTile, ClipCardTile, type ColorPalette, DangerButton, GhostButton, type GraphEntityMetadata, IconButton, InputModel, InspectorPanel, ModalPanel, PanelModel, PanelParent, type PanelParentProps, type PanelProps, type PanelVariant, SelectInput, type SelectInputProps, SliderInput, type SliderInputProps, SpawnOptionTile, StatusDot, type StatusDotProps, TelemetryPill, type TelemetryPillProps, TextInput, type TextInputProps, TileModel, TileParent, type TileParentProps, type TileVariant, ToggleButton, ToggleInput, type ToggleInputProps, ToolbarPanel, type TooltipDirection, type UIBaseProps, UIElementBase, type UIInteractionState, UIModel, UIParent, type UIParentProps, type UIProps, type UIRole, type UISize, type UIStyleTokens, type UIVariant, registerPaletteResolver };