@dataengineeringformachinelearning/viking-ui 1.0.2 → 3.0.0-alpha.4

package/src/lib/site-drakkar/suite-search-items.spec.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import { buildSuiteSearchItems } from "./suite-search-items";
+
+const urls = {
+  app: "https://deml.app",
+  marketing: "https://dataengineeringformachinelearning.com",
+  backend: "https://backend.deml.app",
+};
+
+describe("buildSuiteSearchItems", () => {
+  it("includes platform navigation and legal links for marketing", () => {
+    const items = buildSuiteSearchItems("marketing", urls);
+    const titles = items.map((item) => item.title);
+
+    expect(titles).toContain("Documentation");
+    expect(titles).toContain("Whitepaper");
+    expect(titles).toContain("Book");
+    expect(titles).toContain("Privacy Policy");
+    expect(titles).toContain("Terms of Service");
+    expect(titles).toContain("SOC2 Compliance");
+    expect(titles).toContain("Viking-UI Components");
+  });
+
+  it("resolves app routes for deml.app context", () => {
+    const items = buildSuiteSearchItems("app", urls);
+    const dashboard = items.find((item) => item.title === "Dashboard");
+
+    expect(dashboard?.href).toBe("/dashboard");
+    expect(items.some((item) => item.title === "Billing & subscription")).toBe(
+      true,
+    );
+  });
+
+  it("matches keyword search metadata", () => {
+    const items = buildSuiteSearchItems("marketing", urls);
+    const privacy = items.find((item) => item.title === "Privacy Policy");
+
+    expect(
+      privacy?.keywords?.some((keyword) => keyword.includes("privacy")),
+    ).toBe(true);
+  });
+
+  it("includes Viking-UI docs entries for docs context", () => {
+    const items = buildSuiteSearchItems("docs", urls, {
+      docsOrigin: "https://ui.dataengineeringformachinelearning.com",
+    });
+    const titles = items.map((item) => item.title);
+
+    expect(titles).toContain("Components");
+    expect(titles).toContain("Playground");
+    expect(titles).toContain("Whitepaper");
+    expect(items.find((item) => item.title === "Components")?.href).toBe(
+      "https://ui.dataengineeringformachinelearning.com/components",
+    );
+  });
+
+  it("includes Settings shortcut for app context", () => {
+    const items = buildSuiteSearchItems("app", urls);
+    expect(items.some((item) => item.title === "Settings")).toBe(true);
+  });
+});

package/src/lib/site-drakkar/suite-search-items.ts

@@ -0,0 +1,246 @@
+import type {
+  SiteDrakkarContext,
+  SiteFooterLink,
+  SiteNavLink,
+  SiteUrls,
+} from "./site-drakkar.config";
+import {
+  SITE_FOOTER_COLUMNS,
+  SITE_NAV_LINKS,
+  bugReportHref,
+  cookieSettingsHref,
+  resolveFooterHref,
+  resolveNavHref,
+} from "./site-drakkar.config";
+
+/** Curated command-palette entry for cross-surface navigation. */
+export type SuiteSearchItem = {
+  title: string;
+  href: string;
+  snippet?: string;
+  group?: string;
+  keywords?: string[];
+  action?: "cookie-settings" | "bug-report";
+};
+
+const dedupeItems = (items: SuiteSearchItem[]): SuiteSearchItem[] => {
+  const seen = new Set<string>();
+  return items.filter((item) => {
+    const key = `${item.title}:${item.href}:${item.action ?? ""}`;
+    if (seen.has(key)) {
+      return false;
+    }
+    seen.add(key);
+    return true;
+  });
+};
+
+const navItem = (
+  link: SiteNavLink,
+  context: SiteDrakkarContext,
+  urls: SiteUrls,
+): SuiteSearchItem => ({
+  title: link.label,
+  href: resolveNavHref(link, context, urls),
+  snippet: `Open ${link.label}`,
+  group: "Platform",
+  keywords: [link.id, link.label.toLowerCase(), "navigate", "go"],
+});
+
+const footerItem = (
+  link: SiteFooterLink,
+  columnTitle: string,
+  context: SiteDrakkarContext,
+  urls: SiteUrls,
+): SuiteSearchItem => {
+  if (link.action === "cookie-settings") {
+    return {
+      title: link.label,
+      href: cookieSettingsHref(urls),
+      snippet: "Manage analytics and cookie preferences",
+      group: columnTitle,
+      keywords: ["cookies", "consent", "privacy", "gdpr"],
+      action: "cookie-settings",
+    };
+  }
+
+  if (link.action === "bug-report") {
+    return {
+      title: link.label,
+      href: context === "app" ? "#" : bugReportHref(urls),
+      snippet: "Submit a product issue or regression",
+      group: columnTitle,
+      keywords: ["bug", "issue", "support", "feedback"],
+      action: "bug-report",
+    };
+  }
+
+  return {
+    title: link.label,
+    href: resolveFooterHref(link, context, urls),
+    snippet: `Open ${link.label}`,
+    group: columnTitle,
+    keywords: [link.label.toLowerCase(), columnTitle.toLowerCase()],
+  };
+};
+
+/** Static entries that are not derived from Drakkar nav/footer config. */
+const SUITE_SEARCH_EXTRAS: readonly Omit<SuiteSearchItem, "href">[] = [
+  {
+    title: "Viking-UI Components",
+    snippet: "Browse the design system showcase",
+    group: "Resources",
+    keywords: ["viking", "ui", "design system", "components", "showcase"],
+  },
+  {
+    title: "Design tokens",
+    snippet: "Canonical --viking-* token matrix",
+    group: "Resources",
+    keywords: ["tokens", "theme", "css", "variables"],
+  },
+  {
+    title: "API reference",
+    snippet: "OpenAPI schema and REST endpoints",
+    group: "Resources",
+    keywords: ["api", "openapi", "swagger", "rest"],
+  },
+];
+
+const resolveExtraHref = (
+  extra: (typeof SUITE_SEARCH_EXTRAS)[number],
+  context: SiteDrakkarContext,
+  urls: SiteUrls,
+): string => {
+  switch (extra.title) {
+    case "Viking-UI Components":
+      return "https://ui.dataengineeringformachinelearning.com/components";
+    case "Design tokens":
+      return "https://ui.dataengineeringformachinelearning.com/tokens";
+    case "API reference":
+      return `${urls.backend.replace(/\/$/, "")}/api/docs`;
+    default:
+      return context === "app" ? urls.app : urls.marketing;
+  }
+};
+
+/** Viking-UI docs site entries (ui.dataengineeringformachinelearning.com). */
+const DOCS_SEARCH_EXTRAS: readonly SuiteSearchItem[] = [
+  {
+    title: "Components",
+    href: "/components",
+    snippet: "Browse all documented primitives",
+    group: "Viking-UI",
+    keywords: ["components", "showcase", "registry"],
+  },
+  {
+    title: "Playground",
+    href: "/playground",
+    snippet: "Live Web Component sandbox",
+    group: "Viking-UI",
+    keywords: ["playground", "sandbox", "demo"],
+  },
+  {
+    title: "Architecture",
+    href: "/architecture",
+    snippet: "CSS + WC + Angular layers",
+    group: "Viking-UI",
+    keywords: ["architecture", "layers", "web component"],
+  },
+  {
+    title: "Design tokens",
+    href: "/tokens",
+    snippet: "Canonical --viking-* token matrix",
+    group: "Viking-UI",
+    keywords: ["tokens", "theme", "css", "variables"],
+  },
+  {
+    title: "Theming",
+    href: "/theming",
+    snippet: "Light/dark mode and sync pipeline",
+    group: "Viking-UI",
+    keywords: ["theming", "dark", "light", "mode"],
+  },
+  {
+    title: "Framework guides",
+    href: "/frameworks",
+    snippet: "Angular, Astro, Django setup",
+    group: "Viking-UI",
+    keywords: ["frameworks", "angular", "astro", "django"],
+  },
+  {
+    title: "Contributing",
+    href: "/contributing",
+    snippet: "Extend the Viking-UI kit",
+    group: "Viking-UI",
+    keywords: ["contributing", "extend", "primitives"],
+  },
+];
+
+const resolveDocsHref = (href: string, docsOrigin: string): string =>
+  href.startsWith("http")
+    ? href
+    : `${docsOrigin.replace(/\/$/, "")}${href.startsWith("/") ? href : `/${href}`}`;
+
+/**
+ * Builds curated command-palette links for deml.app, marketing, backend, and docs.
+ * Used by the static widget and Angular `viking-suite-search-palette`.
+ */
+export const buildSuiteSearchItems = (
+  context: SiteDrakkarContext,
+  urls: SiteUrls,
+  options?: { docsOrigin?: string },
+): SuiteSearchItem[] => {
+  const paletteContext = context === "docs" ? "marketing" : context;
+
+  const items: SuiteSearchItem[] = [
+    ...SITE_NAV_LINKS.map((link) => navItem(link, paletteContext, urls)),
+    ...SITE_FOOTER_COLUMNS.flatMap((column) =>
+      column.links.map((link) =>
+        footerItem(link, column.title, paletteContext, urls),
+      ),
+    ),
+    ...SUITE_SEARCH_EXTRAS.map((extra) => ({
+      ...extra,
+      href: resolveExtraHref(extra, paletteContext, urls),
+    })),
+  ];
+
+  if (context === "app") {
+    items.push(
+      {
+        title: "Settings",
+        href: "/settings",
+        snippet: "Workspace domains, billing, and security",
+        group: "Platform",
+        keywords: ["settings", "sites", "workspace", "configuration"],
+      },
+      {
+        title: "Billing & subscription",
+        href: "/settings/billing",
+        snippet: "Manage plan, invoices, and payment methods",
+        group: "Platform",
+        keywords: ["billing", "stripe", "subscription", "payment"],
+      },
+      {
+        title: "Security settings",
+        href: "/settings/security",
+        snippet: "Keys, sessions, and access controls",
+        group: "Platform",
+        keywords: ["security", "keys", "auth", "rbac"],
+      },
+    );
+  }
+
+  if (context === "docs") {
+    const docsOrigin =
+      options?.docsOrigin ?? "https://ui.dataengineeringformachinelearning.com";
+    items.push(
+      ...DOCS_SEARCH_EXTRAS.map((extra) => ({
+        ...extra,
+        href: resolveDocsHref(extra.href, docsOrigin),
+      })),
+    );
+  }
+
+  return dedupeItems(items);
+};

package/src/lib/skeleton/skeleton.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/**
+ * viking-skeleton — loading placeholder.
+ */
+@Component({
+  selector: "viking-skeleton",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "aria-hidden": "true",
+    "[class.viking-skeleton-circle]": "shape() === 'circle'",
+    "[style.width]": "width()",
+    "[style.height]": "height()",
+  },
+  template: ``,
+  styles: [
+    `
+      :host {
+        display: block;
+        border-radius: var(--viking-radius-sm);
+        background: linear-gradient(
+          100deg,
+          var(--viking-surface-alt) 38%,
+          color-mix(
+              in srgb,
+              var(--viking-text-muted) 10%,
+              var(--viking-surface-alt)
+            )
+            50%,
+          var(--viking-surface-alt) 62%
+        );
+        background-size: 200% 100%;
+        animation: viking-shimmer 1.6s ease-in-out infinite;
+      }
+      :host(.viking-skeleton-circle) {
+        border-radius: var(--viking-radius-pill);
+      }
+      @media (prefers-reduced-motion: reduce) {
+        :host {
+          animation: none;
+          background: var(--viking-surface-alt);
+        }
+      }
+    `,
+  ],
+})
+export class VikingSkeleton {
+  readonly shape = input<"line" | "rect" | "circle">("line");
+  readonly width = input<string>("100%");
+  readonly height = input<string>("var(--viking-font-size-sm)");
+}

package/src/lib/slider/slider.ts

@@ -0,0 +1,133 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+} from "@angular/core";
+import { VikingControl, provideVikingCva } from "../core/cva";
+
+/**
+ * viking-slider — range slider.
+ * ControlValueAccessor-compatible.
+ */
+@Component({
+  selector: "viking-slider",
+  providers: [provideVikingCva(VikingSlider)],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="viking-slider-header">
+      @if (label()) {
+        <span class="viking-slider-label">{{ label() }}</span>
+      }
+      @if (showValue()) {
+        <output class="viking-slider-value">{{ value() }}</output>
+      }
+    </div>
+    <input
+      type="range"
+      [min]="min()"
+      [max]="max()"
+      [step]="step()"
+      [value]="value()"
+      [disabled]="disabled() || formDisabled()"
+      [attr.aria-label]="label() || 'Slider'"
+      [style.--viking-slider-fill.%]="fillPercent()"
+      (input)="onInput($event)"
+      (blur)="onTouched()"
+    />
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        font-family: var(--viking-font-family);
+      }
+      .viking-slider-header {
+        display: flex;
+        justify-content: space-between;
+        gap: var(--viking-space-2);
+        margin-bottom: calc(var(--viking-space-1) / 2);
+        font-size: var(--viking-font-size);
+      }
+      .viking-slider-label {
+        color: var(--viking-text);
+        font-weight: 500;
+      }
+      .viking-slider-value {
+        color: var(--viking-text-muted);
+        font-variant-numeric: tabular-nums;
+      }
+      input[type="range"] {
+        appearance: none;
+        width: 100%;
+        height: var(--viking-space-1);
+        border-radius: var(--viking-radius-pill);
+        border: 1px solid var(--viking-border);
+        background: linear-gradient(
+          to right,
+          var(--viking-accent) var(--viking-slider-fill, 0%),
+          var(--viking-surface-alt) var(--viking-slider-fill, 0%)
+        );
+        cursor: pointer;
+        margin: var(--viking-space-1) 0;
+      }
+      input[type="range"]:disabled {
+        opacity: var(--viking-state-disabled-opacity);
+        cursor: not-allowed;
+      }
+      input[type="range"]::-webkit-slider-thumb {
+        appearance: none;
+        width: var(--viking-space-2);
+        height: var(--viking-space-2);
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-surface);
+        border: 2px solid var(--viking-accent);
+        box-shadow: var(--viking-shadow-sm);
+        transition: transform 0.15s ease;
+      }
+      input[type="range"]::-webkit-slider-thumb:hover {
+        transform: scale(1.15);
+      }
+      input[type="range"]::-moz-range-thumb {
+        width: var(--viking-space-2);
+        height: var(--viking-space-2);
+        border-radius: var(--viking-radius-pill);
+        background: var(--viking-surface);
+        border: 2px solid var(--viking-accent);
+        box-shadow: var(--viking-shadow-sm);
+      }
+      input[type="range"]:focus-visible {
+        outline: var(--viking-ring-width) solid var(--viking-ring);
+        outline-offset: var(--viking-ring-offset);
+      }
+    `,
+  ],
+})
+export class VikingSlider extends VikingControl<number> {
+  readonly value = model<number>(0);
+  readonly min = input<number>(0);
+  readonly max = input<number>(100);
+  readonly step = input<number>(1);
+  readonly label = input<string>("");
+  readonly showValue = input<boolean>(true);
+  readonly disabled = input<boolean>(false);
+
+  protected readonly fillPercent = computed(() => {
+    const range = this.max() - this.min();
+    if (range <= 0) {
+      return 0;
+    }
+    return ((this.value() - this.min()) / range) * 100;
+  });
+
+  writeValue(value: number): void {
+    this.value.set(Number(value ?? 0));
+  }
+
+  protected onInput = (event: Event): void => {
+    const next = Number((event.target as HTMLInputElement).value);
+    this.value.set(next);
+    this.onChange(next);
+  };
+}

package/src/lib/spinner/spinner.ts

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+
+/**
+ * viking-spinner — clinical loading indicator.
+ */
+@Component({
+  selector: "viking-spinner",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: "status",
+    "aria-live": "polite",
+    "[attr.aria-label]": "label()",
+  },
+  template: `
+    <svg
+      class="viking-spinner-svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      [attr.width]="size()"
+      [attr.height]="size()"
+      aria-hidden="true"
+    >
+      <circle class="viking-spinner-track" cx="12" cy="12" r="9" />
+      <circle
+        class="viking-spinner-arc"
+        cx="12"
+        cy="12"
+        r="9"
+        stroke-linecap="round"
+      />
+    </svg>
+  `,
+  styles: [
+    `
+      :host {
+        display: inline-flex;
+        color: var(--viking-accent);
+      }
+
+      .viking-spinner-svg {
+        --viking-spinner-stroke: 2;
+        shape-rendering: geometricPrecision;
+      }
+
+      .viking-spinner-track,
+      .viking-spinner-arc {
+        fill: none;
+        stroke-width: var(--viking-spinner-stroke);
+      }
+
+      .viking-spinner-track {
+        stroke: color-mix(in srgb, currentColor 14%, transparent);
+      }
+
+      .viking-spinner-arc {
+        stroke: currentColor;
+        stroke-dasharray: 42 84;
+        transform-origin: center;
+        animation: viking-spin var(--viking-duration-slow)
+          var(--viking-ease-default) infinite;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .viking-spinner-arc {
+          animation: none;
+          stroke-dasharray: 56 84;
+        }
+      }
+    `,
+  ],
+})
+export class VikingSpinner {
+  readonly size = input<number>(20);
+  readonly label = input<string>("Loading");
+}

package/src/lib/status-metric-row/status-metric-row.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+import { VikingIcon } from "../icon/icon";
+import type { VikingIconName } from "../../core/icons";
+
+/**
+ * viking-status-metric-row — icon + title/subtitle + value row for status cards.
+ */
+@Component({
+  selector: "viking-status-metric-row",
+  imports: [VikingIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: "viking-status-metric-row ml-stat-panel" },
+  template: `
+    <div class="stat-info">
+      <viking-icon
+        [name]="icon()"
+        [size]="22"
+        color="accent"
+        [backdrop]="true"
+      />
+      <div>
+        <span class="stat-title">{{ title() }}</span>
+        @if (subtitle()) {
+          <span class="stat-subtitle">{{ subtitle() }}</span>
+        }
+      </div>
+    </div>
+    <div class="stat-value-container">
+      <span class="stat-value"><ng-content />{{ value() }}</span>
+    </div>
+  `,
+  styles: [
+    `
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--viking-space-2);
+        padding: var(--viking-space-2);
+        border: 1px solid var(--viking-border);
+        border-radius: var(--viking-radius-lg);
+        background: var(--viking-surface);
+      }
+      .stat-info {
+        display: flex;
+        align-items: center;
+        gap: var(--viking-space-2);
+        min-width: 0;
+      }
+      .stat-title {
+        display: block;
+        font-size: var(--viking-font-size-sm);
+        font-weight: var(--viking-font-weight-semibold);
+        color: var(--viking-text);
+      }
+      .stat-subtitle {
+        display: block;
+        font-size: var(--viking-font-size-sm);
+        color: var(--viking-text-muted);
+      }
+      .stat-value {
+        font-size: calc(var(--viking-font-size) * 1.25);
+        font-weight: 700;
+        color: var(--viking-text);
+      }
+    `,
+  ],
+})
+export class VikingStatusMetricRow {
+  readonly icon = input.required<VikingIconName>();
+  readonly title = input.required<string>();
+  readonly subtitle = input<string>("");
+  readonly value = input<string | number>("");
+}