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

package/src/web/suite-search-palette/viking-suite-search-palette-wc.ts

@@ -0,0 +1,234 @@
+import {
+  DEFAULT_SITE_URLS,
+  type SiteDrakkarContext,
+  type SiteUrls,
+} from "../../lib/site-drakkar/site-drakkar.config";
+import { buildSuiteSearchItems } from "../../lib/site-drakkar/suite-search-items";
+import { readBoolAttr } from "../core/base";
+import {
+  defineCustomElement,
+  defineCustomElementAlias,
+  HTMLElementBase,
+} from "../core/dom";
+import {
+  VikingSearchPaletteWc,
+  registerVikingSearchPaletteWc,
+  type VikingSearchPaletteItem,
+} from "../search-palette/viking-search-palette-wc";
+
+const VALID_CONTEXTS = new Set<SiteDrakkarContext>([
+  "app",
+  "marketing",
+  "backend",
+  "docs",
+]);
+
+const detectContext = (): SiteDrakkarContext => {
+  const explicit = document.documentElement.getAttribute("data-deml-context");
+  if (explicit && VALID_CONTEXTS.has(explicit as SiteDrakkarContext)) {
+    return explicit as SiteDrakkarContext;
+  }
+
+  const host = window.location.hostname;
+  if (host.startsWith("ui.")) {
+    return "docs";
+  }
+  if (host.includes("deml.app") && !host.startsWith("backend.")) {
+    return "app";
+  }
+  if (host.startsWith("backend.")) {
+    return "backend";
+  }
+  return "marketing";
+};
+
+const readUrls = (el: HTMLElement): SiteUrls => {
+  const env = (globalThis as { __DEML?: Partial<SiteUrls> }).__DEML ?? {};
+  return {
+    app: el.getAttribute("app-url") ?? env.app ?? DEFAULT_SITE_URLS.app,
+    marketing:
+      el.getAttribute("marketing-url") ??
+      env.marketing ??
+      DEFAULT_SITE_URLS.marketing,
+    backend:
+      el.getAttribute("backend-url") ??
+      env.backend ??
+      DEFAULT_SITE_URLS.backend,
+  };
+};
+
+const readContext = (el: HTMLElement): SiteDrakkarContext => {
+  const raw = el.getAttribute("context");
+  if (raw && VALID_CONTEXTS.has(raw as SiteDrakkarContext)) {
+    return raw as SiteDrakkarContext;
+  }
+  return detectContext();
+};
+
+/**
+ * Unified cross-suite command palette Web Component.
+ * Tag: `viking-suite-command-palette`
+ * Aliases: `viking-suite-search-palette`, `viking-suite-search-palette-wc`
+ *
+ * Curated ⌘K navigation for marketing, docs, deml.app, and backend surfaces.
+ * Composes `viking-command-palette` with suite links from site-drakkar config.
+ *
+ * @attr context - Surface: app | marketing | backend | docs (auto-detected when omitted)
+ * @attr app-url - Override deml.app origin
+ * @attr marketing-url - Override marketing origin
+ * @attr backend-url - Override backend origin
+ * @attr global-shortcut - Bind ⌘K / Ctrl+K (default: on)
+ * @attr placeholder - Search input placeholder
+ *
+ * @method openPalette() - Programmatically open
+ * @method closePalette() - Programmatically close
+ *
+ * @example
+ * <viking-suite-command-palette context="marketing" global-shortcut></viking-suite-command-palette>
+ */
+export class VikingSuiteSearchPaletteWc extends HTMLElementBase {
+  static readonly tag = "viking-suite-command-palette";
+  static readonly searchTag = "viking-suite-search-palette";
+  static readonly legacyTag = "viking-suite-search-palette-wc";
+
+  static get observedAttributes(): string[] {
+    return [
+      "context",
+      "app-url",
+      "marketing-url",
+      "backend-url",
+      "placeholder",
+      "global-shortcut",
+    ];
+  }
+
+  private paletteEl: VikingSearchPaletteWc | null = null;
+  private itemsLoaded = false;
+
+  connectedCallback(): void {
+    registerVikingSearchPaletteWc();
+    this.ensurePalette();
+    void this.loadItems();
+  }
+
+  attributeChangedCallback(name: string): void {
+    if (!this.isConnected) {
+      return;
+    }
+    if (name === "placeholder" && this.paletteEl) {
+      const placeholder =
+        this.getAttribute("placeholder") ??
+        "Search documentation, dashboard, settings…";
+      this.paletteEl.setAttribute("placeholder", placeholder);
+      return;
+    }
+    if (name === "global-shortcut" && this.paletteEl) {
+      if (
+        readBoolAttr(this, "global-shortcut") ||
+        !this.hasAttribute("global-shortcut")
+      ) {
+        this.paletteEl.setAttribute("global-shortcut", "");
+      } else {
+        this.paletteEl.removeAttribute("global-shortcut");
+      }
+      return;
+    }
+    if (
+      name === "context" ||
+      name === "app-url" ||
+      name === "marketing-url" ||
+      name === "backend-url"
+    ) {
+      void this.loadItems(true);
+    }
+  }
+
+  /** Opens the unified command palette. */
+  openPalette(): void {
+    this.ensurePalette();
+    void this.loadItems().then(() => this.paletteEl?.openPalette());
+  }
+
+  /** Closes the unified command palette. */
+  closePalette(): void {
+    this.paletteEl?.closePalette();
+  }
+
+  private ensurePalette(): void {
+    if (this.paletteEl) {
+      return;
+    }
+
+    this.paletteEl = document.createElement(
+      "viking-command-palette",
+    ) as VikingSearchPaletteWc;
+    this.paletteEl.id = "deml-command-palette";
+
+    const placeholder =
+      this.getAttribute("placeholder") ??
+      "Search documentation, dashboard, settings…";
+    this.paletteEl.setAttribute("placeholder", placeholder);
+
+    if (
+      readBoolAttr(this, "global-shortcut") ||
+      !this.hasAttribute("global-shortcut")
+    ) {
+      this.paletteEl.setAttribute("global-shortcut", "");
+    }
+
+    this.append(this.paletteEl);
+  }
+
+  private async loadItems(force = false): Promise<void> {
+    if (!this.paletteEl || (this.itemsLoaded && !force)) {
+      return;
+    }
+
+    const context = readContext(this);
+    const urls = readUrls(this);
+    let items: VikingSearchPaletteItem[] = buildSuiteSearchItems(
+      context,
+      urls,
+      {
+        docsOrigin: window.location.origin,
+      },
+    );
+
+    try {
+      const response = await fetch("/assets/site-drakkar.json", {
+        cache: "no-cache",
+      });
+      if (response.ok) {
+        const drakkar = (await response.json()) as {
+          navLinks?: unknown[];
+          footerColumns?: unknown[];
+        };
+        if (drakkar.navLinks?.length || drakkar.footerColumns?.length) {
+          items = buildSuiteSearchItems(context, urls, {
+            docsOrigin: window.location.origin,
+          });
+        }
+      }
+    } catch {
+      // Bundled config is authoritative when JSON is unavailable.
+    }
+
+    this.paletteEl.setAttribute("items", JSON.stringify(items));
+    this.itemsLoaded = true;
+  }
+}
+
+export const registerVikingSuiteSearchPaletteWc = (): void => {
+  defineCustomElement(
+    VikingSuiteSearchPaletteWc.tag,
+    VikingSuiteSearchPaletteWc,
+  );
+  defineCustomElementAlias(
+    VikingSuiteSearchPaletteWc.searchTag,
+    VikingSuiteSearchPaletteWc,
+  );
+  defineCustomElementAlias(
+    VikingSuiteSearchPaletteWc.legacyTag,
+    VikingSuiteSearchPaletteWc,
+  );
+};

package/src/web/theme-toggle/viking-theme-toggle-wc.ts

@@ -0,0 +1,139 @@
+import { attachShadowStyles } from "../core/base";
+import { defineCustomElement, HTMLElementBase } from "../core/dom";
+
+const VIKING_THEME_TOGGLE_STYLES = `
+:host {
+  display: inline-flex;
+}
+
+.theme-toggle-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--viking-control-height, 40px);
+  height: var(--viking-control-height, 40px);
+  min-width: var(--viking-control-height, 40px);
+  padding: 0;
+  border: 1px solid color-mix(in srgb, var(--viking-accent, var(--viking-accent)) 32%, var(--viking-border-strong, var(--viking-border)));
+  border-radius: var(--viking-radius);
+  background: color-mix(in srgb, var(--viking-accent, var(--viking-accent)) 8%, var(--viking-surface));
+  color: var(--viking-accent-strong, var(--viking-ring));
+  box-shadow: var(--viking-shadow-sm);
+  cursor: pointer;
+  transition: var(--viking-transition-interactive);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.theme-toggle-btn:hover {
+  border-color: var(--viking-accent-strong, var(--viking-ring));
+  background: color-mix(in srgb, var(--viking-accent, var(--viking-accent)) 14%, var(--viking-surface-alt));
+  color: var(--viking-accent-strong, var(--viking-ring));
+  box-shadow: var(--viking-shadow-md);
+}
+
+.theme-toggle-btn:focus-visible {
+  outline: var(--viking-ring-width, 2px) solid var(--viking-ring);
+  outline-offset: var(--viking-ring-offset, 2px);
+}
+
+.theme-toggle-btn:active {
+  transform: scale(var(--viking-state-active-scale, 0.98));
+}
+
+.theme-icon {
+  display: none;
+}
+
+.theme-icon.is-visible {
+  display: block;
+}
+`;
+
+const applyTheme = (theme: "light" | "dark"): void => {
+  document.documentElement.setAttribute("data-theme", theme);
+  document.documentElement.classList.toggle("dark", theme === "dark");
+  localStorage.setItem("theme", theme);
+};
+
+const readTheme = (): "light" | "dark" => {
+  const saved = localStorage.getItem("theme");
+  if (saved === "light" || saved === "dark") return saved;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+};
+
+/**
+ * Framework-agnostic theme toggle Web Component.
+ * Tag: `viking-theme-toggle-wc`
+ */
+export class VikingThemeToggleWc extends HTMLElementBase {
+  static readonly tag = "viking-theme-toggle-wc";
+
+  private readonly shadow: ShadowRoot;
+  private button: HTMLButtonElement | null = null;
+  private sunIcon: SVGElement | null = null;
+  private moonIcon: SVGElement | null = null;
+
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+    attachShadowStyles(this.shadow, VIKING_THEME_TOGGLE_STYLES);
+  }
+
+  connectedCallback(): void {
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "button");
+    }
+    this.render();
+    this.syncIcons();
+    this.button?.addEventListener("click", this.onClick);
+  }
+
+  disconnectedCallback(): void {
+    this.button?.removeEventListener("click", this.onClick);
+  }
+
+  private readonly onClick = (): void => {
+    const next = readTheme() === "light" ? "dark" : "light";
+    applyTheme(next);
+    this.syncIcons();
+    this.dispatchEvent(
+      new CustomEvent("viking-theme-change", {
+        bubbles: true,
+        composed: true,
+        detail: { theme: next },
+      }),
+    );
+  };
+
+  private syncIcons = (): void => {
+    const isLight = readTheme() === "light";
+    this.sunIcon?.classList.toggle("is-visible", isLight);
+    this.moonIcon?.classList.toggle("is-visible", !isLight);
+  };
+
+  private render(): void {
+    const label =
+      this.getAttribute("aria-label") ?? "Toggle light and dark theme";
+    this.shadow.innerHTML = `
+      <button type="button" class="theme-toggle-btn" part="control" aria-label="${label}">
+        <svg class="theme-icon theme-icon-sun" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+          <circle cx="12" cy="12" r="4" fill="none" stroke="currentColor" stroke-width="2"/>
+          <path stroke="currentColor" stroke-width="2" d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/>
+        </svg>
+        <svg class="theme-icon theme-icon-moon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true">
+          <path fill="currentColor" d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
+        </svg>
+      </button>
+    `;
+    this.button = this.shadow.querySelector("button");
+    this.sunIcon = this.shadow.querySelector(".theme-icon-sun");
+    this.moonIcon = this.shadow.querySelector(".theme-icon-moon");
+  }
+}
+
+export const registerVikingThemeToggleWc = (): void => {
+  defineCustomElement(VikingThemeToggleWc.tag, VikingThemeToggleWc);
+};

package/src/web/types.ts

@@ -0,0 +1,37 @@
+import type { VikingSearchPaletteItem } from "./core/types";
+
+/** Custom events dispatched by Viking-UI Web Components. */
+export type VikingWcChangeDetail = { value: string };
+export type VikingWcQueryDetail = { query: string };
+export type VikingWcSelectDetail = { item: VikingSearchPaletteItem };
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "viking-badge": import("./badge/viking-badge-wc").VikingBadgeWc;
+    "viking-badge-wc": import("./badge/viking-badge-wc").VikingBadgeWc;
+    "viking-button": import("./button/viking-button-wc").VikingButtonWc;
+    "viking-button-wc": import("./button/viking-button-wc").VikingButtonWc;
+    "viking-callout": import("./callout/viking-callout-wc").VikingCalloutWc;
+    "viking-callout-wc": import("./callout/viking-callout-wc").VikingCalloutWc;
+    "viking-card": import("./card/viking-card-wc").VikingCardWc;
+    "viking-card-wc": import("./card/viking-card-wc").VikingCardWc;
+    "viking-field": import("./field/viking-field-wc").VikingFieldWc;
+    "viking-field-wc": import("./field/viking-field-wc").VikingFieldWc;
+    "viking-input": import("./input/viking-input-wc").VikingInputWc;
+    "viking-input-wc": import("./input/viking-input-wc").VikingInputWc;
+    "viking-dialog": import("./modal/viking-modal-wc").VikingModalWc;
+    "viking-modal": import("./modal/viking-modal-wc").VikingModalWc;
+    "viking-modal-wc": import("./modal/viking-modal-wc").VikingModalWc;
+    "viking-command-palette": import("./search-palette/viking-search-palette-wc").VikingSearchPaletteWc;
+    "viking-search-palette": import("./search-palette/viking-search-palette-wc").VikingSearchPaletteWc;
+    "viking-search-palette-wc": import("./search-palette/viking-search-palette-wc").VikingSearchPaletteWc;
+    "viking-select": import("./select/viking-select-wc").VikingSelectWc;
+    "viking-select-wc": import("./select/viking-select-wc").VikingSelectWc;
+    "viking-suite-command-palette": import("./suite-search-palette/viking-suite-search-palette-wc").VikingSuiteSearchPaletteWc;
+    "viking-suite-search-palette": import("./suite-search-palette/viking-suite-search-palette-wc").VikingSuiteSearchPaletteWc;
+    "viking-suite-search-palette-wc": import("./suite-search-palette/viking-suite-search-palette-wc").VikingSuiteSearchPaletteWc;
+    "viking-theme-toggle-wc": import("./theme-toggle/viking-theme-toggle-wc").VikingThemeToggleWc;
+  }
+}
+
+export {};