@kahitsan/ksui 0.6.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "ksui is a set of shared SolidJS UI components plus the @kserp/host-ui type contract for KahitSan/Hilinga plugins. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with solid-js + @kserp/host-ui externalized to the host runtime.",
   "type": "module",
   "main": "./src/index.ts",
@@ -14,6 +14,12 @@
     },
     "./host-ui": {
       "types": "./host-ui.d.ts"
+    },
+    "./components/*": {
+      "solid": "./src/components/*.tsx",
+      "types": "./src/components/*.tsx",
+      "development": "./src/components/*.tsx",
+      "import": "./src/components/*.tsx"
     }
   },
   "files": [

package/src/components/base/Button.tsx

@@ -0,0 +1,404 @@
+// Source: kahitsan-web src/components/ui/Button/Button.tsx (+ assets/css/button.css).
+// Extracted into ksui as a DOMAIN-FREE base primitive: an intent/variant button
+// with HUD scanline, clip-corner, ripple, glow, and pulse effects. It depends
+// only on solid-js (Dynamic) — no host kit, no kahitsan imports, no marketing
+// copy. The intent palette (amber/red/slate rgba maps) ships as the generic
+// default tone set; callers pass intent + variant and their own children.
+//
+// The monolith shipped these effects as global CSS (button.css). ksui publishes
+// no sidecar .css (the package exports only ./src under the `solid` condition),
+// so — like ProgressBar / LiveTimer — the keyframes + helper classes are
+// injected once per page via a runtime <style> tag and referenced with plain,
+// unscoped class names so the bundle stays self-contained.
+
+import {
+  splitProps,
+  createSignal,
+  onCleanup,
+  createMemo,
+  mergeProps,
+  Show,
+  For,
+  type JSX,
+  type Component,
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+
+const BUTTON_STYLE_ID = "ks-button-inline-style";
+const BUTTON_CSS = `
+.ks-hud-scan-line { position: relative; overflow: hidden; }
+.ks-hud-scan-line::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; opacity: 0; pointer-events: none; z-index: 1; transition: opacity 0.2s ease; background: linear-gradient(90deg, transparent, var(--ks-effect-color, rgba(201, 169, 97, 0.4)), transparent); }
+.ks-hud-scan-line:hover::before { left: 100%; opacity: 1; transition: all 0.8s ease; }
+.ks-hud-clip-top-left-bottom-right { clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); border: none !important; border-radius: 0 !important; }
+.ks-hud-clip-top-right-bottom-left { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); border: none !important; border-radius: 0 !important; }
+.ks-hud-clip-minimal-top-left-bottom-right { clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); border: none !important; border-radius: 0 !important; }
+.ks-hud-clip-minimal-top-right-bottom-left { clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); border: none !important; border-radius: 0 !important; }
+.ks-hud-glow { transition: box-shadow 0.2s ease; box-shadow: 0 0 8px var(--ks-effect-glow, rgba(201, 169, 97, 0.3)); }
+.ks-hud-glow:hover:not(:disabled) { box-shadow: 0 0 15px var(--ks-effect-glow-hover, rgba(201, 169, 97, 0.5)); }
+.ks-hud-pulse { animation: ksHudPulse 2s infinite ease-in-out; }
+@keyframes ksHudPulse { 0%, 100% { background-color: var(--ks-effect-pulse-bg, rgba(201, 169, 97, 0.1)); box-shadow: 0 0 5px var(--ks-effect-pulse-glow, rgba(201, 169, 97, 0.2)); } 50% { background-color: var(--ks-effect-pulse-bg-mid, rgba(201, 169, 97, 0.2)); box-shadow: 0 0 10px var(--ks-effect-pulse-glow-mid, rgba(201, 169, 97, 0.4)); } }
+.ks-btn-ripple { position: relative; overflow: hidden; }
+.ks-btn-ripple-effect { position: absolute; border-radius: 50%; transform: scale(0.1); opacity: 0.8; animation: ksButtonRippleExpand 0.4s ease-out forwards; pointer-events: none; z-index: 0; background-color: var(--ks-ripple-color, rgba(255, 255, 255, 0.3)); }
+.ks-btn-ripple-fade { animation: ksButtonRippleFadeOnly 0.3s ease-out forwards; }
+@keyframes ksButtonRippleExpand { 0% { transform: scale(0.1); opacity: 0.5; } 100% { transform: scale(1); opacity: 0.25; } }
+@keyframes ksButtonRippleFadeOnly { 0% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
+.ks-btn-ripple > *:not(.ks-btn-ripple-effect) { position: relative; z-index: 2; }
+.ks-interactive { transition: all 0.15s ease; }
+.ks-interactive:active:not(:disabled) { transform: scale(0.97); opacity: 0.8; }
+.ks-interactive:hover:not(:disabled) { transform: scale(1.02); }
+`;
+
+function ensureButtonStyle() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(BUTTON_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = BUTTON_STYLE_ID;
+  el.textContent = BUTTON_CSS;
+  document.head.appendChild(el);
+}
+
+const styles: Record<string, string> = {
+  "ks-hud-scan-line": "ks-hud-scan-line",
+  "ks-hud-clip-top-left-bottom-right": "ks-hud-clip-top-left-bottom-right",
+  "ks-hud-clip-top-right-bottom-left": "ks-hud-clip-top-right-bottom-left",
+  "ks-hud-clip-minimal-top-left-bottom-right": "ks-hud-clip-minimal-top-left-bottom-right",
+  "ks-hud-clip-minimal-top-right-bottom-left": "ks-hud-clip-minimal-top-right-bottom-left",
+  "ks-hud-glow": "ks-hud-glow",
+  "ks-hud-pulse": "ks-hud-pulse",
+  "ks-btn-ripple": "ks-btn-ripple",
+  "ks-btn-ripple-effect": "ks-btn-ripple-effect",
+  "ks-btn-ripple-fade": "ks-btn-ripple-fade",
+  "ks-interactive": "ks-interactive",
+};
+
+export type ButtonIntent = "primary" | "danger" | "secondary";
+export type ButtonVariant = "clip1" | "clip2" | "ghost" | "link";
+
+export interface ButtonProps {
+  /** Element / component to render as (defaults to "button"). Intentionally
+   *  permissive: a polymorphic `as` must accept anything from a tag string to a
+   *  router link component with its own required props (e.g. SolidJS Router's
+   *  `A`, which requires `href`), so it is typed `any` rather than a narrow
+   *  `Component<Record<string, unknown>>` that would reject those callers. */
+  as?: any;
+  intent?: ButtonIntent;
+  variant?: ButtonVariant;
+  noRipple?: boolean;
+  noScanline?: boolean;
+  noGlow?: boolean;
+  noPulse?: boolean;
+  icon?: (props: { size?: number; class?: string }) => JSX.Element;
+  iconPosition?: "left" | "right";
+  class?: string;
+  disabled?: boolean;
+  children?: JSX.Element;
+  type?: string;
+  onClick?: (event: MouseEvent) => void;
+  [key: string]: unknown;
+}
+
+function cn(...classes: Array<string | undefined | null | false>): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+interface IntentColors {
+  ripple: string;
+  effect: string;
+  effectBg: string;
+  effectBorder: string;
+  effectGlow: string;
+}
+
+interface IntentConfig {
+  textColor: string;
+  background: string;
+  hover: string;
+  colors: IntentColors;
+}
+
+const buttonIntentConfig: Record<ButtonIntent, IntentConfig> = {
+  primary: {
+    textColor: "text-amber-400",
+    background: "bg-amber-600/20 border-amber-600/60",
+    hover: "hover:bg-amber-600/30 hover:border-amber-500",
+    colors: {
+      ripple: "rgba(255, 255, 255, 0.3)",
+      effect: "rgba(201, 169, 97, 0.4)",
+      effectBg: "rgba(201, 169, 97, 0.1)",
+      effectBorder: "rgba(201, 169, 97, 0.4)",
+      effectGlow: "rgba(201, 169, 97, 0.3)",
+    },
+  },
+  danger: {
+    textColor: "text-red-400",
+    background: "bg-red-600/20 border-red-600/60",
+    hover: "hover:bg-red-600/30 hover:border-red-500",
+    colors: {
+      ripple: "rgba(255, 255, 255, 0.3)",
+      effect: "rgba(255, 68, 68, 0.4)",
+      effectBg: "rgba(255, 68, 68, 0.1)",
+      effectBorder: "rgba(255, 68, 68, 0.4)",
+      effectGlow: "rgba(255, 68, 68, 0.3)",
+    },
+  },
+  secondary: {
+    textColor: "text-slate-400",
+    background: "bg-slate-600/20 border-slate-600/60",
+    hover: "hover:bg-slate-600/30 hover:border-slate-500",
+    colors: {
+      ripple: "rgba(255, 255, 255, 0.3)",
+      effect: "rgba(148, 163, 184, 0.4)",
+      effectBg: "rgba(148, 163, 184, 0.1)",
+      effectBorder: "rgba(148, 163, 184, 0.4)",
+      effectGlow: "rgba(148, 163, 184, 0.3)",
+    },
+  },
+};
+
+interface VariantConfig {
+  effects: string[];
+  baseClasses: string;
+  overrideType: boolean;
+}
+
+const buttonVariantConfig: Record<ButtonVariant, VariantConfig> = {
+  clip1: {
+    effects: ["clip-top-left-bottom-right"],
+    baseClasses: "px-4 py-2 border",
+    overrideType: false,
+  },
+  clip2: {
+    effects: ["clip-top-right-bottom-left"],
+    baseClasses: "px-4 py-2 border",
+    overrideType: false,
+  },
+  ghost: {
+    effects: [],
+    baseClasses: "px-4 py-2 bg-transparent border-transparent hover:bg-current/10 hover:border-transparent",
+    overrideType: true,
+  },
+  link: {
+    effects: [],
+    baseClasses:
+      "px-0 py-0 bg-transparent border-transparent underline-offset-4 hover:underline hover:bg-transparent hover:border-transparent",
+    overrideType: true,
+  },
+};
+
+interface Ripple {
+  id: number;
+  x: number;
+  y: number;
+  size: number;
+  isFading: boolean;
+}
+
+const Button = (props: ButtonProps): JSX.Element => {
+  ensureButtonStyle();
+
+  const merged = mergeProps(
+    {
+      as: "button" as ButtonProps["as"],
+      intent: "primary" as ButtonIntent,
+      variant: "clip1" as ButtonVariant,
+      noRipple: false,
+      noScanline: false,
+      noGlow: false,
+      noPulse: false,
+      iconPosition: "left" as const,
+    },
+    props,
+  );
+
+  const [local, others] = splitProps(merged, [
+    "as",
+    "intent",
+    "variant",
+    "noRipple",
+    "noScanline",
+    "noGlow",
+    "noPulse",
+    "icon",
+    "iconPosition",
+    "class",
+    "children",
+    "onClick",
+    "disabled",
+  ]);
+
+  const [ripples, setRipples] = createSignal<Ripple[]>([]);
+
+  let elementRef: HTMLElement | undefined;
+  let mouseDownTime = 0;
+
+  const isIconOnly = createMemo(() => !local.children && local.icon);
+  const intentConfig = createMemo(
+    () => buttonIntentConfig[local.intent as ButtonIntent] || buttonIntentConfig.primary,
+  );
+  const variantConfig = createMemo(
+    () => buttonVariantConfig[local.variant as ButtonVariant] || buttonVariantConfig.clip1,
+  );
+
+  const hasRipple = createMemo(() => {
+    if (local.noRipple) return false;
+    if (local.variant === "link") return false;
+    return true;
+  });
+
+  const activeEffects = createMemo(() => {
+    const effects: string[] = [...variantConfig().effects];
+    if (!local.noScanline) effects.push("scanline");
+    return effects;
+  });
+
+  const effectClasses = createMemo(() =>
+    activeEffects()
+      .map((effect) => {
+        const effectMap: Record<string, string> = {
+          scanline: styles["ks-hud-scan-line"],
+          "clip-top-left-bottom-right": styles["ks-hud-clip-top-left-bottom-right"],
+          "clip-top-right-bottom-left": styles["ks-hud-clip-top-right-bottom-left"],
+          "clip-minimal-top-left-bottom-right": styles["ks-hud-clip-minimal-top-left-bottom-right"],
+          "clip-minimal-top-right-bottom-left": styles["ks-hud-clip-minimal-top-right-bottom-left"],
+          glow: styles["ks-hud-glow"],
+          pulse: styles["ks-hud-pulse"],
+        };
+        return effectMap[effect];
+      })
+      .filter(Boolean),
+  );
+
+  const customProperties = createMemo(() => {
+    const colors = intentConfig().colors;
+    return {
+      "--ks-effect-color": colors.effect,
+      "--ks-effect-bg": colors.effectBg,
+      "--ks-effect-border": colors.effectBorder,
+      "--ks-effect-bg-hover": colors.effect.replace("0.1", "0.2"),
+      "--ks-effect-border-hover": colors.effect.replace("0.4", "0.6"),
+      "--ks-effect-glow": colors.effectGlow,
+      "--ks-effect-glow-hover": colors.effectGlow.replace("0.3", "0.5"),
+      "--ks-effect-pulse-bg": colors.effectBg,
+      "--ks-effect-pulse-bg-mid": colors.effect.replace("0.4", "0.2"),
+      "--ks-effect-pulse-glow": colors.effectGlow.replace("0.3", "0.2"),
+      "--ks-effect-pulse-glow-mid": colors.effectGlow,
+      "--ks-ripple-color": colors.ripple,
+    } as JSX.CSSProperties;
+  });
+
+  const classes = createMemo(() => {
+    const coreClasses =
+      "select-none inline-flex items-center justify-center gap-2 font-medium transition-all duration-200 focus:outline-none text-sm rounded";
+    const textColor = intentConfig().textColor;
+    const backgroundClasses = variantConfig().overrideType
+      ? ""
+      : `${intentConfig().background} ${intentConfig().hover}`;
+    const variantClasses = variantConfig().baseClasses;
+
+    return cn(
+      coreClasses,
+      textColor,
+      backgroundClasses,
+      variantClasses,
+      local.class,
+      hasRipple() && styles["ks-btn-ripple"],
+      !hasRipple() && styles["ks-interactive"],
+      isIconOnly() && "aspect-square !p-2",
+      ...effectClasses(),
+      local.disabled && "opacity-50 cursor-not-allowed",
+    );
+  });
+
+  const handleMouseDown = (event: MouseEvent) => {
+    if (local.disabled) return;
+    if (hasRipple() && elementRef) {
+      mouseDownTime = Date.now();
+      const rect = elementRef.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const size = Math.max(rect.width, rect.height) * 2;
+      const rippleId = Date.now() + Math.random();
+      setRipples((prev) => [...prev, { id: rippleId, x, y, size, isFading: false }]);
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (!hasRipple() || local.disabled) return;
+    const timeSinceMouseDown = Date.now() - mouseDownTime;
+    const delayBeforeFade = Math.max(0, 400 - timeSinceMouseDown);
+    setTimeout(() => {
+      setRipples((prev) => prev.map((r) => ({ ...r, isFading: true })));
+      setTimeout(() => setRipples([]), 400);
+    }, delayBeforeFade);
+  };
+
+  const handleMouseLeave = () => {
+    if (!local.disabled) handleMouseUp();
+  };
+
+  const handleClick = (event: MouseEvent) => {
+    if (local.onClick && !local.disabled) local.onClick(event);
+  };
+
+  const renderContent = createMemo(() => {
+    const IconComponent = local.icon;
+    if (isIconOnly() && IconComponent) return <IconComponent />;
+    if (IconComponent && local.children) {
+      const icon = <IconComponent />;
+      return local.iconPosition === "left" ? (
+        <>
+          {icon}
+          {local.children}
+        </>
+      ) : (
+        <>
+          {local.children}
+          {icon}
+        </>
+      );
+    }
+    if (IconComponent) return <IconComponent />;
+    return local.children;
+  });
+
+  onCleanup(() => setRipples([]));
+
+  return (
+    <Dynamic
+      component={local.as}
+      ref={(el: HTMLElement) => {
+        elementRef = el;
+        const maybeRef = (others as { ref?: unknown }).ref;
+        if (typeof maybeRef === "function") (maybeRef as (e: HTMLElement) => void)(el);
+      }}
+      class={classes()}
+      style={customProperties()}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+      disabled={local.disabled}
+      {...others}
+    >
+      {renderContent()}
+      <Show when={hasRipple()}>
+        <For each={ripples()}>
+          {(ripple) => (
+            <span
+              class={cn(styles["ks-btn-ripple-effect"], ripple.isFading && styles["ks-btn-ripple-fade"])}
+              style={{
+                left: `${ripple.x - ripple.size / 2}px`,
+                top: `${ripple.y - ripple.size / 2}px`,
+                width: `${ripple.size}px`,
+                height: `${ripple.size}px`,
+                "background-color": "var(--ks-ripple-color, rgba(255, 255, 255, 0.3))",
+              }}
+            />
+          )}
+        </For>
+      </Show>
+    </Dynamic>
+  );
+};
+
+export default Button;

package/src/components/base/Dropdown.tsx

@@ -0,0 +1,164 @@
+import { createSignal, For, onCleanup, onMount, Show, type Component, type JSX } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import ChevronDown from "lucide-solid/icons/chevron-down";
+
+/** A lucide-solid icon component (or any component taking size/class). */
+type IconComponent = Component<{ size?: number; class?: string }>;
+
+/** The status of a dropdown item, used to render a small leading colored dot
+ *  when no explicit icon is supplied. Domain-free: the caller maps its own
+ *  enum onto one of these three presentational states. */
+export type DropdownItemStatus = "open" | "closed" | "neutral";
+
+export interface DropdownItem {
+  /** Stable identity, matched against the selected `value`. */
+  id: string;
+  /** Primary text shown for the item and on the trigger when selected. */
+  label: string;
+  /** Optional secondary line under the label. */
+  description?: string;
+  /** Arbitrary payload handed back to `onSelect` unchanged. */
+  value?: unknown;
+  /** Optional leading icon. Takes precedence over the status dot. */
+  icon?: IconComponent;
+  /** Optional pill rendered beside the label. */
+  badge?: string;
+  /** When true the item is dimmed and not selectable. */
+  disabled?: boolean;
+  /** When no `icon` is set, renders a small colored status dot. */
+  status?: DropdownItemStatus;
+}
+
+export interface DropdownProps {
+  /** The selectable options, top to bottom. */
+  items: DropdownItem[];
+  /** The currently selected item's `id`. Uncontrolled fallback selects the first item. */
+  value?: string;
+  /** Trigger text when nothing is selected. */
+  placeholder?: string;
+  /** Optional leading icon on the trigger button. */
+  icon?: IconComponent;
+  /** Minimum width of the trigger/menu (any CSS length). Defaults to 280px. */
+  minWidth?: string;
+  /** Disables the whole control. */
+  disabled?: boolean;
+  /** Called with the chosen item when an option is selected. */
+  onSelect?: (item: DropdownItem) => void;
+  /** Extra classes on the outer container. */
+  class?: string;
+}
+
+// Maps a presentational status to a dot color. Domain-free: only the three
+// status states are recognized; everything else falls back to neutral gray.
+function statusColor(status?: DropdownItemStatus): string {
+  switch (status) {
+    case "open":
+      return "#10B981";
+    case "closed":
+      return "#6B7280";
+    default:
+      return "#6B7280";
+  }
+}
+
+// A generic single-select dropdown: a labeled trigger that opens a panel of
+// items, each optionally carrying a description, icon (or status dot), and
+// badge. Click-outside closes the panel; the chevron rotates while open.
+// Presentational only and domain-free — no baked-in copy or business literals.
+export default function Dropdown(props: DropdownProps): JSX.Element {
+  const [isOpen, setIsOpen] = createSignal(false);
+  const [selectedItem, setSelectedItem] = createSignal<DropdownItem | undefined>(
+    props.items.find((item) => item.id === props.value),
+  );
+
+  const currentSelection = () => selectedItem() ?? props.items.find((i) => i.id === props.value) ?? props.items[0];
+
+  onMount(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Element | null;
+      if (!target?.closest("[data-dropdown-container]")) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+    onCleanup(() => document.removeEventListener("click", handleClickOutside));
+  });
+
+  const handleSelect = (item: DropdownItem) => {
+    if (item.disabled) return;
+    setSelectedItem(item);
+    setIsOpen(false);
+    props.onSelect?.(item);
+  };
+
+  return (
+    <div class={`relative inline-block ${props.class ?? ""}`} data-dropdown-container>
+      <button
+        onClick={() => !props.disabled && setIsOpen(!isOpen())}
+        disabled={props.disabled}
+        class={`flex items-center gap-3 px-4 py-3 bg-zinc-900/50 border border-zinc-800/50 rounded-lg hover:bg-zinc-900/70 transition-all backdrop-blur-sm select-none ${
+          props.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+        }`}
+        style={{ "min-width": props.minWidth ?? "280px" }}
+      >
+        <Show when={props.icon}>
+          {(Icon) => <Dynamic component={Icon()} size={18} class="text-amber-500" />}
+        </Show>
+        <div class="flex-1 text-left">
+          <div class="font-semibold text-white">
+            {currentSelection()?.label ?? props.placeholder ?? "Select an option"}
+          </div>
+          <Show when={currentSelection()?.description}>
+            <div class="text-xs text-zinc-400">{currentSelection()?.description}</div>
+          </Show>
+        </div>
+        <ChevronDown size={18} class={`text-zinc-400 transition-transform ${isOpen() ? "rotate-180" : ""}`} />
+      </button>
+
+      <Show when={isOpen()}>
+        <div class="absolute top-full left-0 mt-2 w-full bg-zinc-900/95 border border-zinc-800/50 rounded-lg backdrop-blur-xl z-50 shadow-xl select-none">
+          <For each={props.items}>
+            {(item) => (
+              <button
+                onClick={() => handleSelect(item)}
+                disabled={item.disabled}
+                class={`w-full px-4 py-3 flex items-center gap-3 hover:bg-zinc-800/50 transition-all first:rounded-t-lg last:rounded-b-lg select-none ${
+                  currentSelection()?.id === item.id ? "bg-zinc-800/30" : ""
+                } ${item.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
+              >
+                <div class="flex items-center gap-2 flex-shrink-0">
+                  <Show
+                    when={item.icon}
+                    fallback={
+                      <Show when={item.status}>
+                        <div
+                          class="w-2 h-2 rounded-full flex-shrink-0"
+                          style={{ background: statusColor(item.status) }}
+                        />
+                      </Show>
+                    }
+                  >
+                    {(Icon) => <Dynamic component={Icon()} size={16} class="text-amber-500" />}
+                  </Show>
+                </div>
+                <div class="flex-1 text-left min-w-0">
+                  <div class="font-medium text-white flex items-center gap-2">
+                    {item.label}
+                    <Show when={item.badge}>
+                      <span class="px-2 py-0.5 text-xs font-medium bg-zinc-700/50 text-zinc-400 rounded flex-shrink-0">
+                        {item.badge}
+                      </span>
+                    </Show>
+                  </div>
+                  <Show when={item.description}>
+                    <div class="text-xs text-zinc-400 truncate">{item.description}</div>
+                  </Show>
+                </div>
+              </button>
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  );
+}

package/src/components/base/EyebrowBadge.tsx

@@ -0,0 +1,108 @@
+import { Show, type JSX } from "solid-js";
+
+export type EyebrowTone = "amber" | "blue" | "emerald" | "red" | "zinc";
+
+interface ToneClass {
+  /** Text color for the kicker label. */
+  text: string;
+  /** Tinted background, used by the bordered pill variant. */
+  bg: string;
+  /** Accent border color, used by the bordered pill variant. */
+  border: string;
+}
+
+// Module-private tone palette. The caller picks a tone; nothing
+// domain-specific leaks into this atom. Each tone is a flat color family so
+// the badge reads as a quiet accent rather than a loud chip.
+const TONE_CLASS: Record<EyebrowTone, ToneClass> = {
+  amber: {
+    text: "text-amber-400",
+    bg: "bg-amber-500/10",
+    border: "border-amber-500",
+  },
+  blue: {
+    text: "text-blue-400",
+    bg: "bg-blue-500/10",
+    border: "border-blue-500",
+  },
+  emerald: {
+    text: "text-emerald-400",
+    bg: "bg-emerald-500/10",
+    border: "border-emerald-500",
+  },
+  red: {
+    text: "text-red-400",
+    bg: "bg-red-500/10",
+    border: "border-red-500",
+  },
+  zinc: {
+    text: "text-zinc-500",
+    bg: "bg-zinc-800/50",
+    border: "border-zinc-600",
+  },
+};
+
+// Tracking presets for the wide letter-spacing. "normal" is Tailwind's
+// tracking-widest; the wider presets cover the heading kickers that use
+// arbitrary tracking values.
+const TRACKING_CLASS = {
+  normal: "tracking-widest",
+  wide: "tracking-[0.2em]",
+  wider: "tracking-[0.3em]",
+} as const;
+
+export type EyebrowTracking = keyof typeof TRACKING_CLASS;
+
+export interface EyebrowBadgeProps {
+  /** The kicker text. Rendered uppercase via CSS, so pass natural casing. */
+  label: string;
+  /** Color family for the label (and the accent border when bordered). */
+  tone?: EyebrowTone;
+  /**
+   * Render the bordered pill variant: a tinted background with a left accent
+   * border (the hero-style kicker). When false (default) it is a plain
+   * tracked-text kicker with no box.
+   */
+  bordered?: boolean;
+  /** Letter-spacing preset. */
+  tracking?: EyebrowTracking;
+  /** Render as an inline-block <div> instead of an inline <span>. */
+  block?: boolean;
+  /** Extra classes on the wrapper. */
+  class?: string;
+  testId?: string;
+}
+
+// A tiny, domain-free eyebrow / kicker atom: an uppercase, wide-tracked,
+// bold micro-label. The plain variant is just tracked text; the bordered
+// variant wraps it in a tinted pill with a left accent border. Presentational
+// only — the caller supplies the label and picks a tone.
+export default function EyebrowBadge(props: EyebrowBadgeProps): JSX.Element {
+  const tc = () => TONE_CLASS[props.tone ?? "amber"];
+  const tracking = () => TRACKING_CLASS[props.tracking ?? "normal"];
+
+  const base = () =>
+    `text-xs font-bold uppercase ${tracking()} ${tc().text}`;
+  const borderedExtra = () =>
+    props.bordered
+      ? `inline-block px-4 py-1 border-l-2 ${tc().bg} ${tc().border}`
+      : "";
+
+  const className = () =>
+    `${base()} ${borderedExtra()} ${props.class ?? ""}`.trim();
+
+  return (
+    <Show
+      when={props.block || props.bordered}
+      fallback={
+        <span data-testid={props.testId} class={className()}>
+          {props.label}
+        </span>
+      }
+    >
+      <div data-testid={props.testId} class={`inline-block ${className()}`}>
+        {props.label}
+      </div>
+    </Show>
+  );
+}

package/src/components/base/SectionHeading.tsx

@@ -0,0 +1,100 @@
+import { Show, type JSX } from "solid-js";
+
+/** Horizontal alignment for the whole heading block. */
+export type SectionHeadingAlign = "left" | "center" | "right";
+
+/** Heading level rendered for the title element. */
+export type SectionHeadingLevel = "h1" | "h2" | "h3";
+
+export interface SectionHeadingProps {
+  /**
+   * Title content. Accept JSX so a caller can apply its own brand styling
+   * (e.g. a gradient span) on part of the title without this component
+   * carrying any site-specific CSS.
+   */
+  title: JSX.Element;
+  /** Small uppercase, wide-tracked label above the title (the "eyebrow"). */
+  kicker?: string;
+  /** Supporting copy below the title. Accepts JSX for richer content. */
+  subtitle?: JSX.Element;
+  /**
+   * Show a short underline accent bar below the title. The bar inherits the
+   * accent color; override with `accentClass`.
+   */
+  accent?: boolean;
+  /** Tailwind class controlling the accent bar color. */
+  accentClass?: string;
+  /** Tailwind class controlling the kicker color. */
+  kickerClass?: string;
+  /** Tailwind class controlling the title color. */
+  titleClass?: string;
+  /** Tailwind class controlling the subtitle color. */
+  subtitleClass?: string;
+  /** Block alignment. Defaults to "left". */
+  align?: SectionHeadingAlign;
+  /** Title element tag. Defaults to "h2". */
+  as?: SectionHeadingLevel;
+  /** Extra classes on the outer wrapper. */
+  class?: string;
+}
+
+const ALIGN_WRAP: Record<SectionHeadingAlign, string> = {
+  left: "text-left items-start",
+  center: "text-center items-center",
+  right: "text-right items-end",
+};
+
+// Per-level title sizing. Domain-free defaults; callers override via titleClass.
+const TITLE_SIZE: Record<SectionHeadingLevel, string> = {
+  h1: "text-3xl md:text-4xl lg:text-6xl font-bold tracking-tight",
+  h2: "text-2xl md:text-3xl lg:text-4xl font-bold",
+  h3: "text-xl md:text-2xl font-bold",
+};
+
+/**
+ * A recurring section header block: an optional uppercase kicker, a title
+ * (any JSX, so the caller can apply brand-specific styling), an optional
+ * underline accent bar, and optional subtitle copy.
+ *
+ * Presentational only. No site copy, no domain coupling — every piece of text
+ * and color comes from props.
+ */
+export default function SectionHeading(props: SectionHeadingProps): JSX.Element {
+  const align = () => props.align ?? "left";
+  const level = () => props.as ?? "h2";
+
+  const Title = (titleProps: { class: string; children: JSX.Element }): JSX.Element => {
+    const tag = level();
+    if (tag === "h1") return <h1 class={titleProps.class}>{titleProps.children}</h1>;
+    if (tag === "h3") return <h3 class={titleProps.class}>{titleProps.children}</h3>;
+    return <h2 class={titleProps.class}>{titleProps.children}</h2>;
+  };
+
+  return (
+    <div class={`flex flex-col ${ALIGN_WRAP[align()]} ${props.class ?? ""}`}>
+      <Show when={props.kicker}>
+        <div
+          class={`text-xs font-bold tracking-[0.3em] uppercase mb-2 ${
+            props.kickerClass ?? "text-amber-500"
+          }`}
+        >
+          {props.kicker}
+        </div>
+      </Show>
+
+      <Title class={`${TITLE_SIZE[level()]} ${props.titleClass ?? "text-white"}`}>
+        {props.title}
+      </Title>
+
+      <Show when={props.accent}>
+        <div class={`w-20 h-1 mt-4 rounded-full ${props.accentClass ?? "bg-amber-500"}`} />
+      </Show>
+
+      <Show when={props.subtitle}>
+        <p class={`mt-4 text-base md:text-lg max-w-2xl ${props.subtitleClass ?? "text-zinc-400"}`}>
+          {props.subtitle}
+        </p>
+      </Show>
+    </div>
+  );
+}

package/src/components/base/SocialLinksBar.tsx

@@ -0,0 +1,92 @@
+import { For, type Component, type JSX } from "solid-js";
+
+/** Icon component shape: any component that accepts a numeric `size`
+ *  (lucide-solid icons satisfy this, as does any custom SVG component). */
+export type SocialIcon = Component<{ size?: number }>;
+
+export interface SocialLink {
+  /** Destination URL. Opened in a new tab with rel="noopener noreferrer". */
+  href: string;
+  /** Icon component rendered inside the button (e.g. a lucide-solid icon). */
+  icon: SocialIcon;
+  /** Accessible label, used for `aria-label` and `title`. */
+  label: string;
+}
+
+/** Button outline shape. `round` is a full circle; `clip` cuts the
+ *  top-right corner with a clip-path (the angular brand variant). */
+export type SocialLinksShape = "round" | "clip";
+
+export interface SocialLinksBarProps {
+  /** The links to render. The caller owns the URLs and icons; nothing
+   *  domain-specific lives in the component. */
+  links: SocialLink[];
+  /** Button outline shape. Defaults to `round`. */
+  shape?: SocialLinksShape;
+  /** Pixel size of each square button. Defaults to 40 (`clip` defaults to 48). */
+  buttonSize?: number;
+  /** Pixel size of the icon. Defaults to ~45% of the button size. */
+  iconSize?: number;
+  /** Extra classes on the wrapping `<nav>`. */
+  class?: string;
+  testId?: string;
+}
+
+// Runtime-injected clip-path utility. ksui ships no sidecar CSS (the package
+// exports only ./src), so the one rule the `clip` shape needs is emitted once
+// as a <style> tag rather than imported from a sibling .css file.
+const CLIP_STYLE_ID = "ksui-social-clip-style";
+const CLIP_STYLE = `.ksui-social-clip{clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%);}`;
+
+// Inject the clip-path rule once per document, matching the SSR-safe
+// getElementById-dedupe pattern used by Button/ThemeToggle. A module-level
+// boolean would be non-reentrant across SSR requests (the worker reuses the
+// module), so the style must be keyed off the document, not module state.
+function ensureSocialClipStyle(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(CLIP_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = CLIP_STYLE_ID;
+  el.textContent = CLIP_STYLE;
+  document.head.appendChild(el);
+}
+
+/**
+ * A horizontal row of accessible, round (or clip-cornered) icon buttons that
+ * link out to external profiles. Each button opens its href in a new tab with
+ * a safe `rel`, carries an `aria-label`, and renders the caller-supplied icon.
+ *
+ * Domain-free: the specific URLs, icons, and labels all come from `links`.
+ */
+export default function SocialLinksBar(props: SocialLinksBarProps): JSX.Element {
+  ensureSocialClipStyle();
+  const shape = () => props.shape ?? "round";
+  const btn = () => props.buttonSize ?? (shape() === "clip" ? 48 : 40);
+  const icon = () => props.iconSize ?? Math.round(btn() * 0.45);
+  const shapeClass = () =>
+    shape() === "clip" ? "ksui-social-clip" : "rounded-full";
+
+  return (
+    <nav
+      data-testid={props.testId}
+      class={`flex gap-4 ${props.class ?? ""}`}
+      aria-label="Social links"
+    >
+      <For each={props.links}>
+        {(link) => (
+          <a
+            href={link.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={link.label}
+            aria-label={link.label}
+            class={`flex items-center justify-center bg-zinc-800 text-zinc-400 transition-all hover:bg-amber-500 hover:text-black ${shapeClass()}`}
+            style={{ width: `${btn()}px`, height: `${btn()}px` }}
+          >
+            {link.icon({ size: icon() })}
+          </a>
+        )}
+      </For>
+    </nav>
+  );
+}

package/src/components/base/StatusIndicator.tsx

@@ -0,0 +1,110 @@
+import { Show, type JSX } from "solid-js";
+
+export type StatusIndicatorTone = "success" | "neutral" | "warning" | "danger" | "info";
+
+interface ToneClass {
+  /** Filled dot color. */
+  dot: string;
+  /** Label text color. */
+  text: string;
+  /** Box-shadow glow used when the dot pulses (an arbitrary Tailwind value). */
+  glow: string;
+}
+
+// Module-private tone palette. The caller maps its own availability/state
+// (online/offline, open/closed, healthy/degraded) to one of these tones and
+// passes a plain label; nothing domain-specific leaks into this atom.
+const TONE_CLASS: Record<StatusIndicatorTone, ToneClass> = {
+  success: {
+    dot: "bg-emerald-400",
+    text: "text-white",
+    glow: "shadow-[0_0_10px_rgba(52,211,153,0.6)]",
+  },
+  neutral: {
+    dot: "bg-zinc-400",
+    text: "text-zinc-400",
+    glow: "shadow-[0_0_10px_rgba(161,161,170,0.5)]",
+  },
+  warning: {
+    dot: "bg-amber-400",
+    text: "text-amber-300",
+    glow: "shadow-[0_0_10px_rgba(251,191,36,0.6)]",
+  },
+  danger: {
+    dot: "bg-red-400",
+    text: "text-red-300",
+    glow: "shadow-[0_0_10px_rgba(248,113,113,0.6)]",
+  },
+  info: {
+    dot: "bg-blue-400",
+    text: "text-blue-300",
+    glow: "shadow-[0_0_10px_rgba(96,165,250,0.6)]",
+  },
+};
+
+export interface StatusIndicatorProps {
+  /** Text shown beside the dot (the caller's own label). */
+  label: string;
+  /** Domain-free tone selector. The caller maps its enum to one of these. */
+  tone?: StatusIndicatorTone;
+  /**
+   * Convenience boolean: when provided, overrides `tone` with `success` (true)
+   * or `danger` (false). Lets a caller bind a plain availability flag.
+   */
+  online?: boolean;
+  /** Animate the dot with a pulse + glow (good for a "live" indicator). */
+  pulse?: boolean;
+  /** Render the label uppercase with wide tracking (the marquee/chip style). */
+  uppercase?: boolean;
+  /** Optional small caption above the label (e.g. a category line). */
+  caption?: string;
+  /** Caption text color class; defaults to an amber accent. */
+  captionClass?: string;
+  /** Extra classes on the wrapper. */
+  class?: string;
+  testId?: string;
+}
+
+// Single availability-indicator atom. A filled, optionally pulsing colored dot
+// next to a label. Distinct from StatusPill (a bordered tinted text chip) — this
+// is the animated "live status" dot. The caller owns the domain → tone mapping
+// and the label text.
+export default function StatusIndicator(props: StatusIndicatorProps): JSX.Element {
+  const tone = (): StatusIndicatorTone =>
+    props.online === undefined ? (props.tone ?? "neutral") : props.online ? "success" : "danger";
+  const tc = () => TONE_CLASS[tone()];
+
+  return (
+    <div
+      data-testid={props.testId}
+      class={`flex items-center gap-3 ${props.class ?? ""}`}
+    >
+      <span
+        aria-hidden="true"
+        class={`h-3 w-3 shrink-0 rounded-full ${tc().dot} ${
+          props.pulse ? `animate-pulse ${tc().glow}` : ""
+        }`}
+      />
+      <div>
+        <Show when={props.caption}>
+          <div
+            class={`text-xs font-bold uppercase tracking-widest ${
+              props.captionClass ?? "text-amber-400"
+            }`}
+          >
+            {props.caption}
+          </div>
+        </Show>
+        <div
+          class={`${tc().text} ${
+            props.uppercase
+              ? "text-xs font-bold uppercase tracking-widest"
+              : "text-sm font-bold"
+          }`}
+        >
+          {props.label}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/base/ThemeToggle.tsx

@@ -0,0 +1,112 @@
+// Source: kahitsan-web src/components/Header.tsx (ThemeToggle, lines 30-45)
+// + its CSS in src/assets/css/button.css (.ks-theme-toggle*).
+// Extracted as a domain-free, controlled primitive: the theme state is lifted
+// to props (`value` + `onToggle`) so it carries no dependency on kahitsan's
+// ~/lib/theme. Only solid-js + lucide-solid.
+//
+// ksui ships no sibling .css and no sidecar CSS in the published package, so
+// the custom track/thumb/icon styles (transitions, the sliding ::after thumb)
+// are injected once at runtime via a <style> tag — the same pattern ProgressBar
+// uses — and referenced by plain, unscoped class names.
+
+import type { JSX } from "solid-js";
+import { splitProps } from "solid-js";
+import Sun from "lucide-solid/icons/sun";
+import Moon from "lucide-solid/icons/moon";
+
+const THEME_TOGGLE_STYLE_ID = "ks-theme-toggle-inline-style";
+const THEME_TOGGLE_CSS = `
+.ks-theme-toggle { background: none; border: none; padding: 2px; cursor: pointer; display: flex; align-items: center; }
+.ks-theme-toggle-track { position: relative; display: flex; align-items: center; justify-content: space-between; width: 52px; height: 28px; border-radius: 14px; background-color: #3f3f46; padding: 0 2px; transition: background-color 0.3s ease; }
+.ks-theme-toggle-track[data-active] { background-color: #d3c5ac; }
+.ks-theme-toggle-icon { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; pointer-events: none; transition: color 0.3s ease; }
+.ks-theme-toggle-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background-color: #52525b; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, background-color 0.3s ease; z-index: 1; }
+.ks-theme-toggle-track[data-active]::after { transform: translateX(24px); background-color: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
+.ks-theme-toggle-icon-moon { color: #fbbf24; }
+.ks-theme-toggle-icon-sun { color: rgba(255, 255, 255, 0.3); }
+.ks-theme-toggle-track[data-active] .ks-theme-toggle-icon-moon { color: rgba(120, 90, 0, 0.3); }
+.ks-theme-toggle-track[data-active] .ks-theme-toggle-icon-sun { color: #785a00; }
+.ks-theme-toggle:hover .ks-theme-toggle-track { background-color: #52525b; }
+.ks-theme-toggle:hover .ks-theme-toggle-track[data-active] { background-color: #c9b99a; }
+@media (prefers-reduced-motion: reduce) { .ks-theme-toggle-track, .ks-theme-toggle-track::after, .ks-theme-toggle-icon { transition: none; } }
+`;
+
+function ensureThemeToggleStyle(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(THEME_TOGGLE_STYLE_ID)) return;
+  const el = document.createElement("style");
+  el.id = THEME_TOGGLE_STYLE_ID;
+  el.textContent = THEME_TOGGLE_CSS;
+  document.head.appendChild(el);
+}
+
+export type ThemeToggleValue = "dark" | "light";
+
+export interface ThemeToggleProps
+  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "onToggle"> {
+  /** Current theme. `"light"` slides the thumb right and activates the sun. */
+  value: ThemeToggleValue;
+  /** Called with the opposite theme when the toggle is clicked. */
+  onToggle: (next: ThemeToggleValue) => void;
+  /**
+   * Accessible label. Receives the theme the click will switch TO so the
+   * default reads e.g. "Switch to light mode". Override for non-English UIs.
+   */
+  ariaLabel?: (next: ThemeToggleValue) => string;
+  /** Optional test hook (data-testid). */
+  testId?: string;
+}
+
+function cn(...classes: Array<string | undefined | null | false>): string {
+  return classes.filter(Boolean).join(" ");
+}
+
+const defaultAriaLabel = (next: ThemeToggleValue): string => `Switch to ${next} mode`;
+
+/**
+ * A controlled sliding sun/moon track toggle. Domain-free: it owns no theme
+ * state and applies no theme — it renders `value` and reports the intended
+ * next value through `onToggle`. The parent owns the theme source of truth.
+ */
+export default function ThemeToggle(props: ThemeToggleProps): JSX.Element {
+  ensureThemeToggleStyle();
+
+  const [local, rest] = splitProps(props, [
+    "value",
+    "onToggle",
+    "ariaLabel",
+    "testId",
+    "class",
+    "onClick",
+  ]);
+
+  const isLight = (): boolean => local.value === "light";
+  const next = (): ThemeToggleValue => (isLight() ? "dark" : "light");
+  const label = (): string => (local.ariaLabel ?? defaultAriaLabel)(next());
+
+  const handleClick: JSX.EventHandler<HTMLButtonElement, MouseEvent> = (event) => {
+    local.onToggle(next());
+    if (typeof local.onClick === "function") local.onClick(event);
+  };
+
+  return (
+    <button
+      type="button"
+      class={cn("ks-theme-toggle", local.class)}
+      aria-label={label()}
+      title={label()}
+      data-testid={local.testId}
+      onClick={handleClick}
+      {...rest}
+    >
+      <span class="ks-theme-toggle-track" data-active={isLight() ? "" : undefined}>
+        <span class="ks-theme-toggle-icon ks-theme-toggle-icon-moon">
+          <Moon size={12} />
+        </span>
+        <span class="ks-theme-toggle-icon ks-theme-toggle-icon-sun">
+          <Sun size={12} />
+        </span>
+      </span>
+    </button>
+  );
+}

package/src/components/composite/NotFound.tsx

@@ -0,0 +1,130 @@
+// Centered 404 / empty-state panel: an optional logo slot, a large display
+// title, a heading, a message, and a default "go back" action button. It is a
+// fully prop-driven, domain-free primitive — every piece of copy defaults to a
+// generic 404 string but is overridable, and nothing about any specific site
+// is hard-coded.
+//
+// Unlike the host-owned Button, this is a standalone primitive: it imports only
+// solid-js and lucide-solid, never `@kserp/host-ui` or a router. The default
+// action renders a plain, self-styled button. Navigation is left to the caller
+// via `onButtonClick` (or `href`, which renders an anchor instead). Callers who
+// want the host Button can pass it through the `action` slot, which fully
+// replaces the built-in button.
+
+import type { JSX } from "solid-js";
+import { Show, splitProps } from "solid-js";
+import { ArrowLeft } from "lucide-solid";
+
+export interface NotFoundProps
+  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Large display title. Defaults to "404". Pass "" to hide it entirely. */
+  title?: string;
+  /** Secondary heading under the title. Defaults to "Page Not Found". */
+  heading?: string;
+  /** Supporting message under the heading. */
+  message?: string;
+  /** Label for the default action button. Defaults to "Go Back Home". */
+  buttonText?: string;
+  /**
+   * When set, the default action renders as an anchor pointing here instead of
+   * a button. Ignored when `onButtonClick` or `action` is provided.
+   */
+  href?: string;
+  /** Click handler for the default action button. */
+  onButtonClick?: () => void;
+  /** Optional element rendered above the title (e.g. a logo or icon). */
+  logo?: JSX.Element;
+  /** Hide the action entirely. */
+  hideButton?: boolean;
+  /**
+   * Replace the built-in action with a custom element (e.g. the host Button).
+   * When provided, `buttonText`, `href`, and `onButtonClick` are ignored.
+   */
+  action?: JSX.Element;
+  /** Test id applied to the outer container. */
+  testId?: string;
+}
+
+export default function NotFound(props: NotFoundProps): JSX.Element {
+  const [local, others] = splitProps(props, [
+    "title",
+    "heading",
+    "message",
+    "buttonText",
+    "href",
+    "onButtonClick",
+    "logo",
+    "hideButton",
+    "action",
+    "testId",
+    "class",
+  ]);
+
+  const showTitle = () => local.title !== "";
+  const buttonClass =
+    "inline-flex items-center justify-center gap-2 rounded-md border " +
+    "border-amber-600/60 bg-amber-600/20 px-5 py-2.5 text-sm font-semibold " +
+    "text-amber-400 transition-colors hover:border-amber-500 " +
+    "hover:bg-amber-600/30 focus:outline-none focus-visible:ring-2 " +
+    "focus-visible:ring-amber-500/60";
+
+  return (
+    <div
+      class={
+        "flex items-center justify-center min-h-screen" +
+        (local.class ? " " + local.class : "")
+      }
+      data-testid={local.testId}
+      {...others}
+    >
+      <div class="text-center">
+        <Show when={local.logo}>
+          <div class="flex items-center justify-center mx-auto mb-6">{local.logo}</div>
+        </Show>
+
+        <Show when={showTitle()}>
+          <h1 class="text-4xl md:text-6xl font-bold text-amber-500 mb-4">
+            {local.title || "404"}
+          </h1>
+        </Show>
+
+        <h2 class="text-xl md:text-2xl font-bold text-white mb-3">
+          {local.heading || "Page Not Found"}
+        </h2>
+
+        <p class="text-sm text-zinc-400 max-w-md mb-8">
+          {local.message ||
+            "The page you're looking for doesn't exist or has been moved."}
+        </p>
+
+        <Show when={!local.hideButton}>
+          <Show
+            when={local.action}
+            fallback={
+              <Show
+                when={local.href && !local.onButtonClick}
+                fallback={
+                  <button
+                    type="button"
+                    class={buttonClass}
+                    onClick={() => local.onButtonClick?.()}
+                  >
+                    <ArrowLeft size={16} aria-hidden="true" />
+                    {local.buttonText || "Go Back Home"}
+                  </button>
+                }
+              >
+                <a href={local.href} class={buttonClass}>
+                  <ArrowLeft size={16} aria-hidden="true" />
+                  {local.buttonText || "Go Back Home"}
+                </a>
+              </Show>
+            }
+          >
+            {local.action}
+          </Show>
+        </Show>
+      </div>
+    </div>
+  );
+}

package/src/index.ts

@@ -64,6 +64,13 @@ export { default as RadioCardGroup } from "./components/base/RadioCardGroup";
 export { default as FormErrorBanner } from "./components/base/FormErrorBanner";
 export { default as TagPill } from "./components/base/TagPill";
 export { default as DateTile, type DateTileProps } from "./components/base/DateTile";
+export { default as Button, type ButtonProps, type ButtonIntent, type ButtonVariant } from "./components/base/Button";
+export { default as ThemeToggle, type ThemeToggleProps, type ThemeToggleValue } from "./components/base/ThemeToggle";
+export { default as Dropdown, type DropdownProps, type DropdownItem, type DropdownItemStatus } from "./components/base/Dropdown";
+export { default as SocialLinksBar, type SocialLinksBarProps, type SocialLink, type SocialIcon, type SocialLinksShape } from "./components/base/SocialLinksBar";
+export { default as StatusIndicator, type StatusIndicatorProps, type StatusIndicatorTone } from "./components/base/StatusIndicator";
+export { default as SectionHeading, type SectionHeadingProps, type SectionHeadingAlign, type SectionHeadingLevel } from "./components/base/SectionHeading";
+export { default as EyebrowBadge, type EyebrowBadgeProps, type EyebrowTone, type EyebrowTracking } from "./components/base/EyebrowBadge";
 
 // ---------------------------------------------------------------------------
 // Composite components
@@ -97,6 +104,8 @@ export type { PayeeOption, PayeeKind } from "./components/composite/PayeePicker"
 export { default as VoucherPicker, calculateDiscount } from "./components/composite/VoucherPicker";
 export type { VoucherOption } from "./components/composite/VoucherPicker";
 
+export { default as NotFound, type NotFoundProps } from "./components/composite/NotFound";
+
 // ---------------------------------------------------------------------------
 // Utils (not components)
 // ---------------------------------------------------------------------------