ai-design-system 0.1.35 → 0.1.36

package/components/ai-elements/edge.tsx

@@ -1,12 +1,8 @@
 import {
   BaseEdge,
   type EdgeProps,
-  getBezierPath,
   getSimpleBezierPath,
-  type InternalNode,
-  type Node,
-  Position,
-  useInternalNode,
+  getSmoothStepPath,
 } from "@xyflow/react";
 
 const Temporary = ({
@@ -39,97 +35,49 @@ const Temporary = ({
   );
 };
 
-const getHandleCoordsByPosition = (
-  node: InternalNode<Node>,
-  handlePosition: Position,
-  handleType: "source" | "target"
-) => {
-  const handle = node.internals.handleBounds?.[handleType]?.find(
-    (h) => h.position === handlePosition
-  );
-
-  if (!handle) {
-    return [0, 0] as const;
-  }
-
-  let offsetX = handle.width / 2;
-  let offsetY = handle.height / 2;
-
-  switch (handlePosition) {
-    case Position.Left:
-      offsetX = 0;
-      break;
-    case Position.Right:
-      offsetX = handle.width;
-      break;
-    case Position.Top:
-      offsetY = 0;
-      break;
-    case Position.Bottom:
-      offsetY = handle.height;
-      break;
-    default:
-      throw new Error(`Invalid handle position: ${handlePosition}`);
-  }
-
-  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
-  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
-
-  return [x, y] as const;
-};
-
-const getEdgeParams = (
-  source: InternalNode<Node>,
-  target: InternalNode<Node>
-) => {
-  const sx = source.internals.positionAbsolute.x + (source.measured?.width ?? 0) / 2;
-  const sy = source.internals.positionAbsolute.y + (source.measured?.height ?? 0) / 2;
-  const tx = target.internals.positionAbsolute.x + (target.measured?.width ?? 0) / 2;
-  const ty = target.internals.positionAbsolute.y + (target.measured?.height ?? 0) / 2;
-
-  const dx = tx - sx;
-  const dy = ty - sy;
-
-  // Pick source/target positions based on dominant direction
-  let sourcePos: Position;
-  let targetPos: Position;
-
-  if (Math.abs(dx) > Math.abs(dy)) {
-    // Horizontal dominant
-    sourcePos = dx > 0 ? Position.Right : Position.Left;
-    targetPos = dx > 0 ? Position.Left : Position.Right;
-  } else {
-    // Vertical dominant
-    sourcePos = dy > 0 ? Position.Bottom : Position.Top;
-    targetPos = dy > 0 ? Position.Top : Position.Bottom;
-  }
-
-  const [srcX, srcY] = getHandleCoordsByPosition(source, sourcePos, "source");
-  const [tgtX, tgtY] = getHandleCoordsByPosition(target, targetPos, "target");
+const Strict = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style,
+}: EdgeProps) => {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 0,
+  });
 
-  return { sx: srcX, sy: srcY, tx: tgtX, ty: tgtY, sourcePos, targetPos };
+  return <BaseEdge id={id} markerEnd={markerEnd} path={edgePath} style={style} />;
 };
 
-const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
-  const sourceNode = useInternalNode(source);
-  const targetNode = useInternalNode(target);
-
-  if (!(sourceNode && targetNode)) {
-    return null;
-  }
-
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
-    sourceNode,
-    targetNode
-  );
-
-  const [edgePath] = getBezierPath({
-    sourceX: sx,
-    sourceY: sy,
-    sourcePosition: sourcePos,
-    targetX: tx,
-    targetY: ty,
-    targetPosition: targetPos,
+const Animated = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style,
+}: EdgeProps) => {
+  const [edgePath] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    borderRadius: 0,
   });
 
   return (
@@ -143,6 +91,7 @@ const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
 };
 
 export const Edge = {
+  Strict,
   Temporary,
   Animated,
 };

package/components/ai-elements/node.tsx

@@ -23,7 +23,7 @@ export type NodeProps = ComponentProps<typeof Card> & {
 export const Node = ({ handles, className, status, ...props }: NodeProps) => (
   <Card
     className={cn(
-      "node-container relative size-full h-auto w-sm gap-0 rounded-md bg-card p-0 transition-all duration-200",
+      "node-container relative h-[52px] w-[180px] gap-0 overflow-hidden rounded-md bg-card p-0 transition-all duration-200",
       status === "success" && "border-green-500 border-2",
       status === "error" && "border-red-500 border-2",
       className

package/components/blocks/DataTable/DataTable.tsx

@@ -6,20 +6,23 @@ import {
   type DashboardRow,
   type DashboardTableActionHandlers,
 } from "@/components/composites/DataTable"
+import type { DynamicTableSchema } from "ui-schema-contracts"
 import { Button } from "@/components/primitives/Button"
 
 export interface DataTableProps {
   rows: DashboardRow[]
+  tableSchema: DynamicTableSchema
   handlers?: DashboardTableActionHandlers
   onCreateClick?: () => void
   createButtonLabel?: string
 }
 
-export const DataTable = React.memo<DataTableProps>(({ rows, handlers, onCreateClick, createButtonLabel }) => {
+export const DataTable = React.memo<DataTableProps>(({ rows, tableSchema, handlers, onCreateClick, createButtonLabel }) => {
   return (
     <section className="px-4 lg:px-6">
       <EnhancedDataTable
         data={rows}
+        tableSchema={tableSchema}
         handlers={handlers}
         onCreateClick={onCreateClick ?? handlers?.onCreateClick ?? handlers?.onAddSection}
         createButtonLabel={createButtonLabel}

package/components/blocks/FormReportsSection/FormReportsSection.tsx

@@ -5,6 +5,7 @@ import {
   type FormReportsEntity,
   type FormReportsRowAction,
   type FormReportsTableHandlers,
+  type DashboardPaginationState,
 } from "@/components/composites/FormReports"
 
 export interface FormReportsSectionProps {
@@ -13,6 +14,7 @@ export interface FormReportsSectionProps {
   items: FormReportsEntity[]
   columns: FormReportsColumn[]
   rowActions?: FormReportsRowAction[]
+  pagination?: DashboardPaginationState
   tableHandlers?: FormReportsTableHandlers
   tableLeftActions?: React.ReactNode
 }
@@ -24,6 +26,7 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
     items,
     columns,
     rowActions,
+    pagination,
     tableHandlers,
     tableLeftActions,
   }) => {
@@ -33,6 +36,7 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
           items={items}
           columns={columns}
           rowActions={rowActions}
+          pagination={pagination}
           handlers={tableHandlers}
           leftActions={tableLeftActions}
           onCreateClick={onCreateClick}

package/components/blocks/InboxPanel/InboxPanel.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite"
+
+import { InboxPanel } from "./InboxPanel"
+
+const items = Array.from({ length: 30 }).map((_, index) => ({
+  id: `item-${index + 1}`,
+  title: `Item ${index + 1}`,
+  subtitle: "completed • 12s • retries 0",
+  preview: "Inbox-style preview text for validating panel-level vertical scrolling behavior.",
+  timestamp: `${index + 1}m ago`,
+  badge: index % 3 === 0 ? "running" : "completed",
+}))
+
+const meta = {
+  title: "Blocks/InboxPanel",
+  component: InboxPanel,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof InboxPanel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items,
+    selectedItemId: "item-2",
+  },
+  render: (args) => (
+    <div className="h-[720px]">
+      <InboxPanel {...args} />
+    </div>
+  ),
+}
+
+export const Empty: Story = {
+  args: {
+    items: [],
+    emptyMessage: "No matching items.",
+  },
+  render: (args) => (
+    <div className="h-[720px]">
+      <InboxPanel {...args} />
+    </div>
+  ),
+}

package/components/blocks/InboxPanel/InboxPanel.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+
+import { InboxList, type InboxListItem } from "@/components/composites/InboxList"
+import { Input } from "@/components/primitives/Input"
+
+export interface InboxPanelProps {
+  items: InboxListItem[]
+  selectedItemId?: string | null
+  onSelectItem?: (itemId: string) => void
+  searchQuery?: string
+  onSearchQueryChange?: (value: string) => void
+  searchPlaceholder?: string
+  isLoading?: boolean
+  emptyMessage?: string
+  className?: string
+}
+
+export const InboxPanel = React.memo<InboxPanelProps>(
+  ({
+    items,
+    selectedItemId,
+    onSelectItem,
+    searchQuery = "",
+    onSearchQueryChange,
+    searchPlaceholder = "Type to search...",
+    isLoading = false,
+    emptyMessage,
+    className,
+  }) => {
+    return (
+      <section className={`flex min-h-0 flex-1 flex-col overflow-hidden ${className ?? ""}`}>
+        <div className="p-4">
+          <Input
+            aria-label="Search inbox items"
+            className="h-8"
+            onChange={(event) => onSearchQueryChange?.(event.target.value)}
+            placeholder={searchPlaceholder}
+            value={searchQuery}
+          />
+        </div>
+
+        <InboxList
+          className="min-h-0 flex-1"
+          emptyMessage={emptyMessage}
+          isLoading={isLoading}
+          items={items}
+          onSelectItem={onSelectItem}
+          selectedItemId={selectedItemId}
+        />
+      </section>
+    )
+  }
+)
+
+InboxPanel.displayName = "InboxPanel"

package/components/blocks/InboxPanel/index.ts

@@ -0,0 +1,2 @@
+export { InboxPanel } from "./InboxPanel"
+export type { InboxPanelProps } from "./InboxPanel"

package/components/blocks/SectionLayout/SectionLayout.stories.tsx

@@ -1,6 +1,32 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { SectionLayout } from './SectionLayout'
 
+function ScrollablePanelContent({
+  description,
+  items,
+  title,
+}: {
+  description: string
+  items: string[]
+  title: string
+}) {
+  return (
+    <div className="flex min-h-0 flex-col gap-3 rounded-lg border bg-muted p-4">
+      <div>
+        <h3 className="mb-1 font-medium">{title}</h3>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+      <div className="grid gap-2">
+        {items.map((item, index) => (
+          <div key={`${title}-${index}`} className="rounded-md border bg-background px-3 py-2 text-sm">
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 /**
  * SectionLayout Block Stories
  *
@@ -274,3 +300,83 @@ export const AccentDragHandles: Story = {
     )
   },
 }
+
+/**
+ * Independent Panel Scrolling
+ *
+ * Demonstrates that each panel owns its own vertical scroll region.
+ */
+export const IndependentPanelScrolling: Story = {
+  render: () => {
+    const leftItems = Array.from({ length: 24 }, (_, index) => `Run record ${index + 1}`)
+    const centerItems = Array.from({ length: 18 }, (_, index) => `Trace span ${index + 1}`)
+    const rightItems = Array.from({ length: 20 }, (_, index) => `Details block ${index + 1}`)
+
+    const sections = [
+      {
+        id: 'left-scroll-panel',
+        content: (
+          <ScrollablePanelContent
+            title="Left Panel"
+            description="Scroll this panel independently. The center and right panels should keep their own scroll positions."
+            items={leftItems}
+          />
+        ),
+        defaultSize: 25,
+        minSize: 20,
+        header: {
+          tabs: [{ value: 'runs', label: 'runs' }],
+          defaultTab: 'runs',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'center-scroll-panel',
+        content: (
+          <ScrollablePanelContent
+            title="Center Panel"
+            description="This panel should keep a separate scrollbar from the left list and the right details column."
+            items={centerItems}
+          />
+        ),
+        defaultSize: 50,
+        minSize: 35,
+        header: {
+          tabs: [{ value: 'trace', label: 'trace' }],
+          defaultTab: 'trace',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+      {
+        id: 'right-scroll-panel',
+        content: (
+          <ScrollablePanelContent
+            title="Right Panel"
+            description="Use this to confirm the details panel can overflow and scroll without affecting the other panels."
+            items={rightItems}
+          />
+        ),
+        defaultSize: 25,
+        minSize: 20,
+        header: {
+          tabs: [{ value: 'details', label: 'details' }],
+          defaultTab: 'details',
+          showSidebarToggle: false,
+          showTitle: false,
+        },
+      },
+    ]
+
+    return (
+      <div className="h-screen p-4">
+        <SectionLayout
+          sections={sections}
+          storageKey="section-layout-independent-scroll"
+          dragHandleColor="primary"
+        />
+      </div>
+    )
+  },
+}

package/components/blocks/SectionLayout/SectionLayout.tsx

@@ -18,6 +18,7 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     orientation = "horizontal",
     storageKey,
     onSectionResize,
+    resizable = true,
     dragHandleColor = "border",
     className,
     ...props 
@@ -25,12 +26,13 @@ export const SectionLayout = React.memo<SectionLayoutProps>(
     // Transform sections to include headers
     const transformedSections = sections.map(section => ({
       ...section,
+      resizable,
       content: (
-        <div className="h-full flex flex-col">
+        <div className="h-full min-h-0 flex flex-col overflow-hidden">
           {section.header && (
             <AppHeader {...section.header} />
           )}
-          <div className="flex-1">
+          <div className="min-h-0 flex-1 overflow-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
             {section.content}
           </div>
         </div>

package/components/blocks/SectionLayout/interfaces.ts

@@ -4,6 +4,7 @@ import type { AppHeaderProps } from "@/components/composites/AppHeader/interface
 export interface SectionLayoutSection {
   id: string;
   content: React.ReactNode;
+  fixedSize?: string;
   defaultSize?: number;
   minSize?: number;
   maxSize?: number;
@@ -17,5 +18,6 @@ export interface SectionLayoutProps extends React.ComponentPropsWithoutRef<"div"
   orientation?: "horizontal" | "vertical";
   storageKey?: string;
   onSectionResize?: (sectionId: string, newSize: number) => void;
+  resizable?: boolean;
   dragHandleColor?: "primary" | "secondary" | "accent" | "border" | "muted";
 }

package/components/blocks/WorkflowCanvas/WorkflowCanvas.tsx

@@ -24,6 +24,7 @@ import type { WorkflowCanvasProps, WorkflowEdge } from "./interfaces";
 import "@xyflow/react/dist/style.css";
 
 const edgeTypes = {
+  straight: Edge.Strict,
   animated: Edge.Animated,
   temporary: Edge.Temporary,
 };

package/components/blocks/index.ts

@@ -32,3 +32,6 @@ export type { DataTableProps } from './DataTable'
 
 export { FormReportsSection } from './FormReportsSection'
 export type { FormReportsSectionProps } from './FormReportsSection'
+
+export { InboxPanel } from './InboxPanel'
+export type { InboxPanelProps } from './InboxPanel'

package/components/composites/AdjustableLayout/AdjustableLayout.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils"
 export interface AdjustableLayoutSection {
   id: string
   content: React.ReactNode
+  fixedSize?: string // CSS size value, e.g. "16rem"
   defaultSize?: number // percentage (0-100)
   minSize?: number // minimum percentage
   maxSize?: number // maximum percentage
@@ -168,18 +169,31 @@ export const AdjustableLayout = React.memo<AdjustableLayoutProps>(
     }, [draggingIndex, handleMouseMove, handleMouseUp])
 
     const renderPanel = (section: AdjustableLayoutSection, size: number, index: number) => {
+      const nextSection = sections[index + 1]
       // Drag handles should be between panels, so only show for panels that aren't the last one
-      const isResizable = section.resizable !== false && sections.length > 1 && index < sections.length - 1
+      const isResizable =
+        section.resizable !== false &&
+        sections.length > 1 &&
+        index < sections.length - 1 &&
+        !section.fixedSize &&
+        !nextSection?.fixedSize
+
+      const fixedStyle = section.fixedSize
+        ? orientation === "horizontal"
+          ? { flex: `0 0 ${section.fixedSize}`, width: section.fixedSize, minWidth: section.fixedSize }
+          : { flex: `0 0 ${section.fixedSize}`, height: section.fixedSize, minHeight: section.fixedSize }
+        : null
       
       return (
         <React.Fragment key={section.id}>
           <div
             className={cn(
-              "h-full overflow-hidden bg-card border border-border rounded-md",
+              "min-h-0 overflow-hidden bg-card border border-border rounded-md",
               section.className
             )}
             style={{
-              flex: `${size} 1 0%`,
+              ...(fixedStyle ?? { flex: `${size} 1 0%` }),
+              minHeight: 0,
               minWidth: 0,
             }}
           >

package/components/composites/AppHeader/AppHeader.tsx

@@ -16,12 +16,17 @@ export const AppHeader = React.memo<AppHeaderProps>(({
 }) => {
   return (
     <header className={`flex h-14 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`}>
-      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-        {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
-        {showSidebarToggle && title && <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />}
-        {showTitle && title && <h1 className="text-base font-medium">{title}</h1>}
-        {tabs && tabs.length > 0 && (
-          <div className="flex-1 flex justify-center">
+      <div className="grid w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-4 lg:px-6">
+        <div className="min-w-0 flex items-center gap-1 lg:gap-2">
+          {showSidebarToggle && <SidebarTrigger className="-ml-1" />}
+          {showSidebarToggle && showTitle && title && (
+            <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
+          )}
+          {showTitle && title && <h1 className="max-w-[28rem] truncate text-base font-medium">{title}</h1>}
+        </div>
+
+        <div className="justify-self-center">
+          {tabs && tabs.length > 0 && (
             <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
               <TabsList>
                 {tabs.map((tab) => (
@@ -31,9 +36,10 @@ export const AppHeader = React.memo<AppHeaderProps>(({
                 ))}
               </TabsList>
             </Tabs>
-          </div>
-        )}
-        <div className="ml-auto flex items-center gap-2">{actions}</div>
+          )}
+        </div>
+
+        <div className="flex min-w-0 items-center justify-end gap-2">{actions}</div>
       </div>
     </header>
   )

package/components/composites/DataTable/DragHandleCell.tsx

@@ -4,7 +4,7 @@ import { GripVertical } from "lucide-react"
 import { Button } from "@/components/primitives/Button"
 
 export interface DragHandleCellProps {
-  id: number
+  id: number | string
 }
 
 export function DragHandleCell({ id }: DragHandleCellProps) {

package/components/composites/DataTable/DraggableRow.tsx

@@ -7,16 +7,18 @@ import type { DashboardRow } from "./table-types"
 
 export interface DraggableRowProps {
   row: Row<DashboardRow>
+  rowId: number | string
 }
 
-export function DraggableRow({ row }: DraggableRowProps) {
+export function DraggableRow({ row, rowId }: DraggableRowProps) {
   const { transform, transition, setNodeRef, isDragging } = useSortable({
-    id: row.original.id,
+    id: rowId,
   })
 
   return (
     <TableRow
       ref={setNodeRef}
+      data-row-id={String(rowId)}
       data-state={row.getIsSelected() && "selected"}
       data-dragging={isDragging}
       className="relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80"

package/components/composites/DataTable/EnhancedDataTable.behaviors.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite"
 import { expect, userEvent, within } from "@storybook/test"
 import { Toaster } from "sonner"
+import { DYNAMIC_TABLE_SCHEMA_VERSION, dynamicTableSchema } from "ui-schema-contracts"
 
 import { EnhancedDataTable } from "./EnhancedDataTable"
 import type { DashboardRow } from "./table-types"
@@ -11,6 +12,22 @@ const rows: DashboardRow[] = [
   { id: 3, header: "Executive summary", type: "Narrative", status: "Done", target: "10", limit: "13", reviewer: "Assign reviewer" },
 ]
 
+const tableSchema = dynamicTableSchema.parse({
+  schemaVersion: DYNAMIC_TABLE_SCHEMA_VERSION,
+  rowKey: "id",
+  enableFiltering: true,
+  enablePagination: true,
+  enableRowSelection: true,
+  columns: [
+    { key: "header", label: "Header", sortable: true, hideable: false },
+    { key: "type", label: "Type", sortable: true },
+    { key: "status", label: "Status", renderType: "badge", sortable: true },
+    { key: "target", label: "Target", align: "right", sortable: true },
+    { key: "limit", label: "Limit", align: "right", sortable: true },
+    { key: "reviewer", label: "Reviewer", sortable: true },
+  ],
+})
+
 const meta = {
   title: "Composites/EnhancedDataTable/Behaviors",
   component: EnhancedDataTable,
@@ -30,7 +47,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const SelectAllWorks: Story = {
-  args: { data: rows },
+  args: { data: rows, tableSchema },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const selectAll = canvas.getByLabelText("Select all")
@@ -40,7 +57,7 @@ export const SelectAllWorks: Story = {
 }
 
 export const DrawerOpensFromHeader: Story = {
-  args: { data: rows },
+  args: { data: rows, tableSchema },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const trigger = canvas.getByRole("button", { name: "Cover page" })
@@ -50,7 +67,7 @@ export const DrawerOpensFromHeader: Story = {
 }
 
 export const SwitchesViewTab: Story = {
-  args: { data: rows },
+  args: { data: rows, tableSchema },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const tab = canvas.getByRole("tab", { name: /Past Performance/i })