@barefootjs/jsx 0.28.0 → 0.28.1

package/dist/ir-to-client-js/imports.d.ts

@@ -17,6 +17,30 @@ export declare function detectUsedImports(code: string): Set<string>;
  * compiler-emitted /runtime subpath).
  */
 export declare function collectUserDomImports(ir: ComponentIR): string[];
+/**
+ * Build the "is this local name used as a value in the generated code?"
+ * test used to decide which imported specifiers survive into the client
+ * bundle. Prefers a real value-reference set over the historical
+ * `\bname\b` text scan (#2432: an object key or string literal that
+ * merely spells an imported name used to emit a phantom import). Falls
+ * back to a substring scan when the generated text cannot be parsed
+ * cleanly — a partial parse would under-report references and DROP a
+ * needed import. The reference set is computed at most once per call.
+ *
+ * The fallback is a plain `includes()`, not a `\bname\b` regex: `\b` is
+ * defined over `[A-Za-z0-9_]`, so a `$`-prefixed name (`$fetch`, as
+ * exported by `ofetch`) or a non-ASCII local both sit outside a word
+ * boundary and would never match — silently dropping the import, the one
+ * failure direction this helper must never take. Worse, splicing
+ * `localName` straight into `new RegExp(...)` treated `$` as the
+ * end-of-input anchor, so `\b$fetch\b` couldn't match `$fetch` at all.
+ * `includes()` is deliberately COARSER than a word-boundary scan (it
+ * matches `helper` inside `helperFoo` too) — that's fine here: the
+ * fallback's only job is "never under-report", and over-keeping an
+ * import whose binding already exists is harmless, while dropping one is
+ * fatal.
+ */
+export declare function makeValueUsageTest(generatedCode: string): (localName: string) => boolean;
 /**
  * Collect external (non-DOM, non-component) imports that are used in generated code.
  * These are third-party libraries like @barefootjs/form, zod, etc. that need to be

package/dist/ir-to-client-js/imports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"imports.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/imports.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,aAAa,CAAA;AAItD,eAAO,MAAM,yBAAyB,YACpC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EACpE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,EAAE,UAAU,EAAE,kBAAkB,EAAE,cAAc,EAAE,WAAW,EAAE,wBAAwB,EAC7I,iBAAiB,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,WAAW,EAAE,aAAa,EACrG,cAAc,EACd,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAC/C,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAC3H,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAUxG,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAEzD,WAAW,EAAE,SAAS,EAItB,MAAM,EAIN,YAAY,CACJ,CAAA;AAEV,gDAAgD;AAChD,eAAO,MAAM,qBAAqB,wtBAA4B,CAAA;AAE9D,eAAO,MAAM,cAAc,+BAA+B,CAAA;AAE1D,eAAO,MAAM,kBAAkB,qCAAqC,CAAA;AACpE,eAAO,MAAM,4BAA4B,qCAAqC,CAAA;AAE9E;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAqB3D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,CAiB/D;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAmCvH"}
+{"version":3,"file":"imports.d.ts","sourceRoot":"","sources":["../../src/ir-to-client-js/imports.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,aAAa,CAAA;AAKtD,eAAO,MAAM,yBAAyB,YACpC,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EACpE,SAAS,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,EAAE,UAAU,EAAE,kBAAkB,EAAE,cAAc,EAAE,WAAW,EAAE,wBAAwB,EAC7I,iBAAiB,EAAE,aAAa,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,WAAW,EAAE,aAAa,EACrG,cAAc,EACd,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAC/C,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAC3H,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAUxG,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,YAAY,EAEzD,WAAW,EAAE,SAAS,EAItB,MAAM,EAIN,YAAY,CACJ,CAAA;AAEV,gDAAgD;AAChD,eAAO,MAAM,qBAAqB,wtBAA4B,CAAA;AAE9D,eAAO,MAAM,cAAc,+BAA+B,CAAA;AAE1D,eAAO,MAAM,kBAAkB,qCAAqC,CAAA;AACpE,eAAO,MAAM,4BAA4B,qCAAqC,CAAA;AAE9E;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAqB3D;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,CAoB/D;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,kBAAkB,CAAC,aAAa,EAAE,MAAM,GAAG,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,CAWxF;AAED;;;;GAIG;AACH,wBAAgB,sBAAsB,CAAC,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE,mBAAmB,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,CAsCvH"}

package/dist/value-references.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Single door for "is this identifier a VALUE reference in emitted JS".
+ *
+ * Replaces `\bname\b` text scans at the import-emission sites (#2432): a
+ * regex scan can't tell a genuine value reference (`paperColor({ ... })`)
+ * from an object key or string literal that merely spells an imported
+ * name (`{ Theme: 'テーマ' }`). That false match used to make
+ * `collectExternalImports` re-emit a per-specifier type-only import
+ * (`import { paperColor, type Theme } from '../lib/theme'`) as a VALUE
+ * import, which the CLI's relative-import inliner then placed in the IIFE's
+ * `return { … }` with no binding — `ReferenceError: Theme is not defined`
+ * at load, killing the whole page's client JS.
+ *
+ * `packages/cli`'s `detectStrippedReferences` (in `resolve-imports.ts`)
+ * shares the same classifier for its own dangling-reference scan, so the
+ * two "is this a real use" checks in the pipeline can never drift apart.
+ */
+import ts from 'typescript';
+/**
+ * Identifier-position classifier: returns `true` when `id` is being USED
+ * as a value, `false` when it's a declaration name, property key, member-
+ * access name, or other non-reference slot.
+ *
+ * A ShorthandPropertyAssignment (`{ Theme }`) intentionally counts as a
+ * reference — it reads the binding, it doesn't just spell its name.
+ *
+ * Caveat: this is a syntactic test, not a scope analysis. If a local
+ * function parameter happens to share a name with an imported binding,
+ * references inside that function's body will count as references to
+ * the import (false positive). Acceptable: over-counting a reference
+ * just means we keep an import we didn't strictly need, which is a
+ * strict improvement over the alternative failure direction (dropping a
+ * needed import and producing a `ReferenceError`).
+ */
+export declare function isValueReferenceIdentifier(id: ts.Identifier): boolean;
+/**
+ * Parse `code` and collect the text of every identifier that is a VALUE
+ * reference per `isValueReferenceIdentifier`.
+ *
+ * Returns `null` when the text did not parse cleanly. `null` means
+ * "cannot answer" — callers MUST fall back to their previous (regex-scan)
+ * behaviour rather than treating it as an empty set. Narrowing on a
+ * partial parse would DROP a needed import, which is the failure
+ * direction we must never take (a phantom missing-import build failure
+ * is recoverable; a silently dead client bundle is not).
+ */
+export declare function collectValueReferencedNames(code: string): Set<string> | null;
+//# sourceMappingURL=value-references.d.ts.map

package/dist/value-references.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value-references.d.ts","sourceRoot":"","sources":["../src/value-references.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,0BAA0B,CAAC,EAAE,EAAE,EAAE,CAAC,UAAU,GAAG,OAAO,CAgCrE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,2BAA2B,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CA0B5E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/jsx",
-  "version": "0.28.0",
+  "version": "0.28.1",
   "description": "JSX compiler for BarefootJS - transforms JSX to server HTML + client JS",
   "type": "module",
   "main": "./dist/index.js",
@@ -53,7 +53,7 @@
     "directory": "packages/jsx"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.28.0"
+    "@barefootjs/shared": "0.28.1"
   },
   "peerDependencies": {
     "@barefootjs/client": ">=0.2.0",

package/src/__tests__/ir-to-client-js/imports.test.ts

@@ -1,5 +1,5 @@
 import { describe, test, expect } from 'bun:test'
-import { collectExternalImports } from '../../ir-to-client-js/imports'
+import { collectExternalImports, collectUserDomImports } from '../../ir-to-client-js/imports'
 import type { ComponentIR, ImportInfo, SourceLocation } from '../../types'
 
 const dummyLoc: SourceLocation = { file: 'test.tsx', start: { line: 1, column: 0 }, end: { line: 1, column: 0 } }
@@ -229,4 +229,101 @@ describe('collectExternalImports', () => {
       "import { z } from 'zod'",
     ])
   })
+
+  // #2432: `collectExternalImports` used a `\bname\b` text scan to decide
+  // which specifiers survive into the client bundle. That scan never
+  // consulted the per-specifier `isTypeOnly` flag, so a per-specifier
+  // `import { paperColor, type Theme } from '../lib/theme'` re-emitted
+  // `Theme` as a VALUE import whenever the word "Theme" merely appeared in
+  // the generated code (e.g. as an object key) — the CLI's relative-import
+  // inliner then put `Theme` in the IIFE's `return { … }` with no binding,
+  // producing `ReferenceError: Theme is not defined` at load.
+  test('per-specifier type-only specifier is not emitted, while its value sibling is (#2432)', () => {
+    const ir: ReturnType<typeof makeIR> = makeIR([{
+      source: '../lib/theme',
+      specifiers: [
+        { name: 'paperColor', alias: null, isDefault: false, isNamespace: false },
+        { name: 'Theme', alias: null, isDefault: false, isNamespace: false, isTypeOnly: true },
+      ],
+      isTypeOnly: false,
+      loc: dummyLoc,
+    }])
+    const code = "const labels = { Theme: 'テーマ' };\nconst c = paperColor({ paper: '#fff' });"
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { paperColor } from '../lib/theme'"])
+  })
+
+  test('a value specifier that appears ONLY as an object key is not emitted (#2432)', () => {
+    const ir = makeIR([makeImport('./utils', ['helper'])])
+    const code = 'const o = { helper: 1 };'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
+  test('a value specifier that appears ONLY inside a string literal is not emitted (#2432)', () => {
+    const ir = makeIR([makeImport('./utils', ['helper'])])
+    const code = "const s = 'helper is a function';"
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
+  test('a value specifier that appears ONLY as a property-access name is not emitted (#2432)', () => {
+    const ir = makeIR([makeImport('./utils', ['helper'])])
+    const code = 'obj.helper();'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual([])
+  })
+
+  test('a value specifier used via shorthand property IS emitted (#2432)', () => {
+    const ir = makeIR([makeImport('./utils', ['helper'])])
+    const code = 'const o = { helper };'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { helper } from './utils'"])
+  })
+
+  test('unparseable generated text falls back to the text scan (#2432)', () => {
+    const ir = makeIR([makeImport('some-lib', ['helper'])])
+    const code = 'MyComponent helper()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { helper } from 'some-lib'"])
+  })
+
+  // These two pin the fallback branch specifically (generated text that does
+  // NOT parse cleanly, so `makeValueUsageTest` falls back to a substring
+  // scan rather than the AST-based value-reference set). #2432: the
+  // fallback used to be a `new RegExp(`\\b${localName}\\b`)` scan, which
+  // silently DROPPED the import for either shape below — `\b` isn't defined
+  // for `$` or non-ASCII characters, and `$` is also a regex metacharacter
+  // (end-of-input anchor) when spliced unescaped into `new RegExp(...)`, so
+  // `\b$fetch\b` could never match `$fetch` at all. Dropping the import is
+  // the one failure direction this helper must never take.
+  test('fallback matches a $-prefixed specifier (#2432)', () => {
+    const ir = makeIR([makeImport('ofetch', ['$fetch'])])
+    const code = 'MyComponent $fetch()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { $fetch } from 'ofetch'"])
+  })
+
+  test('fallback matches a non-ASCII specifier (#2432)', () => {
+    const ir = makeIR([makeImport('some-lib', ['日本語'])])
+    const code = 'MyComponent 日本語()'
+    const result = collectExternalImports(ir, code)
+    expect(result).toEqual(["import { 日本語 } from 'some-lib'"])
+  })
+})
+
+describe('collectUserDomImports', () => {
+  test('per-specifier type-only specifier is not emitted from the runtime subpath (#2432)', () => {
+    const ir = makeIR([{
+      source: '@barefootjs/client',
+      specifiers: [
+        { name: 'createSignal', alias: null, isDefault: false, isNamespace: false },
+        { name: 'Signal', alias: null, isDefault: false, isNamespace: false, isTypeOnly: true },
+      ],
+      isTypeOnly: false,
+      loc: dummyLoc,
+    }])
+    const result = collectUserDomImports(ir)
+    expect(result).toEqual(['createSignal'])
+  })
 })

package/src/__tests__/type-only-import-leak.test.ts

@@ -0,0 +1,60 @@
+/**
+ * End-to-end compiler pin for issue #2432's minimal reproduction.
+ *
+ * `collectExternalImports` used to decide which imported specifiers to
+ * re-emit into generated client JS with a `\bname\b` text scan over the
+ * generated code, never consulting the PER-SPECIFIER `isTypeOnly` flag
+ * (only the whole-declaration `import type { ... }` flag). So
+ * `import { paperColor, type Theme } from '../lib/theme'` re-emitted
+ * `Theme` as a VALUE import whenever the word "Theme" merely appeared in
+ * the emitted code — here, as an object key (`{ Theme: 'テーマ' }`).
+ *
+ * The CLI's relative-import inliner then places every requested name in
+ * the target module's top-level IIFE `return { … }`. `Theme` is a
+ * type-only export with no runtime binding, so the `return` referenced an
+ * undeclared name — `ReferenceError: Theme is not defined` at load,
+ * which kills the *entire* page's client JS before hydrate ever runs.
+ * The failure is silent from the user's perspective: the SSR-rendered
+ * markup is already on screen, so the page looks fine even though no
+ * interactivity ever wires up. See piconic-ai/barefootjs#2432.
+ */
+
+import { describe, test, expect } from 'bun:test'
+import { compileJSX } from '../compiler'
+import { TestAdapter } from '../adapters/test-adapter'
+
+const adapter = new TestAdapter()
+
+describe('type-only import leak (#2432)', () => {
+  test('a per-specifier type-only import is never re-emitted into client JS', () => {
+    const source = `
+      'use client'
+      import { createSignal } from '@barefootjs/client'
+      import { paperColor, type Theme } from '../lib/theme'
+
+      export function ThemedBadge() {
+        const labels = { Theme: 'テーマ' }
+        const [color, setColor] = createSignal(paperColor({ paper: '#fff' }))
+        return <div title={labels.Theme}>{color()}</div>
+      }
+    `
+
+    const result = compileJSX(source, 'ThemedBadge.tsx', { adapter })
+    expect(result.errors.filter(e => e.severity === 'error')).toHaveLength(0)
+
+    const clientJs = result.files.find(f => f.type === 'clientJs')
+    expect(clientJs).toBeDefined()
+    const code = clientJs!.content
+
+    // The value specifier survives as a real import.
+    expect(code).toContain("import { paperColor } from '../lib/theme'")
+
+    // No import statement anywhere in the bundle mentions `Theme` — the
+    // only legal destination for a value import of that name would be a
+    // binding that doesn't exist in the compiled `../lib/theme` module.
+    const importLines = code.split('\n').filter(line => line.trim().startsWith('import'))
+    for (const line of importLines) {
+      expect(line).not.toContain('Theme')
+    }
+  })
+})

package/src/analyzer.ts

@@ -3974,6 +3974,9 @@ function importsBrowserOnlyClientApi(ctx: AnalyzerContext): boolean {
     if (imp.source !== '@barefootjs/client') continue
     if (imp.isTypeOnly) continue
     for (const spec of imp.specifiers) {
+      // A per-specifier type-only import (`import { type onMount }`) is not
+      // a browser-only API use — it has no runtime binding (#2432).
+      if (spec.isTypeOnly) continue
       const importedName = spec.name
       if (BROWSER_ONLY_CLIENT_APIS.has(importedName)) return true
     }

package/src/compiler.ts

@@ -18,7 +18,7 @@ import { stripClientBuiltinImports } from './builtins.ts'
 import { generateClientJs, generateClientJsWithSourceMap, analyzeClientNeeds } from './ir-to-client-js/index.ts'
 import { decideClientOnlyElision } from './ir-to-client-js/client-only-elision.ts'
 import { emitModuleLevelDeclarations } from './ir-to-client-js/emit-module-level.ts'
-import { RUNTIME_MODULE, detectUsedImports as detectUsedImportsFromCode } from './ir-to-client-js/imports.ts'
+import { RUNTIME_MODULE, detectUsedImports as detectUsedImportsFromCode, makeValueUsageTest } from './ir-to-client-js/imports.ts'
 import { setActiveComponentScope, computeFileScope } from './ir-to-client-js/component-scope.ts'
 import { generateModuleExports, collectInlineExportedNames } from './module-exports.ts'
 import { applyCssLayerPrefix } from './css-layer-prefixer.ts'
@@ -583,6 +583,7 @@ export function compileJSX(
       // in the generated body (e.g. an initializer that calls an imported
       // helper: `createSignal(defaultValue())`).
       const externalImportLines: string[] = []
+      const isUsedAsValue = makeValueUsageTest(body)
       for (const imp of ctx.imports) {
         if (imp.isTypeOnly) continue
         if (imp.source === '@barefootjs/client' || imp.source === RUNTIME_MODULE) continue
@@ -591,7 +592,7 @@ export function compileJSX(
           continue
         }
         const used = imp.specifiers
-          .filter(s => !s.isDefault && !s.isNamespace && new RegExp(`\\b${s.alias || s.name}\\b`).test(body))
+          .filter(s => !s.isDefault && !s.isNamespace && !s.isTypeOnly && isUsedAsValue(s.alias || s.name))
           .map(s => s.alias ? `${s.name} as ${s.alias}` : s.name)
         if (used.length > 0) {
           externalImportLines.push(`import { ${used.join(', ')} } from '${imp.source}'`)
@@ -638,6 +639,9 @@ export function compileJSX(
       if (imp.isTypeOnly) continue
       if (!imp.source.startsWith('./') && !imp.source.startsWith('../')) continue
       for (const spec of imp.specifiers) {
+        // A type-only specifier must not force a `.client.js` source
+        // rewrite — it has no runtime binding (#2432).
+        if (spec.isTypeOnly) continue
         if (ctx.importedClientSignalNames.has(spec.alias ?? spec.name)) {
           sources.add(imp.source)
           break

package/src/errors.ts

@@ -53,6 +53,14 @@ export const ErrorCodes = {
   // or an undeclared component — fail loud with the import to add.
   BUILTIN_REQUIRES_IMPORT: 'BF054',
 
+  // A relative `.ts` module inlined into a client bundle (`resolveRelativeImports`'s
+  // top-level IIFE wrap) was asked for a name it does not export. The IIFE's
+  // `return { … }` has no binding for that name, so the reference throws
+  // `ReferenceError: <name> is not defined` at load — killing the page's
+  // client JS before hydrate. Fail the build instead of shipping the
+  // dangling reference (#2432).
+  INLINED_IMPORT_MISSING_EXPORT: 'BF055',
+
   // Init statement errors (BF052)
   UNDECLARED_INIT_STATEMENT_REFERENCE: 'BF052',
 
@@ -155,6 +163,9 @@ const errorMessages: Record<ErrorCode, string> = {
   [ErrorCodes.STRIPPED_CLIENT_IMPORT_REFERENCED]:
     "Import was stripped from the client bundle but its binding is still referenced. Client components ('use client' .tsx) are not callable as plain functions from imperative .ts modules — render them as JSX from a 'use client' parent instead. If the flagged name is a local shadow rather than the stripped import, please file an issue.",
 
+  [ErrorCodes.INLINED_IMPORT_MISSING_EXPORT]:
+    'An inlined relative import requests a name the target module does not export. The client bundle would throw ReferenceError at load.',
+
   [ErrorCodes.STAGE_REACTIVE_IN_TEMPLATE]:
     'Reactive binding (signal getter or memo) referenced from template scope. The template lambda runs at module scope without the reactive context, so the value cannot be evaluated at SSR. Wrap the JSX expression in /* @client */ to defer it to hydrate, or restructure so the template uses a prop or static value.',
 

package/src/index.ts

@@ -320,6 +320,10 @@ export {
 // Errors
 export { ErrorCodes, createError, formatError, generateCodeFrame } from './errors.ts'
 
+// Value-reference classifier (#2432) — shared "is this a real value use"
+// door for import-emission sites and the CLI's stripped-reference scan.
+export { isValueReferenceIdentifier, collectValueReferencedNames } from './value-references.ts'
+
 // Expression Parser
 export { parseExpression, tsNodeToParsedExpr, asCallbackMethodCall, CALLBACK_METHODS, sortComparatorFromArrow, serializeParsedExpr, freeVarsInBody, freeIdentifiers, materializeGetterCalls, isSupported, exprToString, stringifyParsedExpr, identifierPath, parseBlockBody, parseBlockBodyTolerant, foldBlockToExpr, predicateTernaryToLogical, containsHigherOrder, extractArrowBodyExpression, parseStyleObjectEntries, hasUnsafeStyleValue, parseProviderObjectLiteral, type ProviderObjectMember, type FoldBlockOptions } from './expression-parser.ts'
 export type { StyleObjectEntry } from './expression-parser.ts'

package/src/ir-to-client-js/imports.ts

@@ -4,6 +4,7 @@
 
 import type { ComponentIR, IRNode } from '../types.ts'
 import { isClientBuiltinName } from '../builtins.ts'
+import { collectValueReferencedNames } from '../value-references.ts'
 
 // All exports from @barefootjs/client/runtime that may be used in generated code
 export const RUNTIME_IMPORT_CANDIDATES = [
@@ -80,7 +81,10 @@ export function collectUserDomImports(ir: ComponentIR): string[] {
   for (const imp of ir.metadata.imports) {
     if (runtimeSources.has(imp.source) && !imp.isTypeOnly) {
       for (const spec of imp.specifiers) {
-        if (!spec.isDefault && !spec.isNamespace) {
+        // Per-specifier type-only (`import { createSignal, type Signal }
+        // from '@barefootjs/client'`) must not emit `Signal` from the
+        // runtime subpath, which does not export it (#2432).
+        if (!spec.isDefault && !spec.isNamespace && !spec.isTypeOnly) {
           // Compile-away built-ins (`<Async>` / `<Region>`) are lowered into
           // the template — never emit their import into the client bundle,
           // where it would be a phantom runtime import (#1915).
@@ -93,6 +97,42 @@ export function collectUserDomImports(ir: ComponentIR): string[] {
   return userImports
 }
 
+/**
+ * Build the "is this local name used as a value in the generated code?"
+ * test used to decide which imported specifiers survive into the client
+ * bundle. Prefers a real value-reference set over the historical
+ * `\bname\b` text scan (#2432: an object key or string literal that
+ * merely spells an imported name used to emit a phantom import). Falls
+ * back to a substring scan when the generated text cannot be parsed
+ * cleanly — a partial parse would under-report references and DROP a
+ * needed import. The reference set is computed at most once per call.
+ *
+ * The fallback is a plain `includes()`, not a `\bname\b` regex: `\b` is
+ * defined over `[A-Za-z0-9_]`, so a `$`-prefixed name (`$fetch`, as
+ * exported by `ofetch`) or a non-ASCII local both sit outside a word
+ * boundary and would never match — silently dropping the import, the one
+ * failure direction this helper must never take. Worse, splicing
+ * `localName` straight into `new RegExp(...)` treated `$` as the
+ * end-of-input anchor, so `\b$fetch\b` couldn't match `$fetch` at all.
+ * `includes()` is deliberately COARSER than a word-boundary scan (it
+ * matches `helper` inside `helperFoo` too) — that's fine here: the
+ * fallback's only job is "never under-report", and over-keeping an
+ * import whose binding already exists is harmless, while dropping one is
+ * fatal.
+ */
+export function makeValueUsageTest(generatedCode: string): (localName: string) => boolean {
+  let referenced: Set<string> | null | undefined
+  return (localName: string) => {
+    if (referenced === undefined) {
+      referenced = collectValueReferencedNames(generatedCode)
+    }
+    if (referenced !== null) {
+      return referenced.has(localName)
+    }
+    return generatedCode.includes(localName)
+  }
+}
+
 /**
  * Collect external (non-DOM, non-component) imports that are used in generated code.
  * These are third-party libraries like @barefootjs/form, zod, etc. that need to be
@@ -101,6 +141,7 @@ export function collectUserDomImports(ir: ComponentIR): string[] {
 export function collectExternalImports(ir: ComponentIR, generatedCode: string, localImportPrefixes?: string[]): string[] {
   const componentNames = collectComponentNames(ir.root)
   const importLines: string[] = []
+  const isUsedAsValue = makeValueUsageTest(generatedCode)
   for (const imp of ir.metadata.imports) {
     if (imp.isTypeOnly) continue
     if (imp.source === '@barefootjs/client' || imp.source === RUNTIME_MODULE) continue
@@ -117,9 +158,11 @@ export function collectExternalImports(ir: ComponentIR, generatedCode: string, l
     // Skip component names — they are rendered via initChild(), not imported directly.
     const usedSpecs: string[] = []
     for (const spec of imp.specifiers) {
+      // Per-specifier `import { type Foo }` has no value binding — #2432.
+      if (spec.isTypeOnly) continue
       const localName = spec.alias || spec.name
       if (componentNames.has(localName)) continue
-      if (new RegExp(`\\b${localName}\\b`).test(generatedCode)) {
+      if (isUsedAsValue(localName)) {
         usedSpecs.push(spec.alias ? `${spec.name} as ${spec.alias}` : spec.name)
       }
     }

package/src/value-references.ts

@@ -0,0 +1,108 @@
+/**
+ * Single door for "is this identifier a VALUE reference in emitted JS".
+ *
+ * Replaces `\bname\b` text scans at the import-emission sites (#2432): a
+ * regex scan can't tell a genuine value reference (`paperColor({ ... })`)
+ * from an object key or string literal that merely spells an imported
+ * name (`{ Theme: 'テーマ' }`). That false match used to make
+ * `collectExternalImports` re-emit a per-specifier type-only import
+ * (`import { paperColor, type Theme } from '../lib/theme'`) as a VALUE
+ * import, which the CLI's relative-import inliner then placed in the IIFE's
+ * `return { … }` with no binding — `ReferenceError: Theme is not defined`
+ * at load, killing the whole page's client JS.
+ *
+ * `packages/cli`'s `detectStrippedReferences` (in `resolve-imports.ts`)
+ * shares the same classifier for its own dangling-reference scan, so the
+ * two "is this a real use" checks in the pipeline can never drift apart.
+ */
+
+import ts from 'typescript'
+
+/**
+ * Identifier-position classifier: returns `true` when `id` is being USED
+ * as a value, `false` when it's a declaration name, property key, member-
+ * access name, or other non-reference slot.
+ *
+ * A ShorthandPropertyAssignment (`{ Theme }`) intentionally counts as a
+ * reference — it reads the binding, it doesn't just spell its name.
+ *
+ * Caveat: this is a syntactic test, not a scope analysis. If a local
+ * function parameter happens to share a name with an imported binding,
+ * references inside that function's body will count as references to
+ * the import (false positive). Acceptable: over-counting a reference
+ * just means we keep an import we didn't strictly need, which is a
+ * strict improvement over the alternative failure direction (dropping a
+ * needed import and producing a `ReferenceError`).
+ */
+export function isValueReferenceIdentifier(id: ts.Identifier): boolean {
+  const parent = id.parent
+  if (!parent) return false
+  if (ts.isPropertyAccessExpression(parent) && parent.name === id) return false
+  if (ts.isPropertyAssignment(parent) && parent.name === id) return false
+  if (
+    (ts.isMethodDeclaration(parent) ||
+      ts.isGetAccessorDeclaration(parent) ||
+      ts.isSetAccessorDeclaration(parent)) &&
+    parent.name === id
+  ) {
+    return false
+  }
+  if (ts.isVariableDeclaration(parent) && parent.name === id) return false
+  if (ts.isFunctionDeclaration(parent) && parent.name === id) return false
+  if (ts.isFunctionExpression(parent) && parent.name === id) return false
+  if (ts.isClassDeclaration(parent) && parent.name === id) return false
+  if (ts.isClassExpression(parent) && parent.name === id) return false
+  if (ts.isParameter(parent) && parent.name === id) return false
+  if (ts.isBindingElement(parent) && (parent.name === id || parent.propertyName === id)) return false
+  if (ts.isLabeledStatement(parent) && parent.label === id) return false
+  if (ts.isBreakOrContinueStatement(parent) && parent.label === id) return false
+  // ImportSpecifier (`{ X }` or `{ X as Y }`) and ExportSpecifier have
+  // only `name`/`propertyName` as Identifier children — written as an
+  // explicit slot check for stylistic consistency with the other
+  // branches above.
+  if (ts.isImportSpecifier(parent) && (parent.name === id || parent.propertyName === id)) return false
+  if (ts.isExportSpecifier(parent) && (parent.name === id || parent.propertyName === id)) return false
+  if (ts.isImportClause(parent) && parent.name === id) return false
+  if (ts.isNamespaceImport(parent) && parent.name === id) return false
+  if (ts.isQualifiedName(parent) && parent.right === id) return false
+  return true
+}
+
+/**
+ * Parse `code` and collect the text of every identifier that is a VALUE
+ * reference per `isValueReferenceIdentifier`.
+ *
+ * Returns `null` when the text did not parse cleanly. `null` means
+ * "cannot answer" — callers MUST fall back to their previous (regex-scan)
+ * behaviour rather than treating it as an empty set. Narrowing on a
+ * partial parse would DROP a needed import, which is the failure
+ * direction we must never take (a phantom missing-import build failure
+ * is recoverable; a silently dead client bundle is not).
+ */
+export function collectValueReferencedNames(code: string): Set<string> | null {
+  let sourceFile: ts.SourceFile
+  try {
+    sourceFile = ts.createSourceFile(
+      'generated.js',
+      code,
+      ts.ScriptTarget.Latest,
+      /*setParentNodes*/ true,
+      ts.ScriptKind.JS,
+    )
+  } catch {
+    return null
+  }
+
+  const diagnostics = (sourceFile as unknown as { parseDiagnostics?: readonly unknown[] }).parseDiagnostics
+  if (diagnostics && diagnostics.length > 0) return null
+
+  const names = new Set<string>()
+  function visit(node: ts.Node): void {
+    if (ts.isIdentifier(node) && isValueReferenceIdentifier(node)) {
+      names.add(node.text)
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(sourceFile)
+  return names
+}