@ccslabs/xtend 0.1.0-rc.1

package/components/xtype.js

@@ -0,0 +1,244 @@
+import { xstate } from './xstate.js';
+
+// <x-type>
+class XType extends HTMLElement {
+  static get xtendComponentContract() {
+    return {
+      schema: "xtend.component.contract.v2",
+      tag: "x-type",
+      profiles: ["display"],
+      maturity: "ux-ready"
+    };
+  }
+
+  static get xtendRmtMetadata() {
+    return {
+      schema: "xtend.rmt.component-contract.v1",
+      adapter: "xtend.component",
+      schedule: "component.idle.hydrate",
+      kernelBoundary: "no-rmt-kernel-import-of-xtend-types"
+    };
+  }
+
+  static get xtendScaffoldA11yProfile() {
+    return {
+      schema: "xtend.a11y.screenreader-signals.v1",
+      role: "text",
+      accessibleName: "Animated text",
+      focusStrategy: "not-focusable"
+    };
+  }
+
+  static get xtendScaffoldPerformanceProfile() {
+    return {
+      schema: "xtend.performance.component-profile.v1",
+      performanceProfile: "display",
+      budgetClass: "display-animation",
+      lane: "idle",
+      hydrationPolicy: "idle",
+      criticalMeasurements: ["xtend.type.render", "xtend.type.tick"],
+      idleOrBackgroundAllowed: true
+    };
+  }
+
+  static get xtendLayoutDisplayMediaUxProfile() {
+    return {
+      schema: "xtend.component.layout-display-media-ux-profile.v1",
+      componentRef: "x-type",
+      family: "display-text-effect",
+      role: "text",
+      contentKind: "animated-text",
+      responsiveStrategy: "inline-text-preserve",
+      lazyPolicy: "idle-hydrate",
+      overflowPolicy: "inline-overflow-safe",
+      aspectRatio: "text-driven",
+      events: ["typing-started", "typing-completed", "text-erased"],
+      commands: ["render", "hydrate", "snapshot"],
+      stateKey: "xtype-current",
+      schedule: "component.idle.hydrate",
+      fabric: { lane: "idle", a11yLane: "a11y", diagnosticsLane: "diagnostics", api: "@xtend-fabric" },
+      rmt: { adapter: "xtend.component", kernelBoundary: "no-rmt-kernel-import-of-xtend-types" }
+    };
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._texts = [];
+    this._index = 0;
+    this._loop = true;
+    this._speed = 100;
+    this._pause = 1500;
+    this._cursorChar = '|';
+    this._blinking = false;
+    this._paused = false;
+    this._typing = false;
+
+    this._textSpan = document.createElement('span');
+    this._textSpan.setAttribute("part", "text");
+    this._cursorSpan = document.createElement('span');
+    this._cursorSpan.className = 'cursor';
+    this._cursorSpan.setAttribute("part", "cursor");
+    this._unsubscribeState = null;
+  }
+
+  static get observedAttributes() {
+    return ["texts", "speed", "pause", "cursor", "blinking-cursor", "loop"];
+  }
+
+  connectedCallback() {
+    this.setAttribute("part", "root");
+    this._initAttributes();
+    this._applyStyle();
+
+    this._textSpan.style.whiteSpace = 'pre';
+    this._cursorSpan.textContent = this._cursorChar;
+
+    this.shadowRoot.appendChild(this._textSpan);
+    if (this._blinking) this.shadowRoot.appendChild(this._cursorSpan);
+
+    // State initialisieren
+    xstate.set('xtype-current', this._texts[this._index] || '');
+
+    // Auf State-Änderungen reagieren (optional: z.B. Pause/Resume von außen)
+    this._unsubscribeState = xstate.subscribe((key, value) => {
+      if (key === 'xtype-pause' && value === true) this.pause();
+      if (key === 'xtype-pause' && value === false) this.resume();
+      if (key === 'xtype-set-index' && typeof value === 'number') {
+        this._index = value % this._texts.length;
+        this._start();
+      }
+    });
+
+    this._start();
+  }
+
+  disconnectedCallback() {
+    if (this._unsubscribeState) this._unsubscribeState();
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue !== newValue) {
+      this._initAttributes();
+      this._start();
+    }
+  }
+
+  _initAttributes() {
+    const raw = this.getAttribute('texts') || '["x-type"]';
+    try {
+      this._texts = JSON.parse(raw);
+    } catch {
+      console.warn("Invalid JSON for texts attribute. Falling back to default.");
+      this._texts = raw.split(',').map(t => t.trim());
+    }
+
+    if (!this._texts || this._texts.length === 0) {
+      console.warn("No texts provided. Falling back to default text.");
+      this._texts = ["x-type"];
+    }
+
+    this._speed = parseInt(this.getAttribute('speed')) || 100;
+    this._pause = parseInt(this.getAttribute('pause')) || 1500;
+    this._loop = this.hasAttribute('loop');
+    this._cursorChar = this.getAttribute('cursor') || '|';
+    this._blinking = this.hasAttribute('blinking-cursor');
+
+    // Reset the index to start from the first text
+    this._index = 0;
+  }
+
+  _applyStyle() {
+    if (!this.shadowRoot.querySelector('style')) {
+      const style = document.createElement('style');
+      style.textContent = `
+        :host {
+          display: inline;
+        }
+        .cursor {
+          display: inline-block;
+          margin-left: 2px;
+          animation: blink 1s step-start infinite;
+          color: var(--cursor-color, inherit);
+          font-size: var(--cursor-font-size, inherit);
+        }
+
+        @keyframes blink {
+          50% { opacity: 0; }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .cursor { animation: none !important; }
+        }
+        @media (forced-colors: active) {
+          .cursor { color: CanvasText; }
+        }
+      `;
+      this.shadowRoot.appendChild(style);
+    }
+  }
+
+  async _start() {
+    if (this._typing) return; // Prevent overlapping loops
+    this._typing = true;
+
+    while ((this._loop || this._index < this._texts.length) && !this._paused) {
+      const text = this._texts[this._index % this._texts.length];
+      xstate.set('xtype-current', text); // Aktuellen Text im State speichern
+      this.dispatchEvent(new CustomEvent("typing-started", { detail: { text } }));
+      await this._type(text);
+      this.dispatchEvent(new CustomEvent("typing-completed", { detail: { text } }));
+      await this._wait(this._pause);
+      await this._erase();
+      this.dispatchEvent(new CustomEvent("text-erased"));
+      this._index++;
+    }
+
+    this._typing = false; // Reset the flag when the loop ends
+  }
+
+  async _type(text) {
+    for (let i = 0; i <= text.length; i++) {
+      this._textSpan.textContent = text.slice(0, i);
+      if (!this._blinking) this._textSpan.textContent += this._cursorChar;
+      await this._wait(this._speed);
+    }
+  }
+
+  async _erase() {
+    const text = this._textSpan.textContent.replace(this._cursorChar, '');
+    for (let i = text.length; i >= 0; i--) {
+      this._textSpan.textContent = text.slice(0, i);
+      if (!this._blinking) this._textSpan.textContent += this._cursorChar;
+      await this._wait(this._speed / 2);
+    }
+    this._textSpan.textContent = '';
+  }
+
+  _wait(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  pause() {
+    this._paused = true;
+    xstate.set('xtype-paused', true);
+  }
+
+  resume() {
+    this._paused = false;
+    xstate.set('xtype-paused', false);
+    this._start();
+  }
+
+  snapshot() {
+    return {
+      schema: "xtend.component.layout-display-media-snapshot.v1",
+      componentRef: "x-type",
+      stateKey: "xtype-current",
+      schedule: "component.idle.hydrate",
+      current: this._textSpan ? this._textSpan.textContent : "",
+      paused: this._paused
+    };
+  }
+}
+
+customElements.define('x-type', XType);

package/components/xutils.d.ts

@@ -0,0 +1,164 @@
+import type { XtendCustomEventMap, XtendPublicEventContract } from './xtend-public-types';
+
+export type XUtilsCategory =
+  | 'dom'
+  | 'events'
+  | 'animation'
+  | 'a11y'
+  | 'responsive'
+  | 'color'
+  | 'format'
+  | 'templates'
+  | 'ui-effects';
+
+export type XUtilsEventName = 'xutils:import-policy-check' | 'xutils:ui-effects-change';
+
+export interface XUtilsUtilityContract {
+  schema: 'xtend.utility.module-contract.v1';
+  componentRef: 'x-utils';
+  moduleRef: 'xutils';
+  customElement: false;
+  categories: XUtilsCategory[];
+  exports: string[];
+  globals: string[];
+  fixtureProbe: 'xtend.utility.boundary-probe.v1';
+  kernelBoundary: 'no-rmt-kernel-import-of-xtend-types';
+  methods?: string[];
+}
+
+export interface XUtilsImportPolicy {
+  schema: 'xtend.utility.import-policy.v1';
+  componentRef: 'x-utils';
+  localOnly: true;
+  forbiddenProtocols: string[];
+  forbiddenHosts: string[];
+  cdnPolicy: 'forbidden';
+  kernelBoundary: 'no-rmt-kernel-import-of-xtend-types';
+}
+
+export interface XUtilsImportPolicyResult {
+  schema: 'xtend.utility.import-policy-result.v1';
+  componentRef: 'x-utils';
+  specifier: string;
+  allowed: boolean;
+  reason: 'local-import' | 'external-import-blocked';
+  policy: 'xtend.utility.import-policy.v1';
+  kernelBoundary: 'no-rmt-kernel-import-of-xtend-types';
+}
+
+export interface XUtilsBoundarySnapshot {
+  schema: 'xtend.utility.boundary-probe.v1';
+  componentRef: 'x-utils';
+  utility: XUtilsUtilityContract;
+  importPolicy: XUtilsImportPolicy;
+  customElement: false;
+  globalReady: boolean;
+}
+
+export type XUtilsUiEffectName = 'fade-in';
+export type XUtilsUiEffectSource = 'none' | 'explicit' | 'body' | 'script' | 'rmt' | string;
+
+export interface XUtilsUiEffectsInput {
+  target?: HTMLElement;
+  element?: HTMLElement;
+  body?: HTMLElement | false;
+  script?: Element | null;
+  effects?: string | string[];
+  effect?: string;
+  mode?: string;
+  duration?: number | string;
+  durationMs?: number | string;
+  rmtDocument?: unknown;
+}
+
+export interface XUtilsUiEffectsState {
+  schema: 'xtend.utility.ui-effects.v1';
+  componentRef: 'x-utils';
+  target: HTMLElement | null;
+  targetRef: 'document.body' | 'custom-target';
+  effects: XUtilsUiEffectName[];
+  active: boolean;
+  disabled: boolean;
+  source: XUtilsUiEffectSource;
+  bodyAttribute: 'xt-ui-effects';
+  rmtTag: 'ui-effects';
+  supportedEffects: XUtilsUiEffectName[];
+  durationMs: number;
+  kernelBoundary: 'no-rmt-kernel-import-of-xtend-types';
+  prepared?: boolean;
+  released?: boolean;
+  phase?: 'prepare' | 'release';
+}
+
+export interface XUtilsTemplateAction {
+  label: string;
+  onClick?: EventListener;
+}
+
+export interface XUtilsTemplateOptions {
+  title?: string;
+  content?: string;
+  label?: string;
+  actions?: XUtilsTemplateAction[];
+  style?: string;
+  onClick?: EventListener;
+}
+
+export interface XUtilsTemplateApi {
+  card(opts?: XUtilsTemplateOptions): HTMLElement;
+  button(opts?: XUtilsTemplateOptions): HTMLButtonElement;
+  modal(opts?: XUtilsTemplateOptions): HTMLElement;
+}
+
+export interface XUtilsEventDetailMap {
+  'xutils:import-policy-check': XUtilsImportPolicyResult;
+  'xutils:ui-effects-change': XUtilsUiEffectsState;
+}
+
+export type XUtilsEventMap = XtendCustomEventMap<XUtilsEventDetailMap>;
+export type XUtilsPublicEventContract = XtendPublicEventContract<XUtilsEventName, XUtilsImportPolicyResult | XUtilsUiEffectsState>;
+
+export interface XUtilsApi {
+  xtendUtilityContract: XUtilsUtilityContract;
+  xtendImportPolicy: XUtilsImportPolicy;
+  getUtilityContract(): XUtilsUtilityContract;
+  snapshotUtilityContract(): XUtilsBoundarySnapshot;
+  assertLocalImport(specifier: string): XUtilsImportPolicyResult;
+  find<E extends Element = Element>(selector: string, root?: ParentNode): E | null;
+  findAll<E extends Element = Element>(selector: string, root?: ParentNode): E[];
+  create<K extends keyof HTMLElementTagNameMap>(tag: K, props?: Partial<HTMLElementTagNameMap[K]>): HTMLElementTagNameMap[K];
+  create(tag: string, props?: Record<string, unknown>): HTMLElement;
+  on(el: EventTarget, type: string, handler: EventListenerOrEventListenerObject, opts?: boolean | AddEventListenerOptions): () => void;
+  delegate(root: Element | Document, selector: string, type: string, handler: (event: Event) => void): () => void;
+  fadeIn(el: HTMLElement, duration?: number): void;
+  fadeOut(el: HTMLElement, duration?: number): void;
+  resolveUiEffects(input?: XUtilsUiEffectsInput | string | string[]): XUtilsUiEffectsState;
+  prepareUiEffects(input?: XUtilsUiEffectsInput | XUtilsUiEffectsState | string | string[]): XUtilsUiEffectsState;
+  releaseUiEffects(input?: XUtilsUiEffectsInput | XUtilsUiEffectsState | string | string[]): XUtilsUiEffectsState;
+  setAria(el: Element, attrs?: Record<string, string | number | boolean>): void;
+  focusTrap(container: Element): void;
+  isMobile(): boolean;
+  hexToRgb(hex: string): [number, number, number];
+  contrastColor(hex: string): '#000' | '#fff';
+  formatDate(date: Date | string | number, locale?: string): string;
+  formatNumber(num: number, locale?: string): string;
+  uniqueId(prefix?: string): string;
+  deepClone<T>(obj: T): T;
+  XTemplate: XUtilsTemplateApi;
+}
+
+export declare const XUtils: XUtilsApi;
+export declare const XUTILS_BOUNDARY_PROBE_SCHEMA: 'xtend.utility.boundary-probe.v1';
+export declare const XUTILS_IMPORT_POLICY_RESULT_SCHEMA: 'xtend.utility.import-policy-result.v1';
+export declare const XUTILS_IMPORT_POLICY_SCHEMA: 'xtend.utility.import-policy.v1';
+export declare const XUTILS_UI_EFFECTS_SCHEMA: 'xtend.utility.ui-effects.v1';
+export declare const XUTILS_UTILITY_CONTRACT_SCHEMA: 'xtend.utility.module-contract.v1';
+
+declare global {
+  interface Window {
+    XUtils: XUtilsApi;
+    addEventListener<K extends keyof XUtilsEventMap>(type: K, listener: (event: XUtilsEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+  }
+}
+
+export {};