@pyreon/compiler 0.22.0 → 0.24.0

package/src/index.ts

@@ -16,6 +16,8 @@ export type {
   ReactivityFindingKind,
 } from './reactivity-lens'
 export { analyzeReactivity, formatReactivityLens } from './reactivity-lens'
+export type { LPIHFireDatum, LPIHMergeOptions } from './lpih'
+export { firesToCreationSiteFindings, mergeFireDataIntoFindings } from './lpih'
 export type { ComponentInfo, IslandInfo, ProjectContext, RouteInfo } from './project-scanner'
 export { generateContext } from './project-scanner'
 export type {

package/src/jsx.ts

@@ -404,6 +404,35 @@ export function scanCollapsibleSites(
             childrenText: site.childrenText,
             key: rocketstyleCollapseKey(tag, site.props, site.childrenText),
           })
+        } else {
+          // Dynamic-prop fallthrough: if the full detector bailed but
+          // the site matches the ternary-of-two-literals shape, expand
+          // into TWO CollapsibleSite entries — one per literal value.
+          // Each expanded site is byte-identical to a static-collapse
+          // site for that value, so the resolver pre-renders both via
+          // the existing SSR pipeline and the compiler emit looks up
+          // both by their respective keys to build the dispatcher.
+          //
+          // No-handler sites route to `__rsCollapseDyn`; handler-bearing
+          // sites route to `__rsCollapseDynH` (handlers are orthogonal
+          // to the SSR-resolved styler class — see `tryDynamicCollapse`
+          // in this file). The scan does NOT distinguish here because
+          // the resolver only cares about (componentName, props, text);
+          // handlers don't affect the resolution.
+          const dyn = detectDynamicCollapsibleShape(node, tag)
+          if (dyn) {
+            for (const value of [dyn.dynamicProp.valueTruthy, dyn.dynamicProp.valueFalsy]) {
+              const expandedProps = { ...dyn.props, [dyn.dynamicProp.name]: value }
+              out.push({
+                componentName: tag,
+                source: imp.source,
+                importedName: imp.imported,
+                props: expandedProps,
+                childrenText: dyn.childrenText,
+                key: rocketstyleCollapseKey(tag, expandedProps, dyn.childrenText),
+              })
+            }
+          }
         }
       }
     }
@@ -527,6 +556,158 @@ export function detectPartialCollapsibleShape(
   return { props, childrenText: childrenText.trim(), handlers }
 }
 
+/**
+ * A dynamic dimension prop on a collapsible call site. A ConditionalExpression
+ * (ternary) where both branches are string literals — `state={cond ? 'a' : 'b'}`
+ * is the canonical shape. Pre-resolution: the prop's value belongs to the
+ * enumerable set `[valueA, valueB]`. The compiler emits one collapsed
+ * variant per literal value + a dispatcher on the original `cond`.
+ */
+export interface DynamicCollapsibleProp {
+  /** JSX attribute name, e.g. `state`. */
+  name: string
+  /** Source span of the ternary condition (the `cond` part), re-emitted into the runtime dispatcher. */
+  condStart: number
+  condEnd: number
+  /** Literal value for the `cond === truthy` branch (consequent). */
+  valueTruthy: string
+  /** Literal value for the `cond === falsy` branch (alternate). */
+  valueFalsy: string
+}
+
+/**
+ * Dynamic-prop partial-collapse detector — PR 2 of the dynamic-prop
+ * partial-collapse build (`.claude/plans/open-work-2026-q3.md` → #1
+ * dynamic-prop bucket = 15.3% of all real-corpus sites; the next-bigger
+ * bite after the `on*`-handler partial-collapse).
+ *
+ * Mirrors `detectPartialCollapsibleShape`'s "extend the bail catalogue
+ * with ONE relaxation" pattern (see that detector's docstring + `PR 1`
+ * `_rsCollapseDyn` runtime helper, PR #765). The single relaxation: a
+ * `JSXExpressionContainer` wrapping a `ConditionalExpression` whose
+ * `consequent` AND `alternate` are BOTH `StringLiteral` is acceptable as
+ * a "ternary-of-two-literals" dynamic prop — captured as a {@link DynamicCollapsibleProp}
+ * with the cond source span + the two literal values.
+ *
+ * Constraint: **AT MOST ONE** such dynamic prop per site. Multiple
+ * ternaries would compound into a 2^N value-set per site at build time
+ * and an N-axis dispatcher at runtime — that's a separable scope
+ * (potential PR 5+), NOT this PR. Sites with 2+ ternaries bail (return
+ * null), keeping the normal mount; same conservative shape as the rest
+ * of the detector family.
+ *
+ * Constraint: the FULL `on*`-handler relaxation is also folded in — a
+ * site can have ONE ternary AND `on*` handlers in the same call. This
+ * matches the real-corpus shape (a Button with `state={cond ? 'a' : 'b'}`
+ * almost always also has an `onClick`). The two relaxations compose
+ * cleanly because they're orthogonal at the resolver layer (handlers
+ * don't change rendered CSS; the ternary picks among pre-resolved
+ * classes). PR 3's emit will use `_rsCollapseDyn` when handlers are
+ * absent and a future combined helper when both are present — for THIS
+ * PR (detector-only) the structure carries both so PR 3 can dispatch.
+ *
+ * Every OTHER non-literal shape still bails (spread, non-handler
+ * non-ternary `{expr}` prop, multi-literal ternary anywhere, computed-
+ * expression ternary, element/expression child, boolean attr) —
+ * conservative by construction, exactly like the rest of the family.
+ * Returns `null` when there are ZERO ternaries so the on*-only path
+ * (`detectPartialCollapsibleShape`) and the full-collapse path
+ * (`detectCollapsibleShape`) stay byte-unchanged and no detector both
+ * claims the same site.
+ *
+ * A consistency test (PR 3) will lock this catalogue against the
+ * plugin scan, mirroring the `detectCollapsibleShape` ↔ `scanCollapsibleSites`
+ * + `detectPartialCollapsibleShape` ↔ scan invariants — keys cannot drift.
+ */
+export function detectDynamicCollapsibleShape(
+  node: N,
+  _tag: string,
+): {
+  props: Record<string, string>
+  childrenText: string
+  handlers: CollapsibleHandler[]
+  dynamicProp: DynamicCollapsibleProp
+} | null {
+  const props: Record<string, string> = {}
+  const handlers: CollapsibleHandler[] = []
+  const dynamicProps: DynamicCollapsibleProp[] = []
+  for (const attr of jsxAttrs(node)) {
+    if (attr.type !== 'JSXAttribute') return null // spread → bail
+    const nm = attr.name?.type === 'JSXIdentifier' ? attr.name.name : null
+    if (!nm) return null
+    const v = attr.value
+    if (!v) return null // boolean attr → bail
+    const isStr =
+      v.type === 'StringLiteral' || (v.type === 'Literal' && typeof v.value === 'string')
+    if (isStr) {
+      props[nm] = String(v.value)
+      continue
+    }
+    // Non-literal in a `{expr}` container — three possible relaxations:
+    //   (a) `on[A-Z]…` handler with any expression → peeled
+    //   (b) any other prop whose expression is a ternary of two string
+    //       literals → peeled as a DynamicCollapsibleProp
+    //   (c) anything else → bail
+    if (
+      v.type === 'JSXExpressionContainer' &&
+      v.expression &&
+      typeof v.expression.start === 'number' &&
+      typeof v.expression.end === 'number'
+    ) {
+      if (/^on[A-Z]/.test(nm)) {
+        handlers.push({ name: nm, exprStart: v.expression.start, exprEnd: v.expression.end })
+        continue
+      }
+      const expr = v.expression
+      if (
+        expr.type === 'ConditionalExpression' &&
+        expr.test &&
+        typeof expr.test.start === 'number' &&
+        typeof expr.test.end === 'number' &&
+        expr.consequent &&
+        expr.alternate
+      ) {
+        // Both branches must be StringLiteral. We deliberately do NOT
+        // accept TemplateLiteral / `as`-casted literals / any other
+        // shape — keep the static-resolvable set narrow + provable.
+        const isLitStr = (n: unknown): n is { type: 'StringLiteral'; value: string } => {
+          const x = n as { type?: string; value?: unknown }
+          return (
+            x?.type === 'StringLiteral' ||
+            (x?.type === 'Literal' && typeof x.value === 'string')
+          )
+        }
+        if (isLitStr(expr.consequent) && isLitStr(expr.alternate)) {
+          dynamicProps.push({
+            name: nm,
+            condStart: expr.test.start,
+            condEnd: expr.test.end,
+            valueTruthy: String((expr.consequent as { value: string }).value),
+            valueFalsy: String((expr.alternate as { value: string }).value),
+          })
+          continue
+        }
+      }
+    }
+    return null // `{expr}` non-handler non-ternary, or non-literal ternary branch → bail
+  }
+  let childrenText = ''
+  for (const c of jsxChildren(node)) {
+    if (c.type === 'JSXText') childrenText += (c.value ?? '') as string
+    else return null // element / expression child → bail
+  }
+  // Exactly ONE dynamic prop is the scope of this PR. Zero ⇒ defer to
+  // the existing detectors (full / on*-handler partial); 2+ ⇒ bail
+  // (multi-axis combinatorics is a separable scope).
+  if (dynamicProps.length !== 1) return null
+  return {
+    props,
+    childrenText: childrenText.trim(),
+    handlers,
+    dynamicProp: dynamicProps[0]!,
+  }
+}
+
 // ─── Main transform ─────────────────────────────────────────────────────────
 
 export function transformJSX(
@@ -665,6 +846,8 @@ export function transformJSX_JS(
   // ── P0 rocketstyle-collapse state ─────────────────────────────────────────
   let needsCollapse = false
   let needsCollapseH = false
+  let needsCollapseDyn = false
+  let needsCollapseDynH = false
   const collapseRuleKeys = new Set<string>()
   const collapseRules: Array<{ ruleKey: string; rules: string[] }> = []
 
@@ -691,7 +874,11 @@ export function transformJSX_JS(
     // plugin scans with the same predicate, so its resolved `sites`
     // keys match these lookups exactly; no drift possible).
     const shape = detectCollapsibleShape(node, tag)
-    if (!shape) return tryPartialCollapse(node, tag) // PR 3: on*-handler-only fallback
+    // Fallthrough chain — same conservative discipline at each layer:
+    //   1. on*-handler-only partial (literal dim props + handlers)
+    //   2. dynamic-prop partial (ternary-of-two-literals on ≤1 dim prop,
+    //      no handlers — handler-combined dynamic is a future PR's scope)
+    if (!shape) return tryPartialCollapse(node, tag) || tryDynamicCollapse(node, tag)
     const { props, childrenText } = shape
     const key = rocketstyleCollapseKey(tag, props, childrenText)
     const site = cfg.sites.get(key)
@@ -765,6 +952,127 @@ export function transformJSX_JS(
     return true
   }
 
+  /**
+   * PR 3 of the dynamic-prop partial-collapse build (open-work #1
+   * dynamic-prop bucket = 15.3% of all real-corpus sites; the
+   * next-bigger bite after the just-shipped `on*`-handler partial).
+   * The dynamic-prop fallback `tryRocketstyleCollapse` defers to when
+   * BOTH the full and the on*-handler-partial paths bail.
+   *
+   * Same site-resolution contract as the full path — the dynamic prop
+   * is replaced with EACH literal value to compute TWO keys; the
+   * resolver pre-renders both via the existing SSR pipeline; if both
+   * lookups succeed AND the structural template is byte-identical
+   * across values, emit `__rsCollapseDyn(html, [classes...], () =>
+   * cond ? 0 : 1, () => __pyrMode() === "dark")` — the PR 1 runtime
+   * helper (#765) dispatches across `(value × mode)` with a stride-2
+   * value-major class layout.
+   *
+   * Conservative discipline:
+   *   - Either expanded key missing from sites map ⇒ bail (an
+   *     intermittent resolver failure on one value mustn't half-collapse)
+   *   - Divergent template HTML across values ⇒ bail (the dispatcher
+   *     assumes a shared template; deriveCollapseDyn cannot be done
+   *     across values that produce structurally different markup —
+   *     this is the cross-value parallel of `deriveCollapse`'s
+   *     light↔dark template-divergence bail)
+   *
+   * Handler-combined sites: when the detected dynamic site has `on*`
+   * handlers (the most common real-corpus shape — bail-census measured
+   * the no-handler subset at 0.2% of all sites; handler-combined is
+   * the bulk of the 15.4% dynamic-prop bucket), emit
+   * `__rsCollapseDynH(...)` (PR A: runtime helper) instead of
+   * `__rsCollapseDyn(...)`. Handlers are orthogonal to the SSR-
+   * resolved styler class (the resolver pre-renders both values
+   * identically regardless of handlers); the union helper just
+   * re-attaches them through the same canonical `_bindEvent` path
+   * `tryPartialCollapse` uses.
+   *
+   * Rule injection unions the rule sets across both values (each value
+   * may inject distinct CSS rules — e.g. `state="primary"` and
+   * `state="secondary"` produce different background-color rules); the
+   * union is the byte-set the dispatcher will need at runtime regardless
+   * of which value the cond resolves to. Idempotent by per-value
+   * `ruleKey` so a re-resolve / HMR is a no-op.
+   */
+  function tryDynamicCollapse(node: N, tag: string): boolean {
+    const cfg = options.collapseRocketstyle
+    if (!cfg) return false
+    const dyn = detectDynamicCollapsibleShape(node, tag)
+    if (!dyn) return false
+    const { props, childrenText, dynamicProp, handlers } = dyn
+    // Look up BOTH expanded sites (one per literal value). The scan's
+    // dynamic-prop fallthrough (above in this file) emits a CollapsibleSite
+    // for each value with identical key construction, so these lookups
+    // must succeed iff both resolved.
+    const truthyProps = { ...props, [dynamicProp.name]: dynamicProp.valueTruthy }
+    const falsyProps = { ...props, [dynamicProp.name]: dynamicProp.valueFalsy }
+    const truthyKey = rocketstyleCollapseKey(tag, truthyProps, childrenText)
+    const falsyKey = rocketstyleCollapseKey(tag, falsyProps, childrenText)
+    const truthySite = cfg.sites.get(truthyKey)
+    const falsySite = cfg.sites.get(falsyKey)
+    if (!truthySite || !falsySite) return false // half-resolved ⇒ keep normal mount
+    // Cross-value template parity — the dispatcher reuses ONE `_tpl`
+    // across both values; divergent markup means we'd silently pick
+    // the truthy variant's HTML for falsy too. Bail conservatively.
+    if (truthySite.templateHtml !== falsySite.templateHtml) return false
+
+    // Build the stride-2 value-major class array (consumed by
+    // `_rsCollapseDyn`): `[v0_light, v0_dark, v1_light, v1_dark]` where
+    // v0 = truthy (cond → 0), v1 = falsy (cond → 1).
+    const classes = [
+      truthySite.lightClass,
+      truthySite.darkClass,
+      falsySite.lightClass,
+      falsySite.darkClass,
+    ]
+    const condSrc = code.slice(dynamicProp.condStart, dynamicProp.condEnd)
+
+    // Handler-combined sites route to `__rsCollapseDynH(...)` (PR A
+    // runtime helper) — handlers re-attached after the class dispatcher
+    // via the canonical `_bindEvent` path, byte-identical to how
+    // `tryPartialCollapse` re-emits handlers via `__rsCollapseH`.
+    // No-handler sites stay on `__rsCollapseDyn(...)` (lighter — no
+    // handlers parameter, no loop allocation).
+    let call: string
+    if (handlers.length > 0) {
+      const handlerObj =
+        `{ ${handlers
+          .map((h) => `${JSON.stringify(h.name)}: (${code.slice(h.exprStart, h.exprEnd)})`)
+          .join(', ')} }`
+      call =
+        `__rsCollapseDynH(${JSON.stringify(truthySite.templateHtml)}, ` +
+        `${JSON.stringify(classes)}, ` +
+        `() => (${condSrc}) ? 0 : 1, ` +
+        `() => __pyrMode() === "dark", ` +
+        `${handlerObj})`
+      needsCollapseDynH = true
+    } else {
+      call =
+        `__rsCollapseDyn(${JSON.stringify(truthySite.templateHtml)}, ` +
+        `${JSON.stringify(classes)}, ` +
+        `() => (${condSrc}) ? 0 : 1, ` +
+        `() => __pyrMode() === "dark")`
+      needsCollapseDyn = true
+    }
+    const start = node.start as number
+    const end = node.end as number
+    const parent = findParent(node)
+    const needsBraces =
+      parent && (parent.type === 'JSXElement' || parent.type === 'JSXFragment')
+    replacements.push({ start, end, text: needsBraces ? `{${call}}` : call })
+    // Union BOTH value's rule bundles into the per-module injection.
+    // De-dupe by ruleKey (the FNV-1a hash from the resolver) so two
+    // dynamic sites sharing a value pay one injection.
+    for (const site of [truthySite, falsySite]) {
+      if (!collapseRuleKeys.has(site.ruleKey)) {
+        collapseRuleKeys.add(site.ruleKey)
+        collapseRules.push({ ruleKey: site.ruleKey, rules: site.rules })
+      }
+    }
+    return true
+  }
+
   function maybeHoist(node: N): string | null {
     if (
       (node.type === 'JSXElement' || node.type === 'JSXFragment') &&
@@ -910,7 +1218,7 @@ export function transformJSX_JS(
     }
   }
 
-  function handleJsxExpression(node: N): void {
+  function handleJsxExpression(node: N, parentJsx?: N): void {
     const expr = node.expression
     if (!expr || expr.type === 'JSXEmptyExpression') return
     const hoistName = maybeHoist(expr)
@@ -919,12 +1227,115 @@ export function transformJSX_JS(
       return
     }
     if (shouldWrap(expr)) {
+      // Skip the accessor wrap for stable references passed as JSX children
+      // of a COMPONENT parent (uppercase tag). The compiler's prop-inlining
+      // pass replaces `{children}` with `() => h.children` for component
+      // parents too (the kinetic Stagger + bokisch.com Intro reproducer);
+      // most consumer libraries (rocketstyle/styler/ui-core/elements) route
+      // children through `mountChild` which handles function children via
+      // `mountReactive`, but libraries that iterate children at the VNode
+      // level (kinetic's StaggerRenderer/TransitionItem) or `cloneVNode`
+      // them directly are silently broken — the function spread produces
+      // `{type: undefined}` and the DOM renders `<undefined>` tags.
+      //
+      // Narrow contract — only stable references are emitted bare:
+      //   - Bare Identifier (`{children}` referencing a prop-derived const)
+      //   - Simple MemberExpression chain (`{obj.x}`, `{obj.x.y}`)
+      // These shapes evaluate the same way whether called once at JSX-
+      // emit time or repeatedly in a `mountReactive` effect — no
+      // reactivity is lost because the underlying value is just a
+      // property read. Other dynamic shapes (CallExpression, BinaryExpression,
+      // LogicalExpression, etc.) keep the wrap so `<Comp>{count()}</Comp>`
+      // and similar patterns stay reactive end-to-end.
+      //
+      // Without this carve-out, library authors are forced to write
+      // defensive `typeof children === 'function' ? children() : children`
+      // unwraps everywhere they consume `props.children` structurally.
+      if (
+        parentJsx &&
+        isComponentTag(jsxTagName(parentJsx)) &&
+        isStableReference(expr) &&
+        !referencesSignalVar(expr)
+      ) {
+        // Skip the carve-out for signal references — `<Comp>{count}</Comp>`
+        // (bare signal identifier) is the user's deliberate "make this
+        // reactive at the call site" pattern. Auto-call + wrap converts to
+        // `() => count()` so the receiving component re-evaluates inside
+        // its mountReactive/mountChild scope. Prop-derived stable refs
+        // (the kinetic / bokisch fix shape) take the bare path.
+        //
+        // Slice the UNWRAPPED expression — TS type-only layers (`as T`,
+        // `satisfies T`, `!`) are stripped because the receiving component
+        // doesn't care about the static type and esbuild strips casts at
+        // the next stage anyway. Also keeps cross-backend equivalence
+        // with the Rust path (whose `accesses_props` doesn't recurse into
+        // TSAsExpression).
+        const start = expr.start as number
+        const end = expr.end as number
+        const unwrapped = unwrapTypeLayers(expr)
+        const sliced = sliceExpr(unwrapped)
+        replacements.push({ start, end, text: sliced })
+        return
+      }
       wrap(expr)
       return
     }
     walkNode(expr)
   }
 
+  /** Component tag — uppercase first letter. Lowercase = DOM element. */
+  function isComponentTag(tag: string): boolean {
+    return tag.length > 0 && tag.charAt(0) !== tag.charAt(0).toLowerCase()
+  }
+
+  /**
+   * Stable reference — an expression whose value is a bare property read.
+   * Bare Identifier (`children`) or a non-computed MemberExpression chain
+   * (`obj.x.y`) terminating in an Identifier or `this`. These are the
+   * shapes that survive the no-wrap path without losing reactivity:
+   * reading them once captures the same value as reading them N times,
+   * because the underlying getter (if any) is the source of truth either
+   * way. Excludes CallExpression / TaggedTemplateExpression / BinaryExpression
+   * / LogicalExpression / ConditionalExpression / etc. — those keep the
+   * wrap so consumers can re-evaluate inside reactive scopes.
+   *
+   * TS type-only layers (`as T` / `satisfies T` / non-null `!`) and
+   * parentheses are transparent — they don't change runtime semantics
+   * so we unwrap to look at the underlying expression. Reproducer:
+   * `<Comp>{children as VNode[]}</Comp>` in `createKineticComponent.tsx`
+   * — the TS cast wraps the Identifier as a `TSAsExpression`; without
+   * unwrap the carve-out misses the very pattern it was written for.
+   */
+  function isStableReference(expr: N): boolean {
+    const u = unwrapTypeLayers(expr)
+    if (u.type === 'Identifier') return true
+    if (u.type === 'MemberExpression') {
+      let cur: N = u
+      while (cur.type === 'MemberExpression') {
+        if (cur.computed) return false
+        if (cur.property?.type !== 'Identifier') return false
+        cur = cur.object
+      }
+      return cur.type === 'Identifier' || cur.type === 'ThisExpression'
+    }
+    return false
+  }
+
+  /** Strip TS type-only layers + parens that don't affect runtime value. */
+  function unwrapTypeLayers(expr: N): N {
+    let cur: N = expr
+    while (
+      cur.type === 'TSAsExpression' ||
+      cur.type === 'TSSatisfiesExpression' ||
+      cur.type === 'TSNonNullExpression' ||
+      cur.type === 'TSTypeAssertion' ||
+      cur.type === 'ParenthesizedExpression'
+    ) {
+      cur = cur.expression
+    }
+    return cur
+  }
+
   // ── Prop-derived variable tracking (collected during the single walk) ─────
   const propsNames = new Set<string>()
   const propDerivedVars = new Map<string, { start: number; end: number }>()
@@ -1387,7 +1798,7 @@ export function transformJSX_JS(
         else if (attr.type === 'JSXSpreadAttribute') handleJsxSpreadAttribute(attr, node)
       }
       for (const child of jsxChildren(node)) {
-        if (child.type === 'JSXExpressionContainer') handleJsxExpression(child)
+        if (child.type === 'JSXExpressionContainer') handleJsxExpression(child, node)
         else walkNode(child)
       }
       // Note: JSXElement is never a function, so no callback depth or scope cleanup needed here
@@ -1465,7 +1876,7 @@ export function transformJSX_JS(
     preamble = `import { ${coreImports.join(', ')} } from "@pyreon/core";\n` + preamble
   }
 
-  if (needsCollapse) {
+  if (needsCollapse || needsCollapseDyn || needsCollapseDynH) {
     const cfg = options.collapseRocketstyle!
     const rd = cfg.runtimeDomSource ?? '@pyreon/runtime-dom'
     const st = cfg.stylerSource ?? '@pyreon/styler'
@@ -1480,8 +1891,17 @@ export function transformJSX_JS(
           `__rsSheet.injectRules(${JSON.stringify(r.rules)},${JSON.stringify(r.ruleKey)});`,
       )
       .join('')
+    // Only import the helpers actually emitted into this module — keeps
+    // the bundle bytes per-feature and tree-shakable. needsCollapse
+    // (full) gates `_rsCollapse`; the partial / dynamic flags gate
+    // their respective helpers independently.
+    const rdImports: string[] = []
+    if (needsCollapse) rdImports.push('_rsCollapse as __rsCollapse')
+    if (needsCollapseH) rdImports.push('_rsCollapseH as __rsCollapseH')
+    if (needsCollapseDyn) rdImports.push('_rsCollapseDyn as __rsCollapseDyn')
+    if (needsCollapseDynH) rdImports.push('_rsCollapseDynH as __rsCollapseDynH')
     preamble =
-      `import { _rsCollapse as __rsCollapse${needsCollapseH ? ', _rsCollapseH as __rsCollapseH' : ''} } from "${rd}";\n` +
+      `import { ${rdImports.join(', ')} } from "${rd}";\n` +
       `import { sheet as __rsSheet } from "${st}";\n` +
       `import { ${cfg.mode.name} as __pyrMode } from "${cfg.mode.source}";\n` +
       `${inj}\n` +