@hai3/react 0.4.0-alpha.0 → 0.4.0-alpha.2

package/commands/hai3-new-component.md

@@ -2,75 +2,47 @@
 # hai3:new-component - Add New UI Component
 
 ## AI WORKFLOW (REQUIRED)
-1) Check if @hai3/uikit has equivalent component first.
+1) Check for existing equivalent in project (e.g. components/ui/) and configured UI library first.
 2) Gather requirements from user.
-3) Determine type: screenset composite (default) | screenset base (rare).
-4) Create OpenSpec proposal for approval.
-5) After approval, apply implementation.
+3) Implement.
 
-## CHECK GLOBAL UIKIT FIRST
-- REQUIRED: Before creating screenset component, verify @hai3/uikit lacks equivalent.
-- REQUIRED: Import from @hai3/uikit if component exists there.
+## CHECK EXISTING COMPONENTS FIRST
+- REQUIRED: Read `hai3.config.json` to find the `uikit` value.
+- If uikit is a third-party package (not `shadcn` or `none`): read its exports from `node_modules/<package>/` to check for existing components.
+- REQUIRED: Before creating a new component, scan the project AND the configured UI library for existing equivalents.
+- REQUIRED: Reuse existing components if equivalent exists.
 
 ## GATHER REQUIREMENTS
 Ask user for:
 - Component name (e.g., "DataTable", "ColorPicker").
-- Component type: screenset composite (default) | screenset base (rare).
 - Component description and props.
-- If screenset base: justification why composite is insufficient.
 
 ## IF SCREENSET COMPONENT
 
 ### STEP 0: Determine Subfolder
-- uikit/composite/: Screenset-specific composites (theme tokens only).
-- uikit/base/: Rare primitives needing inline styles (needs strong justification).
+- components/ui/: Base UI primitives (shadcn components or custom).
+- screens/{screen}/components/: Screen-specific components.
+- components/: Shared composites used across screens.
 
-### STEP 1: Create OpenSpec Proposal
-Create openspec/changes/add-{screenset}-{component}/ with:
+### STEP 1: Implementation
 
-#### proposal.md
-- Summary: Add new screenset-specific component to {screenset}.
-- Details: Screenset, component name, placement (base/composite), description, props.
-- Justification (if base/): Why global uikit insufficient, why composite insufficient.
-- Implementation: HAI3 patterns (no Redux, no business logic).
-
-#### tasks.md
-- Create component file in uikit/{base|composite}/.
-- Implement props interface.
-- Add theme token styling (or inline for base/).
-- Export from local index if needed.
-- Validate: npm run arch:check.
-- Test in UI.
-
-### STEP 2: Wait for Approval
-Tell user: "Review proposal at openspec/changes/add-{screenset}-{component}/."
-Tell user: "Run /openspec:apply add-{screenset}-{component} to implement."
-
-### STEP 3: Apply Implementation (after approval)
-When user runs /openspec:apply:
-
-#### 3.1 Create Component
-File: src/screensets/{screenset}/uikit/{base|composite}/{ComponentName}.tsx
-- composite/: Use theme tokens only (no inline styles).
-- base/: May use inline styles (rare, needs justification).
-- Must be reusable within the screenset.
-- NO @hai3/uicore imports (except types).
+#### 1.1 Create Component
+File: src/components/ui/{ComponentName}.tsx (base primitives)
+  or: src/screens/{screen}/components/{ComponentName}.tsx (screen-specific)
+  or: src/components/{ComponentName}.tsx (shared composites)
+- Must be reusable within the MFE.
 - NO Redux or state management.
 - Accept value/onChange pattern for state.
 
-#### 3.2 Export
+#### 1.2 Export
 Export from local index if needed.
 
-#### 3.3 Validation
+#### 1.3 Validation
 Run: npm run arch:check && npm run dev
 Test component in UI.
 
-#### 3.4 Mark Tasks Complete
-Update tasks.md to mark all completed tasks.
-
 ## RULES
-- REQUIRED: Check @hai3/uikit first; screenset uikit only if missing.
-- REQUIRED: Screenset base components need strong justification.
+- REQUIRED: Check existing project UI components first; create new only if missing.
 - FORBIDDEN: Redux, business logic, side effects in components.
-- FORBIDDEN: Inline styles outside uikit/base/.
+- FORBIDDEN: Inline styles outside components/ui/.
 - REQUIRED: Accept value/onChange pattern for state.

package/commands/hai3-new-mfe.md

@@ -76,9 +76,8 @@ class Lifecycle extends ThemeAwareReactLifecycle {
     const div = document.createElement('div');
     shadowRoot.appendChild(div);
 
-    // Initialize Tailwind/UIKit styles
     const style = document.createElement('style');
-    style.textContent = tailwindStyles; // Import from @hai3/uikit
+    style.textContent = tailwindStyles;
     shadowRoot.appendChild(style);
 
     // Render component
@@ -151,7 +150,7 @@ npm run dev:all
 - Set `preview` script with `--port NNNN` for port auto-discovery
 - Use mock data with useState for UI-only MFEs
 - Keep MFE logic isolated and simple
-- Use @hai3/uikit components
+- Use local components (e.g. components/ui/)
 - Run `npm run generate:mfe-manifests` after creating the MFE
 
 ❌ **DON'T:**

package/commands/hai3-new-screen.md

@@ -1,15 +1,10 @@
 <!-- @standalone -->
 # hai3:new-screen - Add New Screen
 
-## PREREQUISITES (CRITICAL - STOP IF FAILED)
-FORBIDDEN: Proceeding without proposal.
-FORBIDDEN: Creating screen manually without OpenSpec workflow.
-
 ## AI WORKFLOW (REQUIRED)
 1) Read .ai/targets/SCREENSETS.md and .ai/targets/EVENTS.md before starting.
 2) Gather requirements from user (including UI sections).
-3) Create OpenSpec proposal via `.claude/commands/openspec-proposal.md` (REQUIRED).
-4) After approval, implement via `.claude/commands/openspec-apply.md` (REQUIRED).
+3) Implement.
 
 ## GATHER REQUIREMENTS
 Ask user for:
@@ -18,53 +13,7 @@ Ask user for:
 - UI sections (e.g., "header, form, data table").
 - Add to menu? (Y/N)
 
-## STEP 1: Create OpenSpec Proposal (REQUIRED)
-Execute openspec:proposal command (see `.claude/commands/openspec-proposal.md`).
-Proposal name: `add-{screenset}-{screen}`
-
-### proposal.md content
-```
-# Proposal: Add {ScreenName} Screen
-
-## Summary
-Add new screen "{screenName}" to {screenset} screenset.
-
-## Details
-- Screenset: {screenset}
-- Screen name: {screenName}
-- Add to menu: {Y/N}
-
-## Component Plan
-- REQUIRED: Use @hai3/uikit components first; local uikit only if missing.
-- uikit/base/: rare primitives (inline styles allowed, needs justification)
-- uikit/composite/: screenset composites (theme tokens only)
-- screens/{screen}/components/: screen-specific components
-
-## Data Flow
-- Uses existing screenset events/slices per EVENTS.md
-- Screen dispatches actions, never direct slice updates
-```
-
-### tasks.md minimum required tasks
-NOTE: Proposal may include additional tasks, but MUST include these:
-```
-- [ ] Add screen ID to ids.ts
-- [ ] Create components per Component Plan (BEFORE screen file)
-- [ ] Create screen (orchestrates components, follows EVENTS.md data flow)
-- [ ] Add i18n files for all languages
-- [ ] Add to menu (if requested)
-- [ ] Validate: `npm run type-check && npm run lint`
-- [ ] Test via Chrome DevTools MCP
-```
-
-## STEP 2: Wait for Approval
-Tell user: "Review proposal at `openspec/changes/add-{screenset}-{screen}/`."
-Tell user: "Execute openspec:apply command to implement."
-
-## STEP 3: Implementation (via openspec:apply)
-BEFORE executing openspec:apply, verify tasks.md contains all minimum required tasks above.
-Execute openspec:apply command (see `.claude/commands/openspec-apply.md`).
-Follow tasks.md strictly:
+## STEP 1: Implementation
 1) Add screen ID to ids.ts.
 2) Create components BEFORE screen file per Component Plan.
 3) Create screen following data flow rules from .ai/targets/EVENTS.md:
@@ -79,3 +28,12 @@ Follow tasks.md strictly:
    - Test UI interactions and data flow
    - Verify translations load correctly
    - STOP if MCP connection fails
+
+## COMPONENT PLAN
+- REQUIRED: Use local components (e.g. `components/ui/`) — no shared UI kit package.
+- components/ui/: base UI primitives (shadcn components or custom)
+- screens/{screen}/components/: screen-specific components
+
+## DATA FLOW
+- Uses existing screenset events/slices per EVENTS.md
+- Screen dispatches actions, never direct slice updates

package/commands/hai3-new-screenset.md

@@ -4,15 +4,13 @@
 ## PREREQUISITES (CRITICAL - STOP IF FAILED)
 Run `hai3 --version`.
 STOP: If fails, tell user to install.
-FORBIDDEN: Proceeding without CLI tools.
 FORBIDDEN: Creating screenset manually or by copying peers.
 
 ## AI WORKFLOW (REQUIRED)
 1) Check prerequisites above.
 2) Read .ai/targets/SCREENSETS.md and .ai/targets/EVENTS.md before starting.
 3) Gather requirements from user (including UI sections).
-4) Create OpenSpec proposal via `.claude/commands/openspec-proposal.md` (REQUIRED).
-5) After approval, implement via `.claude/commands/openspec-apply.md` (REQUIRED).
+4) Implement.
 
 ## GATHER REQUIREMENTS
 Ask user for:
@@ -21,54 +19,7 @@ Ask user for:
 - Initial screens.
 - UI sections per screen (e.g., "stats cards, charts, activity feed").
 
-## STEP 1: Create OpenSpec Proposal (REQUIRED)
-Execute openspec:proposal command (see `.claude/commands/openspec-proposal.md`).
-Proposal name: `add-{screenset-name}`
-
-### proposal.md content
-```
-# Proposal: Add {ScreensetName} Screenset
-
-## Summary
-Add new {category} screenset "{screensetName}" with {screens} screen(s).
-
-## Details
-- Name: {screensetName}
-- Category: {category}
-- Initial screens: {screens}
-
-## Component Plan
-- REQUIRED: Use @hai3/uikit components first; local uikit only if missing.
-- uikit/base/: rare primitives (inline styles allowed, needs justification)
-- uikit/composite/: screenset composites (theme tokens only)
-- components/: multi-screen components
-- screens/{screen}/components/: screen-specific components
-
-## Data Flow
-- Events: {domain events per EVENTS.md}
-- State: slices/, events/, effects/, actions/
-- API: api/{Name}ApiService.ts with mocks
-```
-
-### tasks.md minimum required tasks
-NOTE: Proposal may include additional tasks, but MUST include these:
-```
-- [ ] Create screenset: `hai3 screenset create {name} --category={category}`
-- [ ] Create components per Component Plan (BEFORE screen file)
-- [ ] Implement data flow per EVENTS.md (actions emit events, effects update slices)
-- [ ] Add API service with mocks
-- [ ] Validate: `npm run type-check && npm run arch:check && npm run lint`
-- [ ] Test via Chrome DevTools MCP
-```
-
-## STEP 2: Wait for Approval
-Tell user: "Review proposal at `openspec/changes/add-{screenset-name}/`."
-Tell user: "Execute openspec:apply command to implement."
-
-## STEP 3: Implementation (via openspec:apply)
-BEFORE executing openspec:apply, verify tasks.md contains all minimum required tasks above.
-Execute openspec:apply command (see `.claude/commands/openspec-apply.md`).
-Follow tasks.md strictly:
+## STEP 1: Implementation
 1) Create screenset via `hai3 screenset create` (REQUIRED).
 2) Create components BEFORE screen file per Component Plan.
 3) Implement data flow per .ai/targets/EVENTS.md:
@@ -83,3 +34,14 @@ Follow tasks.md strictly:
    - Test user interactions trigger correct events
    - Verify state updates via Redux DevTools
    - STOP if MCP connection fails
+
+## COMPONENT PLAN
+- REQUIRED: Use local components (e.g. `components/ui/`) — no shared UI kit package.
+- components/ui/: base UI primitives (shadcn components or custom)
+- components/: multi-screen shared components
+- screens/{screen}/components/: screen-specific components
+
+## DATA FLOW
+- Events: {domain events per EVENTS.md}
+- State: slices/, events/, effects/, actions/
+- API: api/{Name}ApiService.ts with mocks

package/dist/index.cjs

@@ -32,6 +32,7 @@ __export(src_exports, {
   HAI3_ACTION_LOAD_EXT: () => import_framework13.HAI3_ACTION_LOAD_EXT,
   HAI3_ACTION_MOUNT_EXT: () => import_framework13.HAI3_ACTION_MOUNT_EXT,
   HAI3_ACTION_UNMOUNT_EXT: () => import_framework13.HAI3_ACTION_UNMOUNT_EXT,
+  HAI3_MFE_ENTRY_MF: () => import_framework12.HAI3_MFE_ENTRY_MF,
   HAI3_OVERLAY_DOMAIN: () => import_framework11.HAI3_OVERLAY_DOMAIN,
   HAI3_POPUP_DOMAIN: () => import_framework11.HAI3_POPUP_DOMAIN,
   HAI3_SCREEN_DOMAIN: () => import_framework11.HAI3_SCREEN_DOMAIN,
@@ -80,13 +81,14 @@ __export(src_exports, {
   createHAI3: () => import_framework6.createHAI3,
   createHAI3App: () => import_framework6.createHAI3App,
   createI18nRegistry: () => import_framework6.createI18nRegistry,
-  createShadowRoot: () => import_framework17.createShadowRoot,
+  createShadowRoot: () => import_framework18.createShadowRoot,
   createSlice: () => import_framework6.createSlice,
   createStore: () => import_framework6.createStore,
   createThemeRegistry: () => import_framework6.createThemeRegistry,
   effects: () => import_framework6.effects,
   eventBus: () => eventBus,
-  extractGtsPackage: () => import_framework17.extractGtsPackage,
+  extensionScreenSchema: () => import_framework17.extensionScreenSchema,
+  extractGtsPackage: () => import_framework18.extractGtsPackage,
   footerActions: () => import_framework6.footerActions,
   footerSlice: () => import_framework6.footerSlice,
   getLanguageMetadata: () => import_framework6.getLanguageMetadata,
@@ -100,11 +102,12 @@ __export(src_exports, {
   i18nRegistry: () => import_framework6.i18nRegistry,
   initMockEffects: () => import_framework6.initMockEffects,
   initTenantEffects: () => import_framework6.initTenantEffects,
-  injectCssVariables: () => import_framework17.injectCssVariables,
+  injectCssVariables: () => import_framework18.injectCssVariables,
   isMockPlugin: () => import_framework6.isMockPlugin,
   isRestShortCircuit: () => import_framework6.isRestShortCircuit,
   isShortCircuit: () => import_framework6.isShortCircuit,
   isSseShortCircuit: () => import_framework6.isSseShortCircuit,
+  languageSchema: () => import_framework17.languageSchema,
   layout: () => import_framework6.layout,
   layoutDomainReducers: () => import_framework6.layoutDomainReducers,
   layoutReducer: () => import_framework6.layoutReducer,
@@ -164,6 +167,7 @@ __export(src_exports, {
   tenantActions: () => import_framework6.tenantActions,
   tenantReducer: () => import_framework6.tenantReducer,
   tenantSlice: () => import_framework6.tenantSlice,
+  themeSchema: () => import_framework17.themeSchema,
   themes: () => import_framework6.themes,
   toggleMenu: () => import_framework6.toggleMenu,
   toggleMockMode: () => import_framework6.toggleMockMode,
@@ -723,7 +727,8 @@ var import_framework15 = require("@hai3/framework");
 var import_framework16 = require("@hai3/framework");
 var import_framework17 = require("@hai3/framework");
 var import_framework18 = require("@hai3/framework");
-var eventBus = import_framework18.eventBus;
+var import_framework19 = require("@hai3/framework");
+var eventBus = import_framework19.eventBus;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ACCOUNTS_DOMAIN,
@@ -738,6 +743,7 @@ var eventBus = import_framework18.eventBus;
   HAI3_ACTION_LOAD_EXT,
   HAI3_ACTION_MOUNT_EXT,
   HAI3_ACTION_UNMOUNT_EXT,
+  HAI3_MFE_ENTRY_MF,
   HAI3_OVERLAY_DOMAIN,
   HAI3_POPUP_DOMAIN,
   HAI3_SCREEN_DOMAIN,
@@ -792,6 +798,7 @@ var eventBus = import_framework18.eventBus;
   createThemeRegistry,
   effects,
   eventBus,
+  extensionScreenSchema,
   extractGtsPackage,
   footerActions,
   footerSlice,
@@ -811,6 +818,7 @@ var eventBus = import_framework18.eventBus;
   isRestShortCircuit,
   isShortCircuit,
   isSseShortCircuit,
+  languageSchema,
   layout,
   layoutDomainReducers,
   layoutReducer,
@@ -870,6 +878,7 @@ var eventBus = import_framework18.eventBus;
   tenantActions,
   tenantReducer,
   tenantSlice,
+  themeSchema,
   themes,
   toggleMenu,
   toggleMockMode,