@okalit/cli 0.1.0 → 0.2.0

package/templates/app/src/styles/global.scss

@@ -0,0 +1,250 @@
+:host {
+  display: block;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: #1a1a1a;
+}
+
+// ── App shell ─────────────────────────────────────────
+
+.app-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 32px;
+  border-bottom: 1px solid #eee;
+  gap: 24px;
+}
+.app-brand {
+  display: flex;
+  flex-direction: column;
+  h1 {
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin: 0;
+    color: #1a1a1a;
+    letter-spacing: -0.02em;
+  }
+}
+.app-subtitle {
+  font-size: 0.75rem;
+  color: #999;
+}
+.app-nav {
+  display: flex;
+  gap: 8px;
+  a {
+    padding: 6px 14px;
+    border-radius: 6px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    color: #555;
+    cursor: pointer;
+    transition: background 0.15s, color 0.15s;
+    &:hover {
+      background: #f5f5f5;
+      color: #1a1a1a;
+    }
+  }
+}
+.locale-switch {
+  display: flex;
+  gap: 4px;
+  button {
+    padding: 4px 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    color: #888;
+    &.active {
+      background: #1a1a1a;
+      color: white;
+      border-color: #1a1a1a;
+    }
+  }
+}
+.app-content {
+  padding: 32px;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+// ── Typography ────────────────────────────────────────
+
+h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0 0 8px;
+  letter-spacing: -0.02em;
+}
+h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 24px 0 8px;
+  color: #333;
+}
+p {
+  margin: 0 0 12px;
+  line-height: 1.6;
+  color: #555;
+}
+.hint {
+  font-size: 0.8rem;
+  color: #aaa;
+}
+
+// ── Cards ─────────────────────────────────────────────
+
+.card {
+  background: #fff;
+  border: 1px solid #eee;
+  border-radius: 12px;
+  padding: 24px;
+  margin-bottom: 16px;
+}
+
+// ── Buttons ───────────────────────────────────────────
+
+button {
+  padding: 8px 16px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  background: white;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.12s ease;
+  color: #333;
+
+  &:hover {
+    border-color: #bbb;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
+  }
+  &:active {
+    transform: scale(0.97);
+  }
+  &.primary {
+    background: #1a1a1a;
+    color: white;
+    border-color: #1a1a1a;
+  }
+  &.danger {
+    background: #ff4444;
+    color: white;
+    border-color: #ff4444;
+  }
+}
+
+// ── Counter display ───────────────────────────────────
+
+.count {
+  font-size: 4rem;
+  font-weight: 800;
+  line-height: 1;
+  text-align: center;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+// ── Controls rows ─────────────────────────────────────
+
+.controls-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+// ── Log panel ─────────────────────────────────────────
+
+.log-panel {
+  background: #fafafa;
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 16px;
+  font-family: 'SF Mono', 'Fira Code', monospace;
+  font-size: 0.8rem;
+  max-height: 240px;
+  overflow-y: auto;
+  line-height: 1.8;
+  .log-entry {
+    color: #555;
+    &::before { content: '› '; color: #bbb; }
+  }
+}
+
+// ── Lists ─────────────────────────────────────────────
+
+ul.data-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  li {
+    padding: 8px 0;
+    border-bottom: 1px solid #f0f0f0;
+    font-size: 0.9rem;
+    color: #444;
+    &:last-child { border-bottom: none; }
+    strong { color: #1a1a1a; }
+  }
+}
+
+// ── Fallback / loading ────────────────────────────────
+
+.fallback {
+  padding: 16px;
+  text-align: center;
+  color: #aaa;
+  font-size: 0.85rem;
+}
+
+// ── Spacer ────────────────────────────────────────────
+
+.spacer {
+  height: 600px;
+}
+
+// ── Footer (Interceptor log) ──────────────────────────
+
+.app-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: white;
+  border-top: 1px solid #eee;
+}
+.footer-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 32px;
+}
+.footer-toggle {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 4px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #fafafa;
+  cursor: pointer;
+  color: #666;
+  &:hover { background: #f0f0f0; }
+}
+.footer-clear {
+  font-size: 0.7rem;
+  padding: 3px 8px;
+  border: none;
+  background: none;
+  color: #aaa;
+  cursor: pointer;
+  &:hover { color: #555; }
+}
+.footer-log {
+  margin: 0 32px 8px;
+  max-height: 160px;
+}

package/templates/app/src/styles/index.css

@@ -1,4 +1,13 @@
+*, *::before, *::after { box-sizing: border-box; }
+
 body {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
+  min-height: 100dvh;
+  background: #fafafa;
+}
+
+main-app {
+  display: block;
+  max-width: 100%;
 }

package/templates/app/vite.config.js

@@ -14,6 +14,8 @@ export default defineConfig({
       '@styles': path.resolve(__dirname, 'src/styles'),
       '@guards': path.resolve(__dirname, 'src/guards'),
       '@layouts': path.resolve(__dirname, 'src/layouts'),
+      '@channels': path.resolve(__dirname, 'src/channels'),
+      '@services': path.resolve(__dirname, 'src/services'),
     },
   },
 });

package/templates/app/@okalit/AppMixin.js

@@ -1,29 +0,0 @@
-import { html } from "lit";
-import './okalit-router.js';
-import { OkalitI18n } from './i18n.js';
-
-export const AppMixin = (Base) => class extends Base {
-  async connectedCallback() {
-    super.connectedCallback();
-    if (this._appConfig.i18n && this._appConfig.i18n !== false) {
-      await OkalitI18n.init(this._appConfig.i18n);
-    }
-  }
-
-  get _getOkalitRouter() {
-    return html`
-      <okalit-router
-        .routes=${this._appConfig.routes}
-        .guards=${this._appConfig.guards}
-        .interceptors=${this._appConfig.interceptors}
-      ></okalit-router>
-    `;
-  }
-  render() {
-    return html`
-      ${ this._appConfig.layout 
-        ? html`${this._appConfig.layout(this._getOkalitRouter) }` 
-        : this._getOkalitRouter }
-    `;
-  }
-}

package/templates/app/@okalit/EventBus.js

@@ -1,152 +0,0 @@
-// Prevents crashes from tampered or corrupted storage values
-function safeJsonParse(str, fallback = undefined) {
-  try {
-    return JSON.parse(str);
-  } catch {
-    return fallback;
-  }
-}
-
-class EventBusImpl {
-  constructor() {
-    this.listeners = Object.create(null);
-    this.triggers = Object.create(null);
-    this.persistTypes = {
-      memory: null,
-      session: window.sessionStorage,
-      local: window.localStorage
-    };
-    this.memoryStore = Object.create(null);
-  }
-
-  _readPersistedValue(event, persist = 'memory') {
-    if (persist === 'memory') {
-      const found = event in this.memoryStore;
-      return {
-        found,
-        value: found ? this.memoryStore[event] : undefined,
-      };
-    }
-
-    const storage = this.persistTypes[persist];
-    if (!storage) {
-      return {
-        found: false,
-        value: undefined,
-      };
-    }
-
-    const stored = storage.getItem(`okalit:bus:${event}`);
-    return {
-      found: stored !== null,
-      value: stored !== null ? safeJsonParse(stored) : undefined,
-    };
-  }
-
-  // Validate event name to prevent accidental misuse
-  _validateEvent(event) {
-    if (typeof event !== 'string' || event.trim() === '') {
-      throw new Error(`EventBus: invalid event name "${event}"`);
-    }
-  }
-
-  // Remove a specific channel from memory, session or local storage
-  remove(event, { persist = 'memory' } = {}) {
-    this._validateEvent(event);
-    if (persist === 'memory') {
-      delete this.memoryStore[event];
-    } else {
-      const storage = this.persistTypes[persist];
-      if (storage) {
-        storage.removeItem(`okalit:bus:${event}`);
-      }
-    }
-  }
-
-  // Clear all channels of a given persistence type
-  clearAll({ persist = 'memory' } = {}) {
-    if (persist === 'memory') {
-      this.memoryStore = Object.create(null);
-    } else {
-      const storage = this.persistTypes[persist];
-      if (storage) {
-        // Collect keys first to avoid mutating storage during iteration
-        const keys = [];
-        for (let i = 0; i < storage.length; i++) {
-          const k = storage.key(i);
-          if (k && k.startsWith('okalit:bus:')) keys.push(k);
-        }
-        keys.forEach(k => storage.removeItem(k));
-      }
-    }
-  }
-
-  // Emit a stateful event (persists value and notifies subscribers)
-  emit(event, data, { persist = 'memory' } = {}) {
-    this._validateEvent(event);
-    if (persist !== 'memory') {
-      const storage = this.persistTypes[persist];
-      if (storage) {
-        storage.setItem(`okalit:bus:${event}`, JSON.stringify(data));
-      }
-    } else {
-      this.memoryStore[event] = data;
-    }
-    // Notify all subscribers
-    const cbs = this.listeners[event];
-    if (cbs) {
-      for (let i = 0; i < cbs.length; i++) cbs[i](data);
-    }
-  }
-
-  get(event, { persist = 'memory', fallback } = {}) {
-    this._validateEvent(event);
-    const { found, value } = this._readPersistedValue(event, persist);
-
-    if (!found || value === undefined) {
-      return fallback;
-    }
-
-    return value;
-  }
-
-  // Trigger a stateless (ephemeral) event — no persistence
-  trigger(event, data) {
-    this._validateEvent(event);
-    const cbs = this.triggers[event];
-    if (cbs) {
-      for (let i = 0; i < cbs.length; i++) cbs[i](data);
-    }
-  }
-
-  // Subscribe to a stateful channel; delivers persisted value immediately if available
-  on(event, cb, { persist = 'memory', immediate = true } = {}) {
-    this._validateEvent(event);
-    if (!this.listeners[event]) this.listeners[event] = [];
-    this.listeners[event].push(cb);
-
-    // Deliver persisted value immediately on subscribe
-    if (immediate) {
-      const { found, value } = this._readPersistedValue(event, persist);
-      if (found && value !== undefined) cb(value);
-    }
-
-    // Return unsubscribe function
-    return () => {
-      this.listeners[event] = (this.listeners[event] || []).filter(fn => fn !== cb);
-    };
-  }
-
-  // Subscribe to ephemeral (stateless) events
-  listen(event, cb) {
-    this._validateEvent(event);
-    if (!this.triggers[event]) this.triggers[event] = [];
-    this.triggers[event].push(cb);
-    // Return unsubscribe function
-    return () => {
-      this.triggers[event] = (this.triggers[event] || []).filter(fn => fn !== cb);
-    };
-  }
-}
-
-export const EventBus = new EventBusImpl();

package/templates/app/@okalit/ModuleMixin.js

@@ -1,7 +0,0 @@
-import { html } from "lit";
-
-export const ModuleMixin = (Base) => class extends Base {
-    render() {
-      return html`<slot></slot>`;
-    }
-}

package/templates/app/@okalit/OkalitService.js

@@ -1,145 +0,0 @@
-import { EventBus } from './EventBus.js';
-
-export class OkalitService {
-  constructor() {
-    this.baseUrl = '';
-    this.headers = {};
-    this.__cache = new Map();
-    this.__debounceTimers = new Map();
-    this.__activeRequests = new Map();
-  }
-
-  _makeCacheKey(path, params) {
-    let key = path;
-    if (params && typeof params === 'object') {
-      key += '?' + Object.entries(params).sort().map(([k, v]) => `${k}=${encodeURIComponent(v)}`).join('&');
-    }
-    return key;
-  }
-
-  _debounce(cacheKey, delay, fn) {
-    if (this.__debounceTimers.has(cacheKey)) {
-      clearTimeout(this.__debounceTimers.get(cacheKey));
-    }
-    return new Promise((resolve, reject) => {
-      this.__debounceTimers.set(cacheKey, setTimeout(async () => {
-        this.__debounceTimers.delete(cacheKey);
-        try { resolve(await fn()); }
-        catch (err) { reject(err); }
-      }, delay));
-    });
-  }
-
-  async _parseJson(res, path) {
-    try {
-      return await res.json();
-    } catch {
-      const err = new Error(`Failed to parse JSON response from ${path} (HTTP ${res.status})`);
-      err.status = res.status;
-      throw err;
-    }
-  }
-
-  _buildUrl(path, params) {
-    let url = this.baseUrl + path;
-    if (params && typeof params === 'object') {
-      const qs = Object.entries(params)
-        .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
-        .join('&');
-      if (qs) url += (url.includes('?') ? '&' : '?') + qs;
-    }
-    return url;
-  }
-
-  // Abort any in-flight request for the same cache key
-  abort(cacheKey) {
-    const controller = this.__activeRequests.get(cacheKey);
-    if (controller) {
-      controller.abort();
-      this.__activeRequests.delete(cacheKey);
-    }
-  }
-
-  // Unified request method — eliminates duplication across get/post/put/delete
-  async _request(method, path, opts = {}, body = undefined) {
-    const {
-      onSuccess, onError, cache = false, force = false, params = undefined,
-      debounce = 0, transform = undefined, headers = undefined, timeout = 30000,
-    } = opts;
-    const cacheKey = `${method}:${this._makeCacheKey(path, params)}`;
-
-    if (debounce > 0) {
-      return this._debounce(cacheKey, debounce, () =>
-        this._request(method, path, { ...opts, debounce: 0 }, body)
-      );
-    }
-
-    if (cache && !force && this.__cache.has(cacheKey)) {
-      const cached = this.__cache.get(cacheKey);
-      if (onSuccess) setTimeout(() => EventBus.trigger(onSuccess, cached), 0);
-      return cached;
-    }
-
-    const url = this._buildUrl(path, params);
-    const controller = new AbortController();
-    this.abort(cacheKey);
-    this.__activeRequests.set(cacheKey, controller);
-
-    const timeoutId = timeout > 0
-      ? setTimeout(() => controller.abort(), timeout)
-      : null;
-
-    const fetchOpts = {
-      method,
-      headers: {
-        ...(body !== undefined ? { 'Content-Type': 'application/json' } : {}),
-        ...this.headers,
-        ...headers,
-      },
-      signal: controller.signal,
-    };
-    if (body !== undefined) fetchOpts.body = JSON.stringify(body);
-
-    try {
-      const res = await fetch(url, fetchOpts);
-
-      // Validate HTTP status before parsing
-      if (!res.ok) {
-        const err = new Error(`HTTP ${res.status} ${res.statusText} on ${method} ${path}`);
-        err.status = res.status;
-        err.response = res;
-        throw err;
-      }
-
-      let data = await this._parseJson(res, path);
-      if (transform && typeof transform === 'function') {
-        data = transform(data);
-      }
-      if (cache) this.__cache.set(cacheKey, data);
-      if (onSuccess) EventBus.trigger(onSuccess, data);
-      return data;
-    } catch (err) {
-      if (onError) EventBus.trigger(onError, err);
-      throw err;
-    } finally {
-      if (timeoutId) clearTimeout(timeoutId);
-      this.__activeRequests.delete(cacheKey);
-    }
-  }
-
-  get(path, opts = {}) {
-    return this._request('GET', path, opts);
-  }
-
-  post(path, body, opts = {}) {
-    return this._request('POST', path, opts, body);
-  }
-
-  put(path, body, opts = {}) {
-    return this._request('PUT', path, opts, body);
-  }
-
-  delete(path, opts = {}) {
-    return this._request('DELETE', path, opts);
-  }
-}

package/templates/app/@okalit/defineElement.js

@@ -1,65 +0,0 @@
-// src/core/defineElement.js
-import { css, unsafeCSS } from 'lit';
-import { injectServices } from './service.js';
-
-// Convert PascalCase or camelCase to kebab-case
-function toKebabCase(str) {
-  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').replace(/([A-Z])([A-Z][a-z])/g, '$1-$2').toLowerCase();
-}
-
-// Custom element tags must contain a hyphen and only valid characters
-const VALID_CE_TAG = /^[a-z][a-z0-9]*(-[a-z0-9]+)+$/;
-
-export function defineElement({ styles, tag, props, params, inject, template } = {}) {
-  return function (target) {
-    if (styles) {
-      const arr = Array.isArray(styles) ? styles : [styles];
-      target.styles = arr.map(s => {
-        if (typeof s === 'string') return css`${unsafeCSS(s)}`;
-        return s;
-      });
-    }
-
-    if (props)
-      target.properties = Object.assign({}, target.properties, props);
-
-    // Route params: register as Lit properties so they get default values
-    // and participate in the reactive update cycle.
-    if (params && typeof params === 'object') {
-      // Store the params schema so the routeParams setter can coerce types
-      target.__okalitParams = params;
-      target.properties = Object.assign({}, target.properties, params);
-    }
-
-    // Service injection support
-    if (inject && Array.isArray(inject)) {
-      const orig = target.prototype.connectedCallback;
-      target.prototype.connectedCallback = function () {
-        injectServices(this, inject);
-        if (orig) orig.call(this);
-      };
-    }
-
-    // Decoupled template: overrides the prototype's render method.
-    // When Lit calls this.render(), the context is the component instance.
-    if (template && typeof template === 'function') {
-      target.prototype.render = template;
-    }
-    // If no template is provided, Lit uses the render() defined in the class.
-
-    let finalTag = tag;
-    if (!finalTag)
-      finalTag = toKebabCase(target.name);
-
-    // Validate tag name to prevent malformed or dangerous custom element names
-    if (finalTag && !VALID_CE_TAG.test(finalTag)) {
-      console.error(`defineElement: invalid custom element tag "${finalTag}"`);
-      return target;
-    }
-
-    // Skip if already defined (prevents DOMException during Vite HMR)
-    if (finalTag && !window.customElements.get(finalTag)) {
-      window.customElements.define(finalTag, target);
-    }
-  };
-}