@techninja/clearstack 0.2.0

package/templates/shared/scripts/build-icons.js

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+
+/**
+ * Extracts SVG path data from lucide-static for icons used in the app.
+ * Generates public/icons.json — loaded by app-icon at runtime.
+ * Runs on `npm postinstall`.
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = dirname(dirname(fileURLToPath(import.meta.url)));
+const ICONS_DIR = resolve(ROOT, 'node_modules/lucide-static/icons');
+const OUT = resolve(ROOT, 'public/icons.json');
+
+/** Icons used in the app — lucide name → app name */
+const ICON_MAP = {
+  plus: 'plus',
+  check: 'check',
+  'trash-2': 'trash',
+  x: 'x',
+  pencil: 'edit',
+  'chevron-right': 'chevron',
+  folder: 'folder',
+  'grip-vertical': 'grip',
+  list: 'list',
+  'layout-grid': 'grid',
+  filter: 'filter',
+  settings: 'settings',
+  'mouse-pointer': 'pointer',
+  'pen-tool': 'pen',
+  square: 'rect',
+  circle: 'circle',
+  minus: 'line',
+  shapes: 'shapes',
+  cloud: 'cloud',
+  database: 'database',
+  diamond: 'diamond',
+  hexagon: 'hexagon',
+  'file-text': 'document',
+  'arrow-right': 'arrow-right',
+  cylinder: 'cylinder',
+  server: 'server',
+  monitor: 'monitor',
+  globe: 'globe',
+  lock: 'lock',
+  shield: 'shield',
+  user: 'user',
+  cpu: 'cpu',
+  wifi: 'wifi',
+  zap: 'zap',
+  box: 'box',
+  star: 'star',
+  type: 'text',
+};
+
+/**
+ * Extract all <path>, <line>, <circle>, <rect>, <polyline> inner content from an SVG file.
+ * @param {string} file
+ * @returns {string} Combined SVG inner elements
+ */
+function extractInner(file) {
+  const svg = readFileSync(file, 'utf-8');
+  const inner = svg.match(/<(path|line|circle|rect|polyline|ellipse)\s[^>]*\/>/g);
+  return inner ? inner.join('') : '';
+}
+
+mkdirSync(dirname(OUT), { recursive: true });
+
+/** @type {Record<string, string>} */
+const icons = {};
+let count = 0;
+
+for (const [lucideName, appName] of Object.entries(ICON_MAP)) {
+  const file = resolve(ICONS_DIR, `${lucideName}.svg`);
+  if (!existsSync(file)) {
+    console.warn(`⚠ Icon not found: ${lucideName}`);
+    continue;
+  }
+  icons[appName] = extractInner(file);
+  count++;
+}
+
+writeFileSync(OUT, JSON.stringify(icons, null, 2));
+console.log(`✓ Built ${count} icons → public/icons.json`);

package/templates/shared/scripts/vendor-deps.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+
+/**
+ * Copies third-party ES module sources into public/vendor/ so the browser
+ * can load them directly via import map. Runs on `npm postinstall`.
+ */
+
+import { cpSync, mkdirSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = dirname(dirname(fileURLToPath(import.meta.url)));
+const VENDOR_DIR = resolve(ROOT, 'public/vendor');
+
+/** @type {{ name: string, src: string }[]} */
+const DEPS = [{ name: 'hybrids', src: 'node_modules/hybrids/src' }];
+
+mkdirSync(VENDOR_DIR, { recursive: true });
+
+for (const dep of DEPS) {
+  const src = resolve(ROOT, dep.src);
+  const dest = resolve(VENDOR_DIR, dep.name);
+  cpSync(src, dest, { recursive: true });
+  console.log(`✓ Vendored: ${dep.name} → public/vendor/${dep.name}/`);
+}

package/templates/shared/src/components/atoms/app-badge/app-badge.css

@@ -0,0 +1,4 @@
+app-badge {
+  display: inline-block;
+  line-height: 1;
+}

package/templates/shared/src/components/atoms/app-badge/app-badge.js

@@ -0,0 +1,23 @@
+/**
+ * Badge atom — inline status/priority indicator.
+ * @module components/atoms/app-badge
+ */
+
+import { html, define } from 'hybrids';
+
+/**
+ * @typedef {Object} AppBadgeHost
+ * @property {string} label - Badge text
+ * @property {'info'|'success'|'warning'|'danger'} color - Color variant
+ */
+
+/** @type {import('hybrids').Component<AppBadgeHost>} */
+export default define({
+  tag: 'app-badge',
+  label: '',
+  color: 'info',
+  render: {
+    value: ({ label, color }) => html` <span class="badge badge-${color}">${label}</span> `,
+    shadow: false,
+  },
+});

package/templates/shared/src/components/atoms/app-badge/app-badge.test.js

@@ -0,0 +1,26 @@
+import { fixture, expect } from '@open-wc/testing';
+import '../app-badge/app-badge.js';
+
+describe('app-badge', () => {
+  it('renders a span with label text', async () => {
+    const el = await fixture(`<app-badge label="Active"></app-badge>`);
+    await new Promise((r) => requestAnimationFrame(r));
+    const span = el.querySelector('.badge');
+    expect(span).to.exist;
+    expect(span.textContent).to.contain('Active');
+  });
+
+  it('applies color variant class', async () => {
+    const el = await fixture(`<app-badge label="High" color="danger"></app-badge>`);
+    await new Promise((r) => requestAnimationFrame(r));
+    const span = el.querySelector('.badge');
+    expect(span.classList.contains('badge-danger')).to.be.true;
+  });
+
+  it('defaults to info color', async () => {
+    const el = await fixture(`<app-badge label="Note"></app-badge>`);
+    await new Promise((r) => requestAnimationFrame(r));
+    const span = el.querySelector('.badge');
+    expect(span.classList.contains('badge-info')).to.be.true;
+  });
+});

package/templates/shared/src/components/atoms/app-badge/index.js

@@ -0,0 +1 @@
+export { default } from './app-badge.js';

package/templates/shared/src/components/atoms/app-button/app-button.css

@@ -0,0 +1,3 @@
+app-button {
+  display: inline-block;
+}

package/templates/shared/src/components/atoms/app-button/app-button.js

@@ -0,0 +1,41 @@
+/**
+ * Button atom — single-purpose action element.
+ * @module components/atoms/app-button
+ */
+
+import { html, define, dispatch } from 'hybrids';
+
+/**
+ * @typedef {Object} AppButtonHost
+ * @property {string} label - Button display text
+ * @property {'primary'|'secondary'|'ghost'|'danger'} variant - Visual style
+ * @property {boolean} disabled - Disabled state
+ */
+
+/**
+ * @param {AppButtonHost & HTMLElement} host
+ * @param {MouseEvent} event
+ */
+function handleClick(host, event) {
+  if (host.disabled) {
+    event.preventDefault();
+    return;
+  }
+  dispatch(host, 'press', { bubbles: true });
+}
+
+/** @type {import('hybrids').Component<AppButtonHost>} */
+export default define({
+  tag: 'app-button',
+  label: '',
+  variant: 'primary',
+  disabled: false,
+  render: {
+    value: ({ label, variant, disabled }) => html`
+      <button class="btn btn-${variant}" disabled="${disabled}" onclick="${handleClick}">
+        ${label}
+      </button>
+    `,
+    shadow: false,
+  },
+});

package/templates/shared/src/components/atoms/app-button/app-button.test.js

@@ -0,0 +1,43 @@
+import { fixture, expect, oneEvent } from '@open-wc/testing';
+import { html } from 'hybrids';
+import '../app-button/app-button.js';
+
+describe('app-button', () => {
+  it('renders a button with label', async () => {
+    const el = await fixture(`<app-button label="Click me"></app-button>`);
+    await new Promise((r) => requestAnimationFrame(r));
+    const btn = el.querySelector('button');
+    expect(btn).to.exist;
+    expect(btn.textContent).to.contain('Click me');
+  });
+
+  it('applies variant class', async () => {
+    const el = await fixture(`<app-button label="Go" variant="danger"></app-button>`);
+    await new Promise((r) => requestAnimationFrame(r));
+    const btn = el.querySelector('button');
+    expect(btn.classList.contains('btn-danger')).to.be.true;
+  });
+
+  it('defaults to primary variant', async () => {
+    const el = await fixture(`<app-button label="Go"></app-button>`);
+    await new Promise((r) => requestAnimationFrame(r));
+    const btn = el.querySelector('button');
+    expect(btn.classList.contains('btn-primary')).to.be.true;
+  });
+
+  it('reflects disabled attribute to button', async () => {
+    const el = await fixture(`<app-button label="No" disabled></app-button>`);
+    await new Promise((r) => requestAnimationFrame(r));
+    const btn = el.querySelector('button');
+    expect(btn.disabled).to.be.true;
+  });
+
+  it('dispatches press event on click', async () => {
+    const el = await fixture(`<app-button label="Go"></app-button>`);
+    await new Promise((r) => requestAnimationFrame(r));
+    const btn = el.querySelector('button');
+    setTimeout(() => btn.click());
+    const event = await oneEvent(el, 'press');
+    expect(event).to.exist;
+  });
+});

package/templates/shared/src/components/atoms/app-button/index.js

@@ -0,0 +1 @@
+export { default } from './app-button.js';

package/templates/shared/src/components/atoms/app-icon/app-icon.css

@@ -0,0 +1,4 @@
+app-icon {
+  display: inline-flex;
+  vertical-align: middle;
+}

package/templates/shared/src/components/atoms/app-icon/app-icon.js

@@ -0,0 +1,57 @@
+/**
+ * Icon atom — renders Lucide SVG icons by name.
+ * Icons loaded from /icons.json (generated at install from lucide-static).
+ * @module components/atoms/app-icon
+ */
+
+import { html, define } from 'hybrids';
+
+/** @type {Record<string, string>|null} */
+let iconCache = null;
+
+/** @type {Promise<Record<string, string>>} */
+const loading = fetch('/icons.json')
+  .then((r) => (r.ok ? r : fetch('/public/icons.json')))
+  .then((r) => r.json())
+  .then((data) => {
+    iconCache = data;
+    return data;
+  })
+  .catch(() => {
+    iconCache = {};
+    return {};
+  });
+
+/**
+ * @typedef {Object} AppIconHost
+ * @property {string} name
+ * @property {'sm'|'md'|'lg'} size
+ * @property {string} svgContent - Resolved SVG inner markup
+ */
+
+/** @type {import('hybrids').Component<AppIconHost>} */
+export default define({
+  tag: 'app-icon',
+  name: '',
+  size: 'md',
+  svgContent: {
+    value: '',
+    connect(host, _key, invalidate) {
+      loading.then(() => {
+        host.svgContent = iconCache?.[host.name] || '';
+        invalidate();
+      });
+    },
+    observe(host, val) {
+      const span = host.querySelector('.icon');
+      if (!span) return;
+      span.innerHTML = val
+        ? `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${val}</svg>`
+        : '';
+    },
+  },
+  render: {
+    value: ({ size }) => html`<span class="icon icon-${size}"></span>`,
+    shadow: false,
+  },
+});

package/templates/shared/src/components/atoms/app-icon/app-icon.test.js

@@ -0,0 +1,30 @@
+import { fixture, expect } from '@open-wc/testing';
+import '../app-icon/app-icon.js';
+
+const frame = () => new Promise((r) => requestAnimationFrame(r));
+
+describe('app-icon', () => {
+  it('renders a span with icon class', async () => {
+    const el = await fixture(`<app-icon name="plus"></app-icon>`);
+    await frame();
+    const span = el.querySelector('.icon');
+    expect(span).to.exist;
+  });
+
+  it('applies size class', async () => {
+    const el = await fixture(`<app-icon name="check" size="lg"></app-icon>`);
+    await frame();
+    expect(el.querySelector('.icon-lg')).to.exist;
+  });
+
+  it('applies sm size class', async () => {
+    const el = await fixture(`<app-icon name="check" size="sm"></app-icon>`);
+    await frame();
+    expect(el.querySelector('.icon-sm')).to.exist;
+  });
+
+  it('reflects name property', async () => {
+    const el = await fixture(`<app-icon name="folder"></app-icon>`);
+    expect(el.name).to.equal('folder');
+  });
+});

package/templates/shared/src/components/atoms/app-icon/index.js

@@ -0,0 +1 @@
+export { default } from './app-icon.js';

package/templates/shared/src/components/atoms/theme-toggle/index.js

@@ -0,0 +1 @@
+export { default } from './theme-toggle.js';

package/templates/shared/src/components/atoms/theme-toggle/theme-toggle.css

@@ -0,0 +1,10 @@
+theme-toggle {
+  display: inline-block;
+  margin-left: auto;
+
+  & .theme-toggle-btn {
+    font-size: var(--text-lg);
+    padding: var(--space-xs) var(--space-sm);
+    line-height: 1;
+  }
+}

package/templates/shared/src/components/atoms/theme-toggle/theme-toggle.js

@@ -0,0 +1,42 @@
+/**
+ * Theme toggle atom — switches between light and dark mode.
+ * Persists via AppState store (localStorage-backed).
+ * @module components/atoms/theme-toggle
+ */
+
+import { html, define, store } from 'hybrids';
+import AppState from '../../../store/AppState.js';
+
+/**
+ * @typedef {Object} ThemeToggleHost
+ * @property {import('../../../store/AppState.js').AppState} state
+ */
+
+/**
+ * @param {ThemeToggleHost & HTMLElement} host
+ */
+function toggle(host) {
+  if (!store.ready(host.state)) return;
+  const next = host.state.theme === 'light' ? 'dark' : 'light';
+  store.set(host.state, { theme: next });
+  document.documentElement.setAttribute('data-theme', next);
+}
+
+/** @type {import('hybrids').Component<ThemeToggleHost>} */
+export default define({
+  tag: 'theme-toggle',
+  state: store(AppState),
+  render: {
+    value: ({ state }) => {
+      if (store.ready(state)) {
+        document.documentElement.setAttribute('data-theme', state.theme);
+      }
+      return html`
+        <button class="btn btn-ghost theme-toggle-btn" onclick="${toggle}">
+          ${store.ready(state) && state.theme === 'light' ? '🌙' : '☀️'}
+        </button>
+      `;
+    },
+    shadow: false,
+  },
+});

package/templates/shared/src/styles/buttons.css

@@ -0,0 +1,79 @@
+/* Global button styles — usable on any <button class="btn"> element.
+   Loaded in index.html via components.css or directly. */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border: none;
+  border-radius: var(--radius-md);
+  font: inherit;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    opacity 0.15s ease;
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.btn-primary {
+  background: var(--color-primary);
+  color: var(--color-text-inverse);
+  &:hover:not(:disabled) {
+    background: var(--color-primary-hover);
+  }
+}
+
+.btn-secondary {
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  &:hover:not(:disabled) {
+    background: var(--color-bg);
+  }
+}
+
+.btn-ghost {
+  background: transparent;
+  color: var(--color-primary);
+  &:hover:not(:disabled) {
+    background: var(--color-bg);
+  }
+}
+
+.btn-success {
+  background: var(--color-success);
+  color: var(--color-text-inverse);
+  &:hover:not(:disabled) {
+    background: var(--color-success-hover);
+  }
+}
+
+.btn-warning {
+  background: var(--color-warning);
+  color: var(--color-text-inverse);
+  &:hover:not(:disabled) {
+    background: var(--color-warning-hover);
+  }
+}
+
+.btn-danger {
+  background: var(--color-danger);
+  color: var(--color-text-inverse);
+  &:hover:not(:disabled) {
+    background: var(--color-danger-hover);
+  }
+}
+
+.btn-info {
+  background: var(--color-info);
+  color: var(--color-text-inverse);
+  &:hover:not(:disabled) {
+    background: var(--color-info-hover);
+  }
+}

package/templates/shared/src/styles/components.css

@@ -0,0 +1,31 @@
+/* Component styles aggregator.
+   Add one @import per component as they are created.
+   Loaded once in index.html — all light DOM components inherit these. */
+
+/* Atoms */
+@import '../components/atoms/app-button/app-button.css';
+@import '../components/atoms/app-badge/app-badge.css';
+@import '../components/atoms/app-icon/app-icon.css';
+@import '../components/atoms/theme-toggle/theme-toggle.css';
+@import '../components/atoms/canvas-toolbar/canvas-toolbar.css';
+
+/* Molecules */
+@import '../components/molecules/task-card/task-card.css';
+@import '../components/molecules/project-card/project-card.css';
+@import '../components/molecules/form-field/form-field.css';
+
+/* Organisms */
+@import '../components/organisms/task-list/task-list.css';
+@import '../components/organisms/project-header/project-header.css';
+@import '../components/organisms/schema-form/schema-form.css';
+@import '../components/organisms/project-canvas/project-canvas.css';
+
+/* Templates */
+@import '../components/templates/page-layout/page-layout.css';
+
+/* Pages */
+@import '../pages/home/home-view.css';
+@import '../pages/project/project-view.css';
+
+/* Router */
+@import '../router/router.css';

package/templates/shared/src/styles/forms.css

@@ -0,0 +1,20 @@
+/* Shared form input styles.
+   Loaded globally in index.html. */
+
+input,
+select,
+textarea {
+  font: inherit;
+  padding: var(--space-sm);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text);
+  transition: border-color 0.15s ease;
+
+  &:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
+  }
+}

package/templates/shared/src/styles/reset.css

@@ -0,0 +1,32 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html {
+  font-family: var(--font-sans);
+  line-height: 1.5;
+  color: var(--color-text);
+  background: var(--color-bg);
+}
+body {
+  min-height: 100vh;
+}
+a {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+img,
+svg {
+  display: block;
+  max-width: 100%;
+}
+button {
+  font: inherit;
+  cursor: pointer;
+}