@rozie/babel-plugin 0.2.0 → 0.2.1

package/dist/index.cjs

@@ -94234,25 +94234,35 @@ function emitStateField(stateName, init) {
 	else if (_babel_types.isObjectExpression(init) && init.properties.length === 0) typeArg = "<any>";
 	return `  private _${stateName} = signal${typeArg}(${renderExpression(init)});`;
 }
-function emitRefField(refName, elementTag, composedType) {
+function emitRefField(refName, elementTag, composedType, hasElementPortal) {
 	const field = `_ref${refName.charAt(0).toUpperCase()}${refName.slice(1)}`;
-	if (composedType) return `  @query('[data-rozie-ref="${refName}"]') private ${field}!: ${composedType};`;
-	let domType = "HTMLElement";
-	switch (elementTag.toLowerCase()) {
-		case "dialog":
-			domType = "HTMLDialogElement";
-			break;
-		case "img":
-			domType = "HTMLImageElement";
-			break;
-		case "ul":
-			domType = "HTMLUListElement";
-			break;
-		case "li":
-			domType = "HTMLLIElement";
-			break;
+	let domType;
+	if (composedType) domType = composedType;
+	else {
+		domType = "HTMLElement";
+		switch (elementTag.toLowerCase()) {
+			case "dialog":
+				domType = "HTMLDialogElement";
+				break;
+			case "img":
+				domType = "HTMLImageElement";
+				break;
+			case "ul":
+				domType = "HTMLUListElement";
+				break;
+			case "li":
+				domType = "HTMLLIElement";
+				break;
+		}
 	}
-	return `  @query('[data-rozie-ref="${refName}"]') private ${field}!: ${domType};`;
+	if (!hasElementPortal) return `  @query('[data-rozie-ref="${refName}"]') private ${field}!: ${domType};`;
+	const rawField = `__rozieRawRef${refName.charAt(0).toUpperCase()}${refName.slice(1)}`;
+	return [
+		`  @query('[data-rozie-ref="${refName}"]') private ${rawField}!: ${domType};`,
+		`  private get ${field}(): ${domType} {`,
+		`    return rozieResolvePortalledRef(this, '[data-rozie-ref="${refName}"]', this.${rawField}) as ${domType};`,
+		"  }"
+	].join("\n");
 }
 function isLifecycleCall(stmt) {
 	if (!_babel_types.isExpressionStatement(stmt)) return { isHook: false };
@@ -94538,9 +94548,10 @@ function emitScript(ir, opts) {
 	const composedTypeImports = /* @__PURE__ */ new Set();
 	for (const ref of ir.refs) {
 		const composedType = composedRefs.get(ref.name);
-		fieldLines.push(emitRefField(ref.name, ref.elementTag, composedType));
+		fieldLines.push(emitRefField(ref.name, ref.elementTag, composedType, opts.hasElementPortal));
 		if (composedType && composedType !== ir.name) composedTypeImports.add(composedType);
 	}
+	if (opts.hasElementPortal && ir.refs.length > 0) opts.runtime.add("rozieResolvePortalledRef");
 	const composedTypeImportLines = [];
 	for (const typeName of composedTypeImports) {
 		const decl = (ir.components ?? []).find((c) => c.localName === typeName);
@@ -97178,6 +97189,23 @@ function stringifyRules(rules, source) {
 function escapeCssForTemplateLiteral(css) {
 	return css.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
 }
+/**
+* FNV-1a 32-bit hash, hex-encoded. Local copy — INTENTIONALLY not shared
+* with `scopeHash.ts`'s `fnv1a32Hex` (quick 260716-npt Finding 1): that one
+* hashes `basename::componentName` (name-derived), so two versions of the
+* same source file collide identically on it. This hash is over the
+* injected CSS TEXT ITSELF, so distinct global CSS payloads produce
+* distinct `injectGlobalStyles` runtime dedup ids even when the
+* componentName is unchanged.
+*/
+function fnv1a32HexOfCss(s) {
+	let h = 2166136261;
+	for (let i = 0; i < s.length; i++) {
+		h ^= s.charCodeAt(i);
+		h = Math.imul(h, 16777619) >>> 0;
+	}
+	return h.toString(16).padStart(8, "0");
+}
 function emitStyle(styles, source, opts) {
 	const diagnostics = [];
 	const scopedRules = styles.scopedRules;
@@ -97203,7 +97231,8 @@ function emitStyle(styles, source, opts) {
 	if (globalCss.length > 0) {
 		opts.runtime.add("injectGlobalStyles");
 		const escaped = escapeCssForTemplateLiteral(globalCss);
-		globalStyleCall = `injectGlobalStyles('${`rozie-${toKebabCase(opts.componentName)}-global`}', \`\n${escaped}\n\`);`;
+		const cssHash = fnv1a32HexOfCss(globalCss);
+		globalStyleCall = `injectGlobalStyles('${`rozie-${toKebabCase(opts.componentName)}-${cssHash}-global`}', \`\n${escaped}\n\`);`;
 	}
 	return {
 		staticStylesField,
@@ -97310,12 +97339,13 @@ function emitLit(ir, opts = {}) {
 	deconflictReservedComputedInjectNames(ir, reservedClassMembers("lit"), new Set([...(ir.expose ?? []).map((e) => e.name), ...ir.props.map((p) => p.name)]));
 	const slotResult = emitSlotDecl(ir, { decorators: decoratorImports });
 	diagnostics.push(...slotResult.diagnostics);
+	const componentHasElementPortal = hasElementPortal(ir.template);
 	const styleResult = emitStyle(ir.styles, opts.source ?? "", {
 		componentName: ir.name,
 		lit: litImports,
 		runtime: runtimeImports,
 		scopeHash,
-		hasElementPortal: hasElementPortal(ir.template)
+		hasElementPortal: componentHasElementPortal
 	});
 	diagnostics.push(...styleResult.diagnostics);
 	const scriptResult = emitScript(ir, {
@@ -97324,7 +97354,8 @@ function emitLit(ir, opts = {}) {
 		runtime: runtimeImports,
 		lit: litImports,
 		context: contextImports,
-		portalScopeHash: scopeHash
+		portalScopeHash: scopeHash,
+		hasElementPortal: componentHasElementPortal
 	});
 	diagnostics.push(...scriptResult.diagnostics);
 	const listenersResult = emitListeners(ir, {
@@ -97344,8 +97375,8 @@ function emitLit(ir, opts = {}) {
 	if (templateResult.rozieSpreadUsed) runtimeImports.add("rozieSpread");
 	if (templateResult.rozieListenersUsed) runtimeImports.add("rozieListeners");
 	if (ir.adoptDocumentStyles) runtimeImports.add("adoptDocumentStyles");
-	const declaredAttrSkipNames = Array.from(new Set(ir.props.flatMap((p) => [toKebabCase(p.name), p.name.toLowerCase()]))).filter((n) => n.length > 0);
-	const litAttrsGetter = templateResult.rozieSpreadUsed ? declaredAttrSkipNames.length > 0 ? [
+	const declaredAttrSkipNames = Array.from(new Set(["data-rozie-ref", ...ir.props.flatMap((p) => [toKebabCase(p.name), p.name.toLowerCase()])])).filter((n) => n.length > 0);
+	const litAttrsGetter = templateResult.rozieSpreadUsed ? [
 		"  /**",
 		"   * Plan 14-05 — cross-framework attribute fallthrough source. Reads the",
 		"   * host custom element's attributes on each call so a consumer-side bound",
@@ -97357,6 +97388,12 @@ function emitLit(ir, opts = {}) {
 		"   * with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming",
 		"   * forms are folded into the skip set: kebab-case for model props",
 		"   * (explicit `attribute:`) AND lowercased property name (Lit's default).",
+		"   *",
+		"   * command-palette-per-level-virtual / portal-through-portal cluster —",
+		"   * `data-rozie-ref` is ALWAYS skipped too (a reserved compiler bookkeeping",
+		"   * attribute, never a consumer prop) so a parent-assigned `ref=` on this",
+		"   * component's own host tag can never clobber this component's OWN",
+		"   * internal `data-rozie-ref` ref markers via fallthrough re-application.",
 		"   */",
 		"  private get $attrs(): Record<string, string> {",
 		`    const __skip = new Set<string>([${declaredAttrSkipNames.map((n) => `'${n}'`).join(", ")}]);`,
@@ -97367,18 +97404,6 @@ function emitLit(ir, opts = {}) {
 		"    }",
 		"    return out;",
 		"  }"
-	].join("\n") : [
-		"  /**",
-		"   * Plan 14-05 — cross-framework attribute fallthrough source. Reads the",
-		"   * host custom element's attributes on each call so a consumer-side bound",
-		"   * attribute flows through on every render. The `rozieSpread` directive",
-		"   * (D-02) does the cross-render diff downstream.",
-		"   */",
-		"  private get $attrs(): Record<string, string> {",
-		"    const out: Record<string, string> = {};",
-		"    for (const a of Array.from(this.attributes)) out[a.name] = a.value;",
-		"    return out;",
-		"  }"
 	].join("\n") : "";
 	const litListenersGetter = templateResult.rozieListenersUsed ? [
 		"  /**",

package/dist/index.mjs

@@ -94160,25 +94160,35 @@ function emitStateField(stateName, init) {
 	else if (t$3.isObjectExpression(init) && init.properties.length === 0) typeArg = "<any>";
 	return `  private _${stateName} = signal${typeArg}(${renderExpression(init)});`;
 }
-function emitRefField(refName, elementTag, composedType) {
+function emitRefField(refName, elementTag, composedType, hasElementPortal) {
 	const field = `_ref${refName.charAt(0).toUpperCase()}${refName.slice(1)}`;
-	if (composedType) return `  @query('[data-rozie-ref="${refName}"]') private ${field}!: ${composedType};`;
-	let domType = "HTMLElement";
-	switch (elementTag.toLowerCase()) {
-		case "dialog":
-			domType = "HTMLDialogElement";
-			break;
-		case "img":
-			domType = "HTMLImageElement";
-			break;
-		case "ul":
-			domType = "HTMLUListElement";
-			break;
-		case "li":
-			domType = "HTMLLIElement";
-			break;
+	let domType;
+	if (composedType) domType = composedType;
+	else {
+		domType = "HTMLElement";
+		switch (elementTag.toLowerCase()) {
+			case "dialog":
+				domType = "HTMLDialogElement";
+				break;
+			case "img":
+				domType = "HTMLImageElement";
+				break;
+			case "ul":
+				domType = "HTMLUListElement";
+				break;
+			case "li":
+				domType = "HTMLLIElement";
+				break;
+		}
 	}
-	return `  @query('[data-rozie-ref="${refName}"]') private ${field}!: ${domType};`;
+	if (!hasElementPortal) return `  @query('[data-rozie-ref="${refName}"]') private ${field}!: ${domType};`;
+	const rawField = `__rozieRawRef${refName.charAt(0).toUpperCase()}${refName.slice(1)}`;
+	return [
+		`  @query('[data-rozie-ref="${refName}"]') private ${rawField}!: ${domType};`,
+		`  private get ${field}(): ${domType} {`,
+		`    return rozieResolvePortalledRef(this, '[data-rozie-ref="${refName}"]', this.${rawField}) as ${domType};`,
+		"  }"
+	].join("\n");
 }
 function isLifecycleCall(stmt) {
 	if (!t$3.isExpressionStatement(stmt)) return { isHook: false };
@@ -94464,9 +94474,10 @@ function emitScript(ir, opts) {
 	const composedTypeImports = /* @__PURE__ */ new Set();
 	for (const ref of ir.refs) {
 		const composedType = composedRefs.get(ref.name);
-		fieldLines.push(emitRefField(ref.name, ref.elementTag, composedType));
+		fieldLines.push(emitRefField(ref.name, ref.elementTag, composedType, opts.hasElementPortal));
 		if (composedType && composedType !== ir.name) composedTypeImports.add(composedType);
 	}
+	if (opts.hasElementPortal && ir.refs.length > 0) opts.runtime.add("rozieResolvePortalledRef");
 	const composedTypeImportLines = [];
 	for (const typeName of composedTypeImports) {
 		const decl = (ir.components ?? []).find((c) => c.localName === typeName);
@@ -97104,6 +97115,23 @@ function stringifyRules(rules, source) {
 function escapeCssForTemplateLiteral(css) {
 	return css.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
 }
+/**
+* FNV-1a 32-bit hash, hex-encoded. Local copy — INTENTIONALLY not shared
+* with `scopeHash.ts`'s `fnv1a32Hex` (quick 260716-npt Finding 1): that one
+* hashes `basename::componentName` (name-derived), so two versions of the
+* same source file collide identically on it. This hash is over the
+* injected CSS TEXT ITSELF, so distinct global CSS payloads produce
+* distinct `injectGlobalStyles` runtime dedup ids even when the
+* componentName is unchanged.
+*/
+function fnv1a32HexOfCss(s) {
+	let h = 2166136261;
+	for (let i = 0; i < s.length; i++) {
+		h ^= s.charCodeAt(i);
+		h = Math.imul(h, 16777619) >>> 0;
+	}
+	return h.toString(16).padStart(8, "0");
+}
 function emitStyle(styles, source, opts) {
 	const diagnostics = [];
 	const scopedRules = styles.scopedRules;
@@ -97129,7 +97157,8 @@ function emitStyle(styles, source, opts) {
 	if (globalCss.length > 0) {
 		opts.runtime.add("injectGlobalStyles");
 		const escaped = escapeCssForTemplateLiteral(globalCss);
-		globalStyleCall = `injectGlobalStyles('${`rozie-${toKebabCase(opts.componentName)}-global`}', \`\n${escaped}\n\`);`;
+		const cssHash = fnv1a32HexOfCss(globalCss);
+		globalStyleCall = `injectGlobalStyles('${`rozie-${toKebabCase(opts.componentName)}-${cssHash}-global`}', \`\n${escaped}\n\`);`;
 	}
 	return {
 		staticStylesField,
@@ -97236,12 +97265,13 @@ function emitLit(ir, opts = {}) {
 	deconflictReservedComputedInjectNames(ir, reservedClassMembers("lit"), new Set([...(ir.expose ?? []).map((e) => e.name), ...ir.props.map((p) => p.name)]));
 	const slotResult = emitSlotDecl(ir, { decorators: decoratorImports });
 	diagnostics.push(...slotResult.diagnostics);
+	const componentHasElementPortal = hasElementPortal(ir.template);
 	const styleResult = emitStyle(ir.styles, opts.source ?? "", {
 		componentName: ir.name,
 		lit: litImports,
 		runtime: runtimeImports,
 		scopeHash,
-		hasElementPortal: hasElementPortal(ir.template)
+		hasElementPortal: componentHasElementPortal
 	});
 	diagnostics.push(...styleResult.diagnostics);
 	const scriptResult = emitScript(ir, {
@@ -97250,7 +97280,8 @@ function emitLit(ir, opts = {}) {
 		runtime: runtimeImports,
 		lit: litImports,
 		context: contextImports,
-		portalScopeHash: scopeHash
+		portalScopeHash: scopeHash,
+		hasElementPortal: componentHasElementPortal
 	});
 	diagnostics.push(...scriptResult.diagnostics);
 	const listenersResult = emitListeners(ir, {
@@ -97270,8 +97301,8 @@ function emitLit(ir, opts = {}) {
 	if (templateResult.rozieSpreadUsed) runtimeImports.add("rozieSpread");
 	if (templateResult.rozieListenersUsed) runtimeImports.add("rozieListeners");
 	if (ir.adoptDocumentStyles) runtimeImports.add("adoptDocumentStyles");
-	const declaredAttrSkipNames = Array.from(new Set(ir.props.flatMap((p) => [toKebabCase(p.name), p.name.toLowerCase()]))).filter((n) => n.length > 0);
-	const litAttrsGetter = templateResult.rozieSpreadUsed ? declaredAttrSkipNames.length > 0 ? [
+	const declaredAttrSkipNames = Array.from(new Set(["data-rozie-ref", ...ir.props.flatMap((p) => [toKebabCase(p.name), p.name.toLowerCase()])])).filter((n) => n.length > 0);
+	const litAttrsGetter = templateResult.rozieSpreadUsed ? [
 		"  /**",
 		"   * Plan 14-05 — cross-framework attribute fallthrough source. Reads the",
 		"   * host custom element's attributes on each call so a consumer-side bound",
@@ -97283,6 +97314,12 @@ function emitLit(ir, opts = {}) {
 		"   * with React/Vue/Svelte/Solid/Angular). Both Lit attribute-naming",
 		"   * forms are folded into the skip set: kebab-case for model props",
 		"   * (explicit `attribute:`) AND lowercased property name (Lit's default).",
+		"   *",
+		"   * command-palette-per-level-virtual / portal-through-portal cluster —",
+		"   * `data-rozie-ref` is ALWAYS skipped too (a reserved compiler bookkeeping",
+		"   * attribute, never a consumer prop) so a parent-assigned `ref=` on this",
+		"   * component's own host tag can never clobber this component's OWN",
+		"   * internal `data-rozie-ref` ref markers via fallthrough re-application.",
 		"   */",
 		"  private get $attrs(): Record<string, string> {",
 		`    const __skip = new Set<string>([${declaredAttrSkipNames.map((n) => `'${n}'`).join(", ")}]);`,
@@ -97293,18 +97330,6 @@ function emitLit(ir, opts = {}) {
 		"    }",
 		"    return out;",
 		"  }"
-	].join("\n") : [
-		"  /**",
-		"   * Plan 14-05 — cross-framework attribute fallthrough source. Reads the",
-		"   * host custom element's attributes on each call so a consumer-side bound",
-		"   * attribute flows through on every render. The `rozieSpread` directive",
-		"   * (D-02) does the cross-render diff downstream.",
-		"   */",
-		"  private get $attrs(): Record<string, string> {",
-		"    const out: Record<string, string> = {};",
-		"    for (const a of Array.from(this.attributes)) out[a.name] = a.value;",
-		"    return out;",
-		"  }"
 	].join("\n") : "";
 	const litListenersGetter = templateResult.rozieListenersUsed ? [
 		"  /**",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie/babel-plugin",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Babel plugin for Rozie.js — resolves .rozie imports and compiles them to idiomatic target-framework code.",
   "type": "module",
   "private": false,
@@ -24,7 +24,7 @@
   ],
   "dependencies": {
     "@babel/helper-plugin-utils": "^7.28.0",
-    "@rozie/core": "0.2.0"
+    "@rozie/core": "0.2.1"
   },
   "peerDependencies": {
     "@babel/core": "^7.29.0"