ai-design-system 0.1.32 → 0.1.34

package/components/ai-elements/edge.tsx

@@ -1,8 +1,12 @@
 import {
   BaseEdge,
   type EdgeProps,
+  getBezierPath,
   getSimpleBezierPath,
-  getSmoothStepPath,
+  type InternalNode,
+  type Node,
+  Position,
+  useInternalNode,
 } from "@xyflow/react";
 
 const Temporary = ({
@@ -35,49 +39,97 @@ const Temporary = ({
   );
 };
 
-const Strict = ({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  markerEnd,
-  style,
-}: EdgeProps) => {
-  const [edgePath] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-    borderRadius: 0,
-  });
+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;
 
-  return <BaseEdge id={id} markerEnd={markerEnd} path={edgePath} style={style} />;
+  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 Animated = ({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  markerEnd,
-  style,
-}: EdgeProps) => {
-  const [edgePath] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    sourcePosition,
-    targetX,
-    targetY,
-    targetPosition,
-    borderRadius: 0,
+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");
+
+  return { sx: srcX, sy: srcY, tx: tgtX, ty: tgtY, sourcePos, targetPos };
+};
+
+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,
   });
 
   return (
@@ -91,7 +143,6 @@ const Animated = ({
 };
 
 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 h-[52px] w-[180px] gap-0 overflow-hidden rounded-md bg-card p-0 transition-all duration-200",
+      "node-container relative size-full h-auto w-sm gap-0 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,23 +6,20 @@ 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, tableSchema, handlers, onCreateClick, createButtonLabel }) => {
+export const DataTable = React.memo<DataTableProps>(({ rows, 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,7 +5,6 @@ import {
   type FormReportsEntity,
   type FormReportsRowAction,
   type FormReportsTableHandlers,
-  type DashboardPaginationState,
 } from "@/components/composites/FormReports"
 
 export interface FormReportsSectionProps {
@@ -14,7 +13,6 @@ export interface FormReportsSectionProps {
   items: FormReportsEntity[]
   columns: FormReportsColumn[]
   rowActions?: FormReportsRowAction[]
-  pagination?: DashboardPaginationState
   tableHandlers?: FormReportsTableHandlers
   tableLeftActions?: React.ReactNode
 }
@@ -26,7 +24,6 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
     items,
     columns,
     rowActions,
-    pagination,
     tableHandlers,
     tableLeftActions,
   }) => {
@@ -36,7 +33,6 @@ export const FormReportsSection = React.memo<FormReportsSectionProps>(
           items={items}
           columns={columns}
           rowActions={rowActions}
-          pagination={pagination}
           handlers={tableHandlers}
           leftActions={tableLeftActions}
           onCreateClick={onCreateClick}

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

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

package/components/blocks/SectionLayout/interfaces.ts

@@ -4,7 +4,6 @@ import type { AppHeaderProps } from "@/components/composites/AppHeader/interface
 export interface SectionLayoutSection {
   id: string;
   content: React.ReactNode;
-  fixedSize?: string;
   defaultSize?: number;
   minSize?: number;
   maxSize?: number;
@@ -18,6 +17,5 @@ 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,7 +24,6 @@ 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,6 +32,3 @@ 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,7 +4,6 @@ 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
@@ -169,31 +168,18 @@ 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 &&
-        !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
+      const isResizable = section.resizable !== false && sections.length > 1 && index < sections.length - 1
       
       return (
         <React.Fragment key={section.id}>
           <div
             className={cn(
-              "min-h-0 overflow-hidden bg-card border border-border rounded-md",
+              "h-full overflow-hidden bg-card border border-border rounded-md",
               section.className
             )}
             style={{
-              ...(fixedStyle ?? { flex: `${size} 1 0%` }),
-              minHeight: 0,
+              flex: `${size} 1 0%`,
               minWidth: 0,
             }}
           >

package/components/composites/AppHeader/AppHeader.tsx

@@ -16,17 +16,12 @@ 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="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 && (
+      <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">
             <Tabs defaultValue={defaultTab || tabs[0]?.value} onValueChange={onTabChange}>
               <TabsList>
                 {tabs.map((tab) => (
@@ -36,10 +31,9 @@ export const AppHeader = React.memo<AppHeaderProps>(({
                 ))}
               </TabsList>
             </Tabs>
-          )}
-        </div>
-
-        <div className="flex min-w-0 items-center justify-end gap-2">{actions}</div>
+          </div>
+        )}
+        <div className="ml-auto flex items-center 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 | string
+  id: number
 }
 
 export function DragHandleCell({ id }: DragHandleCellProps) {

package/components/composites/DataTable/DraggableRow.tsx

@@ -7,18 +7,16 @@ import type { DashboardRow } from "./table-types"
 
 export interface DraggableRowProps {
   row: Row<DashboardRow>
-  rowId: number | string
 }
 
-export function DraggableRow({ row, rowId }: DraggableRowProps) {
+export function DraggableRow({ row }: DraggableRowProps) {
   const { transform, transition, setNodeRef, isDragging } = useSortable({
-    id: rowId,
+    id: row.original.id,
   })
 
   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,7 +1,6 @@
 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"
@@ -12,22 +11,6 @@ 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,
@@ -47,7 +30,7 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const SelectAllWorks: Story = {
-  args: { data: rows, tableSchema },
+  args: { data: rows },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const selectAll = canvas.getByLabelText("Select all")
@@ -57,7 +40,7 @@ export const SelectAllWorks: Story = {
 }
 
 export const DrawerOpensFromHeader: Story = {
-  args: { data: rows, tableSchema },
+  args: { data: rows },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const trigger = canvas.getByRole("button", { name: "Cover page" })
@@ -67,7 +50,7 @@ export const DrawerOpensFromHeader: Story = {
 }
 
 export const SwitchesViewTab: Story = {
-  args: { data: rows, tableSchema },
+  args: { data: rows },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)
     const tab = canvas.getByRole("tab", { name: /Past Performance/i })

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

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite"
 import { Toaster } from "sonner"
-import { DYNAMIC_TABLE_SCHEMA_VERSION, dynamicTableSchema } from "ui-schema-contracts"
 
 import { EnhancedDataTable } from "./EnhancedDataTable"
 import type { DashboardRow } from "./table-types"
@@ -20,22 +19,6 @@ const data: DashboardRow[] = [
   { id: 12, header: "Advantages Over Current Technologies", type: "Narrative", status: "Not Started", target: "12", limit: "0", 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",
   component: EnhancedDataTable,
@@ -55,6 +38,5 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     data,
-    tableSchema,
   },
 }