@deneb-ui/cli 2.0.23 → 2.0.25

package/src/arc/transformer.cjs

@@ -17,6 +17,8 @@ const {
   jsxPreviewAttr,
   jsxTemplatePathAttr,
   wrapTextInEditableSpan,
+  jsxStyleAttrs,
+  ensureStyleAttrs,
   b,
 } = require('./ast.cjs');
 const { toPosix } = require('./fs-utils.cjs');
@@ -85,6 +87,7 @@ function splitActionChildren(node, labelField, labelFallback) {
     if (!child) continue;
     if (child.type === 'JSXElement' && getJsxName(child) === 'span' && !hasJsxAttribute(child, 'data-preview-field-path')) {
       ensurePreviewPath(child, labelField);
+      ensureStyleAttrs(child, labelField, 'text');
       replaceTextChildren(child, labelField, labelFallback, 'text');
       nextChildren.push(child);
       wrapped = true;
@@ -146,10 +149,21 @@ function applyTransformToElement(pathNode, transform) {
   }
   if (transform.operation === 'extract-text') {
     ensurePreviewPath(node, transform.field);
+    ensureStyleAttrs(node, transform.field, inferButtonKind(transform.tag));
     replaceTextChildren(node, transform.field, transform.fallback, transform.fieldType || 'text');
+    return;
+  }
+  if (transform.operation === 'style-bind') {
+    if (transform.styleKind === 'grid' || transform.styleKind === 'card') return;
+    ensureStyleAttrs(node, transform.stylePath, transform.styleKind || 'text');
   }
 }
 
+function inferButtonKind(tag) {
+  if (tag === 'button' || tag === 'Button') return 'button';
+  return 'text';
+}
+
 /**
  * Replaces literal text children with an editable <span>, leaving the container
  * element and every one of its classes untouched.
@@ -210,6 +224,14 @@ function applyCollectionTransform(ast, transform) {
       jsxTemplatePathAttr('data-preview-item-path', listPath, indexName)
     );
   }
+  if (!hasJsxAttribute(itemRoot.node, 'data-preview-style-target')) {
+    itemRoot.node.openingElement.attributes.push(
+      jsxTemplatePathAttr('data-preview-style-target', listPath, indexName, '.card')
+    );
+    itemRoot.node.openingElement.attributes.push(
+      b.jsxAttribute(b.jsxIdentifier('data-preview-style-type'), b.stringLiteral('card'))
+    );
+  }
 
   markItemFields(callback, { listPath, binding, indexName });
 
@@ -219,6 +241,14 @@ function applyCollectionTransform(ast, transform) {
       b.jsxAttribute(b.jsxIdentifier('data-preview-list-path'), b.stringLiteral(listPath))
     );
   }
+  if (container && !hasJsxAttribute(container, 'data-preview-style-target')) {
+    container.openingElement.attributes.push(
+      b.jsxAttribute(b.jsxIdentifier('data-preview-style-target'), b.stringLiteral(`${listPath}.grid`))
+    );
+    container.openingElement.attributes.push(
+      b.jsxAttribute(b.jsxIdentifier('data-preview-style-type'), b.stringLiteral('grid'))
+    );
+  }
 
   return bindArrayDeclaration(ast, mapCall, listPath);
 }
@@ -425,6 +455,7 @@ function applyFilePlan(filePlan, profile) {
     'extract-text',
     'wrap-text-span',
     'collection-conversion',
+    'style-bind',
   ]);
 
   // Collections run first: they rewrite the array declaration and add an index
@@ -549,11 +580,36 @@ function inferPageKey(relativeFile) {
   return 'home';
 }
 
+function ensureHtmlBodyHydration(ast) {
+  recast.types.visit(ast, {
+    visitJSXOpeningElement(pathNode) {
+      const name = pathNode.node.name;
+      const tag = name && name.type === 'JSXIdentifier' ? name.name : '';
+      if (tag === 'html' || tag === 'body') {
+        const has = (pathNode.node.attributes || []).some(
+          (attr) => attr.type === 'JSXAttribute' && attr.name && attr.name.name === 'suppressHydrationWarning',
+        );
+        if (!has) {
+          pathNode.node.attributes.push(b.jsxAttribute(b.jsxIdentifier('suppressHydrationWarning')));
+        }
+      }
+      this.traverse(pathNode);
+    },
+  });
+}
+
 function instrumentLayoutSource(code, siteDataImport) {
   if (/SiteDataProvider|DenebDataProvider/.test(code)) {
-    return { code, updated: false };
+    if (/suppressHydrationWarning/.test(code)) {
+      return { code, updated: false };
+    }
+    const ast = parseSource(code, 'layout.tsx');
+    ensureHtmlBodyHydration(ast);
+    return { code: printSource(ast, code), updated: true };
   }
+
   const ast = parseSource(code, 'layout.tsx');
+  ensureHtmlBodyHydration(ast);
   ensureImport(ast, '@deneb-ui/ui', ['SiteDataProvider']);
   ensureDefaultImport(ast, siteDataImport, 'initialSiteData');
 

package/src/arc/version.cjs

@@ -2,7 +2,7 @@
 
 const ARC_NAME = 'Deneb ARC';
 const ARC_FULL_NAME = 'Deneb Adaptive Refactoring Compiler';
-const ARC_VERSION = '1.0.0';
+const ARC_VERSION = '1.1.0';
 const SCHEMA_VERSION = 2;
 const ENGINE_ID = 'deneb-arc';
 

package/src/common/style-validation.ts

@@ -0,0 +1,30 @@
+import {
+  collectStyleTargetsFromHtml,
+  validateStyleTree,
+  type StyleValidationIssue,
+} from '@deneb-ui/core';
+
+import type { TemplateVisualEditingArtifact } from './template-visual-edit-contract';
+
+export function validateTemplateStyleContract(input: {
+  siteData: unknown;
+  artifacts: TemplateVisualEditingArtifact[];
+}): StyleValidationIssue[] {
+  const issues: StyleValidationIssue[] = [];
+  const htmlTargets = new Set<string>();
+
+  for (const artifact of input.artifacts) {
+    if (artifact.kind !== 'html') continue;
+    for (const target of collectStyleTargetsFromHtml(artifact.content)) {
+      htmlTargets.add(target);
+    }
+  }
+
+  const siteData =
+    input.siteData && typeof input.siteData === 'object' && !Array.isArray(input.siteData)
+      ? (input.siteData as Record<string, unknown>)
+      : null;
+  const styles = siteData?.styles;
+  issues.push(...validateStyleTree(styles, htmlTargets.size > 0 ? htmlTargets : undefined));
+  return issues;
+}

package/src/tools/deneb-fonts.cjs

@@ -0,0 +1,114 @@
+'use strict';
+
+const {
+  DENEB_FONT_REGISTRY,
+  DENEB_GOOGLE_FONT_COUNT,
+  listFontsByCategory,
+  normalizeFontId,
+  installProjectFonts,
+} = (() => {
+  try {
+    return {
+      ...require('@deneb-ui/core'),
+      ...require('@deneb-ui/core/install-fonts'),
+    };
+  } catch {
+    return {
+      ...require('../../../../packages/deneb-core/dist/index.js'),
+      ...require('../../../../packages/deneb-core/dist/fonts/installProject.js'),
+    };
+  }
+})();
+
+function runFontsList(options = {}) {
+  if (options.json) {
+    console.log(
+      JSON.stringify(
+        { count: DENEB_FONT_REGISTRY.length, google: DENEB_GOOGLE_FONT_COUNT, grouped: listFontsByCategory() },
+        null,
+        2,
+      ),
+    );
+    return 0;
+  }
+
+  console.log(
+    `\n\x1b[1mDENEB Font Catalog\x1b[0m — ${DENEB_FONT_REGISTRY.length} presets (${DENEB_GOOGLE_FONT_COUNT} on Google Fonts)\n`,
+  );
+  const grouped = listFontsByCategory();
+  for (const [category, fonts] of Object.entries(grouped)) {
+    console.log(`\x1b[36m${category}\x1b[0m`);
+    for (const font of fonts) {
+      const badge = font.googleFonts ? 'google' : font.substituteId ? `→ ${font.substituteId}` : 'system';
+      console.log(`  ${font.id.padEnd(22)} ${font.label.padEnd(24)} \x1b[90m${badge}\x1b[0m`);
+    }
+    console.log('');
+  }
+  return 0;
+}
+
+function parseInstallArgs(argv) {
+  const fontIds = [];
+  let all = false;
+  let target = '.';
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === '--all') all = true;
+    else if (arg === '--font' || arg === '-f') fontIds.push(normalizeFontId(argv[++i] || ''));
+    else if (arg.startsWith('--font=')) fontIds.push(normalizeFontId(arg.split('=')[1]));
+    else if (arg === '--json') continue;
+    else if (!arg.startsWith('-')) target = arg;
+  }
+  return { target, fontIds: fontIds.filter(Boolean), all };
+}
+
+function runFontsInstall(projectDirInput, args = []) {
+  const parsed = Array.isArray(args)
+    ? { target: projectDirInput, fontIds: parseInstallArgs(args).fontIds, all: parseInstallArgs(args).all }
+    : parseInstallArgs([projectDirInput, ...(args || [])]);
+
+  const result = installProjectFonts({
+    projectDir: parsed.target || projectDirInput || '.',
+    fontIds: parsed.fontIds,
+    all: parsed.all,
+  });
+  return result.ok ? 0 : 1;
+}
+
+function runFontsCommand(argv = []) {
+  const sub = argv[0];
+  const rest = argv.slice(1);
+  let json = rest.includes('--json');
+
+  if (sub === 'list') return runFontsList({ json });
+  if (sub === 'install') {
+    const parsed = parseInstallArgs(rest);
+    const result = installProjectFonts({
+      projectDir: parsed.target,
+      fontIds: parsed.fontIds,
+      all: parsed.all,
+    });
+    return result.ok ? 0 : 1;
+  }
+
+  console.log(`Usage: deneb fonts <command> [directory] [options]
+
+Commands:
+  list                 Show all ${DENEB_FONT_REGISTRY.length} curated DENEB font presets
+  install [dir]        Download @fontsource packages, write CSS, patch layout
+
+Options:
+  --font <id>          Install a specific font (repeatable)
+  --all                Install all Google Fonts presets (~${DENEB_GOOGLE_FONT_COUNT} packages)
+  --json               JSON output for list
+
+Examples:
+  deneb fonts list
+  deneb fonts install .
+  deneb fonts install . --font inter --font playfair-display
+  deneb fonts install . --all
+`);
+  return 1;
+}
+
+module.exports = { runFontsCommand, runFontsInstall, runFontsList };