@acms-subir/core 0.3.3-next.20260929113209 → 0.3.3

package/cli/sections.mjs

@@ -0,0 +1,186 @@
+import { readdir, readFile, writeFile, mkdir } from 'node:fs/promises';
+import { join, relative, sep } from 'node:path';
+import { SectionDefinition, Slug, ThemeManifest, BUILTIN_SECTIONS } from '../src/theme-sdk/contract.mjs';
+import { CORE, project, fail, exists, readJson, atomicJson } from './common.mjs';
+import { targetApp, libraryTwin, stubTwin } from './native-sections.mjs';
+
+// Editable-section tooling for coding agents and developers:
+//   section library                 list the starter sections shipped with core
+//   section add <name> --theme <t>  copy a starter section into a project theme
+//                   [--native]      …and an editable native copy into the mobile app
+//   section new <type> --theme <t>  scaffold a blank coded section (and, when the
+//                                   site has a mobile app, a typed native stub)
+//   theme types <t>                 write src/themes/<t>/section-types.d.ts
+
+const LIBRARY = join(CORE, 'section-library');
+const pascal = (type) => type.split('-').map((w) => w[0].toUpperCase() + w.slice(1)).join('');
+
+export async function libraryEntries() {
+  const out = [];
+  for (const name of (await readdir(LIBRARY).catch(() => [])).sort()) {
+    const file = join(LIBRARY, name, 'section.json');
+    if (!(await exists(file))) continue;
+    const raw = await readJson(file);
+    const def = SectionDefinition.parse(raw.definition);
+    out.push({ name, type: raw.type, title: def.name, description: def.description ?? '', variants: def.variants, fields: Object.fromEntries(Object.entries(def.fields).map(([k, f]) => [k, f.type])) });
+  }
+  return out;
+}
+
+async function projectTheme(p, slug) {
+  if (!slug) fail('USAGE', 'Choose a project theme with --theme <slug>.', [], ['acms theme create <slug> makes one.']);
+  Slug.parse(slug);
+  const dir = join(p.cwd, 'src/themes', slug);
+  if (!(await exists(join(dir, 'theme.json')))) fail('NOT_FOUND', `Project theme ${slug} was not found in src/themes/.`, [], [`acms theme create ${slug}`]);
+  return dir;
+}
+
+async function addToManifest(dir, type, definition, flags) {
+  const manifestPath = join(dir, 'theme.json');
+  const raw = await readJson(manifestPath);
+  raw.sections ??= {};
+  if (raw.sections[type] && !flags.force) fail('EXISTS', `theme.json already defines a “${type}” section.`, [], ['Pick another name with --as <type>, or --force to replace it.']);
+  raw.sections[type] = definition;
+  ThemeManifest.parse(raw);
+  await atomicJson(manifestPath, raw, 0o644);
+}
+
+export async function sectionCommand(command, args, flags) {
+  if (command === 'library') return { sections: await libraryEntries(), next: 'acms section add <name> --theme <slug>' };
+  const p = await project();
+  if (command === 'add') {
+    const name = args[0];
+    if (!name) fail('USAGE', 'Name a starter section.', [], ['acms section library lists them.']);
+    const file = join(LIBRARY, name, 'section.json');
+    if (!(await exists(file))) fail('NOT_FOUND', `No starter section named ${name}.`, [], ['acms section library lists them.']);
+    const dir = await projectTheme(p, flags.theme);
+    const raw = await readJson(file);
+    const type = flags.as ?? raw.type;
+    Slug.parse(type);
+    if (BUILTIN_SECTIONS[type] && !flags.force) fail('EXISTS', `“${type}” is a built-in section; replacing it would change every page that uses it.`, [], ['Pick another name with --as <type>.']);
+    const componentFile = raw.definition.component.split('/').pop();
+    const target = type === raw.type ? componentFile : `${pascal(type)}.astro`;
+    const definition = { ...raw.definition, component: `sections/${target}` };
+    const dest = join(dir, 'sections', target);
+    // the mobile app: packaged native component by default, an editable copy with --native
+    const mobile = await targetApp(flags, { required: !!flags.native });
+    // already in the theme + --native: only add the app's copy, leave the web section alone
+    const nativeOnly = flags.native && !flags.force && (await exists(dest)) && Boolean((await readJson(join(dir, 'theme.json'))).sections?.[type]);
+    if ((await exists(dest)) && !flags.force && !nativeOnly) fail('EXISTS', `sections/${target} already exists.`, [], ['Use --as <type> or --force.']);
+    const nativePlan = flags.native ? await libraryTwin(mobile.app, name, type, flags, false) : null;
+    if (flags['dry-run']) return { dryRun: true, type, files: nativeOnly ? [] : [`sections/${target}`, 'theme.json'], ...(nativePlan ? { native: nativePlan } : {}) };
+    if (nativeOnly) return { added: type, web: 'unchanged', native: await libraryTwin(mobile.app, name, type, flags, true) };
+    await mkdir(join(dir, 'sections'), { recursive: true });
+    await writeFile(dest, await readFile(join(LIBRARY, name, componentFile), 'utf8'));
+    await addToManifest(dir, type, definition, flags);
+    const native = flags.native ? await libraryTwin(mobile.app, name, type, flags, true)
+      : mobile.app ? { app: mobile.app.dir, packaged: type === raw.type, note: type === raw.type
+        ? `The app renders “${type}” with the packaged component from @acms-subir/native/sections. For an editable copy in ${mobile.app.dir}/sections/, run: acms section add ${name} --theme ${flags.theme} --native`
+        : `“${type}” is a renamed ${raw.type}; the app shows it as a web view until you add a native copy: acms section add ${name} --theme ${flags.theme} --as ${type} --native` }
+      : mobile.warning ? { note: mobile.warning } : undefined;
+    return { added: type, component: `src/themes/${flags.theme}/sections/${target}`, example: raw.example, ...(native ? { native } : {}), next: [`acms theme types ${flags.theme}`, `acms theme check ${flags.theme}`] };
+  }
+  if (command === 'new') {
+    if (flags.native) fail('USAGE', '--native is for section add; section new writes a native stub whenever the site has a mobile app.');
+    const type = args[0];
+    if (!type) fail('USAGE', 'Name the section type, e.g. acms section new service-times --theme studio');
+    Slug.parse(type);
+    if (BUILTIN_SECTIONS[type]) fail('EXISTS', `“${type}” is a built-in section. Pick another name.`);
+    const dir = await projectTheme(p, flags.theme);
+    const file = `${pascal(type)}.astro`;
+    const title = flags.name ?? type.split('-').map((w, i) => (i ? w : w[0].toUpperCase() + w.slice(1))).join(' ');
+    const definition = {
+      name: title, version: 1, component: `sections/${file}`, variants: ['default'],
+      fields: {
+        heading: { label: 'Heading', type: 'text', default: title },
+        items: { label: 'Items', type: 'list', itemLabel: 'title', max: 12, fields: { title: { label: 'Title', type: 'text' }, text: { label: 'Text', type: 'textarea' } } },
+      },
+    };
+    if (await exists(join(dir, 'sections', file))) fail('EXISTS', `sections/${file} already exists.`);
+    if (flags['dry-run']) return { dryRun: true, type, files: [`sections/${file}`, 'theme.json'] };
+    await mkdir(join(dir, 'sections'), { recursive: true });
+    await writeFile(join(dir, 'sections', file), `---
+import type { SectionProps } from '@acms-subir/core/theme';
+import type { ${pascal(type)}Data } from '../section-types';
+const { data, variant } = Astro.props as SectionProps<${pascal(type)}Data>;
+---
+<div class:list={['${type}', \`is-\${variant}\`]}>
+  <h2>{data.heading}</h2>
+  <ul>
+    {data.items.filter((item) => item.title).map((item) => (
+      <li><b>{item.title}</b>{item.text && <p>{item.text}</p>}</li>
+    ))}
+  </ul>
+</div>
+<style>
+  ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
+  li { padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
+  p { margin: 0.35rem 0 0; color: var(--muted); }
+</style>
+`);
+    await addToManifest(dir, type, definition, flags);
+    await writeTypes(dir);
+    // a typed native stub beside it, when the site has a mobile app
+    const mobile = await targetApp(flags);
+    const native = mobile.app ? { ...(await writeAppTypes(mobile.app.dir, dir)), ...(await stubTwin(mobile.app, type, title, flags.theme, flags)) } : mobile.warning ? { note: mobile.warning } : undefined;
+    return { created: type, component: `src/themes/${flags.theme}/sections/${file}`, ...(native ? { native } : {}), next: ['Edit the fields in theme.json and the markup in the component', ...(native?.component ? [`Mirror the markup in ${native.component}`] : []), `acms theme types ${flags.theme}`, `acms theme check ${flags.theme} --build`] };
+  }
+  fail('USAGE', 'Unknown section command.', [], ['acms section library | add <name> --theme <slug> | new <type> --theme <slug>']);
+}
+
+// ---- types ---------------------------------------------------------------
+
+const quote = (s) => JSON.stringify(s);
+function tsType(field, indent = '  ') {
+  switch (field.type) {
+    case 'number': return 'number';
+    case 'toggle': return 'boolean';
+    case 'link': return 'LinkValue';
+    case 'select': return field.options?.length ? field.options.map(quote).join(' | ') : 'string';
+    case 'source': return field.source === 'events' ? 'EventItem[]' : field.source === 'posts' ? 'PostItem[]' : 'BookingItem[]';
+    case 'list': return `Array<{\n${Object.entries(field.fields).flatMap(([k, f]) => [`${indent}  ${k}: ${tsType(f, indent + '  ')};`, ...(f.type === 'image' ? [`${indent}  ${k}Focus: string;`] : [])]).join('\n')}\n${indent}}>`;
+    default: return 'string';
+  }
+}
+
+export function sectionTypes(manifest, { importFrom = '@acms-subir/core/theme', header = '// Generated by `acms theme types` from theme.json. Rerun after changing section fields.' } = {}) {
+  const lines = [
+    header,
+    `import type { LinkValue, EventItem, PostItem, BookingItem } from '${importFrom}';`,
+    '',
+  ];
+  const map = [];
+  for (const [type, def] of Object.entries(manifest.sections ?? {})) {
+    const name = `${pascal(type)}Data`;
+    map.push(`  ${quote(type)}: ${name};`);
+    lines.push(`/** ${def.name}${def.description ? ` — ${def.description}` : ''} */`);
+    lines.push(`export interface ${name} {`);
+    for (const [key, field] of Object.entries(def.fields)) {
+      lines.push(`  /** ${field.label} */\n  ${key}: ${tsType(field, '  ')};`);
+      if (field.type === 'image') lines.push(`  /** focal point for object-position, e.g. "30% 20%" */\n  ${key}Focus: string;`);
+    }
+    lines.push('}', '');
+  }
+  lines.push('export interface SectionData {', ...map, '}', '');
+  return lines.join('\n');
+}
+
+export async function writeTypes(dir) {
+  const manifest = ThemeManifest.parse(await readJson(join(dir, 'theme.json')));
+  const text = sectionTypes(manifest);
+  const file = join(dir, 'section-types.d.ts');
+  const before = await readFile(file, 'utf8').catch(() => '');
+  if (before !== text) await writeFile(file, text);
+  return { file, changed: before !== text, sections: Object.keys(manifest.sections) };
+}
+
+/** The same types for the mobile app (<app>/sections/types.ts), imported from @acms-subir/native/sections. */
+export async function writeAppTypes(appDir, themeDir) {
+  const manifest = ThemeManifest.parse(await readJson(join(themeDir, 'theme.json')));
+  const slug = themeDir.split(/[\\/]/).pop();
+  const text = sectionTypes(manifest, { importFrom: '@acms-subir/native/sections', header: `// Generated from src/themes/${slug}/theme.json by \`acms section new\` and \`acms check\`. Rerun after changing section fields.` });
+  const file = join(appDir, 'sections', 'types.ts');
+  const before = await readFile(file, 'utf8').catch(() => '');
+  if (before !== text) { await mkdir(join(appDir, 'sections'), { recursive: true }); await writeFile(file, text); }
+  return { types: relative(process.cwd(), file).split(sep).join('/'), typesChanged: before !== text };
+}

package/cli/themes.mjs

@@ -7,9 +7,11 @@ import { pathToFileURL } from 'node:url';
 import { zodToJsonSchema } from 'zod-to-json-schema';
 import semver from 'semver';
 import * as tar from 'tar';
-import { ThemeManifest, SectionDefinition, SectionPages, Slug, sectionDefinitions, BUILTIN_SECTIONS } from '../src/theme-sdk/contract.mjs';
+import { ThemeManifest, SectionDefinition, SectionPages, PagePreset, Slug, sectionDefinitions, sectionIssues, BUILTIN_SECTIONS } from '../src/theme-sdk/contract.mjs';
+import { writeTypes, writeAppTypes } from './sections.mjs';
+import { nativeCoverage, libraryComponents } from './native-sections.mjs';
 import { CORE, project, fail, exists, readJson, atomicJson } from './common.mjs';
-export async function schemaData(){return {apiVersion:1,manifest:zodToJsonSchema(ThemeManifest,{$refStrategy:'none'}),sections:zodToJsonSchema(SectionDefinition,{$refStrategy:'none'}),pages:zodToJsonSchema(SectionPages,{$refStrategy:'none'})};}
+export async function schemaData(){return {apiVersion:1,manifest:zodToJsonSchema(ThemeManifest,{$refStrategy:'none'}),sections:zodToJsonSchema(SectionDefinition,{$refStrategy:'none'}),presets:zodToJsonSchema(PagePreset,{$refStrategy:'none'}),pages:zodToJsonSchema(SectionPages,{$refStrategy:'none'})};}
 export async function listLocalThemes(p){
   const out=new Map();for(const [origin,base] of [['builtin',join(p.core,'src/themes')],['project',join(p.cwd,'src/themes')]]){
     for(const name of await readdir(base).catch(()=>[])){const file=join(base,name,'theme.json');if(await exists(file)){const raw=await readJson(file);out.set(name,{slug:name,name:raw.name??name,version:raw.version??'1.0.0',origin});}}
@@ -24,7 +26,7 @@ export async function filesIn(root){
     if(ent.isDirectory())await walk(file);else files.push(rel);
   }}await walk(root);return files.sort();
 }
-function allowedFile(file){return file==='theme.json'||file==='theme.css'||file==='README.md'||/^(templates|sections)\/[a-zA-Z0-9-]+\.astro$/.test(file)||/^assets\/[a-zA-Z0-9_./-]+\.(png|jpe?g|webp|gif|svg|avif|woff2?)$/i.test(file);}
+function allowedFile(file){return file==='theme.json'||file==='theme.css'||file==='README.md'||file==='section-types.d.ts'||/^migrations\/[a-z][a-z0-9-]*\.mjs$/.test(file)||/^(templates|sections)\/[a-zA-Z0-9-]+\.astro$/.test(file)||/^assets\/[a-zA-Z0-9_./-]+\.(png|jpe?g|webp|gif|svg|avif|woff2?)$/i.test(file);}
 async function validate(dir,p){
   const manifest=ThemeManifest.parse(await readJson(join(dir,'theme.json')));
   if(!semver.validRange(manifest.core)||!semver.satisfies(p.version,manifest.core,{includePrerelease:true}))fail('INCOMPATIBLE',`Theme requires core ${manifest.core}; installed ${p.version}.`);
@@ -32,12 +34,33 @@ async function validate(dir,p){
   if(!semver.valid(manifest.version))issues.push({file:'theme.json',message:'Invalid semantic version.'});
   for(const [type,def] of Object.entries(manifest.sections)){
     if(!BUILTIN_SECTIONS[type]&&!def.component)issues.push({file:'theme.json',message:`Custom section ${type} must declare a component.`});
-    for(const [key,f] of Object.entries(def.fields))if(f.type==='select'&&(!f.options?.length || (f.default!==undefined&&!f.options.includes(f.default))))issues.push({file:'theme.json',message:`Section ${type}.${key} needs options and a matching default.`});
+    for(const [key,f] of Object.entries(def.fields)){
+      const selects=f.type==='list'?Object.entries(f.fields).map(([k,sub])=>[`${key}.${k}`,sub]):[[key,f]];
+      for(const [path,sf] of selects)if(sf.type==='select'&&(!sf.options?.length || (sf.default!==undefined&&!sf.options.includes(sf.default))))issues.push({file:'theme.json',message:`Section ${type}.${path} needs options and a matching default.`});
+      if(f.type==='list'&&f.itemLabel&&!f.fields[f.itemLabel])issues.push({file:'theme.json',message:`Section ${type}.${key} itemLabel “${f.itemLabel}” is not one of its fields.`});
+      if(f.visibleIf&&!def.fields[f.visibleIf.field])issues.push({file:'theme.json',message:`Section ${type}.${key} visibleIf refers to unknown field “${f.visibleIf.field}”.`});
+    }
+    // example data and section presets must be valid content for the section
+    const samples=[...(def.example?[['example',def.example,undefined]]:[]),...(def.presets??[]).map((p,i)=>[`preset “${p.name}”`,p.data,p.variant])];
+    for(const [what,data,variant] of samples){
+      const unknown=Object.keys(data).filter(k=>!(k in def.fields));if(unknown.length)issues.push({file:'theme.json',message:`Section ${type} ${what}: no field(s) ${unknown.join(', ')}.`});
+      if(variant&&!def.variants.includes(variant))issues.push({file:'theme.json',message:`Section ${type} ${what}: unknown variant ${variant}.`});
+      for(const x of sectionIssues({mode:'sections',sections:[{id:'sample',type,version:def.version,variant:def.variants[0],hidden:false,data}]},{[type]:def}))issues.push({file:'theme.json',message:`Section ${type} ${what}: ${x.message}`});
+    }
   }
+  const defs=sectionDefinitions(manifest);
+  for(const [key,preset] of Object.entries(manifest.presets))preset.sections.forEach((ps,i)=>{
+    const d=defs[ps.type];const where=`preset ${key} section ${i+1} (${ps.type})`;
+    if(!d)return issues.push({file:'theme.json',message:`${where}: unknown section type.`});
+    if(ps.variant&&!d.variants.includes(ps.variant))issues.push({file:'theme.json',message:`${where}: unknown variant ${ps.variant}.`});
+    const unknown=Object.keys(ps.data).filter(k=>!(k in d.fields));if(unknown.length)issues.push({file:'theme.json',message:`${where}: no field(s) ${unknown.join(', ')}.`});
+    for(const s of sectionIssues({mode:'sections',sections:[{id:'preset',type:ps.type,version:d.version,variant:ps.variant??d.variants[0],hidden:false,data:ps.data}]},defs))issues.push({file:'theme.json',message:`${where}: ${s.message}`});
+  });
+  for(const file of files.filter(f=>f.startsWith('migrations/'))){const type=file.slice(11,-4);if(!manifest.sections[type])issues.push({file,message:`No section “${type}” to migrate.`});}
   for(const file of files){if(!allowedFile(file))issues.push({file,message:'File is outside the theme package allowlist.'});
     const stat=await lstat(join(dir,file));if(stat.size>20*1024*1024)issues.push({file,message:'File exceeds 20 MB.'});
     if(file.endsWith('.astro')||file.endsWith('.css')){const text=await readFile(join(dir,file),'utf8');if(/(?:from\s*|import\s*)['"]\.\.\/.*(?:lib|components)\//.test(text))issues.push({file,message:'Use public @acms-subir/core/theme exports instead of relative core internals.'});
-      for(const match of text.matchAll(/(?:from\s*|import\s*)['"](\.[^'"]+)['"]/g)){const path=resolve(dirname(join(dir,file)),match[1]);if(!path.startsWith(dir+'/'))issues.push({file,message:'Relative import escapes theme directory.'});else if(!await exists(path))issues.push({file,message:`Missing import: ${match[1]}`});}
+      for(const match of text.matchAll(/(?:from\s*|import\s*)['"](\.[^'"]+)['"]/g)){const path=resolve(dirname(join(dir,file)),match[1]);if(!path.startsWith(dir+'/'))issues.push({file,message:'Relative import escapes theme directory.'});else if(!(await Promise.all(['','.d.ts','.ts','.mjs','.js'].map(ext=>exists(path+ext)))).some(Boolean))issues.push({file,message:`Missing import: ${match[1]}`});}
       for(const match of text.matchAll(/url\(\s*["']?((?:\.\/)?assets\/[^"')\s]+)/g)){if(match[1].startsWith('http'))continue;const path=resolve(dirname(join(dir,file)),match[1]);if(!await exists(path))issues.push({file,message:`Missing asset: ${match[1]}`});}
     }
   }
@@ -47,6 +70,20 @@ async function validate(dir,p){
   for(const [name,palette] of [['light',manifest.tokens],['dark',manifest.tokens.dark]])if(palette.bg&&palette.ink){const ratio=contrast(palette.bg,palette.ink);reports.push({check:`${name} body text contrast`,ratio,needsReview:ratio===null||ratio<4.5});}
   return {manifest,files,reports};
 }
+// Responsive lint: the usual ways a section breaks on desktop or phones.
+// Warnings only; looking at 390/768/1280px is still the real check.
+export async function responsiveHints(dir,files){
+  const hints=[];
+  for(const file of files.filter(f=>/^(sections|templates)\/.+\.astro$|^theme\.css$/.test(f))){
+    const text=await readFile(join(dir,file),'utf8');const css=file.endsWith('.css')?text:(text.match(/<style[^>]*>([\s\S]*?)<\/style>/g)??[]).join('\n');
+    const hasMedia=/@media|@container/.test(css);
+    for(const m of css.matchAll(/(?<![-\w])width\s*:\s*(\d{3,})px/g))if(Number(m[1])>=400)hints.push({file,message:`Fixed width ${m[1]}px: use max-width, %, fr or min() so it fits phones and fills desktop.`});
+    for(const m of css.matchAll(/grid-template-columns\s*:\s*repeat\(\s*([2-9])\s*,/g))if(!hasMedia)hints.push({file,message:`${m[1]} fixed grid columns with no @media step-down: use repeat(auto-fit, minmax(min(100%, 15rem), 1fr)) or add breakpoints.`});
+    for(const m of css.matchAll(/grid-template-columns\s*:[^;{}]*?\b(\d{3,})px/g))if(Number(m[1])>=300&&!hasMedia)hints.push({file,message:`Fixed ${m[1]}px grid column with no breakpoint: stack it on phones.`});
+    for(const m of css.matchAll(/min-width\s*:\s*(\d{3,})px/g))if(Number(m[1])>=400&&!/@media[^{]*min-width\s*:\s*${m[1]}px/.test(css))hints.push({file,message:`min-width ${m[1]}px forces sideways scrolling on phones.`});
+  }
+  return [...new Map(hints.map(h=>[h.file+h.message,h])).values()];
+}
 async function snapshot(dir){const entries={};for(const file of await filesIn(dir))entries[file]=createHash('sha256').update(await readFile(join(dir,file))).digest('hex');return entries;}
 export async function themeCommand(command,args,flags){
   const p=await project(),slug=args[0];
@@ -68,18 +105,25 @@ export async function themeCommand(command,args,flags){
     else {await mkdir(join(local,'templates'));await writeFile(join(local,'theme.css'),'.acms-sections { --section-accent: var(--accent); }\n');
       await writeFile(join(local,'templates/home.astro'),`---\nimport type { HomeProps } from '@acms-subir/core/theme';\ninterface Props extends HomeProps {}\nconst { page } = Astro.props;\n---\n<article class="page-body">{page?.bodyHtml ? <div set:html={page.bodyHtml} /> : <h1>Welcome</h1>}</article>\n`);}
     const raw=sourceDir?await readJson(join(local,'theme.json')):{name:slug,tokens:{accent:'#3355ff'},templates:['home.astro'],sections:{statement:{name:'Statement',version:1,component:'sections/Statement.astro',variants:['default'],fields:{heading:{label:'Heading',type:'text',default:''},text:{label:'Supporting text',type:'textarea',default:''}}}}};
-    if(builtin){await mkdir(join(local,'sections'));await writeFile(join(local,'sections/Statement.astro'),`---\nimport type { SectionProps } from '@acms-subir/core/theme';\ninterface Props extends SectionProps {}\nconst { data } = Astro.props;\n---\n<div class="studio-statement"><h2>{data.heading}</h2><p>{data.text}</p></div>\n<style>.studio-statement { max-width: 48rem; margin-inline: auto; text-align: center; } p { white-space: pre-line; }</style>\n`);}
+    if(builtin){await mkdir(join(local,'sections'));await writeFile(join(local,'sections/Statement.astro'),`---\nimport type { SectionProps } from '@acms-subir/core/theme';\nimport type { StatementData } from '../section-types';\nconst { data } = Astro.props as SectionProps<StatementData>;\n---\n<div class="studio-statement"><h2>{data.heading}</h2><p>{data.text}</p></div>\n<style>.studio-statement { max-width: 48rem; margin-inline: auto; text-align: center; } p { white-space: pre-line; }</style>\n`);}
 
     await atomicJson(join(local,'theme.json'),{...raw,name:slug,slug,version:'1.0.0',apiVersion:1,core:`>=${p.version} <1.0.0`},0o644);
     await atomicJson(join(p.cwd,'.acms/baselines',slug+'.json'),await snapshot(local));
-    return {created:local,next:[`acms theme dev ${slug}`,`acms theme check ${slug} --build`],sections:Object.keys(sectionDefinitions(ThemeManifest.parse(raw)))};
+    await writeTypes(local);
+    return {created:local,next:[`acms theme dev ${slug}`,`acms section library`,`acms theme check ${slug} --build`],sections:Object.keys(sectionDefinitions(ThemeManifest.parse(raw)))};
   }
   if(!await exists(join(dir,'theme.json')))fail('NOT_FOUND',`Theme ${slug} was not found.`);
   if(command==='inspect'){const {manifest,files}=await validate(dir,p);return {slug,origin:dir===local?'project':'builtin',manifest,files,sections:sectionDefinitions(manifest),overrides:'Use design pull --site <name> to inspect runtime overrides.'};}
+  if(command==='types'){if(dir!==local)fail('USAGE','Types are written for project themes in src/themes/.');if(flags['dry-run'])return {dryRun:true,file:join(local,'section-types.d.ts')};return writeTypes(local);}
   if(command==='check') {
+    // types first: components import ../section-types, which validate checks
+    const types=dir===local&&!flags['dry-run']?await writeTypes(local).catch(()=>null):null;
     const result=await validate(dir,p);let built=false;
     if(flags.build&&!flags['dry-run']){const {buildFixture}=await import('./preview.mjs');await buildFixture(p,dir,slug);built=true;}
-    return {valid:true,slug,files:result.files,contrast:result.reports,built,manualReview:['Keyboard navigation','Narrow layouts','Custom CSS selector compatibility'],hint:built?null:'Use --build for Astro compiler checks.'};
+    // the mobile app: which sections render natively (info only, never a failure)
+    const mobile=dir===local?await nativeCoverage(result.manifest,await libraryComponents()):null;
+    if(mobile&&!flags['dry-run']){const file=join(mobile.app,'sections/types.ts');if((await readFile(file,'utf8').catch(()=>'')).includes(`src/themes/${slug}/theme.json`))mobile.types=await writeAppTypes(mobile.app,local);}
+    return {valid:true,slug,files:result.files,contrast:result.reports,responsive:await responsiveHints(dir,result.files),built,types:types&&{file:relative(p.cwd,types.file),changed:types.changed},...(mobile?{mobile}:{}),manualReview:['Every section at 390px (phone), 768px (tablet) and 1280px+ (desktop): wide frame used on desktop, no sideways scroll on phones','Keyboard navigation','Custom CSS selector compatibility'],hint:built?null:'Use --build for Astro compiler checks.'};
   }
   if(command==='dev'){if(flags['dry-run'])return {dryRun:true,action:'Create isolated preview and start Astro'};const {devFixture}=await import('./preview.mjs');return devFixture(p,dir,slug,flags);}
   if(command==='diff'){