@peak-ai/canvas 1.4.21 → 1.4.22

package/src/public/table.css

@@ -0,0 +1,135 @@
+.aspect-auto {
+  aspect-ratio: auto;
+}
+
+.h-\[250px\] {
+  height: 250px;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.relative {
+  position: relative;
+}
+
+.sticky {
+  position: sticky;
+}
+
+.top-0 {
+  top: calc(var(--spacing) * 0);
+}
+
+.right-0 {
+  right: calc(var(--spacing) * 0);
+}
+
+.z-2 {
+  z-index: 2;
+}
+
+.caption-bottom {
+  caption-side: bottom;
+}
+
+.text-sm {
+  font-size: var(--text-sm);
+}
+
+.text-xs {
+  font-size: var(--text-xs);
+}
+
+.text-muted-foreground {
+  color: oklch(0.556 0 0);
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.mt-4 {
+  margin-top: calc(var(--spacing) * 4);
+}
+
+.p-2 {
+  padding: calc(var(--spacing) * 2);
+}
+
+.px-2 {
+  padding-inline: calc(var(--spacing) * 2);
+}
+
+.py-1 {
+  padding-block: calc(var(--spacing) * 1);
+}
+
+.gap-1 {
+  gap: calc(var(--spacing) * 1);
+}
+
+.gap-2 {
+  gap: calc(var(--spacing) * 2);
+}
+
+.shrink-0 {
+  flex-shrink: 0;
+}
+
+.border {
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+}
+
+.border-b {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+}
+
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.bg-white {
+  background-color: rgb(255 255 255);
+}
+
+.bg-slate-100 {
+  background-color: rgb(241 245 249);
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
+.whitespace-nowrap {
+  white-space: nowrap;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.transition-colors {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.hover\:bg-muted\/50 {
+  &:hover {
+    @media (hover: hover) {
+      background-color: color-mix(in oklab, oklch(0.97 0 0) 50%, transparent);
+    }
+  }
+}

package/src/shadcn/components/icons/AiAvatarIcon.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+type AiAvatarIconProps = {
+  className?: string;
+  width?: number | string;
+  height?: number | string;
+}
+
+export function AiAvatarIcon({ 
+  className = '', 
+  width = 13, 
+  height = 14 
+}: AiAvatarIconProps) {
+  return (
+    <svg 
+      width={width} 
+      height={height} 
+      viewBox="0 0 13 14" 
+      fill="none" 
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g id="AI icon">
+        <path 
+          id="Star 1" 
+          d="M5.85957 1.57888C6.13643 1.07267 6.86346 1.07267 7.14032 1.57888L8.71985 4.46695C8.78683 4.58941 8.88753 4.69011 9.01 4.75709L11.8981 6.33663C12.4043 6.61348 12.4043 7.34051 11.8981 7.61737L9.01 9.19691C8.88753 9.26389 8.78683 9.36458 8.71985 9.48705L7.14032 12.3751C6.86346 12.8813 6.13643 12.8813 5.85957 12.3751L4.28004 9.48705C4.21306 9.36458 4.11236 9.26389 3.9899 9.19691L1.10183 7.61737C0.595615 7.34051 0.595615 6.61348 1.10183 6.33663L3.9899 4.75709C4.11236 4.69011 4.21306 4.58941 4.28004 4.46695L5.85957 1.57888Z" 
+          fill="#560561" 
+        />
+        <path 
+          id="Star 2" 
+          opacity="0.6" 
+          d="M1.51307 0.650459C1.63952 0.419248 1.97159 0.419248 2.09804 0.650459L2.52483 1.43081C2.55543 1.48675 2.60142 1.53274 2.65735 1.56333L3.4377 1.99012C3.66891 2.11657 3.66891 2.44864 3.4377 2.57509L2.65735 3.00188C2.60142 3.03248 2.55543 3.07847 2.52483 3.1344L2.09805 3.91475C1.97159 4.14596 1.63952 4.14596 1.51307 3.91475L1.08628 3.1344C1.05569 3.07847 1.0097 3.03248 0.953758 3.00188L0.173408 2.57509C-0.0578029 2.44864 -0.0578025 2.11657 0.173408 1.99012L0.953758 1.56333C1.00969 1.53274 1.05569 1.48675 1.08628 1.43081L1.51307 0.650459Z" 
+          fill="#560561" 
+        />
+        <path 
+          id="Star 5" 
+          opacity="0.6" 
+          d="M11.2322 10.7802C11.3721 10.5244 11.7395 10.5244 11.8794 10.7802L12.156 11.286C12.1898 11.3479 12.2407 11.3988 12.3026 11.4326L12.8084 11.7092C13.0642 11.8491 13.0642 12.2165 12.8084 12.3564L12.3026 12.633C12.2407 12.6669 12.1898 12.7178 12.156 12.7797L11.8794 13.2854C11.7395 13.5412 11.3721 13.5412 11.2322 13.2854L10.9556 12.7797C10.9217 12.7178 10.8708 12.6669 10.8089 12.633L10.3032 12.3564C10.0474 12.2165 10.0474 11.8491 10.3032 11.7092L10.8089 11.4326C10.8708 11.3988 10.9217 11.3479 10.9556 11.286L11.2322 10.7802Z" 
+          fill="#560561" 
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default AiAvatarIcon;
+

package/src/shadcn/components/icons/Co_driver Expanding button copy.svg

@@ -0,0 +1,21 @@
+<svg width="67" height="66" viewBox="0 0 67 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4766_2811)">
+<rect x="16.1667" y="15.5" width="35" height="35" rx="7.5" stroke="#A601FF" shape-rendering="crispEdges"/>
+<path d="M33.0756 28.0171C33.3312 27.5498 34.0023 27.5498 34.2578 28.0171L35.7159 30.683C35.7777 30.7961 35.8706 30.889 35.9837 30.9508L38.6496 32.4089C39.1169 32.6644 39.1169 33.3355 38.6496 33.5911L35.9837 35.0491C35.8706 35.111 35.7777 35.2039 35.7159 35.317L34.2578 37.9829C34.0023 38.4501 33.3312 38.4501 33.0756 37.9829L31.6176 35.317C31.5557 35.2039 31.4628 35.111 31.3497 35.0491L28.6838 33.5911C28.2166 33.3355 28.2166 32.6644 28.6838 32.4089L31.3497 30.9508C31.4628 30.889 31.5557 30.7961 31.6176 30.683L33.0756 28.0171Z" fill="#A601FF"/>
+<path d="M29.0634 27.1601C29.1801 26.9466 29.4866 26.9466 29.6033 27.1601L29.9973 27.8804C30.0255 27.932 30.068 27.9745 30.1196 28.0027L30.84 28.3967C31.0534 28.5134 31.0534 28.8199 30.84 28.9367L30.1196 29.3306C30.068 29.3589 30.0255 29.4013 29.9973 29.4529L29.6033 30.1733C29.4866 30.3867 29.1801 30.3867 29.0634 30.1733L28.6694 29.4529C28.6412 29.4013 28.5987 29.3589 28.5471 29.3306L27.8268 28.9367C27.6133 28.8199 27.6133 28.5134 27.8268 28.3967L28.5471 28.0027C28.5987 27.9745 28.6412 27.932 28.6694 27.8804L29.0634 27.1601Z" fill="#A601FF"/>
+<path d="M38.0346 36.5104C38.1638 36.2743 38.5029 36.2743 38.6321 36.5105L38.8874 36.9773C38.9186 37.0344 38.9656 37.0814 39.0227 37.1126L39.4896 37.368C39.7257 37.4971 39.7257 37.8363 39.4896 37.9654L39.0227 38.2207C38.9656 38.252 38.9186 38.2989 38.8874 38.3561L38.6321 38.8229C38.5029 39.059 38.1638 39.059 38.0346 38.8229L37.7793 38.3561C37.748 38.2989 37.7011 38.252 37.6439 38.2207L37.1771 37.9654C36.941 37.8363 36.941 37.4971 37.1771 37.368L37.6439 37.1126C37.7011 37.0814 37.748 37.0344 37.7793 36.9773L38.0346 36.5104Z" fill="#A601FF"/>
+</g>
+<defs>
+<filter id="filter0_d_4766_2811" x="0.666687" y="0" width="66" height="66" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feMorphology radius="5" operator="dilate" in="SourceAlpha" result="effect1_dropShadow_4766_2811"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0317231 0 0 0 0 0.0834676 0 0 0 0 0.370052 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4766_2811"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4766_2811" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/shadcn/components/icons/ai-avatar.svg

@@ -0,0 +1,7 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="AI icon">
+<path id="Star 1" d="M5.85957 1.57888C6.13643 1.07267 6.86346 1.07267 7.14032 1.57888L8.71985 4.46695C8.78683 4.58941 8.88753 4.69011 9.01 4.75709L11.8981 6.33663C12.4043 6.61348 12.4043 7.34051 11.8981 7.61737L9.01 9.19691C8.88753 9.26389 8.78683 9.36458 8.71985 9.48705L7.14032 12.3751C6.86346 12.8813 6.13643 12.8813 5.85957 12.3751L4.28004 9.48705C4.21306 9.36458 4.11236 9.26389 3.9899 9.19691L1.10183 7.61737C0.595615 7.34051 0.595615 6.61348 1.10183 6.33663L3.9899 4.75709C4.11236 4.69011 4.21306 4.58941 4.28004 4.46695L5.85957 1.57888Z" fill="#8943F1"/>
+<path id="Star 2" opacity="0.6" d="M1.51307 0.650459C1.63952 0.419248 1.97159 0.419248 2.09804 0.650459L2.52483 1.43081C2.55543 1.48675 2.60142 1.53274 2.65735 1.56333L3.4377 1.99012C3.66891 2.11657 3.66891 2.44864 3.4377 2.57509L2.65735 3.00188C2.60142 3.03248 2.55543 3.07847 2.52483 3.1344L2.09805 3.91475C1.97159 4.14596 1.63952 4.14596 1.51307 3.91475L1.08628 3.1344C1.05569 3.07847 1.0097 3.03248 0.953758 3.00188L0.173408 2.57509C-0.0578029 2.44864 -0.0578025 2.11657 0.173408 1.99012L0.953758 1.56333C1.00969 1.53274 1.05569 1.48675 1.08628 1.43081L1.51307 0.650459Z" fill="#8943F1"/>
+<path id="Star 5" opacity="0.6" d="M11.2322 10.7802C11.3721 10.5244 11.7395 10.5244 11.8794 10.7802L12.156 11.286C12.1898 11.3479 12.2407 11.3988 12.3026 11.4326L12.8084 11.7092C13.0642 11.8491 13.0642 12.2165 12.8084 12.3564L12.3026 12.633C12.2407 12.6669 12.1898 12.7178 12.156 12.7797L11.8794 13.2854C11.7395 13.5412 11.3721 13.5412 11.2322 13.2854L10.9556 12.7797C10.9217 12.7178 10.8708 12.6669 10.8089 12.633L10.3032 12.3564C10.0474 12.2165 10.0474 11.8491 10.3032 11.7092L10.8089 11.4326C10.8708 11.3988 10.9217 11.3479 10.9556 11.286L11.2322 10.7802Z" fill="#8943F1"/>
+</g>
+</svg>

package/src/shadcn/components/ui/button.tsx

@@ -0,0 +1,132 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../utils';
+import { Loader2Icon } from 'lucide-react';
+import { TooltipContent, Tooltip, TooltipTrigger } from './tooltip';
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+function TooltipButton(props: any) {
+  const { className, isEditable, interact, attributes, variant, size, text, tooltipContent } =
+    props;
+
+  const buttonContent = (
+    <Button
+      className={className}
+      onClick={
+        !isEditable
+          ? interact
+          : () => {
+              // no-op
+            }
+      }
+      disabled={attributes.interactionApiInProgress || attributes.disabled}
+      variant={variant}
+      size={size}
+      contentEditable={isEditable}
+      asChild={isEditable}
+    >
+      {attributes.interactionApiInProgress ? (
+        <Loader2Icon className="animate-spin" />
+      ) : (
+        <div data-slot="text">{text}</div>
+      )}
+    </Button>
+  );
+
+  if (tooltipContent) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="inline-block">{buttonContent}</div>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-[200px] w-auto whitespace-normal break-all">
+          {tooltipContent}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return buttonContent;
+}
+
+function TableButton(props: any) {
+  const [loading, setLoading] = React.useState(false);
+
+  async function onClick() {
+    setLoading(true);
+    await props.onClick();
+    setLoading(false);
+  }
+
+  const defaultClasses = 'mr-2';
+  const mergedClasses = props.className ? cn(defaultClasses, props.className) : defaultClasses;
+
+  return (
+    <TooltipButton
+      className={mergedClasses}
+      isEditable={false}
+      interact={onClick}
+      attributes={{
+        interactionApiInProgress: loading,
+        isDisabled: props.isDisabled,
+      }}
+      variant={props.variant}
+      size="sm"
+      text={props.text}
+      tooltipContent={props.tooltipContent}
+    />
+  );
+}
+
+export { Button, buttonVariants, TooltipButton, TableButton };

package/src/shadcn/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+
+import { cn } from '../../utils';
+
+type CardProps = React.ComponentProps<'div'> & {
+  isEditable?: boolean;
+};
+
+function Card({ className, isEditable, ...props }: CardProps) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-white text-card-foreground flex flex-col gap-4 rounded-lg border py-3 p-3',
+        className,
+      )}
+      contentEditable={isEditable}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, isEditable, ...props }: CardProps) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      contentEditable={isEditable}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, isEditable, ...props }: CardProps) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      contentEditable={isEditable}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, isEditable, ...props }: CardProps) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm text-gray-500', className)}
+      contentEditable={isEditable}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, isEditable, ...props }: CardProps) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}
+      contentEditable={isEditable}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, isEditable, ...props }: CardProps) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-3', className)}
+      contentEditable={isEditable}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, isEditable, ...props }: CardProps) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex gap-2 ml-2.5 px-3 py-1 text-sm rounded-xl w-fit', className)}
+      contentEditable={isEditable}
+      {...props}
+    />
+  );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };