Autocss-com · dragontheory · Jul 2, 2026
diff --git a/PROGRESS.json b/PROGRESS.json
@@ -0,0 +1,19 @@
+{
+  "schema": "d7460n-progress/1",
+  "read_order": ["PROGRESS.json", "newest shard in shards[]"],
+  "meta": {
+    "repo": "autocss-com/angular",
+    "what": "Framework reference demo for the AutoCSS remote-rendering phase: a standard/idiomatic Angular app that renders its OWN data inside the remotely-loaded AutoCSS UI (https://autocss.com). NOT tied to a product yet; a real product + its own CLAUDE.md come later.",
+    "rules": [
+      "README stays MINIMAL — only what a developer changes from the default scaffold. Developers move fast; a long changelog reads as 'lots of work' when it isn't. Full change history lives HERE, mirroring the autocss repo's memory system.",
+      "AutoCSS is loaded REMOTELY from https://autocss.com — do not vendor/copy it.",
+      "Framework build tooling (npm/Angular CLI) is fine here — AutoCSS's zero-dependency rule applies to AutoCSS itself, not to this back-end."
+    ],
+    "cross_repo_master": "The authoritative cross-repo accounting lives in autocss-com/autocss (PROGRESS.json + progress/log-001.ndjson). This file is the angular-specific mirror."
+  },
+  "shards": ["progress/log-001.ndjson"],
+  "cursor": {
+    "phase": "Stage 2 (styles) DONE: renders its own data inside the AutoCSS scaffold, styled solely by remote autocss.com CSS. Live at https://autocss-com.github.io/angular/.",
+    "next": "Wire the remote AutoCSS JS runtime (app.js/oninput) so AutoCSS RENDERS the data (not the framework). Later: assign a real product + add a per-repo CLAUDE.md."
+  }
+}
diff --git a/README.md b/README.md
@@ -1,111 +1,40 @@
 # AutoCSS demo — Angular data layer
 
-A standard **Angular** instance (standalone component, signals, `HttpClient`)
-that renders its own sample data inside the **remote [AutoCSS](https://autocss.com)
-UI scaffold**. It is the Angular back-end reference for the AutoCSS
-remote-rendering demo: *have UI, bring your own data — one UI, many back-ends.*
+A standard **Angular** app that renders its own data inside the remote
+**[AutoCSS](https://autocss.com)** UI — *have UI, bring your own data.* The app
+ships the data; AutoCSS (loaded from `https://autocss.com`) is the whole UI.
 
-- **Data layer:** the app fetches `public/data/records.json` — the same JSON
-  shape the AutoCSS UI consumes (`[{ id, title, intro, items: [] }]`) — and
-  renders it as a table with loading/error states.
-- **AutoCSS attach (styles):** the page includes the default AutoCSS Holy-Grail
-  HTML scaffold and links the AutoCSS stylesheets remotely from
-  `https://autocss.com`. The app's own content-level elements live inside
-  `<article>`. (The AutoCSS JS runtime is **not** wired yet — styles only.)
+**Live:** <https://autocss-com.github.io/angular/>
 
-## Develop
+## Run
 
 ```bash
 npm install
-npm start        # ng serve
+npm start
 ```
 
-## Build
+## Build & deploy
 
 ```bash
-npm run build    # ng build --base-href /angular/ -> dist/autocss-angular-demo/browser
+npm run build   # → dist/autocss-angular-demo/browser (built with --base-href /angular/)
 ```
 
-## Deploy
+Pushing to `main` auto-builds and deploys to GitHub Pages via
+`.github/workflows/deploy.yml`.
 
-On push to `main`, a GitHub Actions workflow builds and publishes
-`dist/autocss-angular-demo/browser` to GitHub Pages:
-<https://autocss-com.github.io/angular/>
+## Using AutoCSS in an Angular app
 
----
+Starting from a stock `ng new` app, the whole integration is just a few small
+touches:
 
-## Changes from the default scaffold
+1. **Link the AutoCSS styles** — add the `https://autocss.com/assets/css/…`
+   stylesheets to `src/index.html`.
+2. **Make `<app-container>` the root** — set the component `selector` to
+   `'app-container'` and put `<app-container></app-container>` in `src/index.html`.
+   The template renders the AutoCSS scaffold, with your content inside `<article>`.
+3. **Allow the `app-*` custom elements** — add
+   `schemas: [CUSTOM_ELEMENTS_SCHEMA]` to the component.
+4. **Bring your data** — fetch it (here `public/data/records.json` via `HttpClient`)
+   and render.
 
-> Baseline = a fresh `ng new` (Angular CLI 20; `--style=css --routing=false
-> --ssr=false`). This is the **complete** list of what had to change to render
-> the app's own data and to drop it into the remote AutoCSS UI. Nothing else was
-> modified, and **no third-party libraries were added.**
-
-### Data layer
-- **Added `public/data/records.json`** — the sample dataset (AutoCSS contract
-  shape). The Angular application builder copies `public/` to the output root, so
-  it deploys as `data/records.json`.
-- **`src/app/app.ts`** — the standalone `App` component fetches `data/records.json`
-  via `HttpClient` (a document-base-relative path that resolves against
-  `<base href="/angular/">`), holds `status`/`records` in **signals** with
-  `record`/`columns` `computed`, and the template renders a `<table>` with
-  `@if`/`@for` control flow.
-- **`src/app/app.config.ts` — added `provideHttpClient()`** (a fresh standalone
-  app does not provide `HttpClient` by default).
-
-### AutoCSS scaffold + remote styles
-- **`src/index.html`** — added the block of remote AutoCSS stylesheet `<link>`s
-  (`https://autocss.com/assets/css/*.css`) in the same `@layer`-cascade order as
-  `autocss/index.html` (`reset, fonts, color-scheme, color-theme-66ccff, layout,
-  inputs, media, typography, scrolling, a11y, forms, fallbacks, loading`;
-  `themes.css` + `transitions.css` left commented out to mirror the source).
-- **`src/app/app.html`** — renders the default AutoCSS Holy-Grail scaffold
-  (`<app-container>` → `<app-banner>`, `<header>`, `<nav>`, `<main><article>`,
-  `<aside>`, `<footer>`, trailing `<app-banner>`), with the data-driven
-  content-level elements (`h1`, tagline, `h2`, intro, `<table>`) placed **inside
-  `<article>`**.
-
-### Native stylesheets commented out
-- The framework's own stylesheets are **disabled** so the remote AutoCSS
-  stylesheets are the sole source of styling: the component `styleUrl: './app.css'`
-  in `src/app/app.ts` is commented out, and the contents of the global
-  `src/styles.css` are commented out. (`src/styles.css` stays referenced from
-  `angular.json`, which is strict JSON and cannot hold comments, so its rules are
-  disabled inside the file instead.) The CSS files are kept for easy re-enable.
-
-### Angular-specific wiring (the gotchas)
-- **Component root merged into `<app-container>`.** The component `selector` was
-  changed from `app-root` to **`app-container`**, and `src/index.html` bootstraps
-  into `<app-container></app-container>` (no separate `<app-root>`). `app.html`
-  renders the scaffold's **children**, so the component's host element IS
-  `<app-container>` — the Holy-Grail grid root that AutoCSS's `layout.css` styles.
-  No `app-root { display: contents }` shim is needed.
-- **`src/app/app.ts` — `schemas: [CUSTOM_ELEMENTS_SCHEMA]` (required).** The
-  template still contains `app-banner`, `app-logo`, `app-legal`, and
-  `app-version`; without the schema Angular's compiler errors
-  (`'app-banner' is not a known element`). The schema lets those render as native
-  custom elements.
-- **Do not set `:host` display in `src/app/app.css`** (the scaffold's default
-  `:host { display: block }` was removed). Angular compiles `:host` to an
-  attribute selector (specificity `0,1,0`) that beats AutoCSS's
-  `app-container { display: grid }` type rule (`0,0,1`), so any `:host` display
-  would override the Holy-Grail grid.
-- Static `checked` attributes on the "Layouts" checkbox and "System" radio work
-  as-is; glyphs (`☼ ☾ ◐ ✖`) are written as HTML entities in the template.
-
-### Build / GitHub Pages
-- **`package.json` — `build` script is `ng build --base-href /angular/`** so the
-  built `index.html` carries `<base href="/angular/">` for project Pages hosting.
-- **Added `.github/workflows/deploy.yml`** — `npm ci` → `npm run build` → deploy
-  **`dist/autocss-angular-demo/browser`** to Pages (triggers on push to `main`).
-  Requires repo **Settings → Pages → Source = GitHub Actions**.
-
-### Version note
-- Scaffolded with **Angular CLI 20** rather than the latest. The build
-  environment's Node (22.22.2) is just below the CLI 21/22 engine floor
-  (≥ 22.22.3); the GitHub Actions runner's newer Node 22.x builds it fine and the
-  lockfile pins the toolchain.
-
-### Housekeeping
-- `package.json` name → `autocss-angular-demo`.
-- Appended a Node/Angular section to `.gitignore`.
+_(Full change history: [`progress/`](./progress).)_
diff --git a/progress/log-001.ndjson b/progress/log-001.ndjson
@@ -0,0 +1,6 @@
+{"ts":"2026-07-02","type":"note","phase":"init","msg":"Per-repo memory shard opened (mirrors autocss-com/autocss). README is kept MINIMAL (only what a developer changes from the stock scaffold); the full change history lives here so Claude + the maintainer have a complete accounting. A per-repo CLAUDE.md comes later, when this demo is tied to a real product."}
+{"ts":"2026-07-02","type":"feature","phase":"stage-1","name":"Angular data-layer demo on GitHub Pages","what":"Standard Angular app (standalone component, signals, @if/@for, HttpClient) that fetches its own public/data/records.json (AutoCSS [{id,title,intro,items:[]}] contract shape) and renders it as a <table> with loading/error states. Built with --base-href /angular/. Added provideHttpClient() (a fresh standalone app doesn't provide HttpClient). GitHub Actions workflow builds + deploys dist/autocss-angular-demo/browser to Pages.","pr":"autocss-com/angular#1 (merged)","verify":"browser-verified: 6 rows, no console errors","version_note":"Scaffolded with Angular CLI 20 because the build env's Node (22.22.2) is just below the CLI 21/22 engine floor (>=22.22.3); the Pages runner's newer Node 22.x builds it fine and the lockfile pins the toolchain.","tested":true}
+{"ts":"2026-07-02","type":"feature","phase":"stage-2/scaffold+styles","name":"attach AutoCSS scaffold + remote styles","what":"Wrapped the app in the default AutoCSS Holy-Grail scaffold (app-container down to <article>; the app's content-level elements moved INSIDE <article>). Linked the remote AutoCSS stylesheets from https://autocss.com in src/index.html, same @layer order as autocss/index.html (themes.css + transitions.css left commented out to match the source). STYLES ONLY — no AutoCSS JS. Angular quirk: schemas:[CUSTOM_ELEMENTS_SCHEMA] on the standalone component so app-* elements don't error at compile.","pr":"autocss-com/angular#2 (merged ec19c34)","tested":true}
+{"ts":"2026-07-02","type":"feature","phase":"stage-2/refine","name":"merged root + native CSS off + tag-based mount","what":"(a) The framework root IS the AutoCSS <app-container>: component selector CHANGED app-root->app-container, index.html bootstraps <app-container></app-container>, app.html renders the scaffold's children; removed app-root{display:contents}. Must NOT set :host display (Angular's emulated :host attr-selector specificity 0,1,0 beats AutoCSS's app-container{display:grid} type rule 0,0,1) — the scaffold's default :host{display:block} was removed. (b) Native stylesheets COMMENTED OUT so the remote AutoCSS CSS is the sole styling source: component styleUrl './app.css' commented out (app.ts), and src/styles.css CONTENTS commented out — angular.json is strict JSON and cannot hold comments, so the global stylesheet is disabled inside the file while staying referenced. (c) Bootstrapping is already tag-based via the app-container selector with no id in the HTML, so the 'mount by tag / no id hook' step needed NO change for Angular.","pr":"autocss-com/angular#3 (merged 8d52d93)","tested":true}
+{"ts":"2026-07-02","type":"note","phase":"docs","msg":"README minimized to only 'what a developer changes from the default scaffold' (per maintainer: devs want to move fast; a long change list looks like a lot of work when it isn't). The detailed change history was moved here + PROGRESS.json, mirroring the autocss repo's memory system."}
+{"ts":"2026-07-02","type":"test","phase":"verify","msg":"Every change browser-verified via Playwright chromium (a local server maps the /angular/ subpath -> the browser build dir; autocss.com is stubbed as empty CSS because this sandbox can't reach it through the egress cert — real styles load on Pages). Asserted: app-container present, app-container>header/nav/aside/footer, main>article, table INSIDE article, 6 rows, h1='Angular data layer', appErrors=[]. All PASS. Live: https://autocss-com.github.io/angular/"}