tux-review 0.1.0

package/src/schema.js

@@ -0,0 +1,77 @@
+/**
+ * Canonical feedback schema v1.0 (SPC sections 14–20).
+ *
+ * @module schema
+ */
+import { sortedObject } from './canonical.js';
+
+export const SCHEMA_VERSION = '1.0';
+
+export const FEEDBACK_TYPES = ['change', 'issue', 'question', 'approval'];
+export const FEEDBACK_STATUSES = ['open', 'incorporated', 'resolved', 'rejected'];
+export const ORIGIN_MODES = ['design', 'live'];
+
+/**
+ * Validate a feedback item. Returns a list of problems; empty means valid.
+ * @param {object} item
+ * @returns {string[]}
+ */
+export function validateFeedback(item) {
+  const problems = [];
+  if (item.schema_version !== SCHEMA_VERSION) problems.push('schema_version must be "1.0"');
+  if (typeof item.id !== 'string' || !/^fb_[0-9A-HJKMNP-TV-Z]{26}$/.test(item.id)) {
+    problems.push('id must match fb_<26 Crockford chars>');
+  }
+  if (typeof item.project_id !== 'string' || item.project_id === '') problems.push('project_id must be a non-empty string');
+  if (typeof item.session_id !== 'string' || item.session_id === '') problems.push('session_id must be a non-empty string');
+  if (!item.author || typeof item.author.user_id !== 'string' || item.author.user_id === '') problems.push('author.user_id must be a non-empty string');
+  if (!item.origin || !ORIGIN_MODES.includes(item.origin.mode)) problems.push(`origin.mode must be one of ${ORIGIN_MODES.join(', ')}`);
+  if (!item.feedback || !FEEDBACK_TYPES.includes(item.feedback.type)) problems.push(`feedback.type must be one of ${FEEDBACK_TYPES.join(', ')}`);
+  if (!item.feedback || typeof item.feedback.text !== 'string' || item.feedback.text === '') problems.push('feedback.text must be a non-empty string');
+  if (!FEEDBACK_STATUSES.includes(item.status)) problems.push(`status must be one of ${FEEDBACK_STATUSES.join(', ')}`);
+  return problems;
+}
+
+/** Construct a canonical feedback item (fields in schema order). */
+export function makeFeedback(fields) {
+  const uiState = sortedObject(fields.ui_state ?? {});
+  const item = {
+    schema_version: SCHEMA_VERSION,
+    id: fields.id,
+    project_id: fields.project_id,
+    session_id: fields.session_id,
+    author: { user_id: fields.author.user_id, display_name: fields.author.display_name },
+    origin: { mode: fields.origin },
+  };
+  if (fields.location) item.location = orderedLocation(fields.location);
+  item.target = orderedTarget(fields.target ?? {});
+  item.ui_state = uiState;
+  item.feedback = { type: fields.type, text: fields.text };
+  item.status = fields.status ?? 'open';
+  item.created_at = fields.created_at;
+  item.updated_at = fields.updated_at ?? fields.created_at;
+  if (fields.incorporation) item.incorporation = { ...fields.incorporation };
+  if (fields.validation) item.validation = { ...fields.validation };
+  return item;
+}
+
+function orderedLocation(loc) {
+  const out = {};
+  for (const k of ['route', 'page', 'component', 'component_instance']) {
+    if (loc[k] !== undefined) out[k] = loc[k];
+  }
+  return out;
+}
+
+function orderedTarget(target) {
+  const out = {};
+  for (const k of ['tux_id', 'test_id', 'component', 'role', 'accessible_name', 'text', 'css_selector', 'dom_path', 'bounding_box']) {
+    if (target[k] !== undefined) out[k] = target[k];
+  }
+  return out;
+}
+
+/** Normalized text for duplicate detection: trimmed, whitespace-collapsed, case-folded. */
+export function normalizedText(text) {
+  return text.trim().replace(/\s+/g, ' ').toLowerCase();
+}

package/src/serve-main.js

@@ -0,0 +1,42 @@
+/**
+ * Internal entry point for the detached server child process.
+ * Not part of the public CLI surface.
+ */
+import { resolve } from 'node:path';
+import { startServer } from './server.js';
+
+function argValue(name) {
+  const i = process.argv.indexOf(name);
+  return i === -1 ? undefined : process.argv[i + 1];
+}
+
+const cwd = resolve(argValue('--cwd') ?? process.cwd());
+const mode = argValue('--mode') ?? 'design';
+const host = argValue('--host') ?? '127.0.0.1';
+const port = Number(argValue('--port') ?? 4173);
+const target = argValue('--target') ?? null;
+const session = argValue('--session') ?? 'default';
+const environment = argValue('--environment') ?? (mode === 'design' ? 'design' : 'development');
+const store = argValue('--store') ?? '.tux/feedback.json';
+const projectId = argValue('--project-id');
+const root = argValue('--root') ?? null;
+
+const server = startServer({
+  mode,
+  host,
+  port,
+  root,
+  target,
+  cwd,
+  session,
+  environment,
+  config: {
+    project_id: projectId ?? 'default',
+    review: { enabled: true, store, host, port },
+    identity: { provider: 'local', user_id: process.env.TUX_USER_ID ?? 'anonymous', display_name: process.env.TUX_DISPLAY_NAME ?? 'Anonymous', admins: [] },
+  },
+});
+
+server.listen(port, host, () => {
+  process.stdout.write(`tux server listening on http://${host}:${port}\n`);
+});

package/src/server.js

@@ -0,0 +1,347 @@
+/**
+ * TUX review/design server (framework-agnostic, zero dependencies).
+ *
+ * Two modes:
+ * - `design`: serves a static design directory from disk, injecting the
+ *   Review Client into every HTML response.
+ * - `live`: reverse-proxies an existing application, injecting the
+ *   Review Client into HTML responses on the way through.
+ *
+ * Endpoints (canonical API):
+ * - GET  /api/tux/health
+ * - GET  /api/tux/session
+ * - GET  /api/tux/feedback[?route=&status=&type=&mine=&session=]
+ * - POST /api/tux/feedback
+ * - GET  /api/tux/feedback/{id}
+ * - PATCH /api/tux/feedback/{id}        (owner only)
+ * - DELETE /api/tux/feedback/{id}       (owner or admin)
+ * - POST /api/tux/feedback/clear        {scope:"mine"|"all",route?,session?}
+ * - GET  /__tux__/bootstrap.js          activation + identity bootstrap
+ * - GET  /__tux__/client.js             the Review Client module
+ * - GET  /__tux__/client.css            Review Client styles
+ *
+ * @module server
+ */
+import { createServer, request as httpRequest } from 'node:http';
+import { existsSync, readFileSync, statSync } from 'node:fs';
+import { extname, join, normalize, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { canonicalJson } from './canonical.js';
+import { canonicalTimestamp, nowMs, newId } from './ids.js';
+import { FEEDBACK_TYPES, makeFeedback, SCHEMA_VERSION } from './schema.js';
+import { loadStore, saveStore, ensureSession } from './store.js';
+import { resolveIdentity } from './config.js';
+
+const CLIENT_DIR = fileURLToPath(new URL('../client/', import.meta.url));
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.ico': 'image/x-icon',
+  '.woff2': 'font/woff2',
+  '.map': 'application/json',
+};
+
+/**
+ * @param {object} opts
+ * @param {'design'|'live'} opts.mode
+ * @param {string} opts.host bind host
+ * @param {number} opts.port bind port
+ * @param {string|null} opts.root static root (design mode)
+ * @param {string|null} opts.target proxy target (live mode)
+ * @param {string} opts.cwd project cwd for store access
+ * @param {object} opts.config resolved project config
+ * @param {string} opts.session session id exposed to clients
+ * @param {string} opts.environment environment label
+ */
+export function startServer(opts) {
+  const state = {
+    ...opts,
+    root: opts.root ? resolve(opts.cwd, opts.root) : null,
+    identity: resolveIdentity(opts.config),
+    startedAt: canonicalTimestamp(nowMs()),
+  };
+  ensureSession(opts.cwd, opts.config, opts.session, opts.environment, state.startedAt);
+  const server = createServer((req, res) => {
+    handle(state, req, res).catch((err) => {
+      sendJson(res, 500, { error: { code: 'internal', message: String(err && err.message ? err.message : err) } });
+    });
+  });
+  return server;
+}
+
+async function handle(state, req, res) {
+  const url = new URL(req.url, `http://${req.headers.host ?? 'localhost'}`);
+  const path = url.pathname;
+
+  if (path === '/api/tux/health') {
+    return sendJson(res, 200, { status: 'ok', mode: state.mode, session_id: state.session });
+  }
+  if (path.startsWith('/api/tux/')) return api(state, req, res, url);
+  if (path.startsWith('/__tux__/')) return assets(state, res, path);
+
+  if (state.mode === 'design') return static_(state, res, path);
+  return proxy(state, req, res);
+}
+
+function identityOf(state, req) {
+  const userId = req.headers['x-tux-user-id'] ?? state.identity.user_id;
+  const displayName = req.headers['x-tux-display-name'] ?? state.identity.display_name;
+  return { user_id: String(userId), display_name: String(displayName) };
+}
+
+function isAdmin(state, userId) {
+  return (state.identity.admins ?? []).includes(userId);
+}
+
+async function api(state, req, res, url) {
+  const path = url.pathname;
+  const identity = identityOf(state, req);
+  const method = req.method ?? 'GET';
+
+  if (path === '/api/tux/session' && method === 'GET') {
+    return sendJson(res, 200, {
+      session_id: state.session,
+      project_id: state.config.project_id,
+      environment: state.environment,
+      status: 'active',
+    });
+  }
+
+  if (path === '/api/tux/feedback' && method === 'GET') {
+    const store = loadStore(state.cwd, state.config);
+    let items = store.feedback;
+    const q = url.searchParams;
+    if (q.get('route')) items = items.filter((f) => f.location?.route === q.get('route'));
+    if (q.get('status')) items = items.filter((f) => f.status === q.get('status'));
+    if (q.get('type')) items = items.filter((f) => f.feedback.type === q.get('type'));
+    if (q.get('session')) items = items.filter((f) => f.session_id === q.get('session'));
+    if (q.get('mine') === '1' || q.get('mine') === 'true') items = items.filter((f) => f.author.user_id === identity.user_id);
+    return sendJson(res, 200, { schema_version: SCHEMA_VERSION, project_id: store.project_id, feedback: items });
+  }
+
+  if (path === '/api/tux/feedback' && method === 'POST') {
+    const body = await readJson(req);
+    if (body.error) return sendJson(res, 400, { error: { code: 'invalid', message: body.error } });
+    const data = body.data ?? {};
+    const type = data.type ?? 'issue';
+    if (!FEEDBACK_TYPES.includes(type)) {
+      return sendJson(res, 400, { error: { code: 'invalid', message: `invalid feedback type: ${type}` } });
+    }
+    const text = typeof data.text === 'string' ? data.text : '';
+    if (text.trim() === '') return sendJson(res, 400, { error: { code: 'invalid', message: 'text is required' } });
+    const store = loadStore(state.cwd, state.config);
+    const session = data.session_id ?? state.session;
+    const seq = store.feedback.length + 1;
+    const id = newId('fb', store.project_id, session, seq, 'feedback', nowMs());
+    const item = makeFeedback({
+      id,
+      project_id: store.project_id,
+      session_id: session,
+      author: identity,
+      origin: state.mode === 'design' ? 'design' : 'live',
+      location: data.location ?? {},
+      target: data.target ?? {},
+      ui_state: data.ui_state ?? {},
+      type,
+      text,
+      created_at: canonicalTimestamp(nowMs()),
+    });
+    store.feedback.push(item);
+    saveStore(state.cwd, state.config, store);
+    return sendJson(res, 201, item);
+  }
+  if (path === '/api/tux/feedback/clear' && method === 'POST') {
+    const body = await readJson(req);
+    if (body.error) return sendJson(res, 400, { error: { code: 'invalid', message: body.error } });
+    const scope = body.data?.scope;
+    if (scope !== 'mine' && scope !== 'all') {
+      return sendJson(res, 400, { error: { code: 'invalid', message: 'scope must be "mine" or "all"' } });
+    }
+    if (scope === 'all' && !isAdmin(state, identity.user_id)) {
+      return sendJson(res, 403, { error: { code: 'forbidden', message: 'clearing all feedback requires admin' } });
+    }
+    const route = body.data?.route;
+    const session = body.data?.session;
+    const store = loadStore(state.cwd, state.config);
+    const before = store.feedback.length;
+    store.feedback = store.feedback.filter((f) => {
+      if (scope === 'mine' && f.author.user_id !== identity.user_id) return true;
+      if (route && f.location?.route !== route) return true;
+      if (session && f.session_id !== session) return true;
+      return false;
+    });
+    const cleared = before - store.feedback.length;
+    saveStore(state.cwd, state.config, store);
+    return sendJson(res, 200, { cleared });
+  }
+
+  const feedbackMatch = path.match(/^\/api\/tux\/feedback\/([^/]+)$/);
+  if (feedbackMatch) {
+    const id = decodeURIComponent(feedbackMatch[1]);
+    const store = loadStore(state.cwd, state.config);
+    const idx = store.feedback.findIndex((f) => f.id === id);
+    if (idx === -1) return sendJson(res, 404, { error: { code: 'not_found', message: `feedback not found: ${id}` } });
+    const item = store.feedback[idx];
+    if (method === 'GET') return sendJson(res, 200, item);
+    if (method === 'PATCH') {
+      if (item.author.user_id !== identity.user_id) {
+        return sendJson(res, 403, { error: { code: 'forbidden', message: 'only the author may update this feedback' } });
+      }
+      const body = await readJson(req);
+      if (body.error) return sendJson(res, 400, { error: { code: 'invalid', message: body.error } });
+      const patch = body.data ?? {};
+      if (patch.text !== undefined) item.feedback.text = String(patch.text);
+      if (patch.type !== undefined) {
+        if (!FEEDBACK_TYPES.includes(patch.type)) return sendJson(res, 400, { error: { code: 'invalid', message: `invalid feedback type: ${patch.type}` } });
+        item.feedback.type = patch.type;
+      }
+      item.updated_at = canonicalTimestamp(nowMs());
+      saveStore(state.cwd, state.config, store);
+      return sendJson(res, 200, item);
+    }
+    if (method === 'DELETE') {
+      const owner = item.author.user_id === identity.user_id;
+      if (!owner && !isAdmin(state, identity.user_id)) {
+        return sendJson(res, 403, { error: { code: 'forbidden', message: 'only the author or an admin may delete this feedback' } });
+      }
+      store.feedback.splice(idx, 1);
+      saveStore(state.cwd, state.config, store);
+      return sendJson(res, 200, { deleted: [id] });
+    }
+  }
+
+  return sendJson(res, 404, { error: { code: 'not_found', message: `unknown API path: ${path}` } });
+}
+
+function assets(state, res, path) {
+  if (path === '/__tux__/bootstrap.js') {
+    const bootstrap = `window.__TUX__ = ${JSON.stringify({
+      enabled: state.config.review?.enabled !== false, // startup configuration (SPC 64–65)
+      build: 'included',
+      mode: state.mode,
+      apiBase: '/api/tux',
+      session: state.session,
+      environment: state.environment,
+      user: state.identity.user_id,
+      displayName: state.identity.display_name,
+      project: state.config.project_id,
+    })};\n`;
+    res.writeHead(200, { 'Content-Type': 'text/javascript; charset=utf-8', 'Cache-Control': 'no-store' });
+    res.end(bootstrap);
+    return;
+  }
+  if (path === '/__tux__/client.js' || path === '/__tux__/client.css') {
+    const file = join(CLIENT_DIR, path === '/__tux__/client.js' ? 'tux-review.js' : 'tux-review.css');
+    if (!existsSync(file)) {
+      res.writeHead(404, { 'Content-Type': 'text/plain' });
+      res.end('not found');
+      return;
+    }
+    res.writeHead(200, { 'Content-Type': MIME[extname(file)], 'Cache-Control': 'no-store' });
+    res.end(readFileSync(file));
+    return;
+  }
+  res.writeHead(404, { 'Content-Type': 'text/plain' });
+  res.end('not found');
+}
+
+function static_(state, res, path) {
+  let rel = normalize(decodeURIComponent(path)).replace(/^([/\\])+/, '');
+  if (rel === '') rel = 'index.html';
+  let file = join(state.root, rel);
+  if (!file.startsWith(state.root)) {
+    res.writeHead(403, { 'Content-Type': 'text/plain' });
+    res.end('forbidden');
+    return;
+  }
+  if (!existsSync(file) || statSync(file).isDirectory()) {
+    const candidates = [join(file, 'index.html'), file + '.html'];
+    file = candidates.find((c) => existsSync(c) && statSync(c).isFile());
+    if (!file) {
+      // SPA fallback: unknown extension-less routes render the app shell
+      if (!extname(path)) file = join(state.root, 'index.html');
+      if (!existsSync(file)) {
+        res.writeHead(404, { 'Content-Type': 'text/plain' });
+        res.end('not found');
+        return;
+      }
+    }
+  }
+  const type = MIME[extname(file)] ?? 'application/octet-stream';
+  const body = readFileSync(file);
+  if (type.startsWith('text/html')) {
+    res.writeHead(200, { 'Content-Type': type, 'Cache-Control': 'no-store' });
+    res.end(inject(body.toString('utf8')));
+    return;
+  }
+  res.writeHead(200, { 'Content-Type': type });
+  res.end(body);
+}
+
+function proxy(state, req, res) {
+  const target = new URL(state.target);
+  const options = {
+    protocol: target.protocol,
+    hostname: target.hostname,
+    port: target.port || (target.protocol === 'https:' ? 443 : 80),
+    path: req.url,
+    method: req.method,
+    headers: { ...req.headers, host: target.host },
+  };
+  const upstream = httpRequest(options, (up) => {
+    const type = up.headers['content-type'] ?? '';
+    if (type.startsWith('text/html')) {
+      const chunks = [];
+      up.on('data', (c) => chunks.push(c));
+      up.on('end', () => {
+        res.writeHead(up.statusCode, up.headers);
+        res.end(inject(Buffer.concat(chunks).toString('utf8')));
+      });
+      return;
+    }
+    res.writeHead(up.statusCode, up.headers);
+    up.pipe(res);
+  });
+  upstream.on('error', (err) => {
+    sendJson(res, 502, { error: { code: 'bad_gateway', message: `target unreachable: ${err.message}` } });
+  });
+  req.pipe(upstream);
+}
+
+/** Inject the TUX bootstrap + client into an HTML document. */
+export function inject(html) {
+  const tags = '<script src="/__tux__/bootstrap.js"></script><script type="module" src="/__tux__/client.js"></script>';
+  if (/<\/head>/i.test(html)) return html.replace(/<\/head>/i, `${tags}</head>`);
+  if (/<\/body>/i.test(html)) return html.replace(/<\/body>/i, `${tags}</body>`);
+  return html + tags;
+}
+
+function readJson(req) {
+  return new Promise((resolvePromise) => {
+    const chunks = [];
+    req.on('data', (c) => chunks.push(c));
+    req.on('end', () => {
+      const raw = Buffer.concat(chunks).toString('utf8');
+      if (raw === '') return resolvePromise({ data: {} });
+      try {
+        resolvePromise({ data: JSON.parse(raw) });
+      } catch (e) {
+        resolvePromise({ error: `invalid JSON: ${e.message}` });
+      }
+    });
+  });
+}
+
+function sendJson(res, status, data) {
+  res.writeHead(status, { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'no-store' });
+  res.end(canonicalJson(data));
+}

package/src/store.js

@@ -0,0 +1,72 @@
+/**
+ * JSON persistence backend (SPC section 22): a single canonical JSON file
+ * at `review.store` (default `.tux/feedback.json`), plus review sessions
+ * under `.tux/sessions/` and incorporation batches under
+ * `.tux/incorporations/`. The logical schema is independent of the
+ * storage backend; agents go through the CLI/API, never the file layout.
+ *
+ * @module store
+ */
+import { existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { canonicalJson } from './canonical.js';
+import { SCHEMA_VERSION } from './schema.js';
+
+export function storeFilePath(cwd, config) {
+  return join(cwd, config.review.store);
+}
+
+export function loadStore(cwd, config) {
+  const p = storeFilePath(cwd, config);
+  if (!existsSync(p)) return { schema_version: SCHEMA_VERSION, project_id: config.project_id, feedback: [] };
+  const store = JSON.parse(readFileSync(p, 'utf8'));
+  if (store.feedback === undefined) store.feedback = [];
+  return store;
+}
+
+export function saveStore(cwd, config, store) {
+  const p = storeFilePath(cwd, config);
+  mkdirSync(join(cwd, '.tux'), { recursive: true });
+  writeFileSync(p, canonicalJson(store) + '\n', 'utf8');
+}
+
+export function storeExists(cwd, config) {
+  return existsSync(storeFilePath(cwd, config));
+}
+
+/** Sessions directory handling. */
+export function sessionsDir(cwd) {
+  return join(cwd, '.tux', 'sessions');
+}
+
+export function ensureSession(cwd, config, sessionId, environment, timestamp) {
+  mkdirSync(sessionsDir(cwd), { recursive: true });
+  const p = join(sessionsDir(cwd), `${sessionId}.json`);
+  if (existsSync(p)) return JSON.parse(readFileSync(p, 'utf8'));
+  const session = {
+    session_id: sessionId,
+    project_id: config.project_id,
+    environment,
+    status: 'active',
+    created_at: timestamp,
+  };
+  writeFileSync(p, canonicalJson(session) + '\n', 'utf8');
+  return session;
+}
+
+/** Incorporation batches directory handling. */
+export function incorporationsDir(cwd) {
+  return join(cwd, '.tux', 'incorporations');
+}
+
+export function countIncorporationBatches(cwd) {
+  const dir = incorporationsDir(cwd);
+  return existsSync(dir) ? readdirSync(dir).filter((f) => f.endsWith('.json')).length : 0;
+}
+
+export function saveIncorporationBatch(cwd, batch) {
+  mkdirSync(incorporationsDir(cwd), { recursive: true });
+  const p = join(incorporationsDir(cwd), `${batch.batch_id}.json`);
+  writeFileSync(p, canonicalJson(batch) + '\n', 'utf8');
+  return p;
+}

package/src/templates.js

@@ -0,0 +1,44 @@
+/**
+ * Design templates for `tux design create --framework <framework>`.
+ *
+ * Template content lives as real files under `js/templates/<framework>/`
+ * (single source of truth). The Python mirror ships byte-identical copies
+ * under `py/tux/templates/` (synced by `tools/sync-artifacts.mjs`,
+ * enforced by the artifact identity tests). Templates are plain files on
+ * purpose: no string duplication, no escaping traps, byte-exact fixtures.
+ *
+ * Every template is a runnable multi-route design (History-API routing,
+ * tabs, a modal) annotated with TUX targeting attributes
+ * (data-tux-id, data-tux-component, data-tux-instance, data-tux-state).
+ *
+ * @module templates
+ */
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const TEMPLATE_ROOT = join(dirname(fileURLToPath(import.meta.url)), '..', 'templates');
+
+export const SUPPORTED_FRAMEWORKS = ['vanilla', 'react', 'vue', 'angular'];
+
+/** Files (relative path → content) for `tux design create --framework <framework>`. */
+export function designTemplate(framework) {
+  if (!SUPPORTED_FRAMEWORKS.includes(framework)) {
+    throw new Error(`unsupported framework: ${framework}`);
+  }
+  return readTree(join(TEMPLATE_ROOT, framework));
+}
+
+function readTree(dir, prefix = '') {
+  const out = {};
+  for (const entry of readdirSync(dir)) {
+    const p = join(dir, entry);
+    const rel = prefix ? `${prefix}/${entry}` : entry;
+    if (statSync(p).isDirectory()) {
+      Object.assign(out, readTree(p, rel));
+    } else {
+      out[rel] = readFileSync(p, 'utf8');
+    }
+  }
+  return out;
+}

package/templates/angular/README.md

@@ -0,0 +1,19 @@
+# checkout (angular design)
+
+This design itself uses npm. Choose one TUX CLI: Node users run
+`npm install --save-dev tux-review` then `npx tux …`; Python users install
+`tux-review` with `pipx` or `pip` then run `tux …`. The TUX commands below are
+otherwise identical.
+
+```bash
+npm install
+npm run build
+
+# Node.js/npm TUX variant — serves the built design with TUX review
+npx tux design start-review --foreground --dir .
+
+# Python/PyPI TUX variant — same command after Python installation
+tux design start-review --foreground --dir .
+
+# Alternative for either variant: npm start + <tux command> live start-review --url http://localhost:4200
+```

package/templates/angular/angular.json

@@ -0,0 +1,49 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "tux-design": {
+      "projectType": "application",
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "outputPath": "dist/tux-design",
+            "index": "src/index.html",
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [],
+            "styles": ["src/styles.css"]
+          },
+          "configurations": {
+            "production": {
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "tux-design:build:production"
+            },
+            "development": {
+              "buildTarget": "tux-design:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        }
+      }
+    }
+  }
+}

package/templates/angular/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "tux-design",
+  "private": true,
+  "version": "0.1.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --port 4200",
+    "build": "ng build"
+  },
+  "dependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/compiler": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/platform-browser": "^19.0.0",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.15.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^19.0.0",
+    "@angular/cli": "^19.0.0",
+    "@angular/compiler-cli": "^19.0.0",
+    "typescript": "~5.6.2"
+  }
+}