tjs-lang 0.5.4 → 0.6.0

package/demo/src/index.ts

@@ -9,14 +9,7 @@
 
 import { elements, tosi, bindings, StyleSheet, bind, observe } from 'tosijs'
 
-import {
-  icons,
-  sideNav,
-  SideNav,
-  sizeBreak,
-  popMenu,
-  markdownViewer,
-} from 'tosijs-ui'
+import { icons, sideNav, SideNav, popMenu, markdownViewer } from 'tosijs-ui'
 
 import { styleSpec } from './style'
 StyleSheet('demo-style', styleSpec)
@@ -92,14 +85,6 @@ Object.assign(window, { agent, tosijs, tosijsui, demoRuntime, runAgent })
 import docs from '../docs.json'
 
 // Add playgrounds as special pages
-const ajsPlaygroundDoc = {
-  title: '▶ AJS Playground',
-  filename: 'playground',
-  text: '',
-  isPlayground: 'ajs',
-  pin: 'top',
-}
-
 const tjsPlaygroundDoc = {
   title: '▶ TJS Playground',
   filename: 'tjs-playground',
@@ -108,8 +93,16 @@ const tjsPlaygroundDoc = {
   pin: 'top',
 }
 
+const ajsPlaygroundDoc = {
+  title: '▶ AJS Playground',
+  filename: 'playground',
+  text: '',
+  isPlayground: 'ajs',
+  pin: 'top',
+}
+
 // Insert playgrounds at top
-const allDocs = [ajsPlaygroundDoc, tjsPlaygroundDoc, ...docs]
+const allDocs = [tjsPlaygroundDoc, ajsPlaygroundDoc, ...docs]
 
 const PROJECT = 'tjs-lang'
 declare const __VERSION__: string
@@ -138,6 +131,8 @@ const { app, prefs, auth } = tosi({
     currentView: 'home' as 'home' | 'ajs' | 'tjs' | 'ts',
     currentExample: null as any,
     openSection: null as string | null,
+    splitMode: null as null | 'code' | 'output',
+    splitSessionId: '' as string,
   },
   auth: {
     user: null as {
@@ -266,6 +261,11 @@ function syncURLToState() {
     app.currentView.value = view
   }
   if (section) app.openSection.value = section
+  const mode = params.get('mode')
+  const newSplitMode = mode === 'code' || mode === 'output' ? mode : null
+  const sid = params.get('sid') || ''
+  app.splitSessionId.value = sid
+  app.splitMode.value = newSplitMode
 
   if (example) {
     if (view === 'ts') {
@@ -302,19 +302,26 @@ syncURLToState()
 window.addEventListener('hashchange', syncURLToState)
 
 // State → URL (observe changes, update hash)
-observe(/^app\.(currentView|currentExample|openSection)/, () => {
-  if (_suppressHashUpdate) return
-  const params = new URLSearchParams()
-  const view = app.currentView.valueOf() as string
-  params.set('view', view)
-  const example = app.currentExample.valueOf() as any
-  if (example) {
-    params.set('example', example.name || example.title || '')
+observe(
+  /^app\.(currentView|currentExample|openSection|splitMode|splitSessionId)/,
+  () => {
+    if (_suppressHashUpdate) return
+    const params = new URLSearchParams()
+    const view = app.currentView.valueOf() as string
+    params.set('view', view)
+    const example = app.currentExample.valueOf() as any
+    if (example) {
+      params.set('example', example.name || example.title || '')
+    }
+    const section = app.openSection.valueOf() as string | null
+    if (section) params.set('section', section)
+    const splitMode = app.splitMode.valueOf() as string | null
+    if (splitMode) params.set('mode', splitMode)
+    const sid = app.splitSessionId.valueOf() as string
+    if (sid) params.set('sid', sid)
+    window.history.replaceState(null, '', `#${params.toString()}`)
   }
-  const section = app.openSection.valueOf() as string | null
-  if (section) params.set('section', section)
-  window.history.replaceState(null, '', `#${params.toString()}`)
-})
+)
 
 // Main app
 const main = document.querySelector('main') as HTMLElement
@@ -387,6 +394,28 @@ if (main) {
         icons.npm()
       ),
 
+      // tosijs link
+      a(
+        {
+          class: 'iconic',
+          title: 'tosijs',
+          target: '_blank',
+          href: 'https://tosijs.net',
+        },
+        icons.tosi()
+      ),
+
+      // tosijs-ui link
+      a(
+        {
+          class: 'iconic',
+          title: 'tosijs-ui',
+          target: '_blank',
+          href: 'https://ui.tosijs.net',
+        },
+        icons.tosiUi()
+      ),
+
       // Settings menu
       button(
         {
@@ -572,6 +601,16 @@ if (main) {
                   icon: 'npm',
                   action: () => window.open(app.npmUrl.valueOf(), '_blank'),
                 },
+                {
+                  caption: 'tosijs',
+                  icon: 'tosi',
+                  action: () => window.open('https://tosijs.net', '_blank'),
+                },
+                {
+                  caption: 'tosijs-ui',
+                  icon: 'tosiUi',
+                  action: () => window.open('https://ui.tosijs.net', '_blank'),
+                },
               ],
             })
           },
@@ -724,6 +763,47 @@ if (main) {
             },
           })
 
+          // Apply split mode from URL on load (for output windows)
+          // Ping the partner window — if no pong, revert to normal
+          const initialMode = app.splitMode.valueOf() as string | null
+          const initialSid = app.splitSessionId.valueOf() as string
+          if (
+            initialMode &&
+            (initialMode === 'code' || initialMode === 'output') &&
+            app.currentView.valueOf() === 'tjs'
+          ) {
+            const probe = new BroadcastChannel('tjs-playground')
+            let gotPong = false
+            probe.onmessage = (e: MessageEvent) => {
+              if (e.data?.type === 'pong' && e.data.sid === initialSid) {
+                gotPong = true
+              }
+            }
+            probe.postMessage({ type: 'ping', sid: initialSid })
+            setTimeout(() => {
+              probe.close()
+              if (gotPong) {
+                pg.setSplitMode(initialMode, initialSid || undefined)
+              } else {
+                // Partner is gone — revert to normal
+                app.splitMode.value = null
+                app.splitSessionId.value = ''
+              }
+            }, 300)
+          }
+
+          // Listen for split-mode-change from playground
+          // The component handles its own setSplitMode; this just syncs URL state
+          pg.addEventListener('split-mode-change', ((e: CustomEvent) => {
+            if (e.detail?.mode === 'code') {
+              app.splitSessionId.value = e.detail.sid
+              app.splitMode.value = 'code'
+            } else {
+              app.splitSessionId.value = ''
+              app.splitMode.value = null
+            }
+          }) as EventListener)
+
           return pg
         })(),
 
@@ -762,13 +842,83 @@ if (main) {
             },
           })
 
+          // Apply split mode from URL on load (for output windows)
+          // Ping the partner window — if no pong, revert to normal
+          const tsInitialMode = app.splitMode.valueOf() as string | null
+          const tsInitialSid = app.splitSessionId.valueOf() as string
+          if (
+            tsInitialMode &&
+            (tsInitialMode === 'code' || tsInitialMode === 'output') &&
+            app.currentView.valueOf() === 'ts'
+          ) {
+            const probe = new BroadcastChannel('tjs-playground')
+            let gotPong = false
+            probe.onmessage = (e: MessageEvent) => {
+              if (e.data?.type === 'pong' && e.data.sid === tsInitialSid) {
+                gotPong = true
+              }
+            }
+            probe.postMessage({ type: 'ping', sid: tsInitialSid })
+            setTimeout(() => {
+              probe.close()
+              if (gotPong) {
+                pg.setSplitMode(tsInitialMode, tsInitialSid || undefined)
+              } else {
+                // Partner is gone — revert to normal
+                app.splitMode.value = null
+                app.splitSessionId.value = ''
+              }
+            }, 300)
+          }
+
+          // Listen for split-mode-change from playground
+          // The component handles its own setSplitMode; this just syncs URL state
+          pg.addEventListener('split-mode-change', ((e: CustomEvent) => {
+            if (e.detail?.mode === 'code') {
+              app.splitSessionId.value = e.detail.sid
+              app.splitMode.value = 'code'
+            } else {
+              app.splitSessionId.value = ''
+              app.splitMode.value = null
+            }
+          }) as EventListener)
+
           return pg
         })()
       )
     )
   )
+
+  // In output mode, hide header and sidebar — just show the playground full-screen
+  if (app.splitMode.valueOf() === 'output') {
+    const headerEl = main.querySelector('header')
+    if (headerEl) headerEl.style.display = 'none'
+    const navEl = main.querySelector(SideNav.tagName!) as SideNav | null
+    if (navEl) {
+      navEl.style.gridTemplateColumns = '0 1fr'
+      const navSlot = navEl.querySelector('[slot="nav"]') as HTMLElement | null
+      if (navSlot) navSlot.style.display = 'none'
+    }
+  }
 }
 
+// Notify partner window on close/refresh
+window.addEventListener('beforeunload', () => {
+  // Find the active playground and notify it to close its channel
+  const view = app.currentView.valueOf()
+  if (app.splitMode.valueOf()) {
+    if (view === 'tjs') {
+      const pg = document.querySelector(
+        'tjs-playground'
+      ) as TJSPlayground | null
+      pg?.notifyClose()
+    } else if (view === 'ts') {
+      const pg = document.querySelector('ts-playground') as TSPlayground | null
+      pg?.notifyClose()
+    }
+  }
+})
+
 // Log welcome message
 console.log(
   `%c tjs-lang %c v${VERSION} `,

package/demo/src/playground-shared.ts

@@ -79,6 +79,8 @@ export interface IframeDocOptions {
   parentBindings?: boolean
   /** Auto-find and call TJS-annotated functions, append DOM results */
   autoCallTjsFunction?: boolean
+  /** Whether parent is in dark mode — sets color-scheme on iframe */
+  darkMode?: boolean
 }
 
 /**
@@ -95,8 +97,11 @@ export function buildIframeDoc(options: IframeDocOptions): string {
     importStatements = [],
     parentBindings = false,
     autoCallTjsFunction = false,
+    darkMode = false,
   } = options
 
+  const colorScheme = darkMode ? 'dark' : 'light dark'
+
   const parentBindingsScript = parentBindings
     ? `
     if (parent.run) window.run = parent.run.bind(parent);
@@ -146,6 +151,7 @@ export function buildIframeDoc(options: IframeDocOptions): string {
     return `<!DOCTYPE html>
 <html>
 <head>
+  <style>:root { color-scheme: ${colorScheme} }</style>
   <style>${cssContent}</style>
   ${importMapScript}
 </head>
@@ -158,9 +164,9 @@ ${TJS_RUNTIME_STUB}
     ${importStatements.join('\n    ')}
 ${CONSOLE_CAPTURE_SCRIPT}
 
-    const __childrenBefore = document.body.children.length;
+    const __childrenBefore = document.body.childNodes.length;
     try {${executionCode}
-      if (document.body.children.length > __childrenBefore) {
+      if (document.body.childNodes.length > __childrenBefore) {
         parent.postMessage({ type: 'hasPreviewContent' }, '*');
       }
     } catch (e) {
@@ -174,6 +180,7 @@ ${CONSOLE_CAPTURE_SCRIPT}
   return `<!DOCTYPE html>
 <html>
 <head>
+  <style>:root { color-scheme: ${colorScheme} }</style>
   <style>${cssContent}</style>
   ${importMapScript}
 </head>
@@ -183,9 +190,9 @@ ${CONSOLE_CAPTURE_SCRIPT}
 ${TJS_RUNTIME_STUB}
 ${CONSOLE_CAPTURE_SCRIPT}
 
-    const __childrenBefore = document.body.children.length;
+    const __childrenBefore = document.body.childNodes.length;
     try {${executionCode}
-      if (document.body.children.length > __childrenBefore) {
+      if (document.body.childNodes.length > __childrenBefore) {
         parent.postMessage({ type: 'hasPreviewContent' }, '*');
       }
     } catch (e) {

package/demo/src/playground.ts

@@ -867,11 +867,11 @@ export class Playground extends Component<PlaygroundParts> {
         const isHttps = window.location.protocol === 'https:'
         if (isHttps) {
           throw new Error(
-            'No LLM configured. Go to Settings (⋮) > API Keys to add an OpenAI or Anthropic API key. Note: Local LLM endpoints require HTTP.'
+            'No LLM configured. Go to Settings (⋮) > API Keys to add an API key (OpenAI, Anthropic, Gemini, or Deepseek). Note: Local LLM endpoints require HTTP.'
           )
         } else {
           throw new Error(
-            'No LLM configured. Go to Settings (⋮) > API Keys to add an OpenAI key, Anthropic key, or LM Studio endpoint (default: http://localhost:1234/v1).'
+            'No LLM configured. Go to Settings (⋮) > API Keys to add an API key (OpenAI, Anthropic, Gemini, Deepseek) or LM Studio endpoint (default: http://localhost:1234/v1).'
           )
         }
       }