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

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

@@ -0,0 +1,127 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import type {
+  ProductDemoKnowledgePanelState,
+  ProductDemoStatusTone,
+} from "./types";
+
+export interface KnowledgePanelProps {
+  state: ProductDemoKnowledgePanelState;
+}
+
+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 KnowledgePanel({ state }: KnowledgePanelProps) {
+  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.query && (
+        <div className="rounded-xl border border-primary/25 bg-primary/8 px-3 py-2 text-xs text-primary">
+          {state.query}
+        </div>
+      )}
+
+      {state.summary && (
+        <p className="text-xs leading-relaxed text-muted-foreground">
+          {state.summary}
+        </p>
+      )}
+
+      {state.sources?.length ? (
+        <div className="flex flex-wrap gap-2">
+          {state.sources.map((source) => (
+            <span
+              key={source.id}
+              className={cn(
+                "rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.14em]",
+                getStatusClass(source.status),
+              )}
+            >
+              {source.label}
+              {source.kind ? ` • ${source.kind}` : ""}
+            </span>
+          ))}
+        </div>
+      ) : null}
+
+      <div className="space-y-3">
+        {state.snippets.map((snippet) => {
+          const isActive =
+            snippet.id === state.activeSnippetId || snippet.highlighted;
+          const source = state.sources?.find(
+            (item) => item.id === snippet.sourceId,
+          );
+
+          return (
+            <div
+              key={snippet.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">
+                    {snippet.title}
+                  </div>
+                  {(snippet.excerptLabel || source?.label) && (
+                    <div className="mt-1 text-[11px] text-muted-foreground">
+                      {[snippet.excerptLabel, source?.label]
+                        .filter(Boolean)
+                        .join(" • ")}
+                    </div>
+                  )}
+                </div>
+                {snippet.confidence && (
+                  <span className="rounded-full border border-border/60 bg-muted/60 px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em] text-muted-foreground">
+                    {snippet.confidence}
+                  </span>
+                )}
+              </div>
+              <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+                {snippet.content}
+              </p>
+              {snippet.tags?.length ? (
+                <div className="mt-3 flex flex-wrap gap-2">
+                  {snippet.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="rounded-full border border-border/60 bg-background/70 px-2 py-0.5 text-[10px] text-muted-foreground"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,150 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import type {
+  ProductDemoRunConsoleState,
+  ProductDemoStatusTone,
+} from "./types";
+
+export interface RunConsolePanelProps {
+  state: ProductDemoRunConsoleState;
+}
+
+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];
+}
+
+function getProgressPercent(value: number | undefined) {
+  if (typeof value !== "number" || Number.isNaN(value)) {
+    return undefined;
+  }
+
+  return Math.min(100, Math.max(0, value));
+}
+
+export function RunConsolePanel({ state }: RunConsolePanelProps) {
+  const progressPercent = getProgressPercent(state.progressPercent);
+
+  return (
+    <div className="flex h-full flex-col gap-4">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <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.statusLabel || state.progressLabel) && (
+          <div className="space-y-1 text-right">
+            {state.statusLabel && (
+              <div className="text-[11px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                {state.statusLabel}
+              </div>
+            )}
+            {state.progressLabel && (
+              <div className="text-sm font-semibold text-card-foreground">
+                {state.progressLabel}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {typeof progressPercent === "number" ? (
+        <div className="space-y-2">
+          <div className="h-2 overflow-hidden rounded-full bg-muted/70">
+            <div
+              className="h-full rounded-full bg-primary transition-[width] duration-500"
+              style={{ width: `${progressPercent}%` }}
+            />
+          </div>
+          <div className="text-[11px] text-muted-foreground">
+            {progressPercent}% complete
+          </div>
+        </div>
+      ) : null}
+
+      {state.metrics?.length ? (
+        <div className="grid grid-cols-2 gap-2">
+          {state.metrics.map((metric) => (
+            <div
+              key={metric.id}
+              className={cn(
+                "rounded-xl border px-3 py-2",
+                getStatusClass(metric.tone),
+              )}
+            >
+              <div className="text-[10px] font-medium uppercase tracking-[0.14em] opacity-80">
+                {metric.label}
+              </div>
+              <div className="mt-1 text-sm font-semibold">{metric.value}</div>
+            </div>
+          ))}
+        </div>
+      ) : null}
+
+      <div className="space-y-2">
+        {state.entries.map((entry) => {
+          const isActive =
+            entry.id === state.activeEntryId || entry.highlighted;
+
+          return (
+            <div
+              key={entry.id}
+              className={cn(
+                "rounded-xl border border-border/60 bg-background/70 px-3 py-2.5",
+                isActive && "border-primary/40 bg-primary/6",
+              )}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm text-card-foreground">
+                    {entry.message}
+                  </div>
+                  {(entry.source || entry.timestamp) && (
+                    <div className="mt-1 text-[11px] text-muted-foreground">
+                      {[entry.source, entry.timestamp]
+                        .filter(Boolean)
+                        .join(" • ")}
+                    </div>
+                  )}
+                  {entry.detail && (
+                    <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+                      {entry.detail}
+                    </p>
+                  )}
+                </div>
+                {entry.status && (
+                  <span
+                    className={cn(
+                      "rounded-full border px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em]",
+                      getStatusClass(entry.status),
+                    )}
+                  >
+                    {entry.status}
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,191 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import type {
+  ProductDemoStatusTone,
+  ProductDemoWorkflowRegion,
+  ProductDemoWorkflowStudioState,
+} from "./types";
+
+export interface WorkflowStudioPanelProps {
+  state: ProductDemoWorkflowStudioState;
+}
+
+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];
+}
+
+function getRegionState(
+  region: ProductDemoWorkflowRegion,
+  activeRegionId: string | undefined,
+) {
+  const isActive = region.id === activeRegionId || region.active;
+  const isHighlighted = region.highlighted || isActive;
+
+  return { isActive, isHighlighted };
+}
+
+export function WorkflowStudioPanel({ state }: WorkflowStudioPanelProps) {
+  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.regions?.length ? (
+        <div className="grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+          {state.regions.map((region) => {
+            const { isActive, isHighlighted } = getRegionState(
+              region,
+              state.activeRegionId,
+            );
+
+            return (
+              <div
+                key={region.id}
+                className={cn(
+                  "rounded-2xl border border-border/60 bg-background/75 p-3",
+                  isActive && "border-primary/45 bg-primary/8 shadow-sm",
+                  isHighlighted && "ring-1 ring-primary/20",
+                )}
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                      Region
+                    </div>
+                    <div className="mt-1 text-sm font-semibold text-card-foreground">
+                      {region.label}
+                    </div>
+                  </div>
+                  {region.status && (
+                    <span
+                      className={cn(
+                        "rounded-full border px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em]",
+                        getStatusClass(region.status),
+                      )}
+                    >
+                      {region.status}
+                    </span>
+                  )}
+                </div>
+                {region.description && (
+                  <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+                    {region.description}
+                  </p>
+                )}
+                {region.nodeIds?.length ? (
+                  <div className="mt-3 flex flex-wrap gap-1.5">
+                    {region.nodeIds.map((nodeId) => {
+                      const node = state.nodes.find(
+                        (item) => item.id === nodeId,
+                      );
+
+                      return (
+                        <span
+                          key={nodeId}
+                          className="rounded-full border border-border/60 bg-background/80 px-2 py-0.5 text-[10px] text-muted-foreground"
+                        >
+                          {node?.label ?? nodeId}
+                        </span>
+                      );
+                    })}
+                  </div>
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      ) : null}
+
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        {state.nodes.map((node) => {
+          const isActive = node.id === state.activeNodeId || node.active;
+
+          return (
+            <div
+              key={node.id}
+              className={cn(
+                "rounded-2xl border border-border/60 bg-background/80 p-3 shadow-sm",
+                isActive && "border-primary/45 bg-primary/6 shadow-md",
+                node.emphasized && "ring-1 ring-primary/30",
+              )}
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <div className="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">
+                    {node.type ?? "step"}
+                  </div>
+                  <div className="mt-1 text-sm font-semibold text-card-foreground">
+                    {node.label}
+                  </div>
+                </div>
+                {node.status && (
+                  <span
+                    className={cn(
+                      "rounded-full border px-2 py-1 text-[10px] font-medium uppercase tracking-[0.14em]",
+                      getStatusClass(node.status),
+                    )}
+                  >
+                    {node.status}
+                  </span>
+                )}
+              </div>
+              {node.description && (
+                <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+                  {node.description}
+                </p>
+              )}
+              {node.metadata && (
+                <div className="mt-3 text-[11px] text-muted-foreground/90">
+                  {node.metadata}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {state.branches?.length ? (
+        <div className="rounded-2xl border border-dashed border-border/60 bg-background/60 p-3">
+          <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-muted-foreground">
+            Transitions
+          </div>
+          <div className="mt-3 flex flex-wrap gap-2">
+            {state.branches.map((branch) => (
+              <div
+                key={branch.id}
+                className={cn(
+                  "rounded-full border px-2.5 py-1 text-[10px] font-medium uppercase tracking-[0.14em]",
+                  getStatusClass(branch.status),
+                  branch.active &&
+                    "border-primary/45 bg-primary/10 text-primary",
+                )}
+              >
+                {branch.label ?? `${branch.fromNodeId} → ${branch.toNodeId}`}
+              </div>
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/dist/kits/blocks/components/sections/product-demo/types.ts

@@ -0,0 +1,193 @@
+export type ProductDemoStatusTone =
+  | "neutral"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger";
+
+export type ProductDemoHighlightTone =
+  | ProductDemoStatusTone
+  | "accent"
+  | "muted";
+
+export type ProductDemoWindowKey =
+  | "workflowStudio"
+  | "runConsole"
+  | "approvalInbox"
+  | "knowledgePanel";
+
+export interface ProductDemoWindowStatus {
+  label: string;
+  tone?: ProductDemoStatusTone;
+}
+
+export interface ProductDemoWindowLayoutHint {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  zIndex?: number;
+  rotateDeg?: number;
+}
+
+export interface ProductDemoWindowMeta {
+  key: ProductDemoWindowKey;
+  title: string;
+  subtitle?: string;
+  status?: ProductDemoWindowStatus;
+  badge?: string;
+  layoutHint?: ProductDemoWindowLayoutHint;
+}
+
+export interface ProductDemoHighlightTarget {
+  id: string;
+  label?: string;
+  tone?: ProductDemoHighlightTone;
+}
+
+export interface ProductDemoWorkflowNode {
+  id: string;
+  label: string;
+  description?: string;
+  type?: string;
+  status?: ProductDemoStatusTone;
+  active?: boolean;
+  emphasized?: boolean;
+  metadata?: string;
+}
+
+export interface ProductDemoWorkflowBranch {
+  id: string;
+  fromNodeId: string;
+  toNodeId: string;
+  label?: string;
+  status?: ProductDemoStatusTone;
+  active?: boolean;
+}
+
+export interface ProductDemoWorkflowRegion {
+  id: string;
+  label: string;
+  description?: string;
+  status?: ProductDemoStatusTone;
+  nodeIds?: string[];
+  active?: boolean;
+  highlighted?: boolean;
+}
+
+export interface ProductDemoWorkflowStudioState {
+  window: ProductDemoWindowMeta;
+  title?: string;
+  subtitle?: string;
+  nodes: ProductDemoWorkflowNode[];
+  branches?: ProductDemoWorkflowBranch[];
+  regions?: ProductDemoWorkflowRegion[];
+  activeNodeId?: string;
+  activeRegionId?: string;
+  highlights?: ProductDemoHighlightTarget[];
+}
+
+export interface ProductDemoRunConsoleEntry {
+  id: string;
+  message: string;
+  timestamp?: string;
+  source?: string;
+  status?: ProductDemoStatusTone;
+  detail?: string;
+  highlighted?: boolean;
+}
+
+export interface ProductDemoRunConsoleMetric {
+  id: string;
+  label: string;
+  value: string;
+  tone?: ProductDemoStatusTone;
+}
+
+export interface ProductDemoRunConsoleState {
+  window: ProductDemoWindowMeta;
+  title?: string;
+  subtitle?: string;
+  statusLabel?: string;
+  progressLabel?: string;
+  entries: ProductDemoRunConsoleEntry[];
+  metrics?: ProductDemoRunConsoleMetric[];
+  progressPercent?: number;
+  activeEntryId?: string;
+  highlights?: ProductDemoHighlightTarget[];
+}
+
+export interface ProductDemoApprovalAction {
+  id: string;
+  label: string;
+  tone?: ProductDemoStatusTone;
+}
+
+export interface ProductDemoApprovalItem {
+  id: string;
+  title: string;
+  description?: string;
+  requester?: string;
+  status?: ProductDemoStatusTone;
+  priorityLabel?: string;
+  dueLabel?: string;
+  actions?: ProductDemoApprovalAction[];
+  highlighted?: boolean;
+}
+
+export interface ProductDemoApprovalInboxState {
+  window: ProductDemoWindowMeta;
+  title?: string;
+  subtitle?: string;
+  counts?: Array<{
+    id: string;
+    label: string;
+    value: string;
+    tone?: ProductDemoStatusTone;
+  }>;
+  items: ProductDemoApprovalItem[];
+  activeItemId?: string;
+  highlights?: ProductDemoHighlightTarget[];
+}
+
+export interface ProductDemoKnowledgeSource {
+  id: string;
+  label: string;
+  kind?: string;
+  status?: ProductDemoStatusTone;
+}
+
+export interface ProductDemoKnowledgeSnippet {
+  id: string;
+  title: string;
+  content: string;
+  sourceId?: string;
+  confidence?: string;
+  excerptLabel?: string;
+  tags?: string[];
+  highlighted?: boolean;
+}
+
+export interface ProductDemoKnowledgePanelState {
+  window: ProductDemoWindowMeta;
+  title?: string;
+  subtitle?: string;
+  query?: string;
+  summary?: string;
+  sources?: ProductDemoKnowledgeSource[];
+  snippets: ProductDemoKnowledgeSnippet[];
+  activeSnippetId?: string;
+  highlights?: ProductDemoHighlightTarget[];
+}
+
+export interface ProductDemoScenario {
+  key: string;
+  label?: string;
+  description?: string;
+  workflowStudio: ProductDemoWorkflowStudioState;
+  runConsole: ProductDemoRunConsoleState;
+  approvalInbox: ProductDemoApprovalInboxState;
+  knowledgePanel: ProductDemoKnowledgePanelState;
+  activeWindow?: ProductDemoWindowKey;
+  highlights?: ProductDemoHighlightTarget[];
+}

package/dist/kits/blocks/components/theme-provider.tsx

@@ -1 +1 @@
-export { ThemeProvider } from "@nextworks/blocks-core";
+export { ThemeProvider } from "@nextworks/blocks-core";