clearkrypt 0.12.0

package/src/targets/js.js

@@ -0,0 +1,32 @@
+function esc(s){ return JSON.stringify(s); }
+export function expr(e){
+  if(!e) return 'undefined';
+  if(e.kind==='Literal') return esc(e.value);
+  if(e.kind==='Identifier') return e.name;
+  if(e.kind==='Member') return `${expr(e.object)}?.${e.property}`;
+  if(e.kind==='Array') return `[${e.items.map(expr).join(',')}]`;
+  if(e.kind==='Object') return `{${e.props.map(p=>`${p.key}:${expr(p.value)}`).join(',')}}`;
+  if(e.kind==='Binary'){ const op={and:'&&',or:'||','is':'===','is not':'!=='}[e.op]||e.op; return `(${expr(e.left)} ${op} ${expr(e.right)})`;}
+  if(e.kind==='Call') return `${expr(e.callee)}(${e.args.map(expr).join(',')})`;
+  return 'undefined';
+}
+export function stmt(s){
+  if(s.kind==='VarStmt') return `${s.constant?'const':'let'} ${s.name} = ${expr(s.value)};`;
+  if(s.kind==='ReturnStmt') return `return ${expr(s.value)};`;
+  if(s.kind==='PrintStmt') return `console.log(${expr(s.value)});`;
+  if(s.kind==='AddStmt') return `${s.target}.push(${expr(s.value)});`;
+  if(s.kind==='StoreDecl') return `let ${s.name} = ${expr(s.value)};`;
+  if(s.kind==='LayoutStmt'||s.kind==='ThemeStmt') return '';
+  if(s.kind==='ToggleStmt'||s.kind==='InputStmt'||s.kind==='ListStmt'||s.kind==='ContainerStmt'||s.kind==='SpacerStmt') return `CK.ui(${JSON.stringify(s.kind)}, ${JSON.stringify(s)});`;
+  if(s.kind==='RequireStmt') return `if(!(${expr(s.condition)})) throw new Error('Requirement failed');`;
+  if(s.kind==='WhenStmt') return `if(${expr(s.condition)}){${s.body.map(stmt).join('\n')}}else{${s.otherwise.map(stmt).join('\n')}}`;
+  if(s.kind==='ForStmt') return `for(const ${s.item} of ${expr(s.iterable)}){${s.body.map(stmt).join('\n')}}`;
+  if(['UIStmt','ButtonStmt','CardStmt','ShowStmt','GoStmt'].includes(s.kind)) return `CK.ui(${JSON.stringify(s.kind)}, ${JSON.stringify(s)});`;
+  if(s.kind==='ExprStmt') return `${expr(s.value)};`;
+  return `/* ${s.kind} */`;
+}
+export function emitJS(ast){
+ const tasks=ast.declarations.filter(d=>d.kind==='TaskDecl').map(t=>`export async function ${t.name}(${t.params.map(p=>p.name).join(',')}){${t.body.map(stmt).join('\n')}}`).join('\n');
+ const main=ast.declarations.filter(d=>!['TaskDecl','TypeDecl','ScreenDecl','IntentDecl'].includes(d.kind)).map(stmt).join('\n');
+ return {target:'js', meta:ast.meta, outputFiles:{'main.js':`// Generated by ClearKrypt\nconst CK={ui:(k,v)=>console.log('[UI]',k,v)};\n${tasks}\n${main}\n`}};
+}

package/src/targets/pc.js

@@ -0,0 +1,19 @@
+import { emitWeb } from './web.js';
+
+export function emitPC(ast){
+  const web = emitWeb(ast);
+  const pkgName = (ast.app || 'clearkrypt-app').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'') || 'clearkrypt-app';
+  const main = `import { app, BrowserWindow } from 'electron';\nimport path from 'node:path';\nimport { fileURLToPath } from 'node:url';\nconst __dirname=path.dirname(fileURLToPath(import.meta.url));\nfunction create(){ const win=new BrowserWindow({width:1200,height:820,title:${JSON.stringify(ast.app||'ClearKrypt')},webPreferences:{contextIsolation:true,nodeIntegration:false}}); win.loadFile(path.join(__dirname,'app/index.html')); }\napp.whenReady().then(create);\napp.on('window-all-closed',()=>{ if(process.platform!=='darwin') app.quit(); });\napp.on('activate',()=>{ if(BrowserWindow.getAllWindows().length===0) create(); });\n`;
+  return {target:'pc', meta:ast.meta, outputFiles:{
+    'README_PC_BUILD.md': `# ClearKrypt PC Build\n\nThis target exports a desktop-ready Electron shell for Windows, macOS, and Linux.\n\n## Preview\n\n\`npm install\`\n\`npm run preview:pc\`\n\n## Package\n\n\`npm run package:pc\`\n\nGenerated UI and behavior come directly from the ClearKrypt compiler target. No AI translation is used.\n`,
+    'package.json': JSON.stringify({
+      name:`${pkgName}-pc`, version:'0.1.0', private:true, type:'module', main:'main.js',
+      scripts:{'preview:pc':'electron .','package:pc':'electron-packager . --overwrite'},
+      dependencies:{electron:'latest'}, devDependencies:{'electron-packager':'latest'}
+    },null,2),
+    'main.js': main,
+    'app/index.html': web.outputFiles['index.html'],
+    'app/main.js': web.outputFiles['main.js'],
+    'app/style.css': web.outputFiles['style.css'] + '\n.ck-shell{max-width:1280px}'
+  }};
+}

package/src/targets/phone.js

@@ -0,0 +1,30 @@
+import { emitWeb } from './web.js';
+
+export function emitPhone(ast){
+  const web = emitWeb(ast);
+  const pkgName = (ast.app || 'clearkrypt-app').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-|-$/g,'') || 'clearkrypt-app';
+  const capacitor = {
+    appId: `com.clearkrypt.${pkgName.replace(/-/g,'')}`,
+    appName: ast.app || 'ClearKrypt App',
+    webDir: 'www',
+    bundledWebRuntime: false,
+    server: { androidScheme: 'https' }
+  };
+  return { target:'phone', meta:ast.meta, outputFiles:{
+    'README_PHONE_BUILD.md': `# ClearKrypt Phone Build\n\nThis target exports a mobile-ready Capacitor project shell.\n\n## Preview\n\n\`npm run preview:phone\`\n\n## Native build\n\n\`npm install\`\n\`npm run ck:sync:phone\`\n\`npm run ck:open:android\` or \`npm run ck:open:ios\`\n\nThe app code is generated 1:1 from the ClearKrypt AST into \`www/\`. No AI translation is used.\n`,
+    'capacitor.config.json': JSON.stringify(capacitor,null,2),
+    'package.json': JSON.stringify({
+      name:`${pkgName}-phone`, version:'0.1.0', private:true, type:'module',
+      scripts:{
+        'preview:phone':'npx vite www --host 0.0.0.0',
+        'ck:sync:phone':'npx cap sync',
+        'ck:open:android':'npx cap open android',
+        'ck:open:ios':'npx cap open ios'
+      },
+      dependencies:{'@capacitor/core':'latest','@capacitor/cli':'latest','@capacitor/android':'latest','@capacitor/ios':'latest','vite':'latest'}
+    },null,2),
+    'www/index.html': web.outputFiles['index.html'],
+    'www/main.js': web.outputFiles['main.js'],
+    'www/style.css': web.outputFiles['style.css'] + '\nbody{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}.ck-shell{padding:max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom))}'
+  }};
+}

package/src/targets/project.js

@@ -0,0 +1,24 @@
+import { emitWeb } from './web.js';
+import { emitPhone } from './phone.js';
+import { emitPC } from './pc.js';
+import { emitWorker } from './worker.js';
+
+export function emitProject(ast){
+  const web = emitWeb(ast).outputFiles;
+  const phone = emitPhone(ast).outputFiles;
+  const pc = emitPC(ast).outputFiles;
+  const worker = emitWorker(ast).outputFiles;
+  const files = {};
+  for(const [k,v] of Object.entries(web)) files[`web/${k}`]=v;
+  for(const [k,v] of Object.entries(phone)) files[`phone/${k}`]=v;
+  for(const [k,v] of Object.entries(pc)) files[`pc/${k}`]=v;
+  for(const [k,v] of Object.entries(worker)) files[`worker/${k}`]=v;
+  files['README_BUILDS.md'] = `# ClearKrypt Multi-Platform Build Environment\n\nThis folder shows exactly how one ClearKrypt source compiles to each supported environment.\n\n## Web\n\n\`cd web\` then serve \`index.html\` with any static server.\n\n## Phone\n\n\`cd phone && npm install && npm run preview:phone\` for a browser preview.\nUse \`npm run ck:sync:phone\` then Android Studio or Xcode for native packaging.\n\n## PC\n\n\`cd pc && npm install && npm run preview:pc\` for a desktop preview.\n\n## Worker\n\nDeploy the generated worker with Wrangler.\n\nAll targets are generated from the same ClearKrypt AST. ClearKrypt does deterministic 1:1 compilation and does not ask AI to translate code.\n`;
+  files['ai-index.json'] = JSON.stringify({
+    language:'ClearKrypt', version:'0.1.0', purpose:'cross-platform app language',
+    canonicalDocs:['../docs/AI_CRAWLER_GUIDE.md','../docs/LANGUAGE_SPEC.md','../docs/STDLIB.md'],
+    targets:['web','phone','pc','worker','vm','project'],
+    sourceMapping:'UI nodes include ck-node ids and source fragments for visual editing.'
+  },null,2);
+  return {target:'project', meta:ast.meta, outputFiles:files};
+}

package/src/targets/vmbytecode.js

@@ -0,0 +1,8 @@
+export function emitVM(ast){
+ const program=[];
+ for(const d of ast.declarations){
+  if(d.kind==='ScreenDecl'){ program.push({op:'SCREEN', name:d.name}); for(const s of d.body){ if(s.kind==='UIStmt') program.push({op:'UI', ui:s.ui, value:s.value}); if(s.kind==='PrintStmt') program.push({op:'PRINT', value:s.value}); } }
+  if(d.kind==='PrintStmt') program.push({op:'PRINT', value:d.value});
+ }
+ return {target:'vm', meta:ast.meta, program};
+}

package/src/targets/web.js

@@ -0,0 +1,37 @@
+import { stmt, expr } from './js.js';
+
+function classFor(s){ return ['UIStmt','ButtonStmt','CardStmt','ContainerStmt','ListStmt','ToggleStmt','InputStmt'].includes(s.kind) ? ` ck-${(s.ui||s.kind.replace('Stmt','')).toLowerCase()}` : ''; }
+function posStyle(s, freeform){
+  if(!freeform) return '{}';
+  const p=s.meta?.pos; if(!p || p.length<2) return '{}';
+  const x=Number(p[0].value??0), y=Number(p[1].value??0);
+  return `{style:'position:absolute;left:${x}px;top:${y}px'}`;
+}
+function renderStmt(s, idx=0, freeform=false){
+ const attrs = posStyle(s, freeform);
+ const cls = classFor(s);
+ if(s.kind==='LayoutStmt'||s.kind==='ThemeStmt') return null;
+ if(s.kind==='UIStmt' && s.ui==='title') return `h('h1',Object.assign({class:'ck-title${cls}','data-ck-node':'${s.ui}-${idx}'},${attrs}),${expr(s.value)})`;
+ if(s.kind==='UIStmt' && s.ui==='text') return `h('p',Object.assign({class:'ck-text${cls}','data-ck-node':'${s.ui}-${idx}'},${attrs}),${expr(s.value)})`;
+ if(s.kind==='ButtonStmt') return `h('button',Object.assign({class:'ck-button${cls}','data-ck-node':'button-${idx}',onclick:()=>{${s.body.map(stmt).join('\n')} render();}},${attrs}),${expr(s.label)})`;
+ if(s.kind==='CardStmt') return `h('div',Object.assign({class:'ck-card${cls}','data-ck-node':'card-${idx}'},${attrs}),${s.body.map((x,i)=>renderStmt(x,i,freeform)).filter(Boolean).join(',')})`;
+ if(s.kind==='ContainerStmt') return `h('section',Object.assign({class:'ck-${s.ui}${cls}','data-ck-node':'${s.ui}-${idx}'},${attrs}),${s.body.map((x,i)=>renderStmt(x,i,freeform)).filter(Boolean).join(',')})`;
+ if(s.kind==='SpacerStmt') return `h('div',{class:'ck-spacer',style:'height:'+${expr(s.size)}+'px'})`;
+ if(s.kind==='ListStmt') return `h('div',Object.assign({class:'ck-list${cls}','data-ck-node':'list-${idx}'},${attrs}), (${expr(s.source)}||[]).map((${s.item},__i)=>h('div',{class:'ck-list-row'},${s.body.map((x,i)=>renderStmt(x,i,freeform)).filter(Boolean).join(',')})))`;
+ if(s.kind==='ToggleStmt') return `h('label',Object.assign({class:'ck-toggle${cls}','data-ck-node':'toggle-${idx}'},${attrs}),h('input',{type:'checkbox',checked:${expr(s.value)}?'checked':null}),h('span',{},${expr(s.value)}?'Done':'Open'))`;
+ if(s.kind==='InputStmt') return `h('label',Object.assign({class:'ck-field${cls}','data-ck-node':'input-${idx}'},${attrs}),h('span',{},${expr(s.label)}),h('input',{placeholder:${expr(s.label)}}))`;
+ if(s.kind==='PrintStmt') return `h('pre',{class:'ck-console'},${expr(s.value)})`;
+ return `h('pre',{class:'ck-unknown'},${JSON.stringify(s.kind)})`;
+}
+function storeInit(d){ return `let ${d.name} = CK.load(${JSON.stringify(d.name)}, ${expr(d.value)});`; }
+export function emitWeb(ast){
+ const screen=ast.declarations.find(d=>d.kind==='ScreenDecl') || {name:'Home',body:[]};
+ const stores=ast.declarations.filter(d=>d.kind==='StoreDecl');
+ const layout=(screen.body.find(x=>x.kind==='LayoutStmt')?.mode || 'Stack');
+ const freeform=/^(Freeform|Canvas)$/i.test(layout);
+ const body=screen.body.map((x,i)=>renderStmt(x,i,freeform)).filter(Boolean).join(',');
+ const js=`const appName=${JSON.stringify(ast.app||'ClearKrypt')};\nconst CK={load:(k,d)=>{try{return JSON.parse(localStorage.getItem('ck:'+k))??d}catch{return d}}, save:(k,v)=>localStorage.setItem('ck:'+k,JSON.stringify(v)), newId:()=>crypto.randomUUID?.()||String(Date.now()), say:(m)=>alert(m)};\nwindow.newId=CK.newId; window.say=CK.say;\n${stores.map(storeInit).join('\n')}\nfunction h(tag,props,...kids){const e=document.createElement(tag);for(const[k,v]of Object.entries(props||{})){if(v==null||v===false)continue;if(k==='style')e.setAttribute('style',v);else if(k.startsWith('on'))e.addEventListener(k.slice(2),v);else if(k==='class')e.className=v;else e.setAttribute(k,v)};for(const kid of kids.flat(99)){e.append(kid?.nodeType?kid:document.createTextNode(kid??''))}return e}\nconst root=document.getElementById('app');\nfunction render(){${stores.map(d=>`CK.save(${JSON.stringify(d.name)}, ${d.name});`).join('\n')} root.innerHTML=''; root.append(h('main',{class:'ck-shell ck-layout-${layout.toLowerCase()} ${freeform?'ck-freeform':''}'},${body}));}\nrender();`;
+ const css=`:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#060912;color:#f8fbff;--ck-bg:#060912;--ck-panel:rgba(255,255,255,.08);--ck-border:rgba(255,255,255,.14);--ck-text:#f8fbff;--ck-muted:rgba(248,251,255,.72);--ck-accent:#15d5ff;--ck-accent2:#8c45ff;--ck-action:#ff970e}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 12% 8%,rgba(21,213,255,.18),transparent 34%),radial-gradient(circle at 90% 0%,rgba(140,69,255,.16),transparent 34%),var(--ck-bg)}.ck-shell{width:min(1120px,calc(100vw - 32px));margin:0 auto;padding:48px 0;display:flex;flex-direction:column;gap:18px;min-height:100vh}.ck-layout-stack>*{position:static!important}.ck-layout-dashboard{display:grid;grid-template-columns:repeat(12,1fr);align-items:start}.ck-layout-dashboard>.ck-title,.ck-layout-dashboard>.ck-text{grid-column:1/-1}.ck-layout-dashboard>.ck-card,.ck-layout-dashboard>.ck-list{grid-column:span 6}.ck-freeform{position:relative;display:block;width:100%;min-height:720px;padding:40px}.ck-title{font-size:clamp(38px,7vw,76px);line-height:.94;letter-spacing:-.07em;margin:0 0 8px}.ck-text{font-size:clamp(18px,2vw,24px);line-height:1.45;color:var(--ck-muted);max-width:760px;margin:0}.ck-button{align-self:flex-start;border:0;border-radius:18px;padding:15px 22px;background:linear-gradient(135deg,var(--ck-action),#ffb347);color:#111827;font-weight:900;font-size:17px;box-shadow:0 18px 42px rgba(255,151,14,.22);cursor:pointer}.ck-card,.ck-section,.ck-column,.ck-list-row{border:1px solid var(--ck-border);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045));backdrop-filter:blur(26px);border-radius:28px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.35)}.ck-section,.ck-column{display:flex;flex-direction:column;gap:14px}.ck-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.ck-list{display:flex;flex-direction:column;gap:12px}.ck-list-row{display:flex;gap:16px;align-items:center;justify-content:space-between}.ck-toggle{display:inline-flex;gap:10px;align-items:center;color:var(--ck-muted);font-weight:700}.ck-field{display:flex;flex-direction:column;gap:8px;font-weight:800}.ck-field input{border-radius:14px;border:1px solid var(--ck-border);background:rgba(0,0,0,.22);color:white;padding:12px 14px}.ck-console,.ck-unknown{padding:16px;border-radius:16px;background:#03050b;color:#b8c7ff;overflow:auto}@media(max-width:760px){.ck-shell{padding:28px 0}.ck-layout-dashboard{display:flex;flex-direction:column}.ck-button{width:100%}}`;
+ const html=`<!doctype html><html><head><meta charset=utf-8><meta name=viewport content='width=device-width,initial-scale=1'><title>${ast.app||'ClearKrypt'}</title><meta name=description content='${ast.app||'ClearKrypt'} app generated by ClearKrypt'><link rel=stylesheet href=style.css></head><body><div id=app></div><script type=module src=main.js></script></body></html>`;
+ return {target:'web', meta:ast.meta, outputFiles:{'index.html':html,'main.js':js,'style.css':css}};
+}

package/src/targets/worker.js

@@ -0,0 +1,8 @@
+import { emitJS } from './js.js';
+export function emitWorker(ast){
+ const js = `export default { async fetch(request, env, ctx){ return new Response(JSON.stringify({ ok:true, app:${JSON.stringify(ast.app||'ClearKrypt')}, runtime:'ClearKrypt Worker' }), {headers:{'content-type':'application/json'}}); } }`;
+ return {target:'worker', meta:ast.meta, outputFiles:{'worker.js':js, 'wrangler.toml':`name = "${(ast.app||'clearkrypt-app').toLowerCase().replace(/[^a-z0-9-]/g,'-')}"
+main = "worker.js"
+compatibility_date = "2026-05-18"
+`}};
+}

package/src/vm.js

@@ -0,0 +1,5 @@
+export class CKVM{
+  constructor(){ this.screens=[]; }
+  evalExpr(e){ if(!e) return undefined; if(e.kind==='Literal') return e.value; if(e.kind==='Identifier') return undefined; return `[${e.kind}]`; }
+  async run(program){ for(const ins of program){ if(ins.op==='SCREEN') console.log(`Screen: ${ins.name}`); if(ins.op==='UI') console.log(`${ins.ui}: ${this.evalExpr(ins.value)}`); if(ins.op==='PRINT') console.log(this.evalExpr(ins.value)); } }
+}

package/stdlib/cloud.ck

@@ -0,0 +1,2 @@
+// ClearKrypt Standard Library: Cloud
+// Built-in cloud abstractions: collection, document, query, callable, queue, schedule, secret, env, storage, pubsub, email, push, sms.

package/stdlib/data.ck

@@ -0,0 +1,2 @@
+// ClearKrypt Standard Library: Data
+// Built-in data tools: schema, validate, migrate, seed, index, relationship, policy, auditLog, sync, cache.

package/stdlib/ui.ck

@@ -0,0 +1,2 @@
+// ClearKrypt Standard Library: UI
+// Built-in visual primitives: screen, shell, stack, grid, card, glassCard, text, title, button, input, form, table, chart, map, modal, drawer, tabs, route, theme, animation.

package/testapp.ck

@@ -0,0 +1,35 @@
+app "ClearKrypt Test App"
+
+use ui
+use data
+use storage
+
+ type Task {
+  id: Text
+  title: Text
+  done: Boolean
+}
+
+store local tasks as List<Task> default [
+  Task { id: "1", title: "Learn ClearKrypt basics", done: false },
+  Task { id: "2", title: "Build a styled app", done: false }
+]
+
+screen Home {
+  layout Stack
+  title "ClearKrypt Test App"
+  text "A light app to test automatic layout, local data, actions, and styling."
+  button "Add Test Task" {
+    add Task {
+      id: newId()
+      title: "New task from ClearKrypt"
+      done: false
+    } to tasks
+  }
+  list tasks as task {
+    card {
+      text task.title
+      toggle task.done
+    }
+  }
+}

package/tests/smoke.test.js

@@ -0,0 +1,9 @@
+import assert from 'node:assert';
+import { compileSource } from '../src/index.js';
+const source = `app "Test"
+screen Home { title "Hi" text "There" }`;
+const web = await compileSource(source,{target:'web'});
+assert(web.outputFiles['index.html'].includes('Test'));
+const vm = await compileSource(source,{target:'vm'});
+assert(vm.program.length > 0);
+console.log('✓ smoke tests passed');

package/tools/print-course.js

@@ -0,0 +1,2 @@
+import fs from 'node:fs';
+console.log(fs.readFileSync(new URL('../course/duolingo_course.md', import.meta.url),'utf8'));

package/tools/studio/index.html

@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ClearKrypt Visual Studio</title><link rel="stylesheet" href="studio.css"></head><body><header><div><h1>ClearKrypt Visual Studio</h1><p>Drag visual nodes. The ClearKrypt code updates with @pos(x, y) layout metadata.</p></div><div><button id="copy">Copy Code</button><button id="download">Download .ck</button></div></header><main><section id="stage" aria-label="drag canvas"></section><aside><h2>Source</h2><textarea id="code" spellcheck="false"></textarea><p id="status">Ready</p></aside></main><script type="module" src="studio.js"></script></body></html>

package/tools/studio/studio.css

@@ -0,0 +1 @@
+:root{font-family:Inter,system-ui,sans-serif;color:#f8fafc;background:#070a12}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 32px;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(135deg,#111827,#0f172a)}h1{margin:0;font-size:28px}p{opacity:.76}button{border:0;border-radius:14px;padding:12px 16px;font-weight:800;background:#ff8a00;color:#101010;margin-left:10px}main{display:grid;grid-template-columns:minmax(520px,1fr) 460px;min-height:calc(100vh - 112px)}#stage{position:relative;overflow:auto;background:radial-gradient(circle at 30% 10%,rgba(255,138,0,.2),transparent 30%),linear-gradient(135deg,#090d16,#121826);background-size:auto,auto;padding:24px}aside{border-left:1px solid rgba(255,255,255,.12);padding:18px;background:#0b1020}textarea{width:100%;height:calc(100vh - 230px);resize:none;border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#050812;color:#e5e7eb;padding:16px;font:14px/1.5 ui-monospace,Consolas,monospace}.ck-node{position:absolute;min-width:220px;max-width:320px;cursor:grab;user-select:none;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.06));box-shadow:0 22px 60px rgba(0,0,0,.42);backdrop-filter:blur(22px);padding:18px}.ck-node:active{cursor:grabbing}.ck-node strong{display:block;color:#ffb24d;text-transform:uppercase;letter-spacing:.08em;font-size:12px}.ck-node span{display:block;margin:8px 0 14px}.ck-node small{opacity:.5}.ck-node.button{border-color:rgba(255,138,0,.45)}.ck-node.card{min-height:110px;border-style:dashed}@media(max-width:900px){main{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid rgba(255,255,255,.12)}}

package/tools/studio/studio.js

@@ -0,0 +1,52 @@
+async function loadSource(){
+  try { return await (await fetch('./source.ck')).text(); }
+  catch { return localStorage.getItem('ck-source') || '// Paste ClearKrypt source here'; }
+}
+function parseVisualNodes(src){
+  const lines = src.split(/\r?\n/);
+  const nodes=[];
+  let blockDepth=0;
+  for(let i=0;i<lines.length;i++){
+    const line=lines[i];
+    const m=line.match(/^(\s*)(title|text|button|card)\b(.*)$/);
+    if(m){
+      const layout=line.match(/@pos\(([-\d.]+),\s*([-\d.]+)\)/);
+      nodes.push({id:`line-${i+1}`, line:i, kind:m[2], raw:line, indent:m[1], text:m[3].replace(/@pos\([^)]*\)/,'').trim(), x:layout?Number(layout[1]):40+(nodes.length%3)*260, y:80+Math.floor(nodes.length/3)*140});
+    }
+    blockDepth += (line.match(/{/g)||[]).length - (line.match(/}/g)||[]).length;
+  }
+  return nodes;
+}
+function writePosition(src,node,x,y){
+  const lines=src.split(/\r?\n/); let line=lines[node.line];
+  const tag=` @pos(${Math.round(x)}, ${Math.round(y)})`;
+  if(/@pos\([^)]*\)/.test(line)) line=line.replace(/@pos\([^)]*\)/, tag.trim());
+  else line=line.replace(/(\s*(?:title|text|button|card)\b.*?)(\s*\{?\s*)$/, `$1${tag}$2`);
+  lines[node.line]=line; return lines.join('\n');
+}
+function makeEl(node){
+  const el=document.createElement('div');
+  el.className='ck-node '+node.kind;
+  el.style.left=node.x+'px'; el.style.top=node.y+'px';
+  el.innerHTML=`<strong>${node.kind}</strong><span>${node.text.replace(/[<>&]/g,c=>({'<':'&lt;','>':'&gt;','&':'&amp;'}[c]))}</span><small>${node.id}</small>`;
+  el.dataset.id=node.id;
+  return el;
+}
+let source='', nodes=[];
+const stage=document.querySelector('#stage');
+const code=document.querySelector('#code');
+const status=document.querySelector('#status');
+function render(){
+  stage.innerHTML=''; nodes=parseVisualNodes(source); code.value=source;
+  for(const n of nodes){
+    const el=makeEl(n); stage.append(el);
+    let drag=null;
+    el.addEventListener('pointerdown',e=>{ drag={x:e.clientX,y:e.clientY,l:n.x,t:n.y,node:n,el}; el.setPointerCapture(e.pointerId); });
+    el.addEventListener('pointermove',e=>{ if(!drag)return; n.x=drag.l+e.clientX-drag.x; n.y=drag.t+e.clientY-drag.y; el.style.left=n.x+'px'; el.style.top=n.y+'px'; });
+    el.addEventListener('pointerup',()=>{ if(!drag)return; source=writePosition(source,drag.node,n.x,n.y); code.value=source; localStorage.setItem('ck-source',source); status.textContent=`Updated ${n.kind} position in code`; drag=null; });
+  }
+}
+code.addEventListener('input',()=>{ source=code.value; localStorage.setItem('ck-source',source); render(); });
+document.querySelector('#copy').onclick=async()=>{ await navigator.clipboard.writeText(code.value); status.textContent='Copied updated ClearKrypt code'; };
+document.querySelector('#download').onclick=()=>{ const a=document.createElement('a'); a.href=URL.createObjectURL(new Blob([code.value],{type:'text/plain'})); a.download='updated.ck'; a.click(); };
+source=await loadSource(); render();