@ultrst-armada/floks 0.0.0-stage → 1.0.0

package/packages/ui/dist/hierarchy/index.css

@@ -0,0 +1,183 @@
+/* src/styles/base.css */
+.skipo-btn {
+  font-family: var(--skipo-font);
+  border: var(--skipo-border);
+  box-shadow: var(--skipo-shadow-btn);
+  border-radius: var(--skipo-radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  cursor: pointer;
+  transition: all 0.1s ease;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+.skipo-btn:hover {
+  box-shadow: var(--skipo-shadow-btn-hover);
+  transform: translate(-1px, -1px);
+}
+.skipo-btn:active {
+  box-shadow: var(--skipo-shadow-btn-active);
+  transform: translate(1px, 1px);
+}
+.skipo-btn--sm {
+  padding: 0.25rem 0.5rem;
+  font-size: 11px;
+  height: 1.75rem;
+}
+.skipo-btn--md {
+  padding: 0.375rem 0.75rem;
+  font-size: 12px;
+  height: 2.25rem;
+}
+.skipo-btn--lg {
+  padding: 0.625rem 1rem;
+  font-size: 14px;
+  height: 2.75rem;
+}
+.skipo-btn--accent {
+  background: var(--skipo-accent);
+  color: var(--skipo-accent-fg);
+}
+.skipo-btn--secondary {
+  background: var(--skipo-matte-bg);
+  color: var(--skipo-text);
+}
+.skipo-btn--danger {
+  background: var(--skipo-danger);
+  color: var(--skipo-danger-fg);
+}
+.skipo-btn--success {
+  background: var(--skipo-success);
+  color: var(--skipo-success-fg);
+}
+.skipo-btn--warning {
+  background: var(--skipo-warning);
+  color: var(--skipo-warning-fg);
+}
+.skipo-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--skipo-text);
+}
+.skipo-btn--ghost:hover {
+  background: rgba(0, 0, 0, 0.1);
+  border: var(--skipo-border);
+}
+.skipo-input {
+  width: 100%;
+  border: var(--skipo-border-input);
+  background: var(--skipo-matte-bg);
+  color: var(--skipo-text);
+  padding: 0.375rem 0.625rem;
+  font-size: 12px;
+  font-family: var(--skipo-font-mono);
+  font-weight: bold;
+  border-radius: var(--skipo-radius-sm);
+  outline: none;
+}
+.skipo-input:focus {
+  border-color: var(--skipo-accent);
+}
+.skipo-textarea {
+  width: 100%;
+  border: var(--skipo-border-input);
+  background: var(--skipo-matte-bg);
+  color: var(--skipo-text);
+  padding: 0.375rem 0.625rem;
+  font-family: var(--skipo-font);
+  border-radius: var(--skipo-radius-sm);
+  outline: none;
+  resize: vertical;
+}
+.skipo-select {
+  border: var(--skipo-border-input);
+  background: var(--skipo-matte-bg);
+  color: var(--skipo-text);
+  padding: 0.375rem 0.625rem;
+  font-family: var(--skipo-font-mono);
+  font-weight: bold;
+  border-radius: var(--skipo-radius-sm);
+  text-transform: uppercase;
+}
+.skipo-card {
+  border: var(--skipo-border);
+  background: var(--skipo-matte-bg);
+  color: var(--skipo-text);
+  padding: 0.75rem;
+  border-radius: var(--skipo-radius);
+  transition: all 0.1s ease;
+}
+.skipo-card--surface {
+  background: var(--skipo-matte-bg);
+}
+.skipo-card--subtle {
+  background: rgba(0, 0, 0, 0.1);
+}
+.skipo-card--base {
+  background: var(--skipo-bg);
+}
+.skipo-card--sm {
+  box-shadow: var(--skipo-shadow-btn);
+}
+.skipo-card--md {
+  box-shadow: var(--skipo-shadow);
+}
+.skipo-card--lg {
+  box-shadow: var(--skipo-shadow-hover);
+}
+.skipo-badge {
+  border: var(--skipo-border);
+  padding: 0.125rem 0.375rem;
+  font-size: 10px;
+  font-weight: 900;
+  text-transform: uppercase;
+  border-radius: 4px;
+}
+.skipo-badge--accent {
+  background: var(--skipo-accent);
+  color: var(--skipo-accent-fg);
+}
+.skipo-badge--success {
+  background: var(--skipo-success);
+  color: var(--skipo-success-fg);
+}
+.skipo-toggle {
+  appearance: none;
+  width: 32px;
+  height: 18px;
+  background: var(--skipo-matte-bg);
+  border: var(--skipo-border);
+  border-radius: 9px;
+  position: relative;
+  cursor: pointer;
+}
+.skipo-toggle:checked {
+  background: var(--skipo-success);
+}
+.skipo-toggle::after {
+  content: "";
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 12px;
+  height: 12px;
+  background: var(--skipo-text);
+  border-radius: 50%;
+  transition: 0.2s;
+}
+.skipo-toggle:checked::after {
+  left: 15px;
+}
+.skipo-tooltip {
+  position: absolute;
+  background: var(--skipo-matte-bg);
+  color: var(--skipo-text);
+  padding: 4px 8px;
+  border: var(--skipo-border);
+  border-radius: var(--skipo-radius-sm);
+  font-size: 11px;
+  z-index: 1000;
+}

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

@@ -0,0 +1,168 @@
+import React__default from 'react';
+import { GraphEntityParent } from '@ultrst-armada/kloks/state-graph';
+
+type GraphEntityMetadata = Record<string, any>;
+type ColorPalette = Record<string, any>;
+declare function registerPaletteResolver(fn: () => ColorPalette): void;
+type UIRole = 'panel' | 'button' | 'input' | 'tile' | 'badge';
+type UIVariant = 'primary' | 'secondary' | 'accent' | 'amber' | 'sky' | 'emerald' | 'danger' | 'ghost' | 'dock' | 'outline';
+type UISize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type TooltipDirection = 'top' | 'bottom' | 'left' | 'right';
+interface UIBaseProps {
+    id?: string;
+    className?: string;
+    variant?: UIVariant;
+    size?: UISize;
+    disabled?: boolean;
+    isActive?: boolean;
+    tooltip?: string;
+    tooltipDirection?: TooltipDirection;
+    shortcutHint?: string;
+    children?: React__default.ReactNode;
+}
+/**
+ * UIElementBase: Universal Base Class tracing to GraphEntityParent
+ * Every UI Model in the application derives from this root template class.
+ */
+declare abstract class UIElementBase extends GraphEntityParent {
+    readonly themeRole: UIRole;
+    variant: UIVariant;
+    size: UISize;
+    isDisabled: boolean;
+    isHighlighted: boolean;
+    tooltipText?: string;
+    tooltipDir: TooltipDirection;
+    constructor(id: string, name: string, themeRole: UIRole, variant?: UIVariant, size?: UISize, metadata?: GraphEntityMetadata);
+    getPalette(): ColorPalette;
+    setDisabled(disabled: boolean): void;
+    setHighlighted(highlighted: boolean): void;
+    setVariant(variant: UIVariant): void;
+    initialize(): void;
+    dispose(): void;
+    toJSON(): Record<string, any>;
+}
+
+type UIProps = UIBaseProps;
+/**
+ * UIModel: Abstract intermediate model tracing to UIElementBase -> GraphEntityParent
+ */
+declare abstract class UIModel extends UIElementBase {
+    constructor(id: string, name: string, variant?: UIVariant, size?: UISize);
+}
+
+interface ButtonParentProps extends React__default.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: UIVariant;
+    size?: UISize;
+    label?: string;
+    tooltip?: string;
+    description?: string;
+    tooltipDirection?: TooltipDirection;
+    shortcutHint?: string;
+    isActive?: boolean;
+    icon?: React__default.ReactNode;
+}
+declare const ButtonParent: React__default.FC<ButtonParentProps>;
+
+interface PanelParentProps {
+    id?: string;
+    title: string;
+    subtitle?: string;
+    badge?: string;
+    isPinned?: boolean;
+    accentColor?: string;
+    zIndex?: number;
+    width?: number;
+    height?: number;
+    position?: {
+        x: number;
+        y: number;
+    };
+    children: React__default.ReactNode;
+    headerActions?: React__default.ReactNode;
+    className?: string;
+    onTogglePin?: () => void;
+    onClose?: () => void;
+    onMouseDown?: (e: React__default.MouseEvent) => void;
+}
+declare const PanelParent: React__default.FC<PanelParentProps>;
+
+interface SliderInputProps {
+    id?: string;
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    unit?: string;
+    onChange: (val: number) => void;
+    className?: string;
+    disabled?: boolean;
+}
+declare const SliderInput: React__default.FC<SliderInputProps>;
+interface TextInputProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+}
+declare const TextInput: React__default.FC<TextInputProps>;
+interface SelectInputProps extends React__default.SelectHTMLAttributes<HTMLSelectElement> {
+    label?: string;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+declare const SelectInput: React__default.FC<SelectInputProps>;
+interface ToggleInputProps {
+    id?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label: string;
+    disabled?: boolean;
+}
+declare const ToggleInput: React__default.FC<ToggleInputProps>;
+
+interface TileParentProps {
+    id: string;
+    icon?: React__default.ReactNode;
+    accentColor?: string;
+    badge?: string;
+    badgeColor?: string;
+    title?: string;
+    description?: string;
+    primaryActionText?: string;
+    secondaryActionText?: string;
+    isSelected?: boolean;
+    isPlaying?: boolean;
+    onClick?: (e: React__default.MouseEvent) => void;
+    onDoubleClick?: (e: React__default.MouseEvent) => void;
+    children?: React__default.ReactNode;
+    hideDecorations?: boolean;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare const TileParent: React__default.FC<TileParentProps>;
+
+interface BadgeProps {
+    id?: string;
+    label: string;
+    variant?: 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'info';
+    size?: 'xs' | 'sm' | 'md';
+    className?: string;
+}
+declare const Badge: React__default.FC<BadgeProps>;
+interface TelemetryPillProps {
+    id?: string;
+    label: string;
+    value: string | number;
+    unit?: string;
+    accent?: boolean;
+}
+declare const TelemetryPill: React__default.FC<TelemetryPillProps>;
+interface StatusDotProps {
+    id?: string;
+    active?: boolean;
+    color?: string;
+    pulse?: boolean;
+}
+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 };

package/packages/ui/dist/hierarchy/index.js

@@ -0,0 +1,36 @@
+import {
+  Badge,
+  ButtonParent,
+  PanelParent,
+  SelectInput,
+  SliderInput,
+  StatusDot,
+  TelemetryPill,
+  TextInput,
+  TileParent,
+  ToggleInput,
+  UIElementBase,
+  UIModel,
+  registerPaletteResolver
+} from "../chunk-OHISLM3Z.js";
+import "../chunk-ZQK5I5ZL.js";
+import "../chunk-XXIH2HWI.js";
+import "../chunk-5ZMXFCD4.js";
+import "../chunk-C3L53YN4.js";
+import "../chunk-62ITRDJX.js";
+import "../chunk-A2CDQISJ.js";
+export {
+  Badge,
+  ButtonParent,
+  PanelParent,
+  SelectInput,
+  SliderInput,
+  StatusDot,
+  TelemetryPill,
+  TextInput,
+  TileParent,
+  ToggleInput,
+  UIElementBase,
+  UIModel,
+  registerPaletteResolver
+};