npm - @motiadev/workbench - Versions diffs - 0.0.1 - Mend

@motiadev/workbench 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/README.md +50 -0
package/components.json +21 -0
package/dist/.empty +0 -0
package/dist/assets/index-DGmArPOa.css +1 -0
package/dist/assets/index-hQsWtfVb.js +182 -0
package/dist/index.html +20 -0
package/eslint.config.js +28 -0
package/index.html +19 -0
package/index.tsx +10 -0
package/middleware.ts +46 -0
package/package.json +56 -0
package/postcss.config.js +6 -0
package/public/.empty +0 -0
package/src/assets/.empty +0 -0
package/src/components/app-sidebar.tsx +55 -0
package/src/components/log-console.tsx +76 -0
package/src/components/log-level-badge.tsx +12 -0
package/src/components/ui/badge.tsx +31 -0
package/src/components/ui/button.tsx +47 -0
package/src/components/ui/collapsible.tsx +9 -0
package/src/components/ui/dialog.tsx +120 -0
package/src/components/ui/input.tsx +21 -0
package/src/components/ui/label.tsx +26 -0
package/src/components/ui/select.tsx +157 -0
package/src/components/ui/separator.tsx +22 -0
package/src/components/ui/sheet.tsx +106 -0
package/src/components/ui/sidebar.tsx +637 -0
package/src/components/ui/skeleton.tsx +7 -0
package/src/components/ui/switch.tsx +27 -0
package/src/components/ui/table.tsx +76 -0
package/src/components/ui/textarea.tsx +22 -0
package/src/components/ui/tooltip.tsx +32 -0
package/src/hooks/use-list-flows.tsx +20 -0
package/src/hooks/use-log-listener.tsx +32 -0
package/src/hooks/use-mobile.tsx +19 -0
package/src/index.css +190 -0
package/src/lib/utils.ts +6 -0
package/src/main.tsx +28 -0
package/src/publicComponents/api-node.tsx +28 -0
package/src/publicComponents/base-handle.tsx +43 -0
package/src/publicComponents/base-node.tsx +57 -0
package/src/publicComponents/emits.tsx +22 -0
package/src/publicComponents/event-node.tsx +36 -0
package/src/publicComponents/node-props.tsx +15 -0
package/src/publicComponents/noop-node.tsx +21 -0
package/src/publicComponents/subscribe.tsx +19 -0
package/src/route-wrapper.tsx +9 -0
package/src/routeTree.gen.ts +109 -0
package/src/routes/__root.tsx +26 -0
package/src/routes/flow/$id.tsx +21 -0
package/src/routes/index.tsx +13 -0
package/src/stores/use-logs.ts +22 -0
package/src/views/flow/arrow-head.tsx +13 -0
package/src/views/flow/base-edge.tsx +44 -0
package/src/views/flow/flow-loader.tsx +3 -0
package/src/views/flow/flow-view.tsx +72 -0
package/src/views/flow/hooks/use-get-flow-state.tsx +109 -0
package/src/views/flow/hooks/use-organize-nodes.ts +60 -0
package/src/views/flow/legend.tsx +59 -0
package/src/views/flow/node-organizer.tsx +70 -0
package/src/views/flow/nodes/api-flow-node.tsx +6 -0
package/src/views/flow/nodes/event-flow-node.tsx +6 -0
package/src/views/flow/nodes/json-schema-form.tsx +110 -0
package/src/views/flow/nodes/language-indicator.tsx +74 -0
package/src/views/flow/nodes/nodes.types.ts +36 -0
package/src/views/flow/nodes/noop-flow-node.tsx +6 -0
package/src/vite-env.d.ts +1 -0
package/tailwind.config.ts +75 -0
package/tsconfig.app.json +30 -0
package/tsconfig.json +13 -0
package/tsconfig.node.json +22 -0
package/tsconfig.node.tsbuildinfo +1 -0
package/vite.config.ts +14 -0

package/dist/index.html ADDED Viewed

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@0,200..1000;1,200..1000&display=swap&family=PT+Mono:wght@0,200..1000;1,200..1000&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wistro</title>
+    <script type="module" crossorigin src="/assets/index-hQsWtfVb.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DGmArPOa.css">
+  </head>
+  <body class="dark">
+    <div id="root"></div>
+  </body>
+</html>

package/eslint.config.js ADDED Viewed

@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)

package/index.html ADDED Viewed

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@0,200..1000;1,200..1000&display=swap&family=PT+Mono:wght@0,200..1000;1,200..1000&display=swap"
+      rel="stylesheet"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Motia</title>
+  </head>
+  <body class="dark">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/index.tsx ADDED Viewed

@@ -0,0 +1,10 @@
+export { EventNode } from './src/publicComponents/event-node'
+export { ApiNode } from './src/publicComponents/api-node'
+export { NoopNode } from './src/publicComponents/noop-node'
+export { BaseNode } from './src/publicComponents/base-node'
+export { BaseHandle } from './src/publicComponents/base-handle'
+export { Position } from '@xyflow/react'
+export type { EventNodeData, ApiNodeData } from './src/views/flow/nodes/nodes.types'
+export * from './src/publicComponents/node-props'
+export { Button } from './src/components/ui/button'

package/middleware.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import autoprefixer from 'autoprefixer'
+import type { Express, NextFunction, Request, Response } from 'express'
+import fs from 'fs'
+import path from 'path'
+import tailwindcss from 'tailwindcss'
+import { createServer as createViteServer } from 'vite'
+import tailwindcssConfig from './tailwind.config'
+export const applyMiddleware = async (app: Express) => {
+  const vite = await createViteServer({
+    appType: 'spa',
+    root: __dirname,
+    server: {
+      middlewareMode: true,
+      fs: {
+        allow: [__dirname, path.join(process.cwd(), './steps')],
+      },
+    },
+    resolve: {
+      alias: { '@': path.resolve(__dirname, './src') },
+    },
+    css: {
+      postcss: {
+        plugins: [autoprefixer(), tailwindcss(tailwindcssConfig)],
+      },
+    },
+  })
+  app.use(vite.middlewares)
+  app.use('*', async (req: Request, res: Response, next: NextFunction) => {
+    const url = req.originalUrl
+    console.log('[UI] Request', { url })
+    try {
+      const index = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8')
+      const html = await vite.transformIndexHtml(url, index)
+      res.status(200).set({ 'Content-Type': 'text/html' }).end(html)
+    } catch (e) {
+      next(e)
+    }
+  })
+}

package/package.json ADDED Viewed

@@ -0,0 +1,56 @@
+{
+  "name": "@motiadev/workbench",
+  "version": "0.0.1",
+  "main": "index.tsx",
+  "dependencies": {
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-select": "^2.1.4",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.6",
+    "@tanstack/react-router": "^1.95.0",
+    "@tanstack/router-plugin": "^1.95.0",
+    "@tanstack/zod-adapter": "^1.95.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@xyflow/react": "^12.3.6",
+    "autoprefixer": "^10.4.20",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dagre": "^0.8.5",
+    "framer-motion": "^11.15.0",
+    "json-schema": "^0.4.0",
+    "lucide-react": "^0.469.0",
+    "postcss": "^8.4.49",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "socket.io-client": "^4.8.1",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.5",
+    "zod": "^3.24.1",
+    "zustand": "^5.0.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@tanstack/router-devtools": "^1.95.0",
+    "@types/dagre": "^0.7.52",
+    "@types/express": "^5.0.0",
+    "@types/json-schema": "^7.0.15",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0"
+  },
+  "scripts": {
+    "lint": "eslint ."
+  }
+}

package/postcss.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/public/.empty ADDED Viewed

File without changes

package/src/assets/.empty ADDED Viewed

File without changes

package/src/components/app-sidebar.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+import { useListFlows } from '@/hooks/use-list-flows'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from './ui/sidebar'
+import { Workflow } from 'lucide-react'
+import { Link, useMatchRoute } from '@tanstack/react-router'
+export const AppSidebar = () => {
+  const { flows } = useListFlows()
+  const matchRoute = useMatchRoute()
+  const isActive = (flowId: string) => {
+    return !!matchRoute({ to: '/flow/$id', params: { id: flowId } })
+  }
+  return (
+    <Sidebar>
+      <SidebarHeader />
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Flows</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {flows.map((flow) => (
+                <SidebarMenuItem key={flow.id}>
+                  <SidebarMenuButton asChild className="cursor-pointer" isActive={isActive(flow.id)}>
+                    <Link
+                      to="/flow/$id"
+                      params={{ id: flow.id }}
+                      className="flex items-center gap-2"
+                      data-testid={`flow-link-${flow.id}`}
+                    >
+                      <Workflow />
+                      <span>{flow.name}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter />
+    </Sidebar>
+  )
+}

package/src/components/log-console.tsx ADDED Viewed

@@ -0,0 +1,76 @@
+import { Collapsible, CollapsibleContent } from '@/components/ui/collapsible'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { useLogs } from '@/stores/use-logs'
+import { motion } from 'framer-motion'
+import { ChevronDown, ChevronUp, Trash2 } from 'lucide-react'
+import { useState } from 'react'
+import { LogLevelBadge } from './log-level-badge'
+import { Button } from './ui/button'
+const timestamp = (time: number) => {
+  const date = new Date(Number(time))
+  return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`
+}
+export const LogConsole = () => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const logs = useLogs((state) => state.logs)
+  const resetLogs = useLogs((state) => state.resetLogs)
+  const toggleExpand = () => setIsExpanded((prev) => !prev)
+  return (
+    <div className="absolute bottom-0 left-0 right-0 w-full bg-black h-fit z-40">
+      <div className="flex justify-between w-full items-center p-2">
+        <label className="text-green-500 w-full text-left justify-start h-full text-lg font-bold">Logs</label>
+        {logs.length > 0 && (
+          <Button variant="link" onClick={resetLogs} className="text-green-500">
+            <Trash2 className="w-4 h-4 text-green-500" />
+            Clear logs
+          </Button>
+        )}
+        <Button variant="link" onClick={toggleExpand} className="text-green-500">
+          {isExpanded && <ChevronDown className="w-4 h-4 text-green-500" />}
+          {!isExpanded && <ChevronUp className="w-4 h-4 text-green-500" />}
+        </Button>
+      </div>
+      {isExpanded && <div className="divide-solid divide-green-500 divide-y" />}
+      <Collapsible open={isExpanded} className={`w-full`}>
+        <CollapsibleContent>
+          <motion.div
+            className="overflow-y-auto h-[25vh] flex flex-col gap-2 py-2"
+            initial={{ height: 0 }}
+            animate={{ height: '25vh' }}
+            transition={{ duration: 0.3 }}
+          >
+            <Table>
+              <TableHeader className="sticky top-0 bg-black">
+                <TableRow>
+                  <TableHead>Time</TableHead>
+                  <TableHead>Level</TableHead>
+                  <TableHead>Trace</TableHead>
+                  <TableHead>Flow</TableHead>
+                  <TableHead>Message</TableHead>
+                  <TableHead>File</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody className="text-md font-mono font-bold">
+                {logs.map((log, index) => (
+                  <TableRow key={index}>
+                    <TableCell className="text-green-500">{timestamp(log.time)}</TableCell>
+                    <TableCell>
+                      <LogLevelBadge level={log.level} />
+                    </TableCell>
+                    <TableCell>{log.traceId.split('-').pop()}</TableCell>
+                    <TableCell>{log.flows?.join?.(', ')}</TableCell>
+                    <TableCell>{log.msg}</TableCell>
+                    <TableCell>{log.file}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </motion.div>
+        </CollapsibleContent>
+      </Collapsible>
+    </div>
+  )
+}

package/src/components/log-level-badge.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { Badge, BadgeProps } from './ui/badge'
+export const LogLevelBadge: React.FC<{ level: string }> = (props) => {
+  const map: Record<string, BadgeProps['variant']> = {
+    info: 'info',
+    error: 'error',
+    warn: 'warning',
+    debug: 'info',
+  }
+  return <Badge variant={map[props.level] as BadgeProps['variant']}>{props.level}</Badge>
+}

package/src/components/ui/badge.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        info: 'border-transparent bg-sky-500 text-black hover:bg-sky/80',
+        error: 'border-transparent bg-rose-500 text-black shadow hover:bg-rose/80',
+        warning: 'border-transparent bg-amber-300 text-amber-950 hover:bg-amber/80',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+}
+export { Badge, badgeVariants }

package/src/components/ui/button.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        none: '',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  },
+)
+Button.displayName = 'Button'
+export { Button, buttonVariants }

package/src/components/ui/collapsible.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+const Collapsible = CollapsiblePrimitive.Root
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

package/src/components/ui/dialog.tsx ADDED Viewed

@@ -0,0 +1,120 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+import { cn } from "@/lib/utils"
+const Dialog = DialogPrimitive.Root
+const DialogTrigger = DialogPrimitive.Trigger
+const DialogPortal = DialogPrimitive.Portal
+const DialogClose = DialogPrimitive.Close
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

package/src/components/ui/input.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Input.displayName = 'Input'
+export { Input }

package/src/components/ui/label.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+"use client"
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+export { Label }