aeon-ui-engine 1.0.3 → 1.2.0

package/packages/primitives/src/machines/content-region.ts

@@ -0,0 +1,107 @@
+import { assign, setup } from 'xstate'
+
+/** Totality for page / list / hub bodies — every state has a slot. */
+export const CONTENT_REGION_STATES = [
+  'idle',
+  'pending',
+  'empty',
+  'error',
+  'ready',
+  'loadingMore',
+  'success',
+] as const
+
+export type ContentRegionState = (typeof CONTENT_REGION_STATES)[number]
+
+export interface ContentRegionContext {
+  error: string | null
+}
+
+export type ContentRegionEvent =
+  | { type: 'LOAD' }
+  | { type: 'RESOLVE'; empty?: boolean }
+  | { type: 'REJECT'; error: string }
+  | { type: 'RETRY' }
+  | { type: 'LOAD_MORE' }
+  | { type: 'MORE_DONE'; empty?: boolean }
+  | { type: 'SUCCEED' }
+  | { type: 'RESET' }
+
+/**
+ * Content region — status-slotted body under app chrome.
+ * Makes async / list / hub totality trivial: pending | empty | error | ready | loadingMore | success.
+ * Reference: items-market EmptyPlaceholder + loading skeletons + InfiniteScrollSentinel.
+ */
+export const contentRegionMachine = setup({
+  types: {
+    context: {} as ContentRegionContext,
+    events: {} as ContentRegionEvent,
+    input: {} as Partial<ContentRegionContext>,
+  },
+  actions: {
+    clearError: assign({ error: null }),
+    setError: assign({
+      error: ({ event }) => (event.type === 'REJECT' ? event.error : null),
+    }),
+  },
+}).createMachine({
+  id: 'contentRegion',
+  context: ({ input }) => ({
+    error: input?.error ?? null,
+  }),
+  initial: 'idle',
+  states: {
+    idle: {
+      on: {
+        LOAD: { target: 'pending', actions: 'clearError' },
+        RESET: { actions: 'clearError' },
+      },
+    },
+    pending: {
+      on: {
+        RESOLVE: [
+          { target: 'empty', guard: ({ event }) => Boolean(event.empty) },
+          { target: 'ready' },
+        ],
+        REJECT: { target: 'error', actions: 'setError' },
+      },
+    },
+    empty: {
+      on: {
+        LOAD: { target: 'pending', actions: 'clearError' },
+        RETRY: { target: 'pending', actions: 'clearError' },
+        RESET: { target: 'idle', actions: 'clearError' },
+      },
+    },
+    error: {
+      on: {
+        RETRY: { target: 'pending', actions: 'clearError' },
+        LOAD: { target: 'pending', actions: 'clearError' },
+        RESET: { target: 'idle', actions: 'clearError' },
+      },
+    },
+    ready: {
+      on: {
+        LOAD: { target: 'pending', actions: 'clearError' },
+        LOAD_MORE: 'loadingMore',
+        SUCCEED: 'success',
+        RESET: { target: 'idle', actions: 'clearError' },
+      },
+    },
+    loadingMore: {
+      on: {
+        MORE_DONE: [
+          { target: 'ready', guard: ({ event }) => !event.empty },
+          { target: 'ready' },
+        ],
+        REJECT: { target: 'error', actions: 'setError' },
+      },
+    },
+    success: {
+      on: {
+        LOAD: { target: 'pending', actions: 'clearError' },
+        RESET: { target: 'idle', actions: 'clearError' },
+      },
+    },
+  },
+})

package/packages/primitives/src/machines/panel.ts

@@ -0,0 +1,71 @@
+import { assign, setup } from 'xstate'
+
+export interface PanelContext {
+  expanded: boolean
+}
+
+export type PanelEvent =
+  | { type: 'EXPAND' }
+  | { type: 'COLLAPSE' }
+  | { type: 'TOGGLE' }
+  | { type: 'SET_EXPANDED'; expanded: boolean }
+
+/**
+ * Panel layout region — expanded | collapsed.
+ * Collapsed hides content and exposes a vertical rail label.
+ */
+export const panelMachine = setup({
+  types: {
+    context: {} as PanelContext,
+    events: {} as PanelEvent,
+    input: {} as Partial<PanelContext>,
+  },
+  actions: {
+    markExpanded: assign({ expanded: true }),
+    markCollapsed: assign({ expanded: false }),
+    toggleExpanded: assign({ expanded: ({ context }) => !context.expanded }),
+    setExpanded: assign({
+      expanded: ({ event }) => (event.type === 'SET_EXPANDED' ? event.expanded : true),
+    }),
+  },
+}).createMachine({
+  id: 'panel',
+  context: ({ input }) => ({
+    expanded: input.expanded ?? true,
+  }),
+  initial: 'resolve',
+  states: {
+    resolve: {
+      always: [
+        { target: 'collapsed', guard: ({ context }) => !context.expanded },
+        { target: 'expanded' },
+      ],
+    },
+    expanded: {
+      on: {
+        COLLAPSE: { target: 'collapsed', actions: 'markCollapsed' },
+        TOGGLE: { target: 'collapsed', actions: 'markCollapsed' },
+        SET_EXPANDED: [
+          {
+            target: 'collapsed',
+            actions: 'markCollapsed',
+            guard: ({ event }) => !event.expanded,
+          },
+        ],
+      },
+    },
+    collapsed: {
+      on: {
+        EXPAND: { target: 'expanded', actions: 'markExpanded' },
+        TOGGLE: { target: 'expanded', actions: 'markExpanded' },
+        SET_EXPANDED: [
+          {
+            target: 'expanded',
+            actions: 'markExpanded',
+            guard: ({ event }) => event.expanded,
+          },
+        ],
+      },
+    },
+  },
+})

package/packages/primitives/src/machines/sticky-bar.ts

@@ -0,0 +1,89 @@
+import { assign, setup } from 'xstate'
+
+export const STICKY_BAR_STATES = ['floating', 'docked', 'collapsed', 'hidden'] as const
+export type StickyBarState = (typeof STICKY_BAR_STATES)[number]
+
+export interface StickyBarContext {
+  /** CSS inset for stacked sticky chrome (e.g. under a fixed site header). */
+  offsetPx: number
+  /** Resolved once on start from input.initial. */
+  initial: StickyBarState
+}
+
+export type StickyBarEvent =
+  | { type: 'DOCK' }
+  | { type: 'FLOAT' }
+  | { type: 'COLLAPSE' }
+  | { type: 'EXPAND' }
+  | { type: 'HIDE' }
+  | { type: 'SHOW' }
+  | { type: 'SET_OFFSET'; offsetPx: number }
+
+/**
+ * Sticky / fixed chrome band — site header, subnav, reveal trays.
+ * Reference: items-market NavigationBar shrink, MarketNavbar sticky stack, BalanceStickyTray.
+ *
+ * States: floating | docked | collapsed | hidden
+ */
+export const stickyBarMachine = setup({
+  types: {
+    context: {} as StickyBarContext,
+    events: {} as StickyBarEvent,
+    input: {} as Partial<StickyBarContext>,
+  },
+  actions: {
+    setOffset: assign({
+      offsetPx: ({ event }) => (event.type === 'SET_OFFSET' ? event.offsetPx : 0),
+    }),
+  },
+}).createMachine({
+  id: 'stickyBar',
+  context: ({ input }) => ({
+    offsetPx: input?.offsetPx ?? 0,
+    initial: input?.initial ?? 'floating',
+  }),
+  initial: 'resolve',
+  states: {
+    resolve: {
+      always: [
+        { target: 'docked', guard: ({ context }) => context.initial === 'docked' },
+        { target: 'collapsed', guard: ({ context }) => context.initial === 'collapsed' },
+        { target: 'hidden', guard: ({ context }) => context.initial === 'hidden' },
+        { target: 'floating' },
+      ],
+    },
+    floating: {
+      on: {
+        DOCK: 'docked',
+        COLLAPSE: 'collapsed',
+        HIDE: 'hidden',
+        SET_OFFSET: { actions: 'setOffset' },
+      },
+    },
+    docked: {
+      on: {
+        FLOAT: 'floating',
+        COLLAPSE: 'collapsed',
+        HIDE: 'hidden',
+        SET_OFFSET: { actions: 'setOffset' },
+      },
+    },
+    collapsed: {
+      on: {
+        EXPAND: 'floating',
+        DOCK: 'docked',
+        FLOAT: 'floating',
+        HIDE: 'hidden',
+        SET_OFFSET: { actions: 'setOffset' },
+      },
+    },
+    hidden: {
+      on: {
+        SHOW: 'floating',
+        DOCK: 'docked',
+        FLOAT: 'floating',
+        SET_OFFSET: { actions: 'setOffset' },
+      },
+    },
+  },
+})