@dataengineeringformachinelearning/viking-ui 4.0.4 → 4.0.6

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

@@ -1,234 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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 {};