@astryxdesign/cli 0.3.0-canary.d1b7d82 → 0.3.0-canary.d52d2cb

package/assets/templates/pages/side-gallery/page.tsx

@@ -25,39 +25,39 @@ const imageClip = {
 
 const IMAGES = [
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-vertical-3.png',
+    src: '/template-assets/colorful-lifestyle-vertical-3.png',
     alt: 'Colorful lifestyle scene',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-1.png',
+    src: '/template-assets/colorful-lifestyle-horizontal-1.png',
     alt: 'Colorful lifestyle horizontal',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-vertical-1.png',
+    src: '/template-assets/colorful-lifestyle-vertical-1.png',
     alt: 'Colorful lifestyle vertical',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-home-vertical-2.png',
+    src: '/template-assets/colorful-home-vertical-2.png',
     alt: 'Colorful home interior',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-home-vertical-3.png',
+    src: '/template-assets/colorful-home-vertical-3.png',
     alt: 'Colorful home scene',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-home-vertical-1.png',
+    src: '/template-assets/colorful-home-vertical-1.png',
     alt: 'Colorful home vertical',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-horizontal-2.png',
+    src: '/template-assets/colorful-lifestyle-horizontal-2.png',
     alt: 'Colorful lifestyle wide',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-vertical-2.png',
+    src: '/template-assets/colorful-lifestyle-vertical-2.png',
     alt: 'Colorful lifestyle detail',
   },
   {
-    src: 'https://lookaside.facebook.com/assets/astryx/colorful-lifestyle-vertical-4.png',
+    src: '/template-assets/colorful-lifestyle-vertical-4.png',
     alt: 'Colorful lifestyle portrait',
   },
 ];

package/assets/templates/pages/table-page-chart/page.tsx

@@ -46,37 +46,37 @@ const PRODUCTS = [
   {
     name: 'Ceremonial Matcha Latte',
     category: 'Matcha' as ProductCategory,
-    image: 'https://lookaside.facebook.com/assets/astryx/matcha-product-1.png',
+    image: '/template-assets/matcha-product-1.png',
     price: 6,
   },
   {
     name: 'Oat Milk Cappuccino',
     category: 'Coffee' as ProductCategory,
-    image: 'https://lookaside.facebook.com/assets/astryx/matcha-product-2.png',
+    image: '/template-assets/matcha-product-2.png',
     price: 5,
   },
   {
     name: 'Jasmine Green Tea',
     category: 'Tea' as ProductCategory,
-    image: 'https://lookaside.facebook.com/assets/astryx/matcha-product-3.png',
+    image: '/template-assets/matcha-product-3.png',
     price: 4,
   },
   {
     name: 'Mango Matcha Smoothie',
     category: 'Smoothie' as ProductCategory,
-    image: 'https://lookaside.facebook.com/assets/astryx/matcha-product-4.png',
+    image: '/template-assets/matcha-product-4.png',
     price: 8,
   },
   {
     name: 'Hojicha Latte',
     category: 'Specialty' as ProductCategory,
-    image: 'https://lookaside.facebook.com/assets/astryx/matcha-product-5.png',
+    image: '/template-assets/matcha-product-5.png',
     price: 7,
   },
   {
     name: 'Iced Yuzu Matcha',
     category: 'Matcha' as ProductCategory,
-    image: 'https://lookaside.facebook.com/assets/astryx/matcha-product-6.png',
+    image: '/template-assets/matcha-product-6.png',
     price: 7,
   },
 ];

package/assets/templates/pages/theme-showcase/page.tsx

@@ -283,13 +283,13 @@ const DEFAULT_PRODUCTS: ProductSpec[] = [
 // Neutral product photos, served from the shared astryx asset CDN so the
 // scaffolded template renders real imagery without needing local public assets.
 const DEFAULT_IMAGES: Record<string, string> = {
-  watch: 'https://lookaside.facebook.com/assets/astryx/Neutral-Watch.png',
+  watch: '/template-assets/Neutral-Watch.png',
   headphones:
-    'https://lookaside.facebook.com/assets/astryx/Neutral-Headphones.png',
-  backpack: 'https://lookaside.facebook.com/assets/astryx/Neutral-Backpack.png',
-  wallet: 'https://lookaside.facebook.com/assets/astryx/Neutral-Wallet.png',
-  tumbler: 'https://lookaside.facebook.com/assets/astryx/Neutral-Tumbler.png',
-  throw_: 'https://lookaside.facebook.com/assets/astryx/Neutral-Blanket.png',
+    '/template-assets/Neutral-Headphones.png',
+  backpack: '/template-assets/Neutral-Backpack.png',
+  wallet: '/template-assets/Neutral-Wallet.png',
+  tumbler: '/template-assets/Neutral-Tumbler.png',
+  throw_: '/template-assets/Neutral-Blanket.png',
 };
 
 export interface ThemeShowcaseProps {

package/authoring/doctypes/base/type.ts

@@ -270,6 +270,12 @@ export interface ComponentThemingDerivedVar {
   /** Named expansion strategy instead of specific vars.
    *  `'container'` — expands padding to 7 container layout tokens. */
   expand?: 'container';
+  /** Emit only the internal `vars`, dropping the source property from the
+   *  generated rule. Use when the class-carrying element must not receive the
+   *  standard property itself — the value reaches a child through the var
+   *  (e.g. TextArea's flush wrapper drives the inner textarea's inline
+   *  padding). Without this, the property is emitted alongside the var. */
+  replaces?: boolean;
 }
 
 /**

package/foundation/agent-docs/agent-docs.mjs

@@ -341,10 +341,9 @@ export function generateCompressedIndex(version, {coreDir, invocation = getCliIn
 
   // Rules — the top error-preventers.
   lines.push('RULES:');
-  lines.push('- No <div> — components do all layout/spacing. Full page → AppShell; sidebar nav → SideNav.');
-  lines.push('- Frame first: pick the shell (AppShell / Layout+LayoutPanel) and budget regions in px BEFORE writing content (`astryx docs layout`).');
-  lines.push('- Dense data = rows (Table, List/Item) edge-to-edge — never Card-wrapped list items. Card = dashboard widgets, galleries, settings groups only.');
-  lines.push('- Status → StatusDot/Token; Badge only for counts and enumerated states, never decoration.');
+  lines.push('- No <div> — components do all layout/spacing, page frame included.');
+  lines.push('- Frame first: read `astryx docs layout` before writing any page or screen — page frame, region widths, breakpoint behavior.');
+  lines.push('- Dense data = rows (Table, List/Item), never Card-wrapped list items; Card is for standalone widgets. Status = StatusDot/Token; Badge = counts only.');
   // Styling guidance tailored to the project's configured system — never
   // recommend a path that isn't compiled here (xstyle needs the StyleX compiler;
   // utilities need Tailwind). Tokens are always the source of truth.

package/foundation/agent-docs/agent-docs.test.mjs

@@ -46,6 +46,14 @@ describe('generateCompressedIndex', () => {
     expect(result).toMatch(/never override --color-/);
   });
 
+  it('sends frame choice to the layout doc rather than naming a shell', () => {
+    const result = generateCompressedIndex('1.0.0');
+    const frameRule = result.split('\n').find(l => l.includes('Frame first'));
+    expect(frameRule).toContain('astryx docs layout');
+    expect(result).not.toMatch(/AppShell/);
+    expect(frameRule).not.toMatch(/https?:/);
+  });
+
   it('includes the post-generation self-check rule', () => {
     const result = generateCompressedIndex('1.0.0');
     expect(result).toContain('SELF-CHECK before you finish');

package/foundation/discovery/template-adapter.mjs

@@ -153,14 +153,18 @@ const PLACEHOLDER_IMAGE =
   'data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23f5f6f8%22%2F%3E%3Cg%20transform%3D%22translate%28200%20150%29%22%20fill%3D%22none%22%20stroke%3D%22%23c2cad6%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22-44%22%20y%3D%22-44%22%20width%3D%2288%22%20height%3D%2288%22%20rx%3D%2216%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%22-18%22%20r%3D%222.5%22%20fill%3D%22%23c2cad6%22%20stroke%3D%22none%22%2F%3E%3Cpath%20d%3D%22M-34%2030%20L-8%200%20L10%2018%20L20%208%20L34%2024%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E';
 
 /**
- * Demo-image sources to strip from scaffolded projects — Meta's lookaside CDN
- * (a Meta-only network dependency). Genuine third-party URLs (e.g. brand logos
- * from paypalobjects.com) are intentionally left untouched.
+ * Demo-image sources to strip from scaffolded projects. Template demo imagery
+ * is self-hosted under the docsite's `/template-assets/*` dir (committed there,
+ * mirrored into the sandbox preview by scripts/sync-templates.js). Those paths
+ * only resolve inside the Astryx docsite/sandbox, so on scaffold they're
+ * replaced with a self-contained placeholder — a scaffolded project has no
+ * `/template-assets/` dir and would otherwise 404. Genuine third-party URLs
+ * (e.g. brand logos from paypalobjects.com) are intentionally left untouched.
  *
  * @type {RegExp[]}
  */
 const DEMO_IMAGE_PATTERNS = [
-  /https?:\/\/(?:[\w-]+\.)*lookaside\.facebook\.com\/[^\s'"`)]+/g,
+  /\/template-assets\/[\w-]+\.\w+/g,
 ];
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.3.0-canary.d1b7d82",
+  "version": "0.3.0-canary.d52d2cb",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -84,10 +84,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.3.0-canary.d1b7d82",
-    "@astryxdesign/core": "0.3.0-canary.d1b7d82",
-    "@astryxdesign/lab": "0.3.0-canary.d1b7d82",
-    "@astryxdesign/theme-neutral": "0.3.0-canary.d1b7d82",
+    "@astryxdesign/charts": "0.3.0-canary.d52d2cb",
+    "@astryxdesign/core": "0.3.0-canary.d52d2cb",
+    "@astryxdesign/lab": "0.3.0-canary.d52d2cb",
+    "@astryxdesign/theme-neutral": "0.3.0-canary.d52d2cb",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -105,10 +105,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.3.0-canary.d1b7d82",
-    "@astryxdesign/core": "0.3.0-canary.d1b7d82",
-    "@astryxdesign/lab": "0.3.0-canary.d1b7d82",
-    "@astryxdesign/theme-neutral": "0.3.0-canary.d1b7d82",
+    "@astryxdesign/charts": "0.3.0-canary.d52d2cb",
+    "@astryxdesign/core": "0.3.0-canary.d52d2cb",
+    "@astryxdesign/lab": "0.3.0-canary.d52d2cb",
+    "@astryxdesign/theme-neutral": "0.3.0-canary.d52d2cb",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {