@techninja/clearstack 0.2.0

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

@@ -0,0 +1,135 @@
+/* Shared styles — error states, loading, icons, utilities, transitions.
+   Loaded globally in index.html. All light DOM components inherit these. */
+
+/* --- Error & Validation States --- */
+
+.error {
+  color: var(--color-danger);
+
+  & input,
+  & select,
+  & textarea {
+    border-color: var(--color-danger);
+  }
+}
+
+.error-message {
+  font-size: var(--text-sm);
+  color: var(--color-danger);
+  margin-top: var(--space-xs);
+}
+
+.success-message {
+  font-size: var(--text-sm);
+  color: var(--color-success);
+  margin-top: var(--space-xs);
+}
+
+/* --- Loading States --- */
+
+.loading {
+  opacity: 0.6;
+  pointer-events: none;
+  position: relative;
+}
+
+.spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-primary);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* --- Icon Base --- */
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25em;
+  height: 1.25em;
+  vertical-align: middle;
+  fill: currentColor;
+
+  & svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.icon-sm {
+  width: 1em;
+  height: 1em;
+}
+.icon-lg {
+  width: 1.5em;
+  height: 1.5em;
+}
+
+/* --- Screen Reader Only --- */
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* --- Common Transitions --- */
+
+.fade-in {
+  animation: fadeIn 0.2s ease-in;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* --- Badge / Status Indicators --- */
+
+.badge {
+  display: inline-block;
+  padding: var(--space-xs) var(--space-sm);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+}
+
+.badge-success {
+  background: color-mix(in srgb, var(--color-success) 15%, transparent);
+  color: var(--color-success);
+}
+.badge-warning {
+  background: color-mix(in srgb, var(--color-warning) 15%, transparent);
+  color: var(--color-warning);
+}
+.badge-danger {
+  background: color-mix(in srgb, var(--color-danger) 15%, transparent);
+  color: var(--color-danger);
+}
+.badge-info {
+  background: color-mix(in srgb, var(--color-info) 15%, transparent);
+  color: var(--color-info);
+}
+
+/* --- Form Shared --- see forms.css --- */

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

@@ -0,0 +1,65 @@
+:root {
+  /* Colors — Light */
+  --color-primary: #2563eb;
+  --color-primary-hover: #1d4ed8;
+  --color-success: #16a34a;
+  --color-success-hover: #15803d;
+  --color-warning: #d97706;
+  --color-warning-hover: #b45309;
+  --color-danger: #dc2626;
+  --color-danger-hover: #b91c1c;
+  --color-info: #0284c7;
+  --color-info-hover: #0369a1;
+  --color-text: #1e293b;
+  --color-text-muted: #64748b;
+  --color-text-inverse: #ffffff;
+  --color-bg: #f8fafc;
+  --color-surface: #ffffff;
+  --color-border: #e2e8f0;
+
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+
+  /* Typography */
+  --font-sans: system-ui, -apple-system, sans-serif;
+  --font-mono: ui-monospace, monospace;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.25rem;
+  --text-xl: 1.5rem;
+
+  /* Borders */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
+}
+
+/* Dark mode */
+[data-theme='dark'] {
+  --color-primary: #3b82f6;
+  --color-primary-hover: #60a5fa;
+  --color-success: #22c55e;
+  --color-success-hover: #4ade80;
+  --color-warning: #f59e0b;
+  --color-warning-hover: #fbbf24;
+  --color-danger: #ef4444;
+  --color-danger-hover: #f87171;
+  --color-info: #38bdf8;
+  --color-info-hover: #7dd3fc;
+  --color-text: #e2e8f0;
+  --color-text-muted: #94a3b8;
+  --color-text-inverse: #0f172a;
+  --color-bg: #0f172a;
+  --color-surface: #1e293b;
+  --color-border: #334155;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
+}

package/templates/shared/src/utils/formatDate.js

@@ -0,0 +1,41 @@
+/**
+ * Date formatting helpers.
+ * @module utils/formatDate
+ */
+
+/**
+ * Format an ISO 8601 string to a readable date.
+ * @param {string|null|undefined} iso - ISO date string
+ * @returns {string} Formatted date or empty string
+ */
+export function formatDate(iso) {
+  if (!iso) return '';
+  const d = new Date(iso);
+  if (isNaN(d.getTime())) return '';
+  return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+}
+
+/**
+ * Format an ISO 8601 string to relative time (e.g. "3 days ago").
+ * @param {string|null|undefined} iso - ISO date string
+ * @returns {string} Relative time or empty string
+ */
+export function timeAgo(iso) {
+  if (!iso) return '';
+  const seconds = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+  if (isNaN(seconds)) return '';
+
+  const intervals = [
+    { label: 'year', seconds: 31536000 },
+    { label: 'month', seconds: 2592000 },
+    { label: 'day', seconds: 86400 },
+    { label: 'hour', seconds: 3600 },
+    { label: 'minute', seconds: 60 },
+  ];
+
+  for (const { label, seconds: s } of intervals) {
+    const count = Math.floor(seconds / s);
+    if (count >= 1) return `${count} ${label}${count > 1 ? 's' : ''} ago`;
+  }
+  return 'just now';
+}

package/templates/shared/src/utils/statusColors.js

@@ -0,0 +1,60 @@
+/**
+ * Maps entity status/priority values to badge colors and display titles.
+ * @module utils/statusColors
+ */
+
+/** @type {Record<string, 'info'|'success'|'warning'|'danger'>} */
+const STATUS_COLORS = {
+  active: 'success',
+  archived: 'info',
+  todo: 'info',
+  doing: 'warning',
+  done: 'success',
+};
+
+/** @type {Record<string, string>} */
+const STATUS_TITLES = {
+  active: 'Active',
+  archived: 'Archived',
+  todo: 'To Do',
+  doing: 'In Progress',
+  done: 'Done',
+};
+
+/** @type {Record<string, 'info'|'success'|'warning'|'danger'>} */
+const PRIORITY_COLORS = {
+  low: 'info',
+  med: 'warning',
+  high: 'danger',
+};
+
+/** @type {Record<string, string>} */
+const PRIORITY_TITLES = {
+  low: 'Low',
+  med: 'Medium',
+  high: 'High',
+};
+
+/**
+ * @param {string} status
+ * @returns {'info'|'success'|'warning'|'danger'}
+ */
+export const statusColor = (status) => STATUS_COLORS[status] || 'info';
+
+/**
+ * @param {string} status
+ * @returns {string}
+ */
+export const statusTitle = (status) => STATUS_TITLES[status] || status;
+
+/**
+ * @param {string} priority
+ * @returns {'info'|'success'|'warning'|'danger'}
+ */
+export const priorityColor = (priority) => PRIORITY_COLORS[priority] || 'info';
+
+/**
+ * @param {string} priority
+ * @returns {string}
+ */
+export const priorityTitle = (priority) => PRIORITY_TITLES[priority] || priority;

package/templates/static/src/pages/home/home-view.js

@@ -0,0 +1,38 @@
+/**
+ * Home page — demonstrates localStorage-backed state.
+ * @module pages/home
+ */
+
+import { html, define, store } from 'hybrids';
+import AppState from '../../store/AppState.js';
+import '../../components/atoms/app-button/app-button.js';
+
+/**
+ * @typedef {Object} HomeViewHost
+ * @property {import('../../store/AppState.js').AppState} state
+ */
+
+/** @param {HomeViewHost & HTMLElement} host */
+function increment(host) {
+  if (!store.ready(host.state)) return;
+  store.set(host.state, { count: host.state.count + 1 });
+}
+
+export default define({
+  tag: 'home-view',
+  state: store(AppState),
+  render: {
+    value: ({ state }) => html`
+      <div class="home-view">
+        <h1>{{name}}</h1>
+        <p>Your Clearstack project is ready. Start building!</p>
+        ${store.ready(state) && html`
+          <p>Count: ${state.count}</p>
+          <button class="btn btn-primary" onclick="${increment}">Increment</button>
+          <p class="hint">State persists in localStorage — refresh to verify.</p>
+        `}
+      </div>
+    `,
+    shadow: false,
+  },
+});

package/templates/static/src/router/index.js

@@ -0,0 +1,16 @@
+/**
+ * App router shell — manages view stack.
+ * @module router
+ */
+
+import { html, define, router } from 'hybrids';
+import HomeView from '../pages/home/home-view.js';
+
+export default define({
+  tag: 'app-router',
+  stack: router(HomeView, { url: '/' }),
+  render: {
+    value: ({ stack }) => html`<div class="app-router">${stack}</div>`,
+    shadow: false,
+  },
+});

package/templates/static/src/store/AppState.js

@@ -0,0 +1,26 @@
+/**
+ * App state — singleton, localStorage-backed. No server needed.
+ * @module store/AppState
+ */
+
+import { store } from 'hybrids';
+
+/** @typedef {{ theme: 'light'|'dark', count: number }} AppState */
+
+/** @type {import('hybrids').Model<AppState>} */
+const AppState = {
+  theme: 'light',
+  count: 0,
+  [store.connect]: {
+    get: () => {
+      const raw = localStorage.getItem('appState');
+      return raw ? JSON.parse(raw) : {};
+    },
+    set: (id, values) => {
+      localStorage.setItem('appState', JSON.stringify(values));
+      return values;
+    },
+  },
+};
+
+export default AppState;