{"_id":"@allternit/ix","_rev":"2-fbab8180daacb32c011f45d063e77e24","name":"@allternit/ix","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@allternit/ix","version":"0.1.0","keywords":["a2r","ui","json-render","declarative","react"],"license":"MIT","_id":"@allternit/ix@0.1.0","maintainers":[{"name":"allternit","email":"allternitpbc@gmail.com"}],"homepage":"https://github.com/a2r/ix#readme","bugs":{"url":"https://github.com/a2r/ix/issues"},"dist":{"shasum":"c14b02a04765e6d1768e154993fb6423f3928308","tarball":"https://registry.npmjs.org/@allternit/ix/-/ix-0.1.0.tgz","fileCount":170,"integrity":"sha512-A+pc6zJxrwbs5fgrH/CLo3Qafq/Y4dxmBtz0R3fMpxmG9qYBedcFfOvbbOZgJNC9+z06xWWDj1GbRdfkKC54iw==","signatures":[{"sig":"MEYCIQDaOl7DkwjbkvOp+91tMiwP9QwEf8gsKBg7OFfKpQIfGgIhAPrL4u9L3Ob4szmNxn3PC6drvIRxHANBXUHvppb8yaXk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":860849},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./state":{"types":"./dist/state/index.d.ts","import":"./dist/state/index.js"},"./catalog":{"types":"./dist/catalog/registry.d.ts","import":"./dist/catalog/registry.js"},"./renderer":{"types":"./dist/renderer/renderer.d.ts","import":"./dist/renderer/renderer.js"},"./adapters/json-render":{"types":"./dist/adapters/json-render.d.ts","import":"./dist/adapters/json-render.js"}},"gitHead":"197c1497d02ffb94fe24fbdc6a6de34e98297159","scripts":{"lint":"eslint src --ext .ts","test":"vitest run","build":"tsc","typecheck":"tsc --noEmit","test:watch":"vitest"},"_npmUser":{"name":"allternit","email":"allternitpbc@gmail.com"},"repository":{"url":"git+https://github.com/a2r/ix.git","type":"git"},"_npmVersion":"11.9.0","description":"A2R Interface eXecution - Declarative UI generation with json-render compatibility","directories":{},"_nodeVersion":"25.6.1","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.29","jsdom":"^24.1.3","eslint":"^8.57.0","vitest":"^1.6.1","typescript":"^5.9.3","@types/node":"^20.19.33","@types/react":"^18.3.28","@typescript-eslint/parser":"^7.0.0","@typescript-eslint/eslint-plugin":"^7.0.0"},"peerDependencies":{"react":"^18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/ix_0.1.0_1776018361386_0.08896051342221556","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@allternit/ix","version":"0.1.1","description":"Allternit Interface eXecution - Declarative UI generation with json-render compatibility","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"},"./catalog":{"import":"./dist/catalog/registry.js","types":"./dist/catalog/registry.d.ts"},"./state":{"import":"./dist/state/index.js","types":"./dist/state/index.d.ts"},"./adapters/json-render":{"import":"./dist/adapters/json-render.js","types":"./dist/adapters/json-render.d.ts"},"./renderer":{"import":"./dist/renderer/renderer.js","types":"./dist/renderer/renderer.d.ts"}},"scripts":{"build":"tsc","test":"vitest run","test:watch":"vitest","lint":"eslint src","typecheck":"tsc --noEmit"},"devDependencies":{"@types/node":"^20.19.33","@types/react":"^18.3.28","eslint":"^9.0.0","@typescript-eslint/eslint-plugin":"^8.0.0","@typescript-eslint/parser":"^8.0.0","jsdom":"^24.1.3","typescript":"^5.9.3","vitest":"^1.6.1","vue":"^3.5.29"},"peerDependencies":{"react":"^18.0.0"},"peerDependenciesMeta":{"react":{"optional":true}},"keywords":["allternit","ui","json-render","declarative","react"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/allternit/ix.git"},"_id":"@allternit/ix@0.1.1","gitHead":"586aaecc85bb83fb7ddf28ef03277b4b89404b96","bugs":{"url":"https://github.com/allternit/ix/issues"},"homepage":"https://github.com/allternit/ix#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-a6FGGmzx9YiVtUg+lfGEVblG8pS1fMNseFxt84D0+FcroqJMgRvFN/mOShumIcADw04Mbus/5gAdJ2RswAHrpg==","shasum":"8cb807219d3ed35d11bed12c12406f924909b98f","tarball":"https://registry.npmjs.org/@allternit/ix/-/ix-0.1.1.tgz","fileCount":114,"unpackedSize":565094,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEm8xe74CljBbEsn4bTUABNGFso3qLldUTbk360RMNW9AiEAsq0fXLuqfk9W61JCd2wlMdAkK0GVzRkEEvLW7Moaqok="}]},"_npmUser":{"name":"allternit","email":"allternitpbc@gmail.com"},"directories":{},"maintainers":[{"name":"allternit","email":"allternitpbc@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ix_0.1.1_1788561152267_0.05777062272645317"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-12T18:26:01.226Z","modified":"2026-09-04T22:32:32.634Z","0.1.0":"2026-04-12T18:26:01.542Z","0.1.1":"2026-09-04T22:32:32.454Z"},"bugs":{"url":"https://github.com/allternit/ix/issues"},"license":"MIT","homepage":"https://github.com/allternit/ix#readme","keywords":["allternit","ui","json-render","declarative","react"],"repository":{"type":"git","url":"git+https://github.com/allternit/ix.git"},"description":"Allternit Interface eXecution - Declarative UI generation with json-render compatibility","maintainers":[{"name":"allternit","email":"allternitpbc@gmail.com"}],"readme":"# @allternit/ix\n\nAllternit Interface eXecution - Declarative UI generation with Vercel Labs json-render compatibility.\n\n## Overview\n\nAllternit-IX enables LLM-generated UI through a JSON Intermediate Representation (IR) with full compatibility for Vercel Labs json-render patterns. This allows AI agents to generate user interfaces declaratively, which are then rendered by the platform.\n\n## Features\n\n- **UI IR Schema**: Structured declarative UI definitions\n- **Component Catalog**: 15 built-in components with semantic versioning\n- **State Store**: Scoped state management with persistence\n- **JSON Patch Engine**: RFC 6902 compliant state synchronization\n- **json-render Adapter**: Bidirectional compatibility with Vercel Labs format\n- **React Renderer**: Full React component rendering\n- **Vue Renderer**: Vue 3 component generation\n- **Svelte Renderer**: Svelte component compilation\n- **IX Capsule Runtime**: Sandboxed execution with P3.9 integration\n- **Policy Gates**: Security controls (rate limiting, sanitization, validation)\n- **LLM-to-IX Pipeline**: Multi-format conversion from LLM outputs\n- **Real-time Collaboration**: Yjs/CRDT integration\n- **Visual Editor**: Fluent API for building UI IR\n\n## Installation\n\n```bash\npnpm add @allternit/ix\n```\n\n## Quick Start\n\n### Basic React Usage\n\n```typescript\nimport { createReactRenderer, createDefaultCatalog, createStateStore } from '@allternit/ix';\n\nconst renderer = createReactRenderer({\n  catalog: createDefaultCatalog(),\n  stateStore: createStateStore(),\n});\n\nconst ui = {\n  version: '1.0.0',\n  components: [\n    {\n      id: 'header',\n      type: 'Heading',\n      props: { children: 'Hello World', level: 1 },\n    },\n    {\n      id: 'input',\n      type: 'Input',\n      props: { placeholder: 'Enter name' },\n      bindings: [\n        { prop: 'value', statePath: 'name', direction: 'two-way' },\n      ],\n    },\n  ],\n  state: {\n    variables: [\n      { path: 'name', type: 'string', default: '' },\n    ],\n  },\n  actions: [],\n};\n\n// Render in React\nfunction App() {\n  return <renderer.UIRoot root={ui} />;\n}\n```\n\n### Vue Renderer\n\n```typescript\nimport { createVueRenderer, compileToVue } from '@allternit/ix/vue';\n\n// Generate Vue component definition\nconst vueComponent = compileToVue(uiDefinition);\n\n// Use with Vue compiler or runtime\nconst { template, setup } = vueComponent;\n```\n\n### Svelte Renderer\n\n```typescript\nimport { compileToSvelte } from '@allternit/ix/svelte';\n\n// Generate Svelte component code\nconst svelteCode = compileToSvelte(uiDefinition);\n// Use with Svelte compiler\n```\n\n### Visual Editor\n\n```typescript\nimport { ui } from '@allternit/ix';\n\n// Build UI programmatically\nconst myUI = ui.create()\n  .state('count', 'number', 0)\n  .add(\n    ui.components.layout.Box({ padding: 4 })\n      .child(ui.components.typography.Heading('Counter', 1))\n      .child(\n        ui.components.input.Button('Increment')\n          .on('onClick', 'increment')\n      )\n  )\n  .build();\n```\n\n### Real-time Collaboration\n\n```typescript\nimport { createYjsAdapter } from '@allternit/ix/collab';\nimport * as Y from 'yjs';\nimport { WebsocketProvider } from 'y-websocket';\n\nconst doc = new Y.Doc();\nconst provider = new WebsocketProvider('ws://localhost:1234', 'room', doc);\n\nconst adapter = createYjsAdapter({\n  doc,\n  provider,\n  userId: 'user-1',\n  userInfo: { name: 'Alice', color: '#ff0000' },\n});\n\n// Collaborative state store\nconst store = adapter.getStore();\nstore.set('shared.value', 42); // Syncs to all connected clients\n```\n\n### JSON-Render Compatibility\n\n```typescript\nimport { jsonRenderAdapter, llmToIX } from '@allternit/ix';\n\n// From json-render to Allternit-IX\nconst jsonRenderSchema = {\n  version: '1.0.0',\n  root: {\n    type: 'Fragment',\n    children: [\n      { type: 'Text', props: { children: 'Hello' } },\n    ],\n  },\n};\n\nconst allternitUi = jsonRenderAdapter.fromJsonRender(jsonRenderSchema);\n\n// Auto-detect and convert\nconst result = llmToIX.convert(jsonRenderSchema);\n```\n\n### IX Capsule Runtime\n\n```typescript\nimport { \n  createIXCapsule, \n  globalCapsuleRegistry,\n  createRateLimitGate,\n  createPropSanitizationGate,\n} from '@allternit/ix';\n\n// Create capsule with security policies\nconst capsule = globalCapsuleRegistry.create({\n  id: 'my-capsule',\n  ui: allternitUi,\n  stateStore: createStateStore(),\n  policyGates: [\n    createRateLimitGate({ maxActionsPerMinute: 60 }),\n    createPropSanitizationGate({ allowHTML: false }),\n  ],\n});\n\n// Subscribe to events\ncapsule.subscribe((event) => {\n  console.log('Capsule event:', event);\n});\n\n// Apply state patches\ncapsule.applyPatch([\n  { op: 'replace', path: '/count', value: 10 },\n]);\n```\n\n## Architecture\n\n```\nAllternit-IX\n├── types/           # TypeScript interfaces\n├── schema/          # UI IR schema definitions\n├── catalog/         # Component registry with semver\n├── state/           # Store + JSON Patch engine (RFC 6902)\n├── adapters/        # Format converters (json-render)\n├── react/           # React renderer\n├── vue/             # Vue renderer\n├── svelte/          # Svelte renderer\n├── runtime/         # Capsule runtime + policy gates\n├── sdk/             # API client + React hooks\n├── pipeline/        # LLM-to-IX conversion\n└── collab/          # Yjs/CRDT + Visual Editor\n```\n\n## Component Catalog\n\nBuilt-in components:\n\n| Component | Category | Props |\n|-----------|----------|-------|\n| Box | layout | padding, margin, width, height, display, gap |\n| Stack | layout | direction, spacing, align, justify |\n| Text | typography | variant, size, weight, color, align |\n| Heading | typography | level, color |\n| Button | input | variant, size, disabled, onClick |\n| Input | input | value, placeholder, type, onChange |\n| TextArea | input | value, rows, onChange |\n| Select | input | value, options, onChange |\n| Card | display | padding, elevation, borderRadius |\n| List | display | items, renderItem, emptyText |\n| Table | display | data, columns, onRowClick |\n\n## API Reference\n\n### State Management\n\n```typescript\nimport { createStateStore, applyPatch } from '@allternit/ix';\n\nconst store = createStateStore({\n  initial: { count: 0 },\n  persist: true,\n  scopeId: 'my-app',\n});\n\n// Subscribe to changes\nconst unsubscribe = store.subscribe('count', (value) => {\n  console.log('Count:', value);\n});\n\n// Apply JSON Patch\nconst patch = [\n  { op: 'replace', path: '/count', value: 5 },\n];\napplyPatchToStore(store, patch);\n```\n\n### Policy Gates\n\n```typescript\nimport {\n  createRateLimitGate,\n  createActionAllowlistGate,\n  createStateValidationGate,\n  composePolicyGates,\n} from '@allternit/ix';\n\nconst policies = composePolicyGates(\n  createRateLimitGate({ maxActionsPerMinute: 60 }),\n  createActionAllowlistGate(['submit', 'cancel']),\n  createStateValidationGate({\n    email: {\n      type: 'string',\n      required: true,\n      validate: (v) => v.includes('@') || 'Invalid email',\n    },\n  })\n);\n```\n\n### LLM-to-IX Pipeline\n\n```typescript\nimport { llmToIX } from '@allternit/ix';\n\n// From JSX-like string\nconst result = llmToIX.fromJSX(`\n  <Card>\n    <Heading level={2}>Sign Up</Heading>\n    <Input $value={email} placeholder=\"Email\" />\n    <Button onClick=\"submit\">Submit</Button>\n  </Card>\n`);\n\n// Auto-detect format\nconst detected = llmToIX.convert(unknownInput);\nconsole.log(detected.confidence); // 0.0 - 1.0\n```\n\n## Implementation Status\n\n### Week 1 ✅\n- UI IR Schema (UIRoot, UIComponent, UIState, UIAction)\n- Component Catalog (15 built-ins, semver support)\n- State Store (scoped state, persistence, bindings)\n- JSON Patch Engine (RFC 6902, full implementation)\n- json-render Adapter (bidirectional conversion)\n\n### Weeks 2-3 ✅\n- React Renderer (complete with all built-ins)\n- IX Capsule Runtime (sandboxed execution)\n- Policy Gates (7 gate types + composition)\n- LLM-to-IX Pipeline (multi-format conversion)\n- Rust API Integration (Axum routes)\n- TypeScript SDK (API client + React hooks)\n\n### Option 4: Enhancements ✅\n- Vue Renderer (component generation)\n- Svelte Renderer (component compilation)\n- Yjs/CRDT Integration (real-time collaboration)\n- Visual Editor (fluent API for UI building)\n- Awareness API (cursor positions, selections)\n\n## License\n\nMIT\n","readmeFilename":"README.md"}