nextworks 0.2.0-alpha.11 → 0.2.0-alpha.13

package/dist/kits/blocks/components/sections/product-demo/ApprovalInboxPanel.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import type {
+  ProductDemoApprovalInboxState,
+  ProductDemoStatusTone,
+} from "./types";
+
+export interface ApprovalInboxPanelProps {
+  state: ProductDemoApprovalInboxState;
+}
+
+const STATUS_TONE_CLASSES: Record<ProductDemoStatusTone, string> = {
+  neutral: "border-border/60 bg-muted/55 text-muted-foreground",
+  info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+  success:
+    "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+  warning:
+    "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
+};
+
+function getStatusClass(tone: ProductDemoStatusTone = "neutral") {
+  return STATUS_TONE_CLASSES[tone];
+}
+
+export function ApprovalInboxPanel({ state }: ApprovalInboxPanelProps) {
+  return (
+    <div className="flex h-full flex-col gap-4">
+      <div className="space-y-1.5">
+        {state.title && (
+          <h4 className="text-sm font-semibold text-card-foreground">
+            {state.title}
+          </h4>
+        )}
+        {state.subtitle && (
+          <p className="text-xs leading-relaxed text-muted-foreground">
+            {state.subtitle}
+          </p>
+        )}
+      </div>
+
+      {state.counts?.length ? (
+        <div className="flex flex-wrap gap-2">
+          {state.counts.map((count) => (
+            <div
+              key={count.id}
+              className={cn(
+                "rounded-xl border px-3 py-2",
+                getStatusClass(count.tone),
+              )}
+            >
+              <div className="text-[10px] font-medium uppercase tracking-[0.14em] opacity-80">
+                {count.label}
+              </div>
+              <div className="mt-1 text-sm font-semibold">{count.value}</div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      <div className="space-y-3">
+        {state.items.map((item) => {
+          const isActive = item.id === state.activeItemId || item.highlighted;
+
+          return (
+            <div
+              key={item.id}
+              className={cn(
+                "rounded-2xl border border-border/60 bg-background/80 p-3",
+                isActive && "border-primary/45 bg-primary/6 shadow-sm",
+              )}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <div className="text-sm font-semibold text-card-foreground">
+                    {item.title}
+                  </div>
+                  {item.description && (
+                    <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+                      {item.description}
+                    </p>
+                  )}
+                </div>
+                {item.status && (
+                  <span
+                    className={cn(
+                      "rounded-full border px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em]",
+                      getStatusClass(item.status),
+                    )}
+                  >
+                    {item.status}
+                  </span>
+                )}
+              </div>
+
+              {(item.requester || item.priorityLabel || item.dueLabel) && (
+                <div className="mt-3 flex flex-wrap gap-2 text-[11px] text-muted-foreground">
+                  {item.requester && <span>By {item.requester}</span>}
+                  {item.priorityLabel && <span>{item.priorityLabel}</span>}
+                  {item.dueLabel && <span>{item.dueLabel}</span>}
+                </div>
+              )}
+
+              {item.actions?.length ? (
+                <div className="mt-3 flex flex-wrap gap-2">
+                  {item.actions.map((action) => (
+                    <span
+                      key={action.id}
+                      className={cn(
+                        "rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.14em]",
+                        getStatusClass(action.tone),
+                      )}
+                    >
+                      {action.label}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/dist/kits/blocks/components/sections/product-demo/DemoStage.tsx

@@ -0,0 +1,397 @@
+"use client";
+
+import React from "react";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+import { DemoWindow } from "./DemoWindow";
+import { ApprovalInboxPanel } from "./ApprovalInboxPanel";
+import { KnowledgePanel } from "./KnowledgePanel";
+import { RunConsolePanel } from "./RunConsolePanel";
+import { WorkflowStudioPanel } from "./WorkflowStudioPanel";
+import type {
+  ProductDemoHighlightTarget,
+  ProductDemoHighlightTone,
+  ProductDemoScenario,
+  ProductDemoStatusTone,
+  ProductDemoWindowKey,
+  ProductDemoWindowMeta,
+} from "./types";
+
+export interface DemoStageProps {
+  scenarios?: ProductDemoScenario[];
+  initialScenarioIndex?: number;
+  activeScenarioKey?: string;
+  autoCycle?: boolean;
+  cycleIntervalMs?: number;
+  className?: string;
+  enableMotion?: boolean;
+  ariaLabel?: string;
+}
+
+type WindowRenderData = {
+  key: ProductDemoWindowKey;
+  meta: ProductDemoWindowMeta;
+  content: React.ReactNode;
+};
+
+const WINDOW_ORDER: ProductDemoWindowKey[] = [
+  "workflowStudio",
+  "knowledgePanel",
+  "runConsole",
+  "approvalInbox",
+];
+
+const HIGHLIGHT_TONE_CLASSES: Record<ProductDemoHighlightTone, string> = {
+  neutral: "border-border/60 bg-muted/60 text-muted-foreground",
+  info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+  success:
+    "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+  warning:
+    "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
+  accent: "border-primary/35 bg-primary/10 text-primary",
+  muted: "border-border/60 bg-background/70 text-muted-foreground",
+};
+
+const STATUS_TONE_CLASSES: Record<ProductDemoStatusTone, string> = {
+  neutral: "border-border/60 bg-muted/55 text-muted-foreground",
+  info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+  success:
+    "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+  warning:
+    "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
+};
+
+function clampInitialScenarioIndex(index: number | undefined, count: number) {
+  if (count <= 0) {
+    return 0;
+  }
+
+  return Math.max(0, Math.min(index ?? 0, count - 1));
+}
+
+function getHighlightClass(tone: ProductDemoHighlightTone = "accent") {
+  return HIGHLIGHT_TONE_CLASSES[tone];
+}
+
+function getStatusClass(tone: ProductDemoStatusTone = "neutral") {
+  return STATUS_TONE_CLASSES[tone];
+}
+
+function useActiveScenario({
+  scenarios,
+  initialScenarioIndex,
+  activeScenarioKey,
+  autoCycle,
+  cycleIntervalMs,
+}: {
+  scenarios: ProductDemoScenario[];
+  initialScenarioIndex?: number;
+  activeScenarioKey?: string;
+  autoCycle?: boolean;
+  cycleIntervalMs?: number;
+}) {
+  const fallbackIndex = React.useMemo(
+    () => clampInitialScenarioIndex(initialScenarioIndex, scenarios.length),
+    [initialScenarioIndex, scenarios.length],
+  );
+
+  const keyedIndex = React.useMemo(() => {
+    if (!activeScenarioKey) {
+      return -1;
+    }
+
+    return scenarios.findIndex(
+      (scenario) => scenario.key === activeScenarioKey,
+    );
+  }, [activeScenarioKey, scenarios]);
+
+  const controlledIndex = keyedIndex >= 0 ? keyedIndex : fallbackIndex;
+  const [internalIndex, setInternalIndex] = React.useState(controlledIndex);
+  const activeIndex = activeScenarioKey ? controlledIndex : internalIndex;
+
+  React.useEffect(() => {
+    if (activeScenarioKey) {
+      setInternalIndex(controlledIndex);
+    }
+  }, [activeScenarioKey, controlledIndex]);
+
+  React.useEffect(() => {
+    if (activeScenarioKey || !autoCycle || scenarios.length <= 1) {
+      return;
+    }
+
+    const intervalMs = Math.max(cycleIntervalMs ?? 4500, 1200);
+    const timer = window.setInterval(() => {
+      setInternalIndex((currentIndex) => (currentIndex + 1) % scenarios.length);
+    }, intervalMs);
+
+    return () => window.clearInterval(timer);
+  }, [activeScenarioKey, autoCycle, cycleIntervalMs, scenarios.length]);
+
+  return scenarios[activeIndex] ?? scenarios[0];
+}
+
+function HighlightPills({
+  highlights,
+}: {
+  highlights?: ProductDemoHighlightTarget[];
+}) {
+  if (!highlights?.length) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {highlights.map((highlight) => (
+        <span
+          key={highlight.id}
+          className={cn(
+            "rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em]",
+            getHighlightClass(highlight.tone),
+          )}
+        >
+          {highlight.label ?? highlight.id}
+        </span>
+      ))}
+    </div>
+  );
+}
+
+function getWindowRenderData(
+  scenario: ProductDemoScenario,
+): WindowRenderData[] {
+  return [
+    {
+      key: "workflowStudio",
+      meta: scenario.workflowStudio.window,
+      content: (
+        <>
+          <HighlightPills highlights={scenario.workflowStudio.highlights} />
+          <WorkflowStudioPanel state={scenario.workflowStudio} />
+        </>
+      ),
+    },
+    {
+      key: "knowledgePanel",
+      meta: scenario.knowledgePanel.window,
+      content: (
+        <>
+          <HighlightPills highlights={scenario.knowledgePanel.highlights} />
+          <KnowledgePanel state={scenario.knowledgePanel} />
+        </>
+      ),
+    },
+    {
+      key: "runConsole",
+      meta: scenario.runConsole.window,
+      content: (
+        <>
+          <HighlightPills highlights={scenario.runConsole.highlights} />
+          <RunConsolePanel state={scenario.runConsole} />
+        </>
+      ),
+    },
+    {
+      key: "approvalInbox",
+      meta: scenario.approvalInbox.window,
+      content: (
+        <>
+          <HighlightPills highlights={scenario.approvalInbox.highlights} />
+          <ApprovalInboxPanel state={scenario.approvalInbox} />
+        </>
+      ),
+    },
+  ];
+}
+
+function getWindowShellClass(key: ProductDemoWindowKey) {
+  switch (key) {
+    case "workflowStudio":
+      return "lg:absolute lg:left-[2%] lg:top-[9%] lg:h-[66%] lg:w-[46%]";
+    case "knowledgePanel":
+      return "lg:absolute lg:left-[50%] lg:top-[10%] lg:h-[34%] lg:w-[30%] xl:left-[49%] xl:w-[29%]";
+    case "runConsole":
+      return "lg:absolute lg:left-[50%] lg:bottom-[10%] lg:h-[33%] lg:w-[32%] xl:left-[49%] xl:w-[31%]";
+    case "approvalInbox":
+      return "lg:absolute lg:right-[1%] lg:top-[17%] lg:h-[45%] lg:w-[24%] xl:right-[2%] xl:h-[44%] xl:w-[23%]";
+    default:
+      return "";
+  }
+}
+
+function getTransformStyle(
+  meta: ProductDemoWindowMeta,
+): React.CSSProperties | undefined {
+  const layoutHint = meta.layoutHint;
+
+  if (!layoutHint) {
+    return undefined;
+  }
+
+  const translateX = layoutHint.x ?? 0;
+  const translateY = layoutHint.y ?? 0;
+  const rotate = layoutHint.rotateDeg ?? 0;
+
+  return {
+    zIndex: layoutHint.zIndex,
+    transform: `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg)`,
+  };
+}
+
+export function DemoStage({
+  scenarios = [],
+  initialScenarioIndex,
+  activeScenarioKey,
+  autoCycle = false,
+  cycleIntervalMs = 4500,
+  className,
+  enableMotion = true,
+  ariaLabel = "Product demo stage",
+}: DemoStageProps) {
+  const activeScenario = useActiveScenario({
+    scenarios,
+    initialScenarioIndex,
+    activeScenarioKey,
+    autoCycle,
+    cycleIntervalMs,
+  });
+
+  const activeIndex = React.useMemo(() => {
+    if (!activeScenario) {
+      return 0;
+    }
+
+    return scenarios.findIndex(
+      (scenario) => scenario.key === activeScenario.key,
+    );
+  }, [activeScenario, scenarios]);
+
+  if (!activeScenario) {
+    return (
+      <div
+        data-product-demo-stage
+        className={cn(
+          "relative isolate min-h-[24rem] w-full overflow-hidden rounded-[2rem] border border-border/60 bg-gradient-to-br from-background via-background to-muted/40 shadow-2xl",
+          enableMotion &&
+            "transition-transform duration-300 hover:-translate-y-1 motion-reduce:transition-none",
+          className,
+        )}
+        aria-label={ariaLabel}
+      >
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.12),transparent_38%),linear-gradient(135deg,rgba(148,163,184,0.08),transparent_55%)]" />
+        <div className="absolute inset-4 rounded-[1.5rem] border border-dashed border-border/60 bg-background/70" />
+      </div>
+    );
+  }
+
+  const windows = getWindowRenderData(activeScenario).sort(
+    (a, b) => WINDOW_ORDER.indexOf(a.key) - WINDOW_ORDER.indexOf(b.key),
+  );
+
+  return (
+    <div
+      data-product-demo-stage
+      data-auto-cycle={autoCycle ? "true" : "false"}
+      data-enable-motion={enableMotion ? "true" : "false"}
+      data-scenario-count={scenarios.length}
+      data-active-scenario-key={activeScenario.key}
+      data-active-scenario-index={activeIndex}
+      data-cycle-interval-ms={cycleIntervalMs}
+      className={cn(
+        "relative isolate min-h-[30rem] w-full overflow-hidden rounded-[2rem] border border-border/60 bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.13),transparent_35%),linear-gradient(135deg,rgba(15,23,42,0.04),transparent_55%)] shadow-2xl",
+        className,
+      )}
+      aria-label={ariaLabel}
+    >
+      <div className="absolute inset-0 bg-gradient-to-br from-background via-background/96 to-muted/45" />
+      <div className="absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-primary/8 to-transparent" />
+
+      <div className="relative z-10 flex min-h-[30rem] flex-col gap-4 p-4 sm:p-5 lg:block lg:p-6">
+        <div className="flex flex-wrap items-center justify-between gap-3 pb-1">
+          <div>
+            {activeScenario.label && (
+              <div className="text-[11px] font-medium uppercase tracking-[0.18em] text-primary/80">
+                {activeScenario.label}
+              </div>
+            )}
+            {activeScenario.description && (
+              <p className="mt-1 max-w-xl text-xs leading-relaxed text-muted-foreground">
+                {activeScenario.description}
+              </p>
+            )}
+          </div>
+
+          <HighlightPills highlights={activeScenario.highlights} />
+        </div>
+
+        <div className="grid gap-4 lg:hidden">
+          {windows.map((windowData) => {
+            const activeWindow =
+              activeScenario.activeWindow === windowData.key ||
+              (!activeScenario.activeWindow &&
+                windowData.key === "workflowStudio");
+
+            return (
+              <DemoWindow
+                key={windowData.key}
+                window={windowData.meta}
+                active={activeWindow}
+                enableMotion={enableMotion}
+              >
+                {windowData.content}
+              </DemoWindow>
+            );
+          })}
+        </div>
+
+        <div className="hidden lg:block lg:h-[34rem] xl:h-[36rem]">
+          {windows.map((windowData) => {
+            const activeWindow =
+              activeScenario.activeWindow === windowData.key ||
+              (!activeScenario.activeWindow &&
+                windowData.key === "workflowStudio");
+
+            return (
+              <motion.div
+                key={windowData.key}
+                initial={
+                  enableMotion ? { opacity: 0, y: 18, scale: 0.98 } : false
+                }
+                animate={{
+                  opacity: 1,
+                  y: 0,
+                  scale: activeWindow ? 1 : 0.985,
+                }}
+                transition={
+                  enableMotion
+                    ? {
+                        type: "tween",
+                        duration: 0.45,
+                      }
+                    : { duration: 0 }
+                }
+                className={cn(
+                  "will-change-transform",
+                  getWindowShellClass(windowData.key),
+                )}
+                style={getTransformStyle(windowData.meta)}
+              >
+                <DemoWindow
+                  window={windowData.meta}
+                  active={activeWindow}
+                  dimmed={!activeWindow}
+                  enableMotion={enableMotion}
+                  className="h-full"
+                >
+                  {windowData.content}
+                </DemoWindow>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/kits/blocks/components/sections/product-demo/DemoWindow.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+import { cn } from "@/lib/utils";
+import type { ProductDemoStatusTone, ProductDemoWindowMeta } from "./types";
+
+export interface DemoWindowProps {
+  window: ProductDemoWindowMeta;
+  className?: string;
+  contentClassName?: string;
+  chromeClassName?: string;
+  bodyClassName?: string;
+  active?: boolean;
+  dimmed?: boolean;
+  enableMotion?: boolean;
+  showControls?: boolean;
+  showResizeHandle?: boolean;
+  children?: React.ReactNode;
+}
+
+const STATUS_TONE_CLASSES: Record<ProductDemoStatusTone, string> = {
+  neutral: "border-border/60 bg-muted/60 text-muted-foreground",
+  info: "border-sky-500/30 bg-sky-500/10 text-sky-600 dark:text-sky-300",
+  success:
+    "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300",
+  warning:
+    "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+  danger: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-300",
+};
+
+export function DemoWindow({
+  window,
+  className,
+  contentClassName,
+  chromeClassName,
+  bodyClassName,
+  active = false,
+  dimmed = false,
+  enableMotion = true,
+  showControls = true,
+  showResizeHandle = true,
+  children,
+}: DemoWindowProps) {
+  const statusTone = window.status?.tone ?? "neutral";
+
+  return (
+    <section
+      className={cn(
+        "group relative flex h-full min-h-[14rem] flex-col overflow-hidden rounded-[1.5rem] border border-border/60 bg-card/92 shadow-[0_18px_48px_-24px_rgba(15,23,42,0.45)] backdrop-blur-xl",
+        enableMotion &&
+          "transition-[transform,opacity,box-shadow,border-color] duration-500 ease-out motion-reduce:transition-none",
+        active &&
+          "border-primary/45 shadow-[0_24px_60px_-26px_rgba(59,130,246,0.45)]",
+        dimmed && "opacity-90",
+        className,
+      )}
+      data-product-demo-window={window.key}
+      data-active={active ? "true" : "false"}
+      aria-label={window.title}
+    >
+      <header
+        className={cn(
+          "relative flex items-start justify-between gap-3 border-b border-border/50 px-4 py-3 sm:px-5",
+          chromeClassName,
+        )}
+      >
+        <div className="flex items-start gap-3">
+          {showControls && (
+            <div className="mt-1 flex items-center gap-1.5 opacity-75 transition-opacity duration-200 group-hover:opacity-100">
+              <span className="h-2.5 w-2.5 rounded-full bg-rose-400/90" />
+              <span className="h-2.5 w-2.5 rounded-full bg-amber-400/90" />
+              <span className="h-2.5 w-2.5 rounded-full bg-emerald-400/90" />
+            </div>
+          )}
+
+          <div className="min-w-0">
+            <div className="flex flex-wrap items-center gap-2">
+              <h3 className="truncate text-sm font-semibold text-card-foreground sm:text-[0.95rem]">
+                {window.title}
+              </h3>
+              {window.badge && (
+                <span className="rounded-full border border-border/60 bg-muted/70 px-2 py-0.5 text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                  {window.badge}
+                </span>
+              )}
+            </div>
+            {window.subtitle && (
+              <p className="mt-1 truncate text-xs text-muted-foreground sm:text-[0.8rem]">
+                {window.subtitle}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {window.status?.label && (
+          <span
+            className={cn(
+              "shrink-0 rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.16em]",
+              STATUS_TONE_CLASSES[statusTone],
+            )}
+          >
+            {window.status.label}
+          </span>
+        )}
+      </header>
+
+      <div
+        className={cn(
+          "relative flex-1 px-4 py-4 sm:px-5 sm:py-5",
+          bodyClassName,
+        )}
+      >
+        <div className={cn("h-full", contentClassName)}>{children}</div>
+
+        {showResizeHandle && (
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute bottom-3 right-3 h-4 w-4 opacity-0 transition-opacity duration-200 group-hover:opacity-70"
+          >
+            <span className="absolute bottom-0 right-0 h-px w-3 rotate-45 bg-border/80" />
+            <span className="absolute bottom-1 right-0 h-px w-2 rotate-45 bg-border/70" />
+            <span className="absolute bottom-0 right-1 h-px w-2 rotate-45 bg-border/60" />
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}