@syntrologie/runtime-sdk 1.0.0-canary.1 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syntrologie/runtime-sdk",
-  "version": "1.0.0-canary.1",
+  "version": "1.0.0",
   "description": "Syntrologie Runtime SDK for web experimentation and analytics",
   "license": "Proprietary",
   "private": false,
@@ -54,12 +54,12 @@
     "prepublishOnly": "npm run clean && npm run build"
   },
   "dependencies": {
-    "@floating-ui/dom": "~1.6.13",
+    "@floating-ui/dom": "^1.7.5",
     "@growthbook/growthbook": "~1.6.2",
     "@growthbook/growthbook-react": "~1.6.2",
-    "@syntrologie/adapt-content": "1.0.0-canary.1",
-    "@syntrologie/adapt-navigation": "1.0.0-canary.1",
-    "@syntrologie/adapt-overlays": "1.0.0-canary.1",
+    "@syntro/design-system": "*",
+    "@syntrologie/adapt-content": "1.0.0",
+    "@syntrologie/adapt-overlays": "1.0.0",
     "posthog-js": "~1.302.2",
     "zod": "~3.25.0"
   },
@@ -68,17 +68,21 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@types/node": "^25.0.9",
-    "@types/react": "~18.3.0",
-    "@types/react-dom": "~18.3.0",
-    "esbuild": "~0.25.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "typescript": "~5.7.0",
-    "vitest": "^4.0.18",
-    "semantic-release": "~25.0.3",
-    "@semantic-release/npm": "~13.1.3",
     "@semantic-release/exec": "~7.1.0",
-    "@semantic-release/github": "~12.0.3"
+    "@semantic-release/github": "~12.0.3",
+    "@semantic-release/npm": "~13.1.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "esbuild": "^0.27.2",
+    "jsdom": "^25.0.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "semantic-release": "~25.0.3",
+    "typescript": "~5.7.0",
+    "vitest": "^4.0.18"
   }
 }

package/dist/apps/adaptive-chatbot/index.js

@@ -1,7 +0,0 @@
-import{useRef as R,useEffect as M}from"react";import{useState as g,useCallback as f,useRef as m}from"react";import{jsx as A,jsxs as I}from"react/jsx-runtime";var n={mount(t,r){let{config:s,runtime:i,tileId:a="chatbot-widget"}=r||{};return!s||!i?(t.innerHTML='<div style="padding: 16px; color: #94a3b8;">Chat widget requires config and runtime.</div>',()=>{t.innerHTML=""}):(t.innerHTML=`
-      <div style="padding: 16px; font-family: system-ui; color: #e2e8f0;">
-        <p style="margin: 0 0 8px; color: #94a3b8;">${s.greeting||"Hi! How can I help?"}</p>
-        <p style="margin: 0; font-size: 12px; color: #64748b;">Chat widget mounted. Awaiting React renderer.</p>
-      </div>
-    `,()=>{t.innerHTML=""})}};var e={id:"adaptive-chatbot",version:"1.0.0",name:"Chat Assistant",description:"AI chat assistant with action execution capabilities",executors:[],widgets:[{id:"adaptive-chatbot:assistant",component:n,metadata:{name:"Chat Assistant",description:"AI-powered chat assistant that can execute DOM actions",icon:"\u{1F4AC}"}}]};var o={id:"adaptive-chatbot",version:e.version,name:e.name,description:e.description,runtime:{actions:[],widgets:e.widgets},metadata:{isBuiltIn:!1}};if(typeof window<"u"){let t=window.__SYNOS_APP_REGISTRY__;t&&typeof t.register=="function"&&t.register(o)}var T=o;export{T as default,o as manifest};
-//# sourceMappingURL=index.js.map

package/dist/apps/adaptive-chatbot/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../adaptives/adaptive-chatbot/src/ChatAssistant.tsx", "../../../../adaptives/adaptive-chatbot/src/useChat.ts", "../../../../adaptives/adaptive-chatbot/src/runtime.ts", "../../../../adaptives/adaptive-chatbot/src/cdn.ts"],
-  "sourcesContent": ["/**\n * Adaptive Chatbot - ChatAssistant Component\n *\n * Main React component for the AI chat assistant widget.\n * Renders a message list with auto-scroll, loading indicator, and input form.\n */\n\nimport React, { useRef, useEffect } from 'react';\nimport { useChat } from './useChat';\nimport type { ChatMessage, ChatbotWidgetRuntime, ChatbotConfig } from './types';\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  container: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    height: '100%',\n    fontFamily: 'system-ui, -apple-system, sans-serif',\n    fontSize: '14px',\n  },\n  messageList: {\n    flex: 1,\n    overflowY: 'auto' as const,\n    padding: '12px',\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: '8px',\n  },\n  messageBubble: {\n    maxWidth: '85%',\n    padding: '8px 12px',\n    borderRadius: '12px',\n    lineHeight: 1.5,\n    wordBreak: 'break-word' as const,\n  },\n  userMessage: {\n    alignSelf: 'flex-end' as const,\n    backgroundColor: '#6366f1',\n    color: '#ffffff',\n    borderBottomRightRadius: '4px',\n  },\n  assistantMessage: {\n    alignSelf: 'flex-start' as const,\n    backgroundColor: 'rgba(255, 255, 255, 0.08)',\n    color: '#e2e8f0',\n    borderBottomLeftRadius: '4px',\n  },\n  loadingDots: {\n    alignSelf: 'flex-start' as const,\n    padding: '8px 16px',\n    backgroundColor: 'rgba(255, 255, 255, 0.05)',\n    borderRadius: '12px',\n    color: '#94a3b8',\n    fontSize: '13px',\n  },\n  errorBanner: {\n    padding: '8px 12px',\n    backgroundColor: 'rgba(239, 68, 68, 0.1)',\n    color: '#ef4444',\n    fontSize: '13px',\n    borderRadius: '8px',\n    margin: '0 12px',\n  },\n  inputForm: {\n    display: 'flex',\n    gap: '8px',\n    padding: '12px',\n    borderTop: '1px solid rgba(255, 255, 255, 0.06)',\n  },\n  input: {\n    flex: 1,\n    padding: '8px 12px',\n    borderRadius: '8px',\n    border: '1px solid rgba(255, 255, 255, 0.1)',\n    backgroundColor: 'rgba(0, 0, 0, 0.2)',\n    color: '#f1f5f9',\n    fontSize: '14px',\n    outline: 'none',\n    fontFamily: 'inherit',\n  },\n  sendButton: {\n    padding: '8px 16px',\n    borderRadius: '8px',\n    border: 'none',\n    backgroundColor: '#6366f1',\n    color: '#ffffff',\n    fontWeight: 600,\n    fontSize: '13px',\n    cursor: 'pointer',\n    whiteSpace: 'nowrap' as const,\n  },\n  sendButtonDisabled: {\n    opacity: 0.5,\n    cursor: 'not-allowed' as const,\n  },\n};\n\n// ============================================================================\n// MessageBubble Component\n// ============================================================================\n\nfunction MessageBubble({ message }: { message: ChatMessage }) {\n  const isUser = message.role === 'user';\n  const bubbleStyle = {\n    ...styles.messageBubble,\n    ...(isUser ? styles.userMessage : styles.assistantMessage),\n  };\n\n  return <div style={bubbleStyle}>{message.text}</div>;\n}\n\n// ============================================================================\n// ChatAssistant Component\n// ============================================================================\n\nexport interface ChatAssistantProps {\n  config: ChatbotConfig;\n  runtime: ChatbotWidgetRuntime;\n  tileId: string;\n}\n\nexport function ChatAssistant({ config, runtime, tileId }: ChatAssistantProps) {\n  const {\n    messages,\n    isLoading,\n    error,\n    sendMessage,\n    clearMessages: _clearMessages,\n  } = useChat({\n    backendUrl: config.backendUrl,\n    tileId,\n    runtime,\n    greeting: config.greeting,\n    maxHistory: config.maxHistory,\n    mlflowRunId: config.mlflowRunId,\n  });\n\n  const messageListRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  // Auto-scroll to bottom on new messages\n  useEffect(() => {\n    if (messageListRef.current) {\n      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;\n    }\n  }, [messages, isLoading]);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    const input = inputRef.current;\n    if (!input || !input.value.trim() || isLoading) return;\n\n    const text = input.value;\n    input.value = '';\n    sendMessage(text);\n  };\n\n  return (\n    <div style={styles.container} data-testid=\"chat-assistant\">\n      {/* Message list */}\n      <div ref={messageListRef} style={styles.messageList}>\n        {messages.map((msg) => (\n          <MessageBubble key={msg.id} message={msg} />\n        ))}\n        {isLoading && <div style={styles.loadingDots}>Thinking...</div>}\n      </div>\n\n      {/* Error banner */}\n      {error && <div style={styles.errorBanner}>{error}</div>}\n\n      {/* Input form */}\n      <form onSubmit={handleSubmit} style={styles.inputForm}>\n        <input\n          ref={inputRef}\n          style={styles.input}\n          placeholder=\"Ask anything...\"\n          disabled={isLoading}\n          data-testid=\"chat-input\"\n        />\n        <button\n          type=\"submit\"\n          disabled={isLoading}\n          style={{\n            ...styles.sendButton,\n            ...(isLoading ? styles.sendButtonDisabled : {}),\n          }}\n          data-testid=\"chat-send\"\n        >\n          Send\n        </button>\n      </form>\n    </div>\n  );\n}\n\n// ============================================================================\n// Mountable Widget Interface\n// ============================================================================\n\nexport const ChatAssistantMountableWidget = {\n  mount(container: HTMLElement, mountConfig?: Record<string, unknown>) {\n    const {\n      config,\n      runtime,\n      tileId: _tileId = 'chatbot-widget',\n    } = (mountConfig || {}) as {\n      config?: ChatbotConfig;\n      runtime?: ChatbotWidgetRuntime;\n      tileId?: string;\n    };\n\n    if (!config || !runtime) {\n      container.innerHTML =\n        '<div style=\"padding: 16px; color: #94a3b8;\">Chat widget requires config and runtime.</div>';\n      return () => {\n        container.innerHTML = '';\n      };\n    }\n\n    // Simple HTML fallback \u2014 full React rendering is handled by the runtime\n    container.innerHTML = `\n      <div style=\"padding: 16px; font-family: system-ui; color: #e2e8f0;\">\n        <p style=\"margin: 0 0 8px; color: #94a3b8;\">${config.greeting || 'Hi! How can I help?'}</p>\n        <p style=\"margin: 0; font-size: 12px; color: #64748b;\">Chat widget mounted. Awaiting React renderer.</p>\n      </div>\n    `;\n\n    return () => {\n      container.innerHTML = '';\n    };\n  },\n};\n\nexport default ChatAssistant;\n", "/**\n * Adaptive Chatbot - useChat Hook\n *\n * React hook managing chat message state, API communication,\n * history management, and action execution via the runtime ActionEngine.\n */\n\nimport { useState, useCallback, useRef } from 'react';\nimport { sendMessage } from './apiClient';\nimport { parseActions } from './actionParser';\nimport type { ChatMessage, ChatbotWidgetRuntime, BatchActionHandle } from './types';\n\nexport interface UseChatOptions {\n  backendUrl: string;\n  tileId: string;\n  runtime: ChatbotWidgetRuntime;\n  greeting?: string;\n  maxHistory?: number;\n  mlflowRunId?: string;\n  config?: Record<string, unknown>;\n}\n\nexport interface UseChatReturn {\n  messages: ChatMessage[];\n  isLoading: boolean;\n  error: string | null;\n  sendMessage: (text: string) => Promise<void>;\n  clearMessages: () => void;\n}\n\nlet nextId = 0;\nfunction generateId(): string {\n  return `msg-${Date.now()}-${++nextId}`;\n}\n\nexport function useChat(options: UseChatOptions): UseChatReturn {\n  const { backendUrl, tileId, runtime, greeting, maxHistory = 20, mlflowRunId, config } = options;\n\n  const [messages, setMessages] = useState<ChatMessage[]>(() => {\n    if (greeting) {\n      return [\n        {\n          id: generateId(),\n          role: 'assistant' as const,\n          text: greeting,\n          timestamp: Date.now(),\n        },\n      ];\n    }\n    return [];\n  });\n\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const batchHandleRef = useRef<BatchActionHandle | null>(null);\n\n  const send = useCallback(\n    async (text: string) => {\n      const trimmed = text.trim();\n      if (!trimmed) return;\n\n      setError(null);\n\n      const userMessage: ChatMessage = {\n        id: generateId(),\n        role: 'user',\n        text: trimmed,\n        timestamp: Date.now(),\n      };\n\n      setMessages((prev) => [...prev, userMessage]);\n      setIsLoading(true);\n\n      try {\n        // Build history from current messages + new user message\n        const currentMessages = [...messages, userMessage];\n        const historySlice = currentMessages.slice(-maxHistory).map((m) => ({\n          role: m.role,\n          content: m.text,\n        }));\n\n        const response = await sendMessage(backendUrl, {\n          message: trimmed,\n          history: historySlice,\n          mlflow_run_id: mlflowRunId,\n          current_config: config,\n        });\n\n        // Parse actions from the LLM response\n        const { displayText, actions } = parseActions(response.response);\n\n        const assistantMessage: ChatMessage = {\n          id: generateId(),\n          role: 'assistant',\n          text: displayText,\n          timestamp: Date.now(),\n        };\n\n        setMessages((prev) => [...prev, assistantMessage]);\n\n        // Execute actions if present\n        if (actions.length > 0) {\n          // Revert previous batch\n          if (batchHandleRef.current?.isApplied()) {\n            await batchHandleRef.current.revertAll();\n          }\n\n          batchHandleRef.current = await runtime.actions.applyBatch(actions);\n\n          runtime.events.publish('chatbot.actions_applied', {\n            count: actions.length,\n            kinds: actions.map((a) => a.kind),\n            tileId,\n          });\n        }\n      } catch (err) {\n        const message = err instanceof Error ? err.message : 'An unexpected error occurred';\n        setError(message);\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [backendUrl, messages, maxHistory, mlflowRunId, config, runtime, tileId]\n  );\n\n  const clearMessages = useCallback(() => {\n    setMessages([]);\n    setError(null);\n    // Revert any active actions\n    if (batchHandleRef.current?.isApplied()) {\n      batchHandleRef.current.revertAll();\n      batchHandleRef.current = null;\n    }\n    sessionStorage.removeItem(`syntro:chatbot:history:${tileId}`);\n  }, [tileId]);\n\n  return {\n    messages,\n    isLoading,\n    error,\n    sendMessage: send,\n    clearMessages,\n  };\n}\n", "/**\n * Adaptive Chatbot - Runtime Module\n *\n * Runtime manifest for the AI chat assistant adaptive.\n * This is a widget-based adaptive with no action executors.\n */\n\nimport { ChatAssistantMountableWidget } from './ChatAssistant';\n\n// ============================================================================\n// App Runtime Manifest\n// ============================================================================\n\nexport const runtime = {\n  id: 'adaptive-chatbot',\n  version: '1.0.0',\n  name: 'Chat Assistant',\n  description: 'AI chat assistant with action execution capabilities',\n\n  /** No action executors \u2014 chatbot uses existing action kinds via applyBatch */\n  executors: [],\n\n  /** Widget definitions for the runtime's WidgetRegistry */\n  widgets: [\n    {\n      id: 'adaptive-chatbot:assistant',\n      component: ChatAssistantMountableWidget,\n      metadata: {\n        name: 'Chat Assistant',\n        description: 'AI-powered chat assistant that can execute DOM actions',\n        icon: '\uD83D\uDCAC',\n      },\n    },\n  ],\n};\n\nexport default runtime;\n", "/**\n * CDN Entry Point for Adaptive Chatbot\n *\n * This module is bundled for CDN delivery and self-registers with the global\n * SynOS app registry when loaded dynamically via the AppLoader.\n */\n\nimport { runtime } from './runtime';\n\n/**\n * App manifest for registry registration.\n * Follows the AppManifest interface expected by AppLoader/AppRegistry.\n */\nexport const manifest = {\n  id: 'adaptive-chatbot',\n  version: runtime.version,\n  name: runtime.name,\n  description: runtime.description,\n  runtime: {\n    actions: [],\n    widgets: runtime.widgets,\n  },\n  metadata: {\n    isBuiltIn: false,\n  },\n};\n\n/**\n * Self-register with global registry if available.\n * This happens when loaded via script tag (UMD).\n */\nif (typeof window !== 'undefined') {\n  const globalRegistry = (window as any).__SYNOS_APP_REGISTRY__;\n  if (globalRegistry && typeof globalRegistry.register === 'function') {\n    globalRegistry.register(manifest);\n  }\n}\n\nexport default manifest;\n"],
-  "mappings": "AAOA,OAAgB,UAAAA,EAAQ,aAAAC,MAAiB,QCAzC,OAAS,YAAAC,EAAU,eAAAC,EAAa,UAAAC,MAAc,QDwGrC,cAAAC,EAoDH,QAAAC,MApDG,oBA2FF,IAAMC,EAA+B,CAC1C,MAAMC,EAAwBC,EAAuC,CACnE,GAAM,CACJ,OAAAC,EACA,QAAAC,EACA,OAAQC,EAAU,gBACpB,EAAKH,GAAe,CAAC,EAMrB,MAAI,CAACC,GAAU,CAACC,GACdH,EAAU,UACR,6FACK,IAAM,CACXA,EAAU,UAAY,EACxB,IAIFA,EAAU,UAAY;AAAA;AAAA,sDAE4BE,EAAO,UAAY,qBAAqB;AAAA;AAAA;AAAA,MAKnF,IAAM,CACXF,EAAU,UAAY,EACxB,EACF,CACF,EE7NO,IAAMK,EAAU,CACrB,GAAI,mBACJ,QAAS,QACT,KAAM,iBACN,YAAa,uDAGb,UAAW,CAAC,EAGZ,QAAS,CACP,CACE,GAAI,6BACJ,UAAWC,EACX,SAAU,CACR,KAAM,iBACN,YAAa,yDACb,KAAM,WACR,CACF,CACF,CACF,ECrBO,IAAMC,EAAW,CACtB,GAAI,mBACJ,QAASC,EAAQ,QACjB,KAAMA,EAAQ,KACd,YAAaA,EAAQ,YACrB,QAAS,CACP,QAAS,CAAC,EACV,QAASA,EAAQ,OACnB,EACA,SAAU,CACR,UAAW,EACb,CACF,EAMA,GAAI,OAAO,OAAW,IAAa,CACjC,IAAMC,EAAkB,OAAe,uBACnCA,GAAkB,OAAOA,EAAe,UAAa,YACvDA,EAAe,SAASF,CAAQ,CAEpC,CAEA,IAAOG,EAAQH",
-  "names": ["useRef", "useEffect", "useState", "useCallback", "useRef", "jsx", "jsxs", "ChatAssistantMountableWidget", "container", "mountConfig", "config", "runtime", "_tileId", "runtime", "ChatAssistantMountableWidget", "manifest", "runtime", "globalRegistry", "cdn_default"]
-}

package/dist/apps/faq/index.js

@@ -1,11 +0,0 @@
-import{useEffect as u,useReducer as f,useMemo as g,useCallback as m,useState as x}from"react";import{jsx as b,jsxs as y}from"react/jsx-runtime";var n={mount(e,r){let{runtime:s,instanceId:d="faq-widget",...i}=r||{expandBehavior:"single",searchable:!1,theme:"auto",actions:[]};if(!s){let c=i.actions||[];e.innerHTML=`
-        <div style="font-family: system-ui; max-width: 800px;">
-          ${c.map(o=>`
-            <div style="margin-bottom: 8px; padding: 16px; background: #f9fafb; border-radius: 8px;">
-              <strong>${o.config.question}</strong>
-              <p style="margin-top: 8px; color: #4b5563;">${o.config.answer}</p>
-            </div>
-          `).join("")}
-        </div>
-      `}return()=>{e.innerHTML=""}}};var t={id:"adaptive-faq",version:"1.0.0",name:"FAQ Accordion",description:"Collapsible Q&A accordion with per-item conditional visibility",executors:[],widgets:[{id:"adaptive-faq:accordion",component:n,metadata:{name:"FAQ Accordion",description:"Collapsible Q&A accordion with search",icon:"\u2753"}}]};var a={id:"faq",version:t.version,name:t.name,description:t.description,runtime:{actions:[],widgets:t.widgets},metadata:{isBuiltIn:!1}};if(typeof window<"u"){let e=window.__SYNOS_APP_REGISTRY__;e&&typeof e.register=="function"&&e.register(a)}var A=a;export{A as default,a as manifest};
-//# sourceMappingURL=index.js.map

package/dist/apps/faq/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../adaptives/adaptive-faq/src/FAQWidget.tsx", "../../../../adaptives/adaptive-faq/src/runtime.ts", "../../../../adaptives/adaptive-faq/src/cdn.ts"],
-  "sourcesContent": ["/**\n * Adaptive FAQ - FAQWidget Component\n *\n * React component that renders a collapsible Q&A accordion with per-item\n * conditional visibility based on showWhen decision strategies.\n *\n * Demonstrates the compositional action pattern where child actions\n * (faq:question) serve as configuration data for the parent widget.\n */\n\nimport React, { useEffect, useReducer, useMemo, useCallback, useState } from 'react';\nimport type { FAQWidgetProps, FAQQuestionAction, FAQConfig, FAQWidgetRuntime } from './types';\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst baseStyles = {\n  container: {\n    fontFamily: 'system-ui, -apple-system, sans-serif',\n    maxWidth: '800px',\n    margin: '0 auto',\n  },\n  searchWrapper: {\n    marginBottom: '16px',\n  },\n  searchInput: {\n    width: '100%',\n    padding: '12px 16px',\n    borderRadius: '8px',\n    fontSize: '14px',\n    outline: 'none',\n    transition: 'border-color 0.15s ease',\n  },\n  accordion: {\n    display: 'flex',\n    flexDirection: 'column' as const,\n    gap: '8px',\n  },\n  item: {\n    borderRadius: '8px',\n    overflow: 'hidden',\n    transition: 'box-shadow 0.15s ease',\n  },\n  question: {\n    width: '100%',\n    padding: '16px 20px',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    border: 'none',\n    cursor: 'pointer',\n    fontSize: '15px',\n    fontWeight: 500,\n    textAlign: 'left' as const,\n    transition: 'background-color 0.15s ease',\n  },\n  chevron: {\n    fontSize: '18px',\n    transition: 'transform 0.2s ease',\n  },\n  answer: {\n    padding: '0 20px 16px 20px',\n    fontSize: '14px',\n    lineHeight: 1.6,\n    overflow: 'hidden',\n    transition: 'max-height 0.2s ease, padding 0.2s ease',\n  },\n  category: {\n    display: 'inline-block',\n    fontSize: '11px',\n    fontWeight: 600,\n    textTransform: 'uppercase' as const,\n    letterSpacing: '0.05em',\n    padding: '4px 8px',\n    borderRadius: '4px',\n    marginBottom: '8px',\n  },\n  emptyState: {\n    textAlign: 'center' as const,\n    padding: '48px 24px',\n    fontSize: '14px',\n  },\n  noResults: {\n    textAlign: 'center' as const,\n    padding: '32px 16px',\n    fontSize: '14px',\n  },\n} as const;\n\nconst themeStyles = {\n  light: {\n    container: {\n      backgroundColor: '#ffffff',\n      color: '#111827',\n    },\n    searchInput: {\n      backgroundColor: '#f9fafb',\n      border: '1px solid #e5e7eb',\n      color: '#111827',\n    },\n    item: {\n      backgroundColor: '#f9fafb',\n      border: '1px solid #e5e7eb',\n    },\n    itemExpanded: {\n      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',\n    },\n    question: {\n      backgroundColor: 'transparent',\n      color: '#111827',\n    },\n    questionHover: {\n      backgroundColor: '#f3f4f6',\n    },\n    answer: {\n      color: '#4b5563',\n    },\n    category: {\n      backgroundColor: '#e0e7ff',\n      color: '#4338ca',\n    },\n    emptyState: {\n      color: '#9ca3af',\n    },\n  },\n  dark: {\n    container: {\n      backgroundColor: '#111827',\n      color: '#f9fafb',\n    },\n    searchInput: {\n      backgroundColor: '#1f2937',\n      border: '1px solid #374151',\n      color: '#f9fafb',\n    },\n    item: {\n      backgroundColor: '#1f2937',\n      border: '1px solid #374151',\n    },\n    itemExpanded: {\n      boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',\n    },\n    question: {\n      backgroundColor: 'transparent',\n      color: '#f9fafb',\n    },\n    questionHover: {\n      backgroundColor: '#374151',\n    },\n    answer: {\n      color: '#9ca3af',\n    },\n    category: {\n      backgroundColor: '#312e81',\n      color: '#a5b4fc',\n    },\n    emptyState: {\n      color: '#6b7280',\n    },\n  },\n} as const;\n\n// ============================================================================\n// FAQItem Component\n// ============================================================================\n\ninterface FAQItemProps {\n  item: FAQQuestionAction;\n  isExpanded: boolean;\n  onToggle: () => void;\n  theme: 'light' | 'dark';\n}\n\nfunction FAQItem({ item, isExpanded, onToggle, theme }: FAQItemProps) {\n  const [isHovered, setIsHovered] = useState(false);\n  const colors = themeStyles[theme];\n  const { question, answer, category } = item.config;\n\n  const itemStyle: React.CSSProperties = {\n    ...baseStyles.item,\n    ...colors.item,\n    ...(isExpanded ? colors.itemExpanded : {}),\n  };\n\n  const questionStyle: React.CSSProperties = {\n    ...baseStyles.question,\n    ...colors.question,\n    ...(isHovered ? colors.questionHover : {}),\n  };\n\n  const chevronStyle: React.CSSProperties = {\n    ...baseStyles.chevron,\n    transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',\n  };\n\n  const answerStyle: React.CSSProperties = {\n    ...baseStyles.answer,\n    ...colors.answer,\n    maxHeight: isExpanded ? '500px' : '0',\n    paddingBottom: isExpanded ? '16px' : '0',\n  };\n\n  const categoryStyle: React.CSSProperties = {\n    ...baseStyles.category,\n    ...colors.category,\n  };\n\n  return (\n    <div style={itemStyle}>\n      <button\n        style={questionStyle}\n        onClick={onToggle}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n        aria-expanded={isExpanded}\n      >\n        <span>{question}</span>\n        <span style={chevronStyle}>\u25BC</span>\n      </button>\n      <div style={answerStyle} aria-hidden={!isExpanded}>\n        {category && <span style={categoryStyle}>{category}</span>}\n        <p style={{ margin: 0 }}>{answer}</p>\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// FAQWidget Component\n// ============================================================================\n\n/**\n * FAQWidget - Renders a collapsible Q&A accordion with per-item activation.\n *\n * This component demonstrates the compositional action pattern:\n * - Parent (FAQWidget) receives `config.actions` array\n * - Each action has optional `showWhen` for per-item visibility\n * - Parent evaluates showWhen and filters visible questions\n * - Parent manages expand state and re-rendering on context changes\n */\nexport function FAQWidget({ config, runtime, instanceId }: FAQWidgetProps) {\n  // Force re-render when context changes\n  const [, forceUpdate] = useReducer((x) => x + 1, 0);\n\n  // Track expanded question IDs\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());\n\n  // Search query state\n  const [searchQuery, setSearchQuery] = useState('');\n\n  // Subscribe to context changes for reactive updates\n  useEffect(() => {\n    const unsubscribe = runtime.context.subscribe(() => {\n      forceUpdate();\n    });\n    return unsubscribe;\n  }, [runtime.context]);\n\n  // Filter visible questions based on per-item showWhen\n  const visibleQuestions = useMemo(() => {\n    return config.actions.filter((q) => {\n      // No showWhen = always visible\n      if (!q.showWhen) return true;\n\n      // Evaluate the decision strategy\n      const result = runtime.evaluateSync<boolean>(q.showWhen);\n      return result.value;\n    });\n  }, [config.actions, runtime]);\n\n  // Apply search filter\n  const filteredQuestions = useMemo(() => {\n    if (!config.searchable || !searchQuery.trim()) {\n      return visibleQuestions;\n    }\n\n    const query = searchQuery.toLowerCase();\n    return visibleQuestions.filter(\n      (q) =>\n        q.config.question.toLowerCase().includes(query) ||\n        q.config.answer.toLowerCase().includes(query) ||\n        q.config.category?.toLowerCase().includes(query)\n    );\n  }, [visibleQuestions, searchQuery, config.searchable]);\n\n  // Resolve theme (auto \u2192 detect system preference)\n  const resolvedTheme = useMemo(() => {\n    if (config.theme !== 'auto') return config.theme;\n\n    // Check system preference (SSR-safe)\n    if (typeof window !== 'undefined') {\n      return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    return 'light';\n  }, [config.theme]);\n\n  // Handle question toggle\n  const handleToggle = useCallback(\n    (id: string) => {\n      setExpandedIds((prev) => {\n        const next = new Set(prev);\n\n        if (config.expandBehavior === 'single') {\n          // Single mode: collapse all others\n          if (prev.has(id)) {\n            return new Set();\n          }\n          return new Set([id]);\n        } else {\n          // Multiple mode: toggle this one\n          if (prev.has(id)) {\n            next.delete(id);\n          } else {\n            next.add(id);\n          }\n          return next;\n        }\n      });\n\n      // Publish toggle event for analytics\n      runtime.events.publish('faq:toggled', {\n        instanceId,\n        questionId: id,\n        expanded: !expandedIds.has(id),\n        timestamp: Date.now(),\n      });\n    },\n    [config.expandBehavior, runtime.events, instanceId, expandedIds]\n  );\n\n  // Compute styles\n  const containerStyle: React.CSSProperties = {\n    ...baseStyles.container,\n    ...themeStyles[resolvedTheme].container,\n  };\n\n  const searchInputStyle: React.CSSProperties = {\n    ...baseStyles.searchInput,\n    ...themeStyles[resolvedTheme].searchInput,\n  };\n\n  const emptyStateStyle: React.CSSProperties = {\n    ...baseStyles.emptyState,\n    ...themeStyles[resolvedTheme].emptyState,\n  };\n\n  // Empty state (no visible questions at all)\n  if (visibleQuestions.length === 0) {\n    return (\n      <div style={containerStyle} data-adaptive-id={instanceId} data-adaptive-type=\"adaptive-faq\">\n        <div style={emptyStateStyle}>No FAQ questions available.</div>\n      </div>\n    );\n  }\n\n  return (\n    <div style={containerStyle} data-adaptive-id={instanceId} data-adaptive-type=\"adaptive-faq\">\n      {/* Search input */}\n      {config.searchable && (\n        <div style={baseStyles.searchWrapper}>\n          <input\n            type=\"text\"\n            placeholder=\"Search questions...\"\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            style={searchInputStyle}\n          />\n        </div>\n      )}\n\n      {/* Accordion */}\n      <div style={baseStyles.accordion}>\n        {filteredQuestions.map((q) => (\n          <FAQItem\n            key={q.config.id}\n            item={q}\n            isExpanded={expandedIds.has(q.config.id)}\n            onToggle={() => handleToggle(q.config.id)}\n            theme={resolvedTheme}\n          />\n        ))}\n      </div>\n\n      {/* No search results */}\n      {config.searchable && filteredQuestions.length === 0 && searchQuery && (\n        <div style={{ ...baseStyles.noResults, ...themeStyles[resolvedTheme].emptyState }}>\n          No questions found matching \"{searchQuery}\"\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// Mountable Widget Interface\n// ============================================================================\n\n/**\n * Mountable widget interface for the runtime's WidgetRegistry.\n */\nexport const FAQMountableWidget = {\n  mount(\n    container: HTMLElement,\n    config?: FAQConfig & { runtime?: FAQWidgetRuntime; instanceId?: string }\n  ) {\n    // This is a simplified mount for non-React environments\n    // In practice, the runtime handles React rendering\n\n    const {\n      runtime,\n      instanceId: _instanceId = 'faq-widget',\n      ...faqConfig\n    } = config || {\n      expandBehavior: 'single' as const,\n      searchable: false,\n      theme: 'auto' as const,\n      actions: [],\n    };\n\n    // Create simple HTML fallback if no runtime\n    if (!runtime) {\n      const questions = faqConfig.actions || [];\n      container.innerHTML = `\n        <div style=\"font-family: system-ui; max-width: 800px;\">\n          ${questions\n            .map(\n              (q) => `\n            <div style=\"margin-bottom: 8px; padding: 16px; background: #f9fafb; border-radius: 8px;\">\n              <strong>${q.config.question}</strong>\n              <p style=\"margin-top: 8px; color: #4b5563;\">${q.config.answer}</p>\n            </div>\n          `\n            )\n            .join('')}\n        </div>\n      `;\n    }\n\n    return () => {\n      container.innerHTML = '';\n    };\n  },\n};\n\nexport default FAQWidget;\n", "/**\n * Adaptive FAQ - Runtime Module\n *\n * Runtime manifest for the FAQ accordion adaptive.\n * This is a widget-based adaptive with no action executors.\n */\n\nimport { FAQMountableWidget } from './FAQWidget';\n\n// ============================================================================\n// App Runtime Manifest\n// ============================================================================\n\n/**\n * Runtime manifest for adaptive-faq.\n *\n * Note: This adaptive is widget-based, not action-based.\n * The `faq:question` actions are compositional - they're rendered by\n * the widget, not executed by the runtime.\n */\nexport const runtime = {\n  id: 'adaptive-faq',\n  version: '1.0.0',\n  name: 'FAQ Accordion',\n  description: 'Collapsible Q&A accordion with per-item conditional visibility',\n\n  /**\n   * No action executors - faq:question actions are compositional,\n   * meaning they serve as configuration for the FAQWidget.\n   */\n  executors: [],\n\n  /**\n   * Widget definitions for the runtime's WidgetRegistry.\n   */\n  widgets: [\n    {\n      id: 'adaptive-faq:accordion',\n      component: FAQMountableWidget,\n      metadata: {\n        name: 'FAQ Accordion',\n        description: 'Collapsible Q&A accordion with search',\n        icon: '\u2753',\n      },\n    },\n  ],\n};\n\nexport default runtime;\n", "/**\n * CDN Entry Point for Adaptive FAQ\n *\n * This module is bundled for CDN delivery and self-registers with the global\n * SynOS app registry when loaded dynamically via the AppLoader.\n */\n\nimport { runtime } from './runtime';\n\n/**\n * App manifest for registry registration.\n * Follows the AppManifest interface expected by AppLoader/AppRegistry.\n */\nexport const manifest = {\n  id: 'faq',\n  version: runtime.version,\n  name: runtime.name,\n  description: runtime.description,\n  runtime: {\n    // FAQ is widget-based, no action executors\n    actions: [],\n    widgets: runtime.widgets,\n  },\n  metadata: {\n    isBuiltIn: false,\n  },\n};\n\n/**\n * Self-register with global registry if available.\n * This happens when loaded via script tag (UMD).\n */\nif (typeof window !== 'undefined') {\n  const globalRegistry = (window as any).__SYNOS_APP_REGISTRY__;\n  if (globalRegistry && typeof globalRegistry.register === 'function') {\n    globalRegistry.register(manifest);\n  }\n}\n\nexport default manifest;\n"],
-  "mappings": "AAUA,OAAgB,aAAAA,EAAW,cAAAC,EAAY,WAAAC,EAAS,eAAAC,EAAa,YAAAC,MAAgB,QAwMvE,OAOE,OAAAC,EAPF,QAAAC,MAAA,oBA+LC,IAAMC,EAAqB,CAChC,MACEC,EACAC,EACA,CAIA,GAAM,CACJ,QAAAC,EACA,WAAYC,EAAc,aAC1B,GAAGC,CACL,EAAIH,GAAU,CACZ,eAAgB,SAChB,WAAY,GACZ,MAAO,OACP,QAAS,CAAC,CACZ,EAGA,GAAI,CAACC,EAAS,CACZ,IAAMG,EAAYD,EAAU,SAAW,CAAC,EACxCJ,EAAU,UAAY;AAAA;AAAA,YAEhBK,EACC,IACEC,GAAM;AAAA;AAAA,wBAEGA,EAAE,OAAO,QAAQ;AAAA,4DACmBA,EAAE,OAAO,MAAM;AAAA;AAAA,WAG/D,EACC,KAAK,EAAE,CAAC;AAAA;AAAA,OAGjB,CAEA,MAAO,IAAM,CACXN,EAAU,UAAY,EACxB,CACF,CACF,ECvaO,IAAMO,EAAU,CACrB,GAAI,eACJ,QAAS,QACT,KAAM,gBACN,YAAa,iEAMb,UAAW,CAAC,EAKZ,QAAS,CACP,CACE,GAAI,yBACJ,UAAWC,EACX,SAAU,CACR,KAAM,gBACN,YAAa,wCACb,KAAM,QACR,CACF,CACF,CACF,ECjCO,IAAMC,EAAW,CACtB,GAAI,MACJ,QAASC,EAAQ,QACjB,KAAMA,EAAQ,KACd,YAAaA,EAAQ,YACrB,QAAS,CAEP,QAAS,CAAC,EACV,QAASA,EAAQ,OACnB,EACA,SAAU,CACR,UAAW,EACb,CACF,EAMA,GAAI,OAAO,OAAW,IAAa,CACjC,IAAMC,EAAkB,OAAe,uBACnCA,GAAkB,OAAOA,EAAe,UAAa,YACvDA,EAAe,SAASF,CAAQ,CAEpC,CAEA,IAAOG,EAAQH",
-  "names": ["useEffect", "useReducer", "useMemo", "useCallback", "useState", "jsx", "jsxs", "FAQMountableWidget", "container", "config", "runtime", "_instanceId", "faqConfig", "questions", "q", "runtime", "FAQMountableWidget", "manifest", "runtime", "globalRegistry", "cdn_default"]
-}

package/dist/apps/gamification/index.js

@@ -1,2 +0,0 @@
-var c=async(e,t)=>{let{badgeId:i}=e;return t.publishEvent("gamification.badge_awarded",{badgeId:i,awardedAt:Date.now()}),{cleanup:()=>{}}},d=async(e,t)=>{let{points:i,reason:s}=e;return t.publishEvent("gamification.points_added",{points:i,reason:s,timestamp:Date.now()}),{cleanup:()=>{}}},g={names:["page_view","button_click"],handler:(e,t)=>{console.log("[Gamification] Event received for badge trigger check")}},o=[{kind:"gamification:awardBadge",executor:c},{kind:"gamification:addPoints",executor:d}],a=[g],n={id:"adaptive-gamification",version:"1.0.0",name:"Gamification",description:"Badges, rewards, points, and engagement mechanics",executors:o,eventHandlers:a};var r={id:"gamification",version:n.version,name:n.name,description:n.description,runtime:{actions:o.map(({kind:e,executor:t})=>({kind:e,executor:t})),events:a},metadata:{isBuiltIn:!1}};if(typeof window<"u"){let e=window.__SYNOS_APP_REGISTRY__;e&&typeof e.register=="function"&&e.register(r)}var p=r;export{p as default,r as manifest};
-//# sourceMappingURL=index.js.map

package/dist/apps/gamification/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../adaptives/adaptive-gamification/src/runtime.ts", "../../../../adaptives/adaptive-gamification/src/cdn.ts"],
-  "sourcesContent": ["/**\n * Adaptive Gamification - Runtime Module\n *\n * Gamification actions: awardBadge, addPoints.\n * Provides gamification features like badges, points, and rewards.\n */\n\nimport type { ExecutorResult, ActionExecutor } from './types';\n\n// ============================================================================\n// Action Types\n// ============================================================================\n\n/**\n * Award badge action\n */\nexport interface AwardBadgeAction {\n  kind: 'gamification:awardBadge';\n  badgeId: string;\n  anchorId?: string;\n  label?: string;\n}\n\n/**\n * Add points action\n */\nexport interface AddPointsAction {\n  kind: 'gamification:addPoints';\n  points: number;\n  reason?: string;\n  label?: string;\n}\n\n// ============================================================================\n// Executors\n// ============================================================================\n\n/**\n * Execute an awardBadge action\n *\n * Note: This executor uses publishEvent to track badge awards.\n * State management is handled at the app level via AppContext,\n * not at the action executor level.\n */\nexport const executeAwardBadge: ActionExecutor<AwardBadgeAction> = async (\n  action,\n  context\n): Promise<ExecutorResult> => {\n  const { badgeId } = action;\n\n  // Emit telemetry event (state management handled at app level)\n  context.publishEvent('gamification.badge_awarded', {\n    badgeId,\n    awardedAt: Date.now(),\n  });\n\n  return {\n    cleanup: () => {\n      // Badge awards are permanent, no cleanup needed\n    },\n  };\n};\n\n/**\n * Execute an addPoints action\n *\n * Note: This executor uses publishEvent to track points.\n * State management is handled at the app level via AppContext,\n * not at the action executor level.\n */\nexport const executeAddPoints: ActionExecutor<AddPointsAction> = async (\n  action,\n  context\n): Promise<ExecutorResult> => {\n  const { points, reason } = action;\n\n  // Emit telemetry event (state management handled at app level)\n  context.publishEvent('gamification.points_added', {\n    points,\n    reason,\n    timestamp: Date.now(),\n  });\n\n  return {\n    cleanup: () => {\n      // Points are permanent, no cleanup needed\n    },\n  };\n};\n\n// ============================================================================\n// Event Handlers\n// ============================================================================\n\n/**\n * Event handler for auto-awarding badges based on triggers.\n */\nexport const badgeTriggerHandler = {\n  names: ['page_view', 'button_click'],\n  handler: (_event: unknown, _ctx: unknown) => {\n    // Auto-award badges based on event triggers\n    // This would check badge trigger conditions in the config\n    console.log('[Gamification] Event received for badge trigger check');\n  },\n};\n\n// ============================================================================\n// Executor Definitions for Registration\n// ============================================================================\n\n/**\n * All executors provided by this app.\n * These are registered with the runtime's ExecutorRegistry.\n */\nexport const executors = [\n  { kind: 'gamification:awardBadge', executor: executeAwardBadge },\n  { kind: 'gamification:addPoints', executor: executeAddPoints },\n] as const;\n\n/**\n * Event handlers provided by this app.\n */\nexport const eventHandlers = [badgeTriggerHandler];\n\n/**\n * App runtime manifest.\n */\nexport const runtime = {\n  id: 'adaptive-gamification',\n  version: '1.0.0',\n  name: 'Gamification',\n  description: 'Badges, rewards, points, and engagement mechanics',\n  executors,\n  eventHandlers,\n};\n", "/**\n * CDN Entry Point for Adaptive Gamification\n *\n * This module is bundled for CDN delivery and self-registers with the global\n * SynOS app registry when loaded dynamically via the AppLoader.\n */\n\nimport { executors, eventHandlers, runtime } from './runtime';\n\n/**\n * App manifest for registry registration.\n * Follows the AppManifest interface expected by AppLoader/AppRegistry.\n */\nexport const manifest = {\n  id: 'gamification',\n  version: runtime.version,\n  name: runtime.name,\n  description: runtime.description,\n  runtime: {\n    actions: executors.map(({ kind, executor }) => ({\n      kind,\n      executor,\n    })),\n    events: eventHandlers,\n  },\n  metadata: {\n    isBuiltIn: false,\n  },\n};\n\n/**\n * Self-register with global registry if available.\n * This happens when loaded via script tag (UMD).\n */\nif (typeof window !== 'undefined') {\n  const globalRegistry = (window as any).__SYNOS_APP_REGISTRY__;\n  if (globalRegistry && typeof globalRegistry.register === 'function') {\n    globalRegistry.register(manifest);\n  }\n}\n\nexport default manifest;\n"],
-  "mappings": "AA4CO,IAAMA,EAAsD,MACjEC,EACAC,IAC4B,CAC5B,GAAM,CAAE,QAAAC,CAAQ,EAAIF,EAGpB,OAAAC,EAAQ,aAAa,6BAA8B,CACjD,QAAAC,EACA,UAAW,KAAK,IAAI,CACtB,CAAC,EAEM,CACL,QAAS,IAAM,CAEf,CACF,CACF,EASaC,EAAoD,MAC/DH,EACAC,IAC4B,CAC5B,GAAM,CAAE,OAAAG,EAAQ,OAAAC,CAAO,EAAIL,EAG3B,OAAAC,EAAQ,aAAa,4BAA6B,CAChD,OAAAG,EACA,OAAAC,EACA,UAAW,KAAK,IAAI,CACtB,CAAC,EAEM,CACL,QAAS,IAAM,CAEf,CACF,CACF,EASaC,EAAsB,CACjC,MAAO,CAAC,YAAa,cAAc,EACnC,QAAS,CAACC,EAAiBC,IAAkB,CAG3C,QAAQ,IAAI,uDAAuD,CACrE,CACF,EAUaC,EAAY,CACvB,CAAE,KAAM,0BAA2B,SAAUV,CAAkB,EAC/D,CAAE,KAAM,yBAA0B,SAAUI,CAAiB,CAC/D,EAKaO,EAAgB,CAACJ,CAAmB,EAKpCK,EAAU,CACrB,GAAI,wBACJ,QAAS,QACT,KAAM,eACN,YAAa,oDACb,UAAAF,EACA,cAAAC,CACF,ECzHO,IAAME,EAAW,CACtB,GAAI,eACJ,QAASC,EAAQ,QACjB,KAAMA,EAAQ,KACd,YAAaA,EAAQ,YACrB,QAAS,CACP,QAASC,EAAU,IAAI,CAAC,CAAE,KAAAC,EAAM,SAAAC,CAAS,KAAO,CAC9C,KAAAD,EACA,SAAAC,CACF,EAAE,EACF,OAAQC,CACV,EACA,SAAU,CACR,UAAW,EACb,CACF,EAMA,GAAI,OAAO,OAAW,IAAa,CACjC,IAAMC,EAAkB,OAAe,uBACnCA,GAAkB,OAAOA,EAAe,UAAa,YACvDA,EAAe,SAASN,CAAQ,CAEpC,CAEA,IAAOO,EAAQP",
-  "names": ["executeAwardBadge", "action", "context", "badgeId", "executeAddPoints", "points", "reason", "badgeTriggerHandler", "_event", "_ctx", "executors", "eventHandlers", "runtime", "manifest", "runtime", "executors", "kind", "executor", "eventHandlers", "globalRegistry", "cdn_default"]
-}

package/dist/apps/nav/index.js

@@ -1,11 +0,0 @@
-import p,{useEffect as f,useReducer as u,useMemo as v,useCallback as g}from"react";import{jsx as k,jsxs as b}from"react/jsx-runtime";var o={mount(e,i){let{runtime:r,instanceId:c="nav-widget",...s}=i||{layout:"horizontal",theme:"auto",actions:[]};if(!r){let l=s.actions||[];e.innerHTML=`
-        <nav style="display: flex; gap: 8px; padding: 8px; font-family: system-ui;">
-          ${l.map(t=>`
-            <a href="${t.config.href}" style="padding: 8px 12px; text-decoration: none; color: #374151;">
-              ${t.config.icon?`<span>${t.config.icon}</span>`:""}
-              ${t.config.label}
-            </a>
-          `).join("")}
-        </nav>
-      `}return()=>{e.innerHTML=""}}};var n={id:"adaptive-nav",version:"1.0.0",name:"Navigation Links",description:"Widget-based navigation link list with per-item conditional visibility",executors:[],widgets:[{id:"adaptive-nav:links",component:o,metadata:{name:"Navigation Links",description:"Horizontal or vertical navigation link list",icon:"\u{1F517}"}}]};var a={id:"nav",version:n.version,name:n.name,description:n.description,runtime:{actions:[],widgets:n.widgets},metadata:{isBuiltIn:!1}};if(typeof window<"u"){let e=window.__SYNOS_APP_REGISTRY__;e&&typeof e.register=="function"&&e.register(a)}var N=a;export{N as default,a as manifest};
-//# sourceMappingURL=index.js.map

package/dist/apps/nav/index.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../adaptives/adaptive-nav/src/NavWidget.tsx", "../../../../adaptives/adaptive-nav/src/runtime.ts", "../../../../adaptives/adaptive-nav/src/cdn.ts"],
-  "sourcesContent": ["/**\n * Adaptive Nav - NavWidget Component\n *\n * React component that renders a navigation link list with per-item\n * conditional visibility based on showWhen decision strategies.\n *\n * Demonstrates the compositional action pattern where child actions\n * (nav:link) serve as configuration data for the parent widget.\n */\n\nimport React, { useEffect, useReducer, useMemo, useCallback } from 'react';\nimport type { NavWidgetProps, NavLinkAction, NavConfig, NavWidgetRuntime } from './types';\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst baseStyles = {\n  nav: {\n    display: 'flex',\n    gap: '4px',\n    padding: '8px',\n    fontFamily: 'system-ui, -apple-system, sans-serif',\n  },\n  link: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '6px',\n    padding: '8px 12px',\n    borderRadius: '6px',\n    textDecoration: 'none',\n    fontSize: '14px',\n    fontWeight: 500,\n    transition: 'background-color 0.15s ease, color 0.15s ease',\n    cursor: 'pointer',\n    border: 'none',\n    background: 'transparent',\n  },\n  icon: {\n    fontSize: '16px',\n  },\n  externalIcon: {\n    fontSize: '12px',\n    opacity: 0.6,\n  },\n} as const;\n\nconst themeStyles = {\n  light: {\n    nav: {\n      backgroundColor: '#ffffff',\n    },\n    link: {\n      color: '#374151',\n    },\n    linkHover: {\n      backgroundColor: '#f3f4f6',\n      color: '#111827',\n    },\n  },\n  dark: {\n    nav: {\n      backgroundColor: '#1f2937',\n    },\n    link: {\n      color: '#d1d5db',\n    },\n    linkHover: {\n      backgroundColor: '#374151',\n      color: '#f9fafb',\n    },\n  },\n} as const;\n\n// ============================================================================\n// NavLink Component\n// ============================================================================\n\ninterface NavLinkComponentProps {\n  link: NavLinkAction;\n  theme: 'light' | 'dark';\n  onNavigate: (href: string, external: boolean) => void;\n}\n\nfunction NavLinkComponent({ link, theme, onNavigate }: NavLinkComponentProps) {\n  const [isHovered, setIsHovered] = React.useState(false);\n  const { label, href, icon, external } = link.config;\n  const colors = themeStyles[theme];\n\n  const style: React.CSSProperties = {\n    ...baseStyles.link,\n    ...colors.link,\n    ...(isHovered ? colors.linkHover : {}),\n  };\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onNavigate(href, external ?? false);\n  };\n\n  return (\n    <a\n      href={href}\n      onClick={handleClick}\n      style={style}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      target={external ? '_blank' : undefined}\n      rel={external ? 'noopener noreferrer' : undefined}\n    >\n      {icon && <span style={baseStyles.icon}>{icon}</span>}\n      <span>{label}</span>\n      {external && <span style={baseStyles.externalIcon}>\u2197</span>}\n    </a>\n  );\n}\n\n// ============================================================================\n// NavWidget Component\n// ============================================================================\n\n/**\n * NavWidget - Renders a navigation link list with per-item activation.\n *\n * This component demonstrates the compositional action pattern:\n * - Parent (NavWidget) receives `config.actions` array\n * - Each action has optional `showWhen` for per-item visibility\n * - Parent evaluates showWhen and filters visible links\n * - Parent manages re-rendering on context changes\n */\nexport function NavWidget({ config, runtime, instanceId }: NavWidgetProps) {\n  // Force re-render when context changes\n  const [, forceUpdate] = useReducer((x) => x + 1, 0);\n\n  // Subscribe to context changes for reactive updates\n  useEffect(() => {\n    const unsubscribe = runtime.context.subscribe(() => {\n      forceUpdate();\n    });\n    return unsubscribe;\n  }, [runtime.context]);\n\n  // Filter visible links based on per-item showWhen\n  const visibleLinks = useMemo(() => {\n    return config.actions.filter((link) => {\n      // No showWhen = always visible\n      if (!link.showWhen) return true;\n\n      // Evaluate the decision strategy\n      const result = runtime.evaluateSync<boolean>(link.showWhen);\n      return result.value;\n    });\n  }, [config.actions, runtime]);\n\n  // Resolve theme (auto \u2192 detect system preference)\n  const resolvedTheme = useMemo(() => {\n    if (config.theme !== 'auto') return config.theme;\n\n    // Check system preference (SSR-safe)\n    if (typeof window !== 'undefined') {\n      return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n    return 'light';\n  }, [config.theme]);\n\n  // Handle navigation with event publishing\n  const handleNavigate = useCallback(\n    (href: string, external: boolean) => {\n      // Publish navigation event for analytics\n      runtime.events.publish('nav:click', {\n        instanceId,\n        href,\n        external,\n        timestamp: Date.now(),\n      });\n\n      // Perform navigation\n      if (external) {\n        window.open(href, '_blank', 'noopener,noreferrer');\n      } else {\n        window.location.href = href;\n      }\n    },\n    [runtime.events, instanceId]\n  );\n\n  // Compute nav styles\n  const navStyle: React.CSSProperties = {\n    ...baseStyles.nav,\n    ...themeStyles[resolvedTheme].nav,\n    flexDirection: config.layout === 'vertical' ? 'column' : 'row',\n  };\n\n  // Empty state\n  if (visibleLinks.length === 0) {\n    return null;\n  }\n\n  return (\n    <nav style={navStyle} data-adaptive-id={instanceId} data-adaptive-type=\"adaptive-nav\">\n      {visibleLinks.map((link, index) => (\n        <NavLinkComponent\n          key={link.config.href + index}\n          link={link}\n          theme={resolvedTheme}\n          onNavigate={handleNavigate}\n        />\n      ))}\n    </nav>\n  );\n}\n\n// ============================================================================\n// Mountable Widget Interface\n// ============================================================================\n\n/**\n * Mountable widget interface for the runtime's WidgetRegistry.\n */\nexport const NavMountableWidget = {\n  mount(\n    container: HTMLElement,\n    config?: NavConfig & { runtime?: NavWidgetRuntime; instanceId?: string }\n  ) {\n    // This is a simplified mount for non-React environments\n    // In practice, the runtime handles React rendering\n\n    const {\n      runtime,\n      instanceId: _instanceId = 'nav-widget',\n      ...navConfig\n    } = config || {\n      layout: 'horizontal' as const,\n      theme: 'auto' as const,\n      actions: [],\n    };\n\n    // Create simple HTML fallback if no runtime\n    if (!runtime) {\n      const links = navConfig.actions || [];\n      container.innerHTML = `\n        <nav style=\"display: flex; gap: 8px; padding: 8px; font-family: system-ui;\">\n          ${links\n            .map(\n              (link) => `\n            <a href=\"${link.config.href}\" style=\"padding: 8px 12px; text-decoration: none; color: #374151;\">\n              ${link.config.icon ? `<span>${link.config.icon}</span>` : ''}\n              ${link.config.label}\n            </a>\n          `\n            )\n            .join('')}\n        </nav>\n      `;\n    }\n\n    return () => {\n      container.innerHTML = '';\n    };\n  },\n};\n\nexport default NavWidget;\n", "/**\n * Adaptive Nav - Runtime Module\n *\n * Runtime manifest for the navigation link list adaptive.\n * This is a widget-based adaptive with no action executors.\n */\n\nimport { NavMountableWidget } from './NavWidget';\n\n// ============================================================================\n// App Runtime Manifest\n// ============================================================================\n\n/**\n * Runtime manifest for adaptive-nav.\n *\n * Note: This adaptive is widget-based, not action-based.\n * The `nav:link` actions are compositional - they're rendered by\n * the widget, not executed by the runtime.\n */\nexport const runtime = {\n  id: 'adaptive-nav',\n  version: '1.0.0',\n  name: 'Navigation Links',\n  description: 'Widget-based navigation link list with per-item conditional visibility',\n\n  /**\n   * No action executors - nav:link actions are compositional,\n   * meaning they serve as configuration for the NavWidget.\n   */\n  executors: [],\n\n  /**\n   * Widget definitions for the runtime's WidgetRegistry.\n   */\n  widgets: [\n    {\n      id: 'adaptive-nav:links',\n      component: NavMountableWidget,\n      metadata: {\n        name: 'Navigation Links',\n        description: 'Horizontal or vertical navigation link list',\n        icon: '\uD83D\uDD17',\n      },\n    },\n  ],\n};\n\nexport default runtime;\n", "/**\n * CDN Entry Point for Adaptive Nav\n *\n * This module is bundled for CDN delivery and self-registers with the global\n * SynOS app registry when loaded dynamically via the AppLoader.\n */\n\nimport { runtime } from './runtime';\n\n/**\n * App manifest for registry registration.\n * Follows the AppManifest interface expected by AppLoader/AppRegistry.\n */\nexport const manifest = {\n  id: 'nav',\n  version: runtime.version,\n  name: runtime.name,\n  description: runtime.description,\n  runtime: {\n    // Nav is widget-based, no action executors\n    actions: [],\n    widgets: runtime.widgets,\n  },\n  metadata: {\n    isBuiltIn: false,\n  },\n};\n\n/**\n * Self-register with global registry if available.\n * This happens when loaded via script tag (UMD).\n */\nif (typeof window !== 'undefined') {\n  const globalRegistry = (window as any).__SYNOS_APP_REGISTRY__;\n  if (globalRegistry && typeof globalRegistry.register === 'function') {\n    globalRegistry.register(manifest);\n  }\n}\n\nexport default manifest;\n"],
-  "mappings": "AAUA,OAAOA,GAAS,aAAAC,EAAW,cAAAC,EAAY,WAAAC,EAAS,eAAAC,MAAmB,QA2F/D,OASW,OAAAC,EATX,QAAAC,MAAA,oBAsHG,IAAMC,EAAqB,CAChC,MACEC,EACAC,EACA,CAIA,GAAM,CACJ,QAAAC,EACA,WAAYC,EAAc,aAC1B,GAAGC,CACL,EAAIH,GAAU,CACZ,OAAQ,aACR,MAAO,OACP,QAAS,CAAC,CACZ,EAGA,GAAI,CAACC,EAAS,CACZ,IAAMG,EAAQD,EAAU,SAAW,CAAC,EACpCJ,EAAU,UAAY;AAAA;AAAA,YAEhBK,EACC,IACEC,GAAS;AAAA,uBACDA,EAAK,OAAO,IAAI;AAAA,gBACvBA,EAAK,OAAO,KAAO,SAASA,EAAK,OAAO,IAAI,UAAY,EAAE;AAAA,gBAC1DA,EAAK,OAAO,KAAK;AAAA;AAAA,WAGrB,EACC,KAAK,EAAE,CAAC;AAAA;AAAA,OAGjB,CAEA,MAAO,IAAM,CACXN,EAAU,UAAY,EACxB,CACF,CACF,EChPO,IAAMO,EAAU,CACrB,GAAI,eACJ,QAAS,QACT,KAAM,mBACN,YAAa,yEAMb,UAAW,CAAC,EAKZ,QAAS,CACP,CACE,GAAI,qBACJ,UAAWC,EACX,SAAU,CACR,KAAM,mBACN,YAAa,8CACb,KAAM,WACR,CACF,CACF,CACF,ECjCO,IAAMC,EAAW,CACtB,GAAI,MACJ,QAASC,EAAQ,QACjB,KAAMA,EAAQ,KACd,YAAaA,EAAQ,YACrB,QAAS,CAEP,QAAS,CAAC,EACV,QAASA,EAAQ,OACnB,EACA,SAAU,CACR,UAAW,EACb,CACF,EAMA,GAAI,OAAO,OAAW,IAAa,CACjC,IAAMC,EAAkB,OAAe,uBACnCA,GAAkB,OAAOA,EAAe,UAAa,YACvDA,EAAe,SAASF,CAAQ,CAEpC,CAEA,IAAOG,EAAQH",
-  "names": ["React", "useEffect", "useReducer", "useMemo", "useCallback", "jsx", "jsxs", "NavMountableWidget", "container", "config", "runtime", "_instanceId", "navConfig", "links", "link", "runtime", "NavMountableWidget", "manifest", "runtime", "globalRegistry", "cdn_default"]
-}