selftune 0.2.23 → 0.2.25

package/packages/dashboard-core/src/chrome/DashboardHeader.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { ArrowLeftIcon, BellIcon, BoltIcon, MenuIcon, SearchIcon, UserIcon } from "lucide-react";
+import { useDeferredValue, useRef, useState } from "react";
+
+import type { DashboardUser } from "../host/index";
+import { getUserInitials, matchesSearchItem } from "./utils";
+import type { DashboardHeaderMeta, DashboardLinkRenderer, DashboardSearchItem } from "./types";
+
+interface DashboardHeaderProps {
+  renderLink: DashboardLinkRenderer;
+  headerMeta: DashboardHeaderMeta;
+  searchItems: DashboardSearchItem[];
+  headerUser?: DashboardUser;
+  onToggleSidebar(): void;
+}
+
+export function DashboardHeader({
+  renderLink,
+  headerMeta,
+  searchItems,
+  headerUser,
+  onToggleSidebar,
+}: DashboardHeaderProps) {
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const suppressBlurRef = useRef(false);
+  const deferredQuery = useDeferredValue(query);
+
+  const filteredItems = searchItems
+    .filter((item) => matchesSearchItem(item, deferredQuery))
+    .slice(0, deferredQuery.trim() ? 12 : 8);
+
+  const groups = new Map<string, DashboardSearchItem[]>();
+  for (const item of filteredItems) {
+    const existing = groups.get(item.group) ?? [];
+    existing.push(item);
+    groups.set(item.group, existing);
+  }
+
+  return (
+    <header className="sticky top-0 z-40 border-b border-border/10 bg-background/80 backdrop-blur-xl">
+      <div className="flex h-16 items-center justify-between gap-4 px-4 lg:px-8">
+        <div className="flex min-w-0 flex-1 items-center gap-3 lg:gap-4">
+          <button
+            type="button"
+            className="rounded-lg bg-card p-2 text-foreground lg:hidden"
+            onClick={onToggleSidebar}
+            aria-label="Toggle sidebar"
+          >
+            <MenuIcon className="size-5" />
+          </button>
+
+          {headerMeta.backHref && headerMeta.backLabel
+            ? renderLink({
+                href: headerMeta.backHref,
+                className:
+                  "inline-flex items-center gap-1 font-headline text-[10px] uppercase tracking-[0.2em] text-slate-500 transition-colors hover:text-primary",
+                children: (
+                  <>
+                    <ArrowLeftIcon className="size-3" />
+                    {headerMeta.backLabel}
+                  </>
+                ),
+              })
+            : null}
+
+          <div className="hidden xl:flex items-center gap-3 rounded-full border border-border/15 bg-card/60 px-3 py-1.5 text-sm shadow-[0_10px_40px_rgba(0,0,0,0.12)]">
+            {headerMeta.icon ? (
+              <span className="shrink-0 text-primary">{headerMeta.icon}</span>
+            ) : null}
+            <div className="flex min-w-0 items-center gap-2">
+              <span className="font-headline text-[10px] uppercase tracking-[0.18em] text-slate-500">
+                {headerMeta.badge ?? "View"}
+              </span>
+              <span className="truncate font-medium text-foreground">{headerMeta.title}</span>
+            </div>
+          </div>
+
+          <div className="relative w-full max-w-xl">
+            <SearchIcon className="pointer-events-none absolute left-3 top-1/2 z-10 size-4 -translate-y-1/2 text-slate-400" />
+            <input
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onFocus={() => setOpen(true)}
+              onBlur={() => {
+                if (suppressBlurRef.current) {
+                  suppressBlurRef.current = false;
+                  return;
+                }
+                setOpen(false);
+              }}
+              placeholder="Search skills or pages..."
+              className="h-9 w-full rounded-full border border-border/10 bg-input/50 pl-10 pr-4 text-sm text-foreground outline-none transition focus:border-primary/30 focus:ring-1 focus:ring-primary/40 placeholder:text-slate-500"
+            />
+
+            {open ? (
+              <div className="absolute left-0 right-0 top-full z-50 mt-2 max-h-80 overflow-y-auto rounded-2xl border border-border/15 bg-card shadow-[0_20px_60px_rgba(0,0,0,0.35)] backdrop-blur-xl">
+                {filteredItems.length === 0 ? (
+                  <div className="px-4 py-5 text-sm text-muted-foreground">No results found.</div>
+                ) : (
+                  Array.from(groups.entries()).map(([group, items]) => (
+                    <div key={group} className="border-b border-border/10 last:border-b-0">
+                      <div className="px-4 pt-3 text-[10px] uppercase tracking-[0.18em] text-slate-500">
+                        {group}
+                      </div>
+                      <div className="p-2">
+                        {items.map((item) => (
+                          <button
+                            key={item.id}
+                            type="button"
+                            onMouseDown={(event) => {
+                              event.preventDefault();
+                              suppressBlurRef.current = true;
+                            }}
+                            onClick={() => {
+                              item.onSelect();
+                              setOpen(false);
+                              setQuery("");
+                            }}
+                            className="flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-muted/40"
+                          >
+                            {item.leading ? (
+                              <span className="shrink-0">{item.leading}</span>
+                            ) : (
+                              <span className="shrink-0 text-slate-400">
+                                {item.meta ? "•" : ""}
+                              </span>
+                            )}
+                            <div className="min-w-0 flex-1">
+                              <div className="truncate text-foreground">{item.label}</div>
+                              {item.meta ? (
+                                <div className="truncate text-xs text-muted-foreground">
+                                  {item.meta}
+                                </div>
+                              ) : null}
+                            </div>
+                            {item.trailing ? (
+                              <span className="shrink-0 text-xs text-muted-foreground">
+                                {item.trailing}
+                              </span>
+                            ) : null}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        <div className="hidden items-center gap-4 sm:flex lg:gap-6">
+          <div className="flex items-center gap-4 text-slate-400">
+            <span className="relative" aria-hidden="true">
+              <BellIcon className="size-4" />
+              <span className="absolute -right-0.5 -top-0.5 size-2 rounded-full border-2 border-background bg-primary shadow-[0_0_6px_color-mix(in_srgb,var(--primary)_50%,transparent)]" />
+            </span>
+            <BoltIcon className="size-4" aria-hidden="true" />
+          </div>
+
+          {headerUser ? (
+            <>
+              <div className="h-8 w-px bg-border/20" />
+              <div className="flex items-center gap-3">
+                <div className="hidden text-right md:block">
+                  <div className="font-headline text-[10px] uppercase tracking-widest text-slate-400">
+                    {headerUser.name}
+                  </div>
+                  <div className="text-[10px] uppercase tracking-widest text-primary">
+                    {headerUser.subtitle ?? headerUser.email ?? "Active"}
+                  </div>
+                </div>
+                {headerUser.image ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={headerUser.image}
+                    alt={headerUser.name}
+                    className="size-8 rounded-full"
+                  />
+                ) : (
+                  <div className="flex size-8 items-center justify-center rounded-full border border-primary/20 bg-card text-primary">
+                    {headerUser.name ? (
+                      <span className="text-xs font-medium">
+                        {getUserInitials(headerUser.name)}
+                      </span>
+                    ) : (
+                      <UserIcon className="size-4" />
+                    )}
+                  </div>
+                )}
+              </div>
+            </>
+          ) : null}
+        </div>
+      </div>
+    </header>
+  );
+}

package/packages/dashboard-core/src/chrome/DashboardSidebar.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { ChevronDownIcon, LockIcon, LogOutIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "@selftune/ui/primitives";
+
+import type { DashboardUser } from "../host/index";
+import { cn, getUserInitials } from "./utils";
+import type {
+  DashboardBrand,
+  DashboardChromeAction,
+  DashboardLinkRenderer,
+  DashboardNavItem,
+} from "./types";
+
+interface DashboardSidebarProps {
+  brand: DashboardBrand;
+  navItems: DashboardNavItem[];
+  renderLink: DashboardLinkRenderer;
+  sidebarAction?: DashboardChromeAction;
+  sidebarUser?: DashboardUser;
+  onSignOut?(): Promise<void> | void;
+  mobileOpen: boolean;
+  onMobileOpenChange(open: boolean): void;
+}
+
+export function DashboardSidebar({
+  brand,
+  navItems,
+  renderLink,
+  sidebarAction,
+  sidebarUser,
+  onSignOut,
+  mobileOpen,
+  onMobileOpenChange,
+}: DashboardSidebarProps) {
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+
+  return (
+    <>
+      {mobileOpen ? (
+        <button
+          type="button"
+          className="fixed inset-0 z-40 bg-black/50 lg:hidden"
+          onClick={() => onMobileOpenChange(false)}
+          aria-label="Close sidebar overlay"
+        />
+      ) : null}
+
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-sidebar-border bg-sidebar",
+          "transition-transform duration-200 lg:translate-x-0",
+          mobileOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        <div className="px-4 pb-8 pt-6">
+          {renderLink({
+            href: brand.href,
+            className: "flex items-center gap-3",
+            onClick: () => onMobileOpenChange(false),
+            children: (
+              <>
+                <div
+                  className="size-8 shrink-0 bg-primary shadow-[0_0_12px_rgba(79,242,255,0.3)]"
+                  role="img"
+                  aria-label={brand.name}
+                  style={{
+                    WebkitMaskImage: "url(/logo.svg)",
+                    WebkitMaskSize: "contain",
+                    WebkitMaskRepeat: "no-repeat",
+                    WebkitMaskPosition: "center",
+                    maskImage: "url(/logo.svg)",
+                    maskSize: "contain",
+                    maskRepeat: "no-repeat",
+                    maskPosition: "center",
+                  }}
+                />
+                <div className="flex flex-col">
+                  <div className="flex items-center gap-2">
+                    <span className="font-headline text-2xl font-bold tracking-tighter text-primary text-glow">
+                      {brand.name}
+                    </span>
+                    {brand.badge ? (
+                      <span className="rounded bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
+                        {brand.badge}
+                      </span>
+                    ) : null}
+                  </div>
+                  {brand.caption ? (
+                    <span className="font-headline text-[10px] uppercase tracking-[0.2em] text-slate-500">
+                      {brand.caption}
+                    </span>
+                  ) : null}
+                </div>
+              </>
+            ),
+          })}
+        </div>
+
+        <nav className="flex-1 space-y-1 px-2">
+          {navItems.map((item) => (
+            <Tooltip key={item.href}>
+              <TooltipTrigger
+                render={renderLink({
+                  href: item.href,
+                  onClick: () => onMobileOpenChange(false),
+                  className: cn(
+                    "flex items-center gap-3 rounded-lg px-4 py-2.5 font-headline text-sm tracking-tight transition-all duration-200",
+                    item.isActive
+                      ? "bg-card font-bold text-primary shadow-[inset_0_0_0_1px_rgba(79,242,255,0.08)]"
+                      : "text-slate-400 hover:bg-muted/50 hover:text-slate-200",
+                  ),
+                  children: (
+                    <>
+                      {item.icon}
+                      <span className="flex min-w-0 items-center gap-2">
+                        <span>{item.label}</span>
+                        {item.isLocked ? <LockIcon className="size-3.5 opacity-70" /> : null}
+                      </span>
+                    </>
+                  ),
+                })}
+              />
+              <TooltipContent side="right">{item.tooltip}</TooltipContent>
+            </Tooltip>
+          ))}
+        </nav>
+
+        <div className="px-4 pb-4">
+          {sidebarAction ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    type="button"
+                    disabled={sidebarAction.disabled}
+                    aria-disabled={sidebarAction.disabled}
+                    tabIndex={sidebarAction.disabled ? -1 : 0}
+                    title={sidebarAction.tooltip}
+                    onClick={sidebarAction.onClick}
+                    className={cn(
+                      "flex w-full items-center justify-center gap-2 rounded-xl border py-2.5 font-headline text-xs uppercase tracking-wider transition-colors",
+                      sidebarAction.disabled
+                        ? "cursor-not-allowed border-primary/15 bg-gradient-to-r from-primary/10 to-primary/5 text-primary/50 opacity-70"
+                        : "border-primary/30 bg-gradient-to-r from-primary/12 to-primary/6 text-primary hover:border-primary/50 hover:bg-primary/10",
+                    )}
+                  >
+                    {sidebarAction.icon}
+                    <span>{sidebarAction.label}</span>
+                  </button>
+                }
+              />
+              <TooltipContent side="right">{sidebarAction.tooltip}</TooltipContent>
+            </Tooltip>
+          ) : null}
+
+          {brand.footerLabel ? (
+            <div className="mt-3 flex items-center gap-2 px-4 py-1.5 font-headline text-[10px] uppercase tracking-widest text-slate-600">
+              <span className="size-1.5 animate-pulse rounded-full bg-primary shadow-[0_0_8px_rgba(79,242,255,0.4)]" />
+              <span>{brand.footerLabel}</span>
+            </div>
+          ) : null}
+        </div>
+
+        {sidebarUser ? (
+          <div className="border-t border-sidebar-border p-3">
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setUserMenuOpen((open) => !open)}
+                className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-sidebar-accent/50"
+              >
+                {sidebarUser.image ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={sidebarUser.image}
+                    alt={sidebarUser.name}
+                    className="size-9 rounded-full"
+                  />
+                ) : (
+                  <div className="flex size-9 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground">
+                    {getUserInitials(sidebarUser.name)}
+                  </div>
+                )}
+                <span className="min-w-0 flex-1 text-left">
+                  <span className="block truncate font-medium text-sidebar-foreground">
+                    {sidebarUser.name}
+                  </span>
+                  <span className="block truncate text-xs text-slate-500">
+                    {sidebarUser.subtitle ?? sidebarUser.email ?? "Signed in"}
+                  </span>
+                </span>
+                {onSignOut ? <ChevronDownIcon className="size-4" /> : null}
+              </button>
+
+              {userMenuOpen && onSignOut ? (
+                <div className="absolute bottom-full left-0 mb-2 w-full rounded-lg border border-border bg-popover py-1 shadow-lg">
+                  <button
+                    type="button"
+                    onClick={async () => {
+                      setUserMenuOpen(false);
+                      await onSignOut();
+                    }}
+                    className="flex w-full items-center gap-2 px-4 py-2 text-sm text-muted-foreground hover:bg-sidebar-accent/50"
+                  >
+                    <LogOutIcon className="size-4" />
+                    <span>Sign out</span>
+                  </button>
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+      </aside>
+    </>
+  );
+}

package/packages/dashboard-core/src/chrome/RuntimeBadge.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { cn } from "./utils";
+import type { RuntimeBadgeProps } from "./types";
+
+export function RuntimeBadge({
+  href,
+  label,
+  detail,
+  tone = "healthy",
+  renderLink,
+}: RuntimeBadgeProps) {
+  const toneClassName =
+    tone === "warning"
+      ? "text-amber-400 ring-amber-400/20 hover:bg-amber-400/8"
+      : tone === "critical"
+        ? "text-destructive ring-destructive/20 hover:bg-destructive/8"
+        : "text-primary ring-primary/20 hover:bg-primary/8";
+
+  const dotClassName =
+    tone === "warning"
+      ? "bg-amber-400"
+      : tone === "critical"
+        ? "bg-destructive"
+        : "animate-pulse bg-primary shadow-[0_0_8px_color-mix(in_srgb,var(--primary)_60%,transparent)]";
+
+  return (
+    <footer className="pointer-events-none fixed bottom-4 right-4 z-20">
+      {renderLink({
+        href,
+        className: cn(
+          "glass-panel pointer-events-auto flex items-center gap-2 rounded-full border border-foreground/5 px-3 py-2 font-headline text-[10px] uppercase tracking-[0.18em] text-slate-300 shadow-lg transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40",
+          toneClassName,
+        ),
+        children: (
+          <>
+            <span className={cn("size-1.5 rounded-full", dotClassName)} />
+            <span>{label}</span>
+            <span className="text-foreground/25">/</span>
+            <span className="text-slate-400">{detail}</span>
+          </>
+        ),
+      })}
+    </footer>
+  );
+}

package/packages/dashboard-core/src/chrome/index.ts

@@ -0,0 +1,14 @@
+export { DashboardChrome } from "./DashboardChrome";
+export { RuntimeBadge } from "./RuntimeBadge";
+export type {
+  DashboardBrand,
+  DashboardChromeAction,
+  DashboardChromeProps,
+  DashboardHeaderMeta,
+  DashboardLinkRenderer,
+  DashboardLinkRenderProps,
+  DashboardNavItem,
+  DashboardSearchItem,
+  RuntimeBadgeProps,
+  RuntimeBadgeTone,
+} from "./types";

package/packages/dashboard-core/src/chrome/types.ts

@@ -0,0 +1,81 @@
+import type { ReactElement, ReactNode } from "react";
+
+import type { DashboardUser } from "../host/index";
+
+export interface DashboardLinkRenderProps {
+  href: string;
+  className?: string;
+  children: ReactNode;
+  onClick?: () => void;
+}
+
+export type DashboardLinkRenderer = (props: DashboardLinkRenderProps) => ReactElement;
+
+export interface DashboardNavItem {
+  href: string;
+  label: string;
+  tooltip: string;
+  icon: ReactNode;
+  isActive: boolean;
+  isLocked?: boolean;
+}
+
+export interface DashboardSearchItem {
+  id: string;
+  group: string;
+  label: string;
+  meta?: string | null;
+  keywords?: readonly string[];
+  leading?: ReactNode;
+  trailing?: ReactNode;
+  onSelect(): void;
+}
+
+export interface DashboardHeaderMeta {
+  title: string;
+  icon?: ReactNode;
+  badge?: string;
+  backHref?: string | null;
+  backLabel?: string | null;
+}
+
+export interface DashboardBrand {
+  href: string;
+  name: string;
+  caption?: string;
+  badge?: string;
+  footerLabel?: string;
+}
+
+export interface DashboardChromeAction {
+  label: string;
+  tooltip: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  onClick?(): void;
+}
+
+export interface DashboardChromeProps {
+  brand: DashboardBrand;
+  navItems: DashboardNavItem[];
+  renderLink: DashboardLinkRenderer;
+  headerMeta: DashboardHeaderMeta;
+  searchItems?: DashboardSearchItem[];
+  headerUser?: DashboardUser;
+  sidebarUser?: DashboardUser;
+  sidebarAction?: DashboardChromeAction;
+  onSignOut?(): Promise<void> | void;
+  overlay?: ReactNode;
+  contentClassName?: string | null;
+  children: ReactNode;
+}
+
+export type RuntimeBadgeTone = "healthy" | "warning" | "critical";
+
+export interface RuntimeBadgeProps {
+  href: string;
+  label: string;
+  detail: string;
+  tone?: RuntimeBadgeTone;
+  renderLink: DashboardLinkRenderer;
+}

package/packages/dashboard-core/src/chrome/utils.ts

@@ -0,0 +1,23 @@
+import type { DashboardSearchItem } from "./types";
+
+export function cn(...values: Array<string | false | null | undefined>): string {
+  return values.filter(Boolean).join(" ");
+}
+
+export function getUserInitials(name: string): string {
+  const parts = name.trim().split(/\s+/).slice(0, 2);
+  return parts.map((part) => part.charAt(0).toUpperCase()).join("") || "?";
+}
+
+function normalize(value: string): string {
+  return value.trim().toLowerCase();
+}
+
+export function matchesSearchItem(item: DashboardSearchItem, query: string): boolean {
+  const needle = normalize(query);
+  if (!needle) return true;
+
+  const haystack = [item.label, item.meta ?? "", ...(item.keywords ?? [])].map(normalize).join(" ");
+
+  return haystack.includes(needle);
+}

package/packages/dashboard-core/src/gates/FeatureGate.tsx

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+
+interface FeatureGateProps {
+  enabled: boolean;
+  fallback?: ReactNode;
+  children: ReactNode;
+}
+
+export function FeatureGate({ enabled, fallback = null, children }: FeatureGateProps) {
+  return enabled ? <>{children}</> : <>{fallback}</>;
+}

package/packages/dashboard-core/src/gates/LockedRoute.tsx

@@ -0,0 +1,29 @@
+import { UpgradeCard } from "./UpgradeCard";
+
+interface LockedRouteProps {
+  eyebrow: string;
+  title: string;
+  description: string;
+  highlights?: readonly string[];
+  primaryAction: {
+    href: string;
+    label: string;
+  };
+  secondaryAction?: {
+    href: string;
+    label: string;
+  };
+  note?: string;
+}
+
+export function LockedRoute(props: LockedRouteProps) {
+  return (
+    <div className="@container/main flex flex-1 flex-col py-6">
+      <div className="grid grid-cols-12 gap-6 px-4 lg:px-6">
+        <div className="col-span-12">
+          <UpgradeCard {...props} />
+        </div>
+      </div>
+    </div>
+  );
+}