slexkit 0.2.0

package/src/components/svelte/helpers.ts

@@ -0,0 +1,148 @@
+import type { RenderContext } from "../../engine/types";
+
+type Item = {
+  label?: string;
+  value?: string;
+  content?: string;
+  description?: string;
+  disabled?: boolean;
+  [key: string]: unknown;
+};
+
+export function formatDisplayNumber(value: number): string {
+  if (!Number.isFinite(value)) return String(value);
+  if (Object.is(value, -0)) return "0";
+
+  const rounded = Number(value.toPrecision(15));
+  if (Object.is(rounded, -0)) return "0";
+
+  return String(rounded);
+}
+
+export function text(value: unknown, fallback = ""): string {
+  if (value === undefined || value === null) return fallback;
+  if (typeof value === "number") return formatDisplayNumber(value);
+  return String(value);
+}
+
+export function label(ctx: RenderContext, key: string, value: unknown, fallback = ""): string {
+  return text(value ?? ctx.labels[key], fallback);
+}
+
+export function bool(value: unknown): boolean {
+  return value === true || value === "true";
+}
+
+export function list(value: unknown): Item[] {
+  return Array.isArray(value) ? (value as Item[]) : [];
+}
+
+export function rows(value: unknown): unknown[] {
+  return Array.isArray(value) ? value : [];
+}
+
+export function objects(value: unknown): Record<string, unknown>[] {
+  return Array.isArray(value)
+    ? value.filter((item): item is Record<string, unknown> => !!item && typeof item === "object")
+    : [];
+}
+
+export function itemLabel(item: unknown): string {
+  if (item && typeof item === "object") {
+    const record = item as Record<string, unknown>;
+    return text(record.label ?? record.title ?? record.value ?? record.id);
+  }
+  return text(item);
+}
+
+export function itemDescription(item: unknown): string {
+  return item && typeof item === "object" ? text((item as Record<string, unknown>).description) : "";
+}
+
+export function readColumns(value: unknown): string[] {
+  if (!Array.isArray(value)) return [];
+  return value.map((item) => {
+    if (typeof item === "string") return item;
+    if (item && typeof item === "object") return text((item as Record<string, unknown>).key);
+    return "";
+  }).filter(Boolean);
+}
+
+export function readColumnLabel(column: unknown, fallback: string): string {
+  if (column && typeof column === "object") {
+    const record = column as Record<string, unknown>;
+    return text(record.label ?? record.key ?? fallback);
+  }
+  return text(column, fallback);
+}
+
+export function readCell(row: unknown, column: string): string {
+  if (row && typeof row === "object") return text((row as Record<string, unknown>)[column]);
+  return text(row);
+}
+
+export function catalogItems(value: unknown): Record<string, unknown>[] {
+  return objects(value).filter((item) => text(item.id ?? item.slug));
+}
+
+export function catalogGroups(value: unknown): Array<{ label: string; items: Record<string, unknown>[] }> {
+  const groups: Array<{ label: string; items: Record<string, unknown>[] }> = [];
+  const byLabel = new Map<string, { label: string; items: Record<string, unknown>[] }>();
+
+  for (const item of catalogItems(value)) {
+    const label = text(item.category, "Component");
+    let group = byLabel.get(label);
+    if (!group) {
+      group = { label, items: [] };
+      groups.push(group);
+      byLabel.set(label, group);
+    }
+    group.items.push(item);
+  }
+
+  return groups;
+}
+
+export function renderChildren(node: HTMLElement, ctx: RenderContext) {
+  if (ctx.children && Object.keys(ctx.children).length > 0) {
+    ctx.renderTree(ctx.children, node, ctx.forCtx);
+  }
+  return {
+    destroy() {
+      node.replaceChildren();
+    },
+  };
+}
+
+export function emit(ctx: RenderContext, event: string, data?: unknown): void {
+  ctx.emit(event, data);
+}
+
+function formatScriptKey(key: string): string {
+  return /^[A-Za-z_$][\w$]*$/.test(key) ? key : JSON.stringify(key);
+}
+
+export function formatScriptValue(value: unknown, indent = 0): string {
+  const pad = " ".repeat(indent);
+  const nextPad = " ".repeat(indent + 2);
+  if (value === null) return "null";
+  if (typeof value === "string") return JSON.stringify(value);
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (typeof value === "function") return value.toString();
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "[]";
+    return `[\n${value.map((item) => `${nextPad}${formatScriptValue(item, indent + 2)}`).join(",\n")}\n${pad}]`;
+  }
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value);
+    if (entries.length === 0) return "{}";
+    return `{\n${entries.map(([key, item]) => `${nextPad}${formatScriptKey(key)}: ${formatScriptValue(item, indent + 2)}`).join(",\n")}\n${pad}}`;
+  }
+  return "undefined";
+}
+
+export function stringifySource(source: unknown): string {
+  if (typeof source === "string") return source;
+  if (source && typeof source === "object") return formatScriptValue(source);
+  return '{\n  slex: "0.1",\n  namespace: "playground_empty",\n  g: {},\n  layout: {}\n}';
+}

package/src/components/svelte/input/Button.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { emit, label as runtimeLabel, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import { resolveIconWeight } from "../../../icons/manager";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx, componentName }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  $effect(() => bindPropStore(props, (next) => (p = next)));
+
+  function variant(): string {
+    const kind = text(p.type ?? p.variant ?? "primary");
+    if (kind === "destructive") return "danger";
+    if (kind === "default") return "primary";
+    return kind;
+  }
+
+  function selected(): boolean {
+    return resolveIconWeight({ selected: p.selected, active: p.active, pressed: p.pressed }) === "duotone";
+  }
+
+  function iconOnly(): boolean {
+    return !!(p.iconOnly || (p.icon && !p.label));
+  }
+
+  function label(): string {
+    return runtimeLabel(ctx, "button.label", p.label ?? p.title ?? p["aria-label"] ?? p.ariaLabel, componentName);
+  }
+
+  function click(event: MouseEvent): void {
+    if (p.disabled) return;
+    emit(ctx, "click", { type: "click", target: ctx.id, native: event });
+  }
+</script>
+
+{#if p.href}
+  <a
+    class={`slex-button slex-button--${variant()} ${iconOnly() ? "slex-button--icon" : ""} ${p.disabled ? "slex-button--disabled" : ""}`}
+    href={p.disabled ? undefined : text(p.href)}
+    target={text(p.target) || undefined}
+    rel={p.target === "_blank" ? "noreferrer" : undefined}
+    aria-disabled={p.disabled ? "true" : undefined}
+    data-selected={selected() ? "" : undefined}
+    aria-pressed={p.pressed === undefined ? undefined : selected()}
+    title={text(p.title ?? p.label)}
+    aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.title ?? p.label) || undefined}
+  >
+    {#if p.icon}
+      <InlineIcon name={p.icon} active={p.active} selected={p.selected} pressed={p.pressed} className="slex-button-icon" />
+    {/if}
+    {#if iconOnly()}
+      <span class="slex-sr-only">{label()}</span>
+    {:else}
+      {label()}
+    {/if}
+  </a>
+{:else}
+  <button
+    type="button"
+    class={`slex-button slex-button--${variant()} ${iconOnly() ? "slex-button--icon" : ""}`}
+    disabled={!!p.disabled}
+    data-selected={selected() ? "" : undefined}
+    aria-pressed={p.pressed === undefined ? undefined : selected()}
+    title={text(p.title ?? p.label)}
+    aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.title ?? p.label) || undefined}
+    onclick={click}
+  >
+    {#if p.icon}
+      <InlineIcon name={p.icon} active={p.active} selected={p.selected} pressed={p.pressed} className="slex-button-icon" />
+    {/if}
+    {#if iconOnly()}
+      <span class="slex-sr-only">{label()}</span>
+    {:else}
+      {label()}
+    {/if}
+  </button>
+{/if}

package/src/components/svelte/input/Checkbox.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { emit, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let checked = $state(false);
+  let lastHapticAt = 0;
+  $effect(() => bindPropStore(props, (next) => {
+    p = next;
+    checked = !!(next.checked ?? next.value);
+  }));
+
+  function toggle(event: Event): void {
+    if (p.disabled) return;
+    checked = (event.target as HTMLInputElement).checked;
+    emit(ctx, "change", checked);
+  }
+
+  function vibrate(duration = 8): void {
+    if (p.haptic === false || p.haptics === false || p.disabled) return;
+    const api = globalThis.navigator as (Navigator & { vibrate?: (pattern: number | number[]) => boolean }) | undefined;
+    api?.vibrate?.(duration);
+  }
+
+  function haptic(duration = 8): void {
+    const now = Date.now();
+    if (now - lastHapticAt < 80) return;
+    lastHapticAt = now;
+    vibrate(duration);
+  }
+</script>
+
+<span class="slex-choice-event-layer" onpointerdown={() => haptic(8)} onclick={() => haptic(8)}>
+  <label class="slex-checkbox-field">
+    <input
+      type="checkbox"
+      class="slex-checkbox"
+      bind:checked
+      disabled={!!p.disabled}
+      data-state={checked ? "checked" : "unchecked"}
+      aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.label) || undefined}
+      onchange={toggle}
+    />
+    <span class="slex-checkbox-label">
+      {#if p.icon}<InlineIcon name={p.icon} className="slex-checkbox-icon" />{/if}
+      <span>{text(p.label)}</span>
+    </span>
+  </label>
+</span>

package/src/components/svelte/input/Input.svelte

@@ -0,0 +1,202 @@
+<script lang="ts" module>
+  let nextInputId = 0;
+</script>
+
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { bool, emit, text } from "../helpers";
+  import { parseEngineeringNumber } from "../../../engine/engineering";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  const engineeringPrefixFactors: Record<string, number> = {
+    p: 1e-12,
+    n: 1e-9,
+    u: 1e-6,
+    "\u00b5": 1e-6,
+    "\u788c": 1e-6,
+    m: 1e-3,
+    k: 1e3,
+    K: 1e3,
+    M: 1e6,
+    meg: 1e6,
+    G: 1e9,
+    T: 1e12,
+  };
+
+  let { componentName, props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let value = $state("");
+  const fallbackId = `slex-input-${++nextInputId}`;
+  const labelText = $derived(text(p.label));
+  const unitText = $derived(text(p.unit));
+  const descriptionText = $derived(text(p.description ?? p.help ?? p.hint));
+  const errorText = $derived(text(p.error ?? p.errorMessage));
+  const disabled = $derived(bool(p.disabled));
+  const readonly = $derived(bool(p.readonly) || bool(p.readOnly));
+  const required = $derived(bool(p.required));
+  const invalid = $derived(bool(p.invalid) || !!errorText);
+  const steppable = $derived(isSteppableInput());
+  const controls = $derived(steppable && p.controls !== false && p.controls !== "false");
+  const componentId = $derived(safeId(componentName));
+  const inputId = $derived(text(p.id) || (componentId ? `slex-input-${componentId}` : fallbackId));
+  const descriptionId = $derived(`${inputId}-description`);
+  const errorId = $derived(`${inputId}-error`);
+  const explicitAriaLabel = $derived(text(p["aria-label"] ?? p.ariaLabel));
+  const computedAriaLabel = $derived(explicitAriaLabel || (labelText ? "" : text(p.placeholder)));
+  const describedBy = $derived([descriptionText ? descriptionId : "", errorText ? errorId : ""].filter(Boolean).join(" "));
+  const numericValue = $derived(readNumericValue());
+  const controlLabel = $derived(labelText || text(p.placeholder) || componentName || "input");
+  const decrementDisabled = $derived(!canStep(-1));
+  const incrementDisabled = $derived(!canStep(1));
+  $effect(() => bindPropStore(props, (next) => {
+    p = next;
+    value = text(next.value);
+  }));
+
+  function safeId(value: string): string {
+    return value.trim().replace(/[^\w-]+/g, "-");
+  }
+
+  function inputType(): string {
+    return text(p.type, "text") === "engineering" ? "text" : text(p.type, "text");
+  }
+
+  function isSteppableInput(): boolean {
+    const kind = text(p.type, "text");
+    return kind === "number" ||
+      kind === "engineering" ||
+      p.min !== undefined ||
+      p.max !== undefined ||
+      p.step !== undefined;
+  }
+
+  function numericProp(input: unknown): number | undefined {
+    if (input === undefined || input === null || input === "") return undefined;
+    const next = Number(input);
+    return Number.isFinite(next) ? next : undefined;
+  }
+
+  function stepSize(): number {
+    const next = numericProp(p.step);
+    if (next !== undefined && next > 0) return next;
+    if (text(p.type, "text") !== "engineering") return 1;
+    const parsed = parseEngineeringNumber(value);
+    if (!parsed.valid || !parsed.prefix) return 1;
+    return engineeringPrefixFactors[parsed.prefix] ?? 1;
+  }
+
+  function readNumericValue(): number | null {
+    if (text(p.type, "text") === "engineering") {
+      const parsed = parseEngineeringNumber(value);
+      return parsed.valid && parsed.number !== null ? parsed.number : null;
+    }
+    const next = Number(value);
+    return Number.isFinite(next) ? next : null;
+  }
+
+  function clamp(next: number): number {
+    const min = numericProp(p.min);
+    const max = numericProp(p.max);
+    let clamped = next;
+    if (min !== undefined) clamped = Math.max(min, clamped);
+    if (max !== undefined) clamped = Math.min(max, clamped);
+    return clamped;
+  }
+
+  function canStep(direction: -1 | 1): boolean {
+    if (!controls || disabled || readonly || numericValue === null) return false;
+    return clamp(numericValue + direction * stepSize()) !== numericValue;
+  }
+
+  function formatSteppedValue(next: number): string {
+    if (text(p.type, "text") !== "engineering") return text(next);
+    const parsed = parseEngineeringNumber(value);
+    if (!parsed.valid) return text(next);
+    const factor = parsed.prefix ? engineeringPrefixFactors[parsed.prefix] : undefined;
+    const visibleNumber = factor ? next / factor : next;
+    return `${formatNumber(visibleNumber)}${parsed.prefix}${parsed.unit}`;
+  }
+
+  function formatNumber(next: number): string {
+    return text(Number(next.toPrecision(12)));
+  }
+
+  function emitValue(nextValue: string): void {
+    value = nextValue;
+    emit(ctx, "change", text(p.type, "text") === "engineering" ? parseEngineeringNumber(value) : value);
+  }
+
+  function stepBy(direction: -1 | 1): void {
+    if (!canStep(direction) || numericValue === null) return;
+    emitValue(formatSteppedValue(clamp(numericValue + direction * stepSize())));
+  }
+
+  function update(event: Event): void {
+    if (disabled || readonly) return;
+    value = (event.target as HTMLInputElement).value;
+    emit(ctx, "change", text(p.type, "text") === "engineering" ? parseEngineeringNumber(value) : value);
+  }
+</script>
+
+<div
+  class="slex-input-field"
+  data-invalid={invalid ? "true" : undefined}
+  data-required={required ? "true" : undefined}
+  data-readonly={readonly ? "true" : undefined}
+>
+  {#if labelText}
+    <label class="slex-input-label" for={inputId}>{labelText}</label>
+  {/if}
+  <div
+    class="slex-input-control"
+    data-has-unit={unitText ? "true" : undefined}
+    data-has-controls={controls ? "true" : undefined}
+  >
+    <input
+      id={inputId}
+      class="slex-input"
+      type={inputType()}
+      inputmode={text(p.type, "text") === "engineering" ? "decimal" : undefined}
+      bind:value
+      name={text(p.name) || undefined}
+      placeholder={text(p.placeholder)}
+      disabled={disabled}
+      readonly={readonly}
+      required={required}
+      min={p.min === undefined ? undefined : text(p.min)}
+      max={p.max === undefined ? undefined : text(p.max)}
+      step={p.step === undefined ? undefined : text(p.step)}
+      aria-label={computedAriaLabel || undefined}
+      aria-describedby={describedBy || undefined}
+      aria-invalid={invalid ? "true" : undefined}
+      oninput={update}
+    />
+    {#if unitText}
+      <span class="slex-input-unit" aria-hidden="true">{unitText}</span>
+    {/if}
+    {#if controls}
+      <span class="slex-input-controls">
+        <button
+          class="slex-input-step"
+          type="button"
+          aria-label={`Decrease ${controlLabel}`}
+          disabled={decrementDisabled}
+          onclick={() => stepBy(-1)}
+        >-</button>
+        <button
+          class="slex-input-step"
+          type="button"
+          aria-label={`Increase ${controlLabel}`}
+          disabled={incrementDisabled}
+          onclick={() => stepBy(1)}
+        >+</button>
+      </span>
+    {/if}
+  </div>
+  {#if descriptionText}
+    <div id={descriptionId} class="slex-input-description">{descriptionText}</div>
+  {/if}
+  {#if errorText}
+    <div id={errorId} class="slex-input-error" role="alert">{errorText}</div>
+  {/if}
+</div>

package/src/components/svelte/input/RadioGroup.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { bindPropStore } from "../bindProps";
+  import { emit, list, text } from "../helpers";
+  import InlineIcon from "../InlineIcon.svelte";
+  import type { PropValues, SvelteComponentProps } from "../types";
+
+  let { props, ctx }: SvelteComponentProps = $props();
+  let p = $state<PropValues>({});
+  let value = $state<unknown>(undefined);
+  const lastHapticAt = new Map<string, number>();
+  $effect(() => bindPropStore(props, (next) => {
+    p = next;
+    value = next.value;
+  }));
+
+  function choose(next: unknown): void {
+    value = next;
+    emit(ctx, "change", next);
+  }
+
+  function vibrate(disabled: boolean, duration = 8): void {
+    if (disabled || p.haptic === false || p.haptics === false) return;
+    const api = globalThis.navigator as (Navigator & { vibrate?: (pattern: number | number[]) => boolean }) | undefined;
+    api?.vibrate?.(duration);
+  }
+
+  function haptic(key: string, disabled: boolean, duration = 8): void {
+    const now = Date.now();
+    if (now - (lastHapticAt.get(key) ?? 0) < 80) return;
+    lastHapticAt.set(key, now);
+    vibrate(disabled, duration);
+  }
+
+  function groupName(): string {
+    return text(p.name ?? ctx.id, ctx.id);
+  }
+</script>
+
+<div class="slex-radio-group" data-scope="radio-group" data-part="root" data-orientation={text(p.orientation, "vertical")} role="radiogroup" aria-label={text(p["aria-label"] ?? p.ariaLabel ?? p.label) || undefined}>
+  {#if p.label || p.icon}
+    <div class="slex-radio-group-label">
+      {#if p.icon}<InlineIcon name={p.icon} className="slex-radio-group-icon" />{/if}
+      {#if p.label}<span>{text(p.label)}</span>{/if}
+    </div>
+  {/if}
+  <div class="slex-radio-group-list">
+  {#each list(p.options) as item}
+    {@const itemValue = item.value ?? item.label}
+    {@const disabled = !!item.disabled || !!p.disabled}
+    {@const hapticKey = text(itemValue)}
+    <span class="slex-choice-event-layer" onpointerdown={() => haptic(hapticKey, disabled, 8)} onclick={() => haptic(hapticKey, disabled, 8)}>
+      <label class="slex-radio-field">
+        <input
+          type="radio"
+          class="slex-radio"
+          name={groupName()}
+          value={text(itemValue)}
+          checked={itemValue === value}
+          disabled={disabled}
+          data-state={itemValue === value ? "checked" : "unchecked"}
+          onchange={() => choose(itemValue)}
+        />
+        <span class="slex-radio-label">
+          {#if item.icon}<InlineIcon name={item.icon} selected={itemValue === value} className="slex-radio-icon" />{/if}
+          <span>{text(item.label)}</span>
+        </span>
+      </label>
+    </span>
+  {/each}
+  </div>
+</div>