@stacksjs/stx 0.1.16 → 0.2.3

package/dist/visual-testing.js

@@ -0,0 +1,126 @@
+// @bun
+import B from"fs";import $ from"path";import k from"crypto";var V=[{name:"mobile",width:375,height:667,isMobile:!0,hasTouch:!0},{name:"tablet",width:768,height:1024,isMobile:!0,hasTouch:!0},{name:"desktop",width:1280,height:800,isMobile:!1,hasTouch:!1},{name:"wide",width:1920,height:1080,isMobile:!1,hasTouch:!1}];function J(N={}){let Y={snapshotDir:N.snapshotDir||"__snapshots__",screenshotDir:N.screenshotDir||"__screenshots__",updateSnapshots:N.updateSnapshots||process.env.UPDATE_SNAPSHOTS==="true",threshold:N.threshold??0.01,viewports:N.viewports||V,generateDiff:N.generateDiff??!0,diffDir:N.diffDir||"__diffs__",compare:N.compare||b,ci:N.ci??process.env.CI==="true",retries:N.retries??(N.ci?3:1)};return{async snapshot(M,X){let q=$.join(Y.snapshotDir,`${X}.html`),G=C(M),Q=K(G);if(B.existsSync(q)){let W=await Bun.file(q).text(),Z=K(C(W));if(Q===Z)return{passed:!0,snapshotPath:q,message:"Snapshot matches"};if(Y.updateSnapshots)return await B.promises.mkdir($.dirname(q),{recursive:!0}),await Bun.write(q,G),{passed:!0,snapshotPath:q,message:"Snapshot updated"};let F=$.join(Y.diffDir,`${X}.actual.html`),U=$.join(Y.diffDir,`${X}.diff.html`);return await B.promises.mkdir(Y.diffDir,{recursive:!0}),await Bun.write(F,G),await Bun.write(U,I(W,G)),{passed:!1,snapshotPath:q,actualPath:F,diffPath:U,message:"Snapshot does not match"}}return await B.promises.mkdir($.dirname(q),{recursive:!0}),await Bun.write(q,G),{passed:!0,snapshotPath:q,message:"New snapshot created"}},async snapshotJson(M,X){let q=$.join(Y.snapshotDir,`${X}.json`),G=JSON.stringify(M,null,2);if(B.existsSync(q)){let Q=await Bun.file(q).text();if(G===Q)return{passed:!0,snapshotPath:q};if(Y.updateSnapshots)return await Bun.write(q,G),{passed:!0,snapshotPath:q,message:"Snapshot updated"};return{passed:!1,snapshotPath:q,message:`JSON snapshot mismatch:
+${z(Q,G)}`}}return await B.promises.mkdir($.dirname(q),{recursive:!0}),await Bun.write(q,G),{passed:!0,snapshotPath:q,message:"New snapshot created"}},matchInlineSnapshot(M,X){let q=C(M);if(X===void 0)return{passed:!0,expected:q};let G=C(X);return{passed:q===G,expected:q}},getConfig(){return Y}}}function D(N={}){let Y=J(N),M=Y.getConfig();return{async compareScreenshots(X,q,G="desktop"){let Q=$.join(M.screenshotDir,G,`${X}.png`),W=$.join(M.diffDir,G,`${X}.actual.png`),Z=$.join(M.diffDir,G,`${X}.diff.png`);if(B.existsSync(Q)){let F=await Bun.file(Q).arrayBuffer(),U=Buffer.from(F),_=await M.compare(q,U);if(_.match||_.diffPercentage<=M.threshold)return{viewport:G,passed:!0,baselinePath:Q};if(M.updateSnapshots)return await B.promises.mkdir($.dirname(Q),{recursive:!0}),await Bun.write(Q,q),{viewport:G,passed:!0,baselinePath:Q};if(await B.promises.mkdir($.dirname(W),{recursive:!0}),await Bun.write(W,q),_.diffImage&&M.generateDiff)await Bun.write(Z,_.diffImage);return{viewport:G,passed:!1,baselinePath:Q,actualPath:W,diffPath:M.generateDiff?Z:void 0,diffPercentage:_.diffPercentage}}return await B.promises.mkdir($.dirname(Q),{recursive:!0}),await Bun.write(Q,q),{viewport:G,passed:!0,baselinePath:Q}},async testViewports(X,q,G=M.viewports){let Q=[];for(let W of G){let Z=null;for(let F=0;F<M.retries;F++)try{let U=await q(W),_=await this.compareScreenshots(X,U,W.name);Q.push(_),Z=null;break}catch(U){if(Z=U,F<M.retries-1)await new Promise((_)=>setTimeout(_,100*(F+1)))}if(Z)Q.push({viewport:W.name,passed:!1,baselinePath:"",diffPercentage:100})}return Q},getSnapshotTester(){return Y}}}function L(N={}){let M=D(N).getSnapshotTester(),X=new Map;return{addStory(q){X.set(`${q.component}/${q.name}`,q)},addStories(q){for(let G of q)this.addStory(G)},getStories(){return Array.from(X.values())},getStoriesForComponent(q){return Array.from(X.values()).filter((G)=>G.component===q)},async testStory(q){let G=X.get(q);if(!G)return{name:q,passed:!1,duration:0,snapshots:[],screenshots:[],errors:[Error(`Story not found: ${q}`)]};let Q=Date.now(),W={name:q,passed:!0,duration:0,snapshots:[],screenshots:[],errors:[]};try{let Z=await G.render(),F=await M.snapshot(Z,q.replace(/\//g,"-"));if(W.snapshots.push(F),!F.passed)W.passed=!1}catch(Z){W.passed=!1,W.errors.push(Z)}return W.duration=Date.now()-Q,W},async testAllStories(){let q=[];for(let G of X.keys()){let Q=await this.testStory(G);q.push(Q)}return q},async generateStoryIndex(){let q={};for(let G of X.values()){if(!q[G.component])q[G.component]=[];q[G.component].push({name:G.name,args:G.args})}return JSON.stringify(q,null,2)}}}async function S(N,Y={}){let M={outputDir:Y.outputDir||"visual-test-report",format:Y.format||"html",title:Y.title||"Visual Test Report",includeScreenshots:Y.includeScreenshots??!0};await B.promises.mkdir(M.outputDir,{recursive:!0});let X=N.length,q=N.filter((F)=>F.passed).length,G=X-q,Q=N.reduce((F,U)=>F+U.duration,0);if(M.format==="json"){let F={title:M.title,summary:{total:X,passed:q,failed:G,duration:Q},results:N,generatedAt:new Date().toISOString()},U=$.join(M.outputDir,"report.json");return await Bun.write(U,JSON.stringify(F,null,2)),U}if(M.format==="markdown"){let F=`# ${M.title}
+
+`;F+=`## Summary
+
+`,F+=`- Total: ${X}
+`,F+=`- Passed: ${q}
+`,F+=`- Failed: ${G}
+`,F+=`- Duration: ${Q}ms
+
+`,F+=`## Results
+
+`;for(let _ of N){let R=_.passed?"\u2705":"\u274C";if(F+=`### ${R} ${_.name}
+
+`,F+=`Duration: ${_.duration}ms
+
+`,_.errors.length>0){F+=`**Errors:**
+`;for(let A of _.errors)F+=`- ${A.message}
+`;F+=`
+`}if(_.snapshots.length>0){F+=`**Snapshots:**
+`;for(let A of _.snapshots){let j=A.passed?"\u2705":"\u274C";F+=`- ${j} ${A.snapshotPath}
+`}F+=`
+`}}let U=$.join(M.outputDir,"report.md");return await Bun.write(U,F),U}let W=`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${M.title}</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: system-ui, sans-serif; line-height: 1.6; color: #333; max-width: 1200px; margin: 0 auto; padding: 2rem; }
+    h1 { margin-bottom: 1rem; }
+    .summary { display: flex; gap: 2rem; margin-bottom: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 8px; }
+    .stat { text-align: center; }
+    .stat-value { font-size: 2rem; font-weight: bold; }
+    .stat-label { font-size: 0.875rem; color: #666; }
+    .passed { color: #22c55e; }
+    .failed { color: #ef4444; }
+    .results { display: flex; flex-direction: column; gap: 1rem; }
+    .result { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
+    .result-header { padding: 1rem; background: #f9f9f9; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
+    .result-header:hover { background: #f0f0f0; }
+    .result-body { padding: 1rem; display: none; }
+    .result.expanded .result-body { display: block; }
+    .status { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.875rem; }
+    .status.pass { background: #dcfce7; color: #166534; }
+    .status.fail { background: #fee2e2; color: #991b1b; }
+    .error { background: #fef2f2; padding: 0.5rem; border-radius: 4px; margin-top: 0.5rem; font-family: monospace; font-size: 0.875rem; }
+    .diff-view { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin-top: 1rem; }
+    .diff-view img { max-width: 100%; border: 1px solid #ddd; border-radius: 4px; }
+    .diff-label { font-size: 0.875rem; color: #666; margin-bottom: 0.5rem; }
+  </style>
+</head>
+<body>
+  <h1>${M.title}</h1>
+
+  <div class="summary">
+    <div class="stat">
+      <div class="stat-value">${X}</div>
+      <div class="stat-label">Total Tests</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value passed">${q}</div>
+      <div class="stat-label">Passed</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value failed">${G}</div>
+      <div class="stat-label">Failed</div>
+    </div>
+    <div class="stat">
+      <div class="stat-value">${Q}ms</div>
+      <div class="stat-label">Duration</div>
+    </div>
+  </div>
+
+  <div class="results">
+    ${N.map((F)=>`
+      <div class="result ${F.passed?"":"expanded"}">
+        <div class="result-header" onclick="this.parentElement.classList.toggle('expanded')">
+          <span>${F.name}</span>
+          <span class="status ${F.passed?"pass":"fail"}">${F.passed?"PASS":"FAIL"}</span>
+        </div>
+        <div class="result-body">
+          <p>Duration: ${F.duration}ms</p>
+          ${F.errors.length>0?`
+            <div class="error">
+              ${F.errors.map((U)=>`<div>${E(U.message)}</div>`).join("")}
+            </div>
+          `:""}
+          ${F.snapshots.filter((U)=>!U.passed).map((U)=>`
+            <div class="snapshot-diff">
+              <p>Snapshot: ${U.snapshotPath}</p>
+              ${U.diffPath?`<p><a href="file://${U.diffPath}">View diff</a></p>`:""}
+            </div>
+          `).join("")}
+          ${F.screenshots.filter((U)=>!U.passed).map((U)=>`
+            <div class="diff-view">
+              <div>
+                <div class="diff-label">Baseline</div>
+                ${M.includeScreenshots?`<img src="file://${U.baselinePath}" alt="baseline">`:`<p>${U.baselinePath}</p>`}
+              </div>
+              <div>
+                <div class="diff-label">Actual</div>
+                ${M.includeScreenshots&&U.actualPath?`<img src="file://${U.actualPath}" alt="actual">`:`<p>${U.actualPath||"N/A"}</p>`}
+              </div>
+              <div>
+                <div class="diff-label">Diff (${(U.diffPercentage||0).toFixed(2)}%)</div>
+                ${M.includeScreenshots&&U.diffPath?`<img src="file://${U.diffPath}" alt="diff">`:`<p>${U.diffPath||"N/A"}</p>`}
+              </div>
+            </div>
+          `).join("")}
+        </div>
+      </div>
+    `).join("")}
+  </div>
+
+  <script>
+    // Auto-expand failed tests
+    document.querySelectorAll('.result.fail').forEach(el => el.classList.add('expanded'));
+  </script>
+</body>
+</html>`,Z=$.join(M.outputDir,"report.html");return await Bun.write(Z,W),Z}function C(N){return N.replace(/<!--[\s\S]*?-->/g,"").replace(/\s+/g," ").replace(/>\s+</g,"><").replace(/>\s+/g,">").replace(/\s+</g,"<").replace(/"/g,'"').replace(/"/g,'"').trim()}function K(N){return k.createHash("md5").update(N).digest("hex")}function I(N,Y){let M=N.split(`
+`),X=Y.split(`
+`),q="<html><head><style>";q+=".diff { font-family: monospace; white-space: pre; }",q+=".add { background: #dcfce7; }",q+=".remove { background: #fee2e2; }",q+=".line-num { color: #888; width: 3em; display: inline-block; }",q+='</style></head><body><div class="diff">';let G=Math.max(M.length,X.length);for(let Q=0;Q<G;Q++){let W=M[Q]||"",Z=X[Q]||"";if(W===Z)q+=`<div><span class="line-num">${Q+1}</span> ${E(W)}</div>`;else{if(W)q+=`<div class="remove"><span class="line-num">${Q+1}</span>-${E(W)}</div>`;if(Z)q+=`<div class="add"><span class="line-num">${Q+1}</span>+${E(Z)}</div>`}}return q+="</div></body></html>",q}function z(N,Y){let M=JSON.parse(N),X=JSON.parse(Y),q=[];function G(Q,W,Z){if(typeof W!==typeof Z){q.push(`${Q}: type changed from ${typeof W} to ${typeof Z}`);return}if(W===null||Z===null){if(W!==Z)q.push(`${Q}: ${JSON.stringify(W)} \u2192 ${JSON.stringify(Z)}`);return}if(typeof W==="object"){let F=Object.keys(W),U=Object.keys(Z);for(let _ of F)if(!U.includes(_))q.push(`${Q}.${_}: removed`);else G(`${Q}.${_}`,W[_],Z[_]);for(let _ of U)if(!F.includes(_))q.push(`${Q}.${_}: added`)}else if(W!==Z)q.push(`${Q}: ${JSON.stringify(W)} \u2192 ${JSON.stringify(Z)}`)}return G("root",M,X),q.join(`
+`)}function E(N){return N.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}async function b(N,Y){if(N.length!==Y.length)return{match:!1,diffPercentage:100,diffPixels:Math.max(N.length,Y.length)};let M=0;for(let q=0;q<N.length;q++)if(N[q]!==Y[q])M++;let X=M/N.length*100;return{match:M===0,diffPercentage:X,diffPixels:M}}var O=null;async function H(N,Y){if(!O)O=J();return O.snapshot(N,Y)}async function v(N,Y){if(!O)O=J();return O.snapshotJson(N,Y)}function P(){O=null}var x={createSnapshotTester:J,createVisualRegressionTester:D,createStoryTester:L,generateReport:S,snapshot:H,snapshotJson:v,defaultViewports:V};export{v as snapshotJson,H as snapshot,P as resetDefaultTester,S as generateReport,V as defaultViewports,x as default,D as createVisualRegressionTester,L as createStoryTester,J as createSnapshotTester};

package/dist/vue-template.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Check if template contains any Vue-style directives.
+ * Quick check to avoid unnecessary processing.
+ */
+export declare function hasVueTemplateSyntax(template: string): boolean;
+/**
+ * Process Vue template syntax and convert to stx directives.
+ *
+ * This is designed to be called early in the processing pipeline,
+ * before any stx directive processing. It transforms Vue-style syntax
+ * into stx's native directive format.
+ *
+ * @param template - The template string potentially containing Vue directives
+ * @returns The template with Vue directives converted to stx equivalents
+ */
+export declare function processVueTemplate(template: string): string;

package/dist/web-components/css-scoping.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Generate a unique component ID based on hash
+ */
+export declare function generateComponentId(componentName: string, salt?: string): string;
+/**
+ * Scope CSS to a specific component
+ *
+ * @param css - Raw CSS string
+ * @param componentId - Unique component identifier
+ * @param options - Scoping options
+ * @returns Scoped CSS string
+ *
+ * @example
+ * ```typescript
+ * const scoped = scopeCss('.button { color: red; }', 'stx-abc123')
+ * // Returns: '.stx-abc123 .button { color: red; }'
+ * ```
+ */
+export declare function scopeCss(css: string, componentId: string, options?: CssScopingOptions): string;
+/**
+ * Extract CSS from a template
+ *
+ * @param template - The template string
+ * @returns Object with CSS content and template without style tags
+ */
+export declare function extractStyleFromTemplate(template: string): {
+  css: string
+  templateWithoutStyle: string
+};
+/**
+ * Inject scoped CSS into a template
+ *
+ * @param template - The template string
+ * @param scopedCss - The scoped CSS to inject
+ * @param position - Where to inject: 'head', 'body-start', 'body-end'
+ * @returns Template with injected CSS
+ */
+export declare function injectScopedCss(template: string, scopedCss: string, position?: 'head' | 'body-start' | 'body-end'): string;
+/**
+ * Generate CSS for Shadow DOM encapsulation
+ *
+ * @param css - Raw CSS
+ * @returns CSS suitable for Shadow DOM
+ */
+export declare function generateShadowDomCss(css: string): string;
+/**
+ * Options for CSS scoping
+ */
+export declare interface CssScopingOptions {
+  prefix?: string
+  preserveHost?: boolean
+  scopeKeyframes?: boolean
+  scopeCustomProperties?: boolean
+}

package/dist/web-components/index.d.ts

@@ -0,0 +1,20 @@
+export type { CssScopingOptions } from './css-scoping';
+export type {
+  ComputedProperty,
+  ReactiveComponentOptions,
+  ReactiveProperty,
+  WatchDefinition,
+} from './reactive-generator';
+export {
+  extractStyleFromTemplate,
+  generateComponentId,
+  generateShadowDomCss,
+  injectScopedCss,
+  scopeCss,
+} from './css-scoping';
+export {
+  generateReactiveComponentJS,
+  generateReactiveComponentTS,
+  generateReactiveMixin,
+  generateReactiveRuntime,
+} from './reactive-generator';

package/dist/web-components/reactive-generator.d.ts

@@ -0,0 +1,72 @@
+import type { WebComponent } from '../types';
+/**
+ * Generate the reactive mixin for web components
+ *
+ * @returns JavaScript code for the reactive mixin
+ */
+export declare function generateReactiveMixin(): string;
+/**
+ * Generate reactive component JavaScript code
+ *
+ * @param component - Web component configuration
+ * @param template - Component template HTML
+ * @param options - Reactive options
+ * @returns JavaScript code for the reactive component
+ */
+export declare function generateReactiveComponentJS(component: WebComponent, template: string, options?: ReactiveComponentOptions): string;
+/**
+ * Generate reactive component TypeScript code
+ *
+ * @param component - Web component configuration
+ * @param template - Component template HTML
+ * @param options - Reactive options
+ * @returns TypeScript code for the reactive component
+ */
+export declare function generateReactiveComponentTS(component: WebComponent, template: string, options?: ReactiveComponentOptions): string;
+/**
+ * Generate the reactive runtime script for browser inclusion
+ *
+ * @returns Minified runtime script
+ */
+export declare function generateReactiveRuntime(): string;
+/**
+ * Reactive property definition
+ */
+export declare interface ReactiveProperty {
+  name: string
+  type: 'string' | 'number' | 'boolean' | 'object' | 'array'
+  default?: unknown
+  reflect?: boolean
+}
+/**
+ * Computed property definition
+ */
+export declare interface ComputedProperty {
+  name: string
+  dependencies: string[]
+  getter: string
+}
+/**
+ * Watch definition
+ */
+export declare interface WatchDefinition {
+  property: string
+  handler: string
+  immediate?: boolean
+  deep?: boolean
+}
+/**
+ * Reactive component options
+ */
+export declare interface ReactiveComponentOptions {
+  properties?: ReactiveProperty[]
+  computed?: ComputedProperty[]
+  watchers?: WatchDefinition[]
+  methods?: Record<string, string>
+  lifecycle?: {
+    connected?: string
+    disconnected?: string
+    adopted?: string
+    attributeChanged?: string
+  }
+}

package/dist/web-components.d.ts

@@ -4,6 +4,226 @@ import type { StxOptions } from './types';
  */
 export declare function buildWebComponents(options: StxOptions, dependencies: Set<string>): Promise<string[]>;
 /**
- * Directive handler for embedding web components in templates
+ * Generate a unique scope ID for a component
  */
-export declare function webComponentDirectiveHandler(content: string, params: string[], context: Record<string, any>, _filePath: string): string;
+export declare function generateScopeId(componentName: string): string;
+/**
+ * Scope CSS for a web component.
+ *
+ * This function transforms CSS to be scoped to a specific component,
+ * preventing style leakage in non-shadow DOM scenarios.
+ *
+ * @param css - Original CSS content
+ * @param componentTag - Component tag name
+ * @param config - Scoping configuration
+ * @returns Scoped CSS
+ *
+ * @example
+ * // Attribute scoping (default)
+ * scopeCSS('.btn { color: red; }', 'my-button')
+ * // => '.btn[data-v-a1b2c3d4] { color: red; }'
+ *
+ * @example
+ * // Prefix scoping
+ * scopeCSS('.btn { color: red; }', 'my-button', { strategy: 'prefix', prefix: 'my-button' })
+ * // => '.my-button-btn { color: red; }'
+ */
+export declare function scopeCSS(css: string, componentTag: string, config?: Partial<CssScopingConfig>): string;
+/**
+ * Transform HTML to include scope attributes
+ *
+ * @param html - Original HTML content
+ * @param componentTag - Component tag name
+ * @param config - Scoping configuration
+ * @returns HTML with scope attributes added
+ */
+export declare function scopeHTML(html: string, componentTag: string, config?: Partial<CssScopingConfig>): string;
+/**
+ * Get the scope attribute for a component
+ */
+export declare function getScopeAttribute(componentTag: string, config?: Partial<CssScopingConfig>): string;
+/**
+ * Extract and scope inline styles from HTML
+ *
+ * @param html - HTML content with style tags
+ * @param componentTag - Component tag name
+ * @param config - Scoping configuration
+ * @returns Object with scoped HTML and extracted scoped CSS
+ */
+export declare function extractAndScopeStyles(html: string, componentTag: string, config?: Partial<CssScopingConfig>): { html: string, css: string };
+/**
+ * Generate a reactive web component with full lifecycle management.
+ *
+ * Features:
+ * - Reactive properties with automatic re-rendering
+ * - Property observers for side effects
+ * - Attribute reflection (property <-> attribute sync)
+ * - Internal state management with setState()
+ * - Batched rendering with requestAnimationFrame
+ * - Full lifecycle hooks (connected, disconnected, adopted)
+ * - Event handling system
+ * - Template interpolation with property values
+ *
+ * @param config - Reactive web component configuration
+ * @returns JavaScript code for the web component
+ *
+ * @example
+ * ```typescript
+ * const code = generateReactiveWebComponent({
+ *   name: 'CounterButton',
+ *   tag: 'counter-button',
+ *   template: '<button>Count: {{count}}</button>',
+ *   properties: {
+ *     count: { type: 'number', default: 0, reflect: true, render: true },
+ *     label: { type: 'string', default: 'Click me' }
+ *   },
+ *   state: { clicks: 0 },
+ *   events: {
+ *     click: 'this._handleClick()'
+ *   },
+ *   methods: {
+ *     _handleClick: `this.count++; this.setState({ clicks: this._state.clicks + 1 });`
+ *   }
+ * })
+ * ```
+ */
+export declare function generateReactiveWebComponent(config: ReactiveWebComponentConfig): string;
+/**
+ * Generate TypeScript version of reactive web component
+ */
+export declare function generateReactiveWebComponentTS(config: ReactiveWebComponentConfig): string;
+/**
+ * Create a mixin for adding reactivity to existing web components.
+ *
+ * @returns JavaScript code for a ReactiveElement mixin
+ *
+ * @example
+ * ```javascript
+ * // Generated mixin usage:
+ * class MyComponent extends ReactiveElement(HTMLElement) {
+ *   static get properties() {
+ *     return {
+ *       name: { type: 'string', default: 'World' }
+ *     }
+ *   }
+ * }
+ * ```
+ */
+export declare function generateReactiveMixin(): string;
+/**
+ * Generate a complete reactive web component runtime that can be included in pages.
+ * This provides the base classes and utilities for reactive components.
+ *
+ * @returns JavaScript runtime code
+ */
+export declare function generateReactiveRuntime(): string;
+/**
+ * Parse an SFC-style web component file
+ *
+ * Expected format:
+ * ```html
+ * <script>
+ * export default {
+ *   tag: 'my-button',
+ *   props: ['type', 'text'],
+ *   shadowDOM: true // optional, defaults to true
+ * }
+ * </script>
+ *
+ * <button class="{{ type }}">{{ text }}</button>
+ *
+ * <style>
+ * button { padding: 8px 16px; }
+ * </style>
+ * ```
+ */
+export declare function parseSFCComponent(source: string, defaultTag: string): ParsedSFCComponent;
+/**
+ * Generate a web component class from parsed SFC
+ */
+export declare function generateSFCWebComponent(parsed: ParsedSFCComponent): string;
+/**
+ * Directive handler for embedding web components in templates.
+ *
+ * The directive looks for an SFC-style component file and generates
+ * an inline script with the web component class.
+ *
+ * Usage:
+ * ```html
+ * @webcomponent('my-button')
+ * <my-button type="primary" text="Click Me"></my-button>
+ * ```
+ *
+ * Component file (components/my-button.stx):
+ * ```html
+ * <script>
+ * export default {
+ *   tag: 'my-button',
+ *   props: ['type', 'text']
+ * }
+ * </script>
+ *
+ * <button class="{{ type }}">{{ text }}</button>
+ *
+ * <style>
+ * button { padding: 8px 16px; }
+ * </style>
+ * ```
+ */
+export declare function webComponentDirectiveHandler(content: string, params: string[], context: Record<string, any>, filePath: string): Promise<string>;
+/**
+ * Property definition for reactive web components
+ */
+export declare interface ReactivePropertyDefinition {
+  type: 'string' | 'number' | 'boolean' | 'object' | 'array'
+  default?: unknown
+  reflect?: boolean
+  attribute?: string | false
+  observer?: string
+  render?: boolean
+}
+/**
+ * Reactive web component configuration
+ */
+export declare interface ReactiveWebComponentConfig {
+  name: string
+  tag: string
+  baseElement?: string
+  template: string
+  styles?: string
+  shadowDOM?: boolean
+  properties?: Record<string, ReactivePropertyDefinition>
+  lifecycle?: {
+    connected?: string
+    disconnected?: string
+    adopted?: string
+    attributeChanged?: string
+  }
+  events?: Record<string, string>
+  methods?: Record<string, string>
+  state?: Record<string, unknown>
+}
+/**
+ * CSS scoping configuration
+ */
+export declare interface CssScopingConfig {
+  strategy: CssScopingStrategy
+  prefix?: string
+  attributeName?: string
+  preserveOriginal?: boolean
+}
+/**
+ * Parsed SFC web component structure
+ */
+export declare interface ParsedSFCComponent {
+  tag: string
+  props: string[]
+  template: string
+  styles: string
+  script: string
+  shadowDOM: boolean
+}
+/**
+ * CSS scoping strategy
+ */
+export type CssScopingStrategy = 'shadow' | 'prefix' | 'attribute' | 'bem'

package/dist/x-element.d.ts

@@ -0,0 +1,35 @@
+/**
+ * x-element: Lightweight two-way binding for STX
+ *
+ * Provides client-side reactivity for forms and interactive elements:
+ * - x-data: Define reactive data scope
+ * - x-model: Two-way binding for inputs
+ * - x-text: Reactive text content
+ * - @event: Event handling (e.g., @click, @submit)
+ *
+ * Note: Use @if, @for, @foreach for server-side rendering.
+ * x-element is only for client-side interactivity that SSR can't handle.
+ *
+ * @example
+ * ```html
+ * <div x-data="{ name: '', count: 0 }">
+ *   <input x-model="name" />
+ *   <p>Hello, <span x-text="name"></span>!</p>
+ *   <button @click="count++">Count: <span x-text="count"></span></button>
+ * </div>
+ * ```
+ */
+/**
+ * Generate the x-element runtime script
+ * This is injected once per page that uses x-* directives
+ */
+export declare function generateXElementRuntime(): string;
+/**
+ * Check if template uses x-* directives
+ */
+export declare function hasXElementDirectives(template: string): boolean;
+/**
+ * Process x-element directives in template
+ * Injects the runtime if x-* directives are found
+ */
+export declare function processXElementDirectives(template: string): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/stx",
   "type": "module",
-  "version": "0.1.16",
+  "version": "0.2.3",
   "description": "A performant UI Framework. Powered by Bun.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -28,6 +28,38 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    },
+    "./craft": {
+      "types": "./dist/craft-entry.d.ts",
+      "import": "./dist/craft.js"
+    },
+    "./database": {
+      "types": "./dist/database.d.ts",
+      "import": "./dist/database.js"
+    },
+    "./ssg": {
+      "types": "./dist/ssg.d.ts",
+      "import": "./dist/ssg.js"
+    },
+    "./pwa": {
+      "types": "./dist/pwa.d.ts",
+      "import": "./dist/pwa.js"
+    },
+    "./visual-testing": {
+      "types": "./dist/visual-testing.d.ts",
+      "import": "./dist/visual-testing.js"
+    },
+    "./bundle-analyzer": {
+      "types": "./dist/bundle-analyzer.d.ts",
+      "import": "./dist/bundle-analyzer.js"
+    },
     "./*": {
       "import": "./dist/*"
     }
@@ -60,11 +92,11 @@
     "zip:windows-x64": "zip -j bin/stx-windows-x64.zip bin/stx-windows-x64.exe",
     "zip:darwin-x64": "zip -j bin/stx-darwin-x64.zip bin/stx-darwin-x64",
     "zip:darwin-arm64": "zip -j bin/stx-darwin-arm64.zip bin/stx-darwin-arm64",
-    "lint": "bunx eslint .",
-    "lint:fix": "bunx eslint . --fix",
+    "lint": "bunx --bun pickier lint",
+    "lint:fix": "bunx --bun pickier lint --fix",
     "fresh": "bunx rimraf node_modules/ bun.lock && bun i",
     "changelog": "bunx changelogen --output CHANGELOG.md",
-    "prepublishOnly": "bun run build && bun ./scripts/update-git-hash.ts && bun run compile:all && bun run zip:all",
+    "prepublishOnly": "bun run build",
     "test": "bun test --preload ./happy-dom.ts",
     "test:watch": "bun test --watch --preload ./happy-dom.ts",
     "test:coverage": "bun test --coverage --preload ./happy-dom.ts",
@@ -72,11 +104,10 @@
   },
   "dependencies": {
     "@stacksjs/clapp": "^0.2.0",
-    "@stacksjs/headwind": "^0.1.3",
-    "@stacksjs/markdown": "0.1.15",
-    "@stacksjs/sanitizer": "0.1.15",
-    "bun-plugin-stx": "0.1.15",
-    "bunfig": "^0.15.0",
-    "ts-syntax-highlighter": "^0.1.0"
+    "@stacksjs/desktop": "workspace:*",
+    "@stacksjs/sanitizer": "workspace:*",
+    "bun-plugin-stx": "workspace:*",
+    "bunfig": "^0.15.6",
+    "ts-syntax-highlighter": "^0.2.1"
   }
 }