+
+
+ {/* Background blur circles - Figma exact specs */}
+ {/* Ellipse 1351 */}
+
+
+ {/* Ellipse 1347 */}
+
+
+ {/* Ellipse 1350 */}
+
+
+ {/* Ellipse 1348 */}
+
+
+ {/* Ellipse 1346 */}
+
+
+ {/* Ellipse 1268 */}
+
);
}
diff --git a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx
index aef8940df..bd069df3b 100644
--- a/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx
+++ b/typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx
@@ -1,11 +1,12 @@
"use client";
import React, { useState, useEffect } from "react";
-import Image from "next/image";
+import { EyeIcon as Eye, CodeIcon as Code, BookOpenTextIcon as Book } from "@phosphor-icons/react";
+import { cn } from "@/lib/utils";
import { useRouter, usePathname } from "next/navigation";
import { DemoList } from "@/components/demo-list/demo-list";
import { ThemeToggle } from "@/components/ui/theme-toggle";
-import { Eye, Code, Book, ChevronDown } from "lucide-react";
+import { ChevronDown } from "lucide-react";
import featureConfig from "@/config";
import {
DropdownMenu,
@@ -98,12 +99,14 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
}
}, []);
+ const tabClass = `cursor-pointer flex-1 h-8 px-2 text-sm text-primary shadow-none bg-none border-none font-medium gap-1 rounded-lg data-[state=active]:bg-white data-[state=active]:text-primary data-[state=active]:shadow-none`
+
return (
-
{/* Sidebar Header */}
-
+
@@ -111,30 +114,32 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
-
+ {/*
*/}
{/* Controls Section */}
{(!frameworkPickerHidden|| !viewPickerHidden) && (
-
+
{/* Integration picker */}
{!frameworkPickerHidden&& (
-
-
+
+
-
+
+
+ {currentIntegration ? currentIntegration.name : "Select Integration"}
+
+
+
-
+
{menuIntegrations.map((integration) => (
handleIntegrationSelect(integration.id)}
- className="cursor-pointer"
+ className="cursor-pointer hover:bg-palette-grey-200 text-palette-text-primary text-base h-10 rounded-sm"
>
{integration.name}
@@ -147,30 +152,30 @@ export function Sidebar({ isMobile, onMobileClose }: SidebarProps) {
{/* Preview/Code Tabs */}
{!viewPickerHidden &&
-
+
setView(tab as View)}
- className="w-full"
+ className="w-full rounded-lg bg-none border-none"
>
-
+
Preview
);
}
+
+function SectionTitle({ title }: { title: string }) {
+ return (
+
+ );
+}
diff --git a/typescript-sdk/apps/dojo/src/styles/typography.css b/typescript-sdk/apps/dojo/src/styles/typography.css
new file mode 100644
index 000000000..881b3e89f
--- /dev/null
+++ b/typescript-sdk/apps/dojo/src/styles/typography.css
@@ -0,0 +1,240 @@
+/* CopilotCloud Typography Components */
+
+/* Headings */
+.H1-SemiBold {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 56px;
+ line-height: 64px;
+ letter-spacing: 0px;
+ font-weight: 600;
+}
+
+.H1-Medium {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 56px;
+ line-height: 64px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.H2-SemiBold {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 40px;
+ line-height: 46px;
+ letter-spacing: 0px;
+ font-weight: 600;
+}
+
+.H2-Medium {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 40px;
+ line-height: 46px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.H3-SemiBold {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 32px;
+ line-height: 36px;
+ letter-spacing: 0px;
+ font-weight: 600;
+}
+
+.H3-Medium {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 32px;
+ line-height: 36px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.H4-SemiBold {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 24px;
+ line-height: 28px;
+ letter-spacing: 0px;
+ font-weight: 600;
+}
+
+.H4-Medium {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 24px;
+ line-height: 28px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.H5-SemiBold {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 20px;
+ line-height: 24px;
+ letter-spacing: 0px;
+ font-weight: 600;
+}
+
+.H5-Medium {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 20px;
+ line-height: 24px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.H6-SemiBold {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 18px;
+ line-height: 20px;
+ letter-spacing: 0px;
+ font-weight: 600;
+}
+
+.H6-Medium {
+ font-family: "Plus Jakarta Sans", sans-serif;
+ font-size: 18px;
+ line-height: 20px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+/* Paragraphs */
+.paragraphs-Large-Bold {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ letter-spacing: 0px;
+ font-weight: 700;
+}
+
+.paragraphs-Large-SemiBold {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ letter-spacing: 0px;
+ font-weight: 600;
+}
+
+.paragraphs-Large-Medium {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.paragraphs-Large-Regular {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 16px;
+ line-height: 24px;
+ letter-spacing: 0px;
+ font-weight: 400;
+}
+
+.paragraphs-Medium-SemiBold {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 14px;
+ line-height: 22px;
+ letter-spacing: 0px;
+ font-weight: 600;
+}
+
+.paragraphs-Medium-Medium {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 14px;
+ line-height: 22px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.paragraphs-Medium-Regular {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 14px;
+ line-height: 22px;
+ letter-spacing: 0px;
+ font-weight: 400;
+}
+
+.paragraphs-Small-SemiBold {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0px;
+ font-weight: 600;
+}
+
+.paragraphs-Small-Medium {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.paragraphs-Small-Regular {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0px;
+ font-weight: 400;
+}
+
+.paragraphs-Small-Regular-Uppercase {
+ font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 0px;
+ font-weight: 400;
+ text-transform: uppercase;
+}
+
+/* Details */
+.details-Medium-Medium {
+ font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
+ font-size: 14px;
+ line-height: 14px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.details-Medium-Medium-Uppercase {
+ font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
+ font-size: 14px;
+ line-height: 14px;
+ letter-spacing: 0px;
+ font-weight: 500;
+ text-transform: uppercase;
+}
+
+.details-Small-Medium {
+ font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
+ font-size: 12px;
+ line-height: 12px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.details-Small-Medium-Uppercase {
+ font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
+ font-size: 12px;
+ line-height: 12px;
+ letter-spacing: 0px;
+ font-weight: 500;
+ text-transform: uppercase;
+}
+
+.details-ExtraSmall-Medium {
+ font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
+ font-size: 10px;
+ line-height: 10px;
+ letter-spacing: 0px;
+ font-weight: 500;
+}
+
+.details-ExtraSmall-Medium-Uppercase {
+ font-family: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
+ font-size: 10px;
+ line-height: 10px;
+ letter-spacing: 0px;
+ font-weight: 500;
+ text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/typescript-sdk/apps/dojo/tailwind.config.ts b/typescript-sdk/apps/dojo/tailwind.config.ts
index bbfbd92dd..717af65a2 100644
--- a/typescript-sdk/apps/dojo/tailwind.config.ts
+++ b/typescript-sdk/apps/dojo/tailwind.config.ts
@@ -8,17 +8,10 @@ const config = {
"./app/**/*.{ts,tsx}",
"./src/**/*.{ts,tsx}",
],
- prefix: "",
theme: {
- container: {
- center: true,
- padding: "2rem",
- screens: {
- "2xl": "1400px",
- },
- },
extend: {
colors: {
+ // Shadcn/ui colors
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
@@ -53,10 +46,15 @@ const config = {
foreground: "hsl(var(--card-foreground))",
},
},
- borderRadius: {
- lg: "var(--radius)",
- md: "calc(var(--radius) - 2px)",
- sm: "calc(var(--radius) - 4px)",
+ fontFamily: {
+ sans: ['Plus Jakarta Sans', 'ui-sans-serif', 'system-ui', 'sans-serif'],
+ mono: ['Spline Sans Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'],
+ },
+ boxShadow: {
+ 'elevation-sm': 'var(--shadow-sm)',
+ 'elevation-md': 'var(--shadow-md)',
+ 'elevation-lg': 'var(--shadow-lg)',
+ 'elevation-xl': 'var(--shadow-xl)',
},
keyframes: {
"accordion-down": {
@@ -77,4 +75,4 @@ const config = {
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
} satisfies Config;
-export default config;
+export default config;
\ No newline at end of file
diff --git a/typescript-sdk/pnpm-lock.yaml b/typescript-sdk/pnpm-lock.yaml
index a9c32ac16..95a0413c1 100644
--- a/typescript-sdk/pnpm-lock.yaml
+++ b/typescript-sdk/pnpm-lock.yaml
@@ -159,6 +159,9 @@ importers:
'@next/mdx':
specifier: ^15.2.3
version: 15.3.2(@mdx-js/loader@3.1.0(acorn@8.14.1)(webpack@5.99.9))(@mdx-js/react@3.1.0(@types/react@19.1.5)(react@19.1.0))
+ '@phosphor-icons/react':
+ specifier: ^2.1.10
+ version: 2.1.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
'@radix-ui/react-dropdown-menu':
specifier: ^2.1.6
version: 2.1.15(@types/react-dom@19.1.5(@types/react@19.1.5))(@types/react@19.1.5)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -3430,6 +3433,13 @@ packages:
peerDependencies:
'@opentelemetry/api': ^1.1.0
+ '@phosphor-icons/react@2.1.10':
+ resolution: {integrity: sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==}
+ engines: {node: '>=10'}
+ peerDependencies:
+ react: '>= 16.8'
+ react-dom: '>= 16.8'
+
'@pkgjs/parseargs@0.11.0':
resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
engines: {node: '>=14'}
@@ -13773,6 +13783,11 @@ snapshots:
'@opentelemetry/api': 1.9.0
'@opentelemetry/core': 2.0.1(@opentelemetry/api@1.9.0)
+ '@phosphor-icons/react@2.1.10(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+ dependencies:
+ react: 19.1.0
+ react-dom: 19.1.0(react@19.1.0)
+
'@pkgjs/parseargs@0.11.0':
optional: true
@@ -18235,7 +18250,7 @@ snapshots:
semver: 7.7.2
uuid: 10.0.0
optionalDependencies:
- openai: 4.104.0(ws@8.18.3)(zod@3.25.67)
+ openai: 4.104.0(ws@8.18.3)(zod@3.25.71)
langsmith@0.3.49(@opentelemetry/api@1.9.0)(@opentelemetry/exporter-trace-otlp-proto@0.203.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.0.1(@opentelemetry/api@1.9.0))(openai@4.100.0(ws@8.18.3)(zod@3.25.67)):
dependencies: