tio-design-make-experiments 0.0.1

package/src/app/components/design-system/Patterns.tsx

@@ -0,0 +1,235 @@
+import React from "react";
+import svgPaths from "../../../imports/svg-umftvfphsk";
+import imgBot1 from "figma:asset/9d7a018c9a6938d439d9059f82753d232ce63804.png";
+import { imgGroup } from "../../../imports/svg-hm2n0";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+export function Patterns() {
+  return (
+    <section>
+      <SectionHeader
+        title="Composite Patterns"
+        description="Commonly used component compositions and layout patterns"
+      />
+
+      {/* Status Stepper */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Status Stepper / Wizard
+        </p>
+        <div className="max-w-3xl space-y-4">
+          {/* Pending start */}
+          <div className="group/step bg-[#262626] h-[60px] rounded-[10px] relative">
+            <div className="flex items-center gap-2.5 pl-[50px] pr-5 py-2.5 h-full">
+              <div className="bg-[#2e2e2e] flex-1 h-[40px] flex items-center justify-center rounded-[12px]">
+                <span className="font-['Source_Sans_3',sans-serif] text-[14px] text-white">pending start</span>
+              </div>
+              <div className="bg-[#1d1d1d] h-[40px] flex items-center justify-center px-5 rounded-[10px]">
+                <span className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888]">+ 6 to do</span>
+              </div>
+            </div>
+            <div className="absolute top-1 right-1 opacity-0 group-hover/step:opacity-100 transition-opacity z-10">
+              <CopyButton token="bg-[#262626] h-[60px] rounded-[10px] | inner: bg-[#2e2e2e] rounded-[12px] | badge: bg-[#1d1d1d] rounded-[10px]" />
+            </div>
+          </div>
+
+          {/* Running with progress */}
+          <div className="group/step bg-[#262626] h-[60px] rounded-[10px] relative">
+            <div className="flex items-center gap-2.5 pl-[50px] pr-5 py-2.5 h-full">
+              <div className="bg-[#1d1d1d] h-[40px] flex items-center justify-center gap-3.5 px-5 rounded-[10px] shrink-0">
+                <svg width="11" height="10" viewBox="0 0 11.1504 10.1504" fill="none">
+                  <path d={svgPaths.p2b4f4400} fill="#888888" />
+                </svg>
+                <span className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888]">3 done</span>
+              </div>
+              <div className="bg-[#2e2e2e] flex-1 h-[40px] flex items-center justify-center gap-4 rounded-[12px]">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                  <path d={svgPaths.p3ed72680} fill="#888888" />
+                </svg>
+                <span className="font-['Source_Sans_3',sans-serif] text-[14px] text-white">Executing checks</span>
+              </div>
+              <div className="bg-[#1d1d1d] h-[40px] flex items-center justify-center gap-3.5 px-5 rounded-[10px] shrink-0">
+                <span className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888]">+ 3 to do</span>
+              </div>
+            </div>
+            <div className="absolute top-1 right-1 opacity-0 group-hover/step:opacity-100 transition-opacity z-10">
+              <CopyButton token="bg-[#262626] h-[60px] rounded-[10px] | progress: bg-[#2e2e2e] rounded-[12px] | badge: bg-[#1d1d1d] rounded-[10px]" />
+            </div>
+          </div>
+
+          {/* Queue progress */}
+          <div className="group/step flex gap-2.5 relative">
+            {[
+              { count: "22", label: "Pages in queue" },
+              { count: "227", label: "Executing checks" },
+              { count: "2", label: "Pages completed" },
+            ].map((step) => (
+              <div key={step.label} className="bg-[#222] flex-1 h-[40px] flex items-center justify-center gap-4 rounded-[12px]">
+                <span className="font-['Source_Sans_3',sans-serif] text-[22px] text-[#888]" style={{ fontWeight: 700 }}>{step.count}</span>
+                <span className="font-['Source_Sans_3',sans-serif] text-[14px] text-white">{step.label}</span>
+              </div>
+            ))}
+            <div className="absolute top-1 right-1 opacity-0 group-hover/step:opacity-100 transition-opacity z-10">
+              <CopyButton token="flex gap-2.5 | item: bg-[#222] h-[40px] rounded-[12px] | counter: text-[22px] weight-700" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Chat / Message Pattern */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Chat Messages
+        </p>
+        <div className="max-w-2xl space-y-5">
+          {/* Bot message with failure */}
+          <div className="group/msg flex gap-5 items-start relative">
+            {/* Avatar */}
+            <div className="relative overflow-clip rounded-full shrink-0 size-[40px]">
+              <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+                <circle cx="20" cy="20" r="20" fill="#7954FF" />
+              </svg>
+              <div className="absolute left-1/2 -translate-x-1/2 top-[8px] w-[34px] h-[53px]">
+                <img alt="" className="absolute h-full left-0 top-0 w-full object-cover" src={imgBot1} />
+              </div>
+            </div>
+            {/* Message */}
+            <div className="bg-[#262626] flex-1 rounded-[15px] px-4 py-2.5">
+              <div className="flex items-center gap-2.5">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+                  <path d={svgPaths.p30bab400} fill="#FF3131" />
+                </svg>
+                <span className="font-['Source_Sans_3',sans-serif] text-[16px] text-white flex-1">The check failed</span>
+                <span className="font-['Source_Sans_3',sans-serif] text-[12px] text-[#888] uppercase" style={{ fontWeight: 600 }}>5 mins ago</span>
+              </div>
+            </div>
+            <div className="absolute top-0 right-0 opacity-0 group-hover/msg:opacity-100 transition-opacity z-10">
+              <CopyButton token="avatar: size-[40px] bg-[#7954FF] rounded-full | bubble: bg-[#262626] rounded-[15px] px-4 py-2.5" />
+            </div>
+          </div>
+
+          {/* Bot message with justification */}
+          <div className="group/msg flex gap-5 items-start relative">
+            <div className="relative overflow-clip rounded-full shrink-0 size-[40px]">
+              <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+                <circle cx="20" cy="20" r="20" fill="#7954FF" />
+              </svg>
+              <div className="absolute left-1/2 -translate-x-1/2 top-[8px] w-[34px] h-[53px]">
+                <img alt="" className="absolute h-full left-0 top-0 w-full object-cover" src={imgBot1} />
+              </div>
+            </div>
+            <div className="bg-[#262626] rounded-[15px] px-4 py-2.5 max-w-xl">
+              <div className="flex items-start pb-2.5 text-[#888]">
+                <span className="font-['Source_Sans_3',sans-serif] text-[12px] uppercase flex-1" style={{ fontWeight: 600 }}>Justification</span>
+                <span className="font-['Source_Sans_3',sans-serif] text-[12px] uppercase text-right" style={{ fontWeight: 600 }}>5 mins ago</span>
+              </div>
+              <p className="font-['Source_Sans_3',sans-serif] text-[16px] text-white">
+                The contact information is clearly visible at the bottom of the page. This satisfies the check requirement.
+              </p>
+            </div>
+            <div className="absolute top-0 right-0 opacity-0 group-hover/msg:opacity-100 transition-opacity z-10">
+              <CopyButton token="bubble: bg-[#262626] rounded-[15px] px-4 py-2.5 | label: text-[12px] uppercase weight-600 text-[#888]" />
+            </div>
+          </div>
+
+          {/* Action buttons */}
+          <div className="pl-[60px] flex gap-2.5">
+            <button className="bg-[#78eac1] flex items-center h-[40px] px-5 rounded-[50px] cursor-pointer">
+              <span className="font-['Source_Sans_3',sans-serif] text-[16px] text-[#1d1d1d] uppercase leading-[14px]">Re-run check</span>
+            </button>
+            <button className="relative flex items-center h-[40px] px-5 rounded-[50px] cursor-pointer">
+              <div className="absolute inset-0 border border-[#78eac1] rounded-[50px] pointer-events-none" />
+              <span className="font-['Source_Sans_3',sans-serif] text-[16px] text-[#78eac1] uppercase">Update check</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Meta Info */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Meta Info / Key-Value Pairs
+        </p>
+        <div className="group/meta bg-[#1d1d1d] rounded-[15px] p-6 space-y-3 max-w-3xl relative">
+          <div className="absolute top-2 right-2 opacity-0 group-hover/meta:opacity-100 transition-opacity z-10">
+            <CopyButton token="label: text-[12px] uppercase weight-600 w-24 | value: text-[16px] | gap-5" />
+          </div>
+          {[
+            { label: "Created on:", value: "2025-07-23 19:11" },
+            { label: "Last test:", value: "2025-07-23 19:11" },
+            { label: "ID:", value: "321456987" },
+            { label: "Test Suite:", value: "Test Suite name" },
+            { label: "Status:", value: "running", icon: true },
+            { label: "URL:", value: "https://akademija.by/" },
+            { label: "Execution ID:", value: "fc02997b-8a59-439c-b0ab-32f3b2429ab9" },
+          ].map((item) => (
+            <div key={item.label} className="flex gap-5 items-center text-[#888]">
+              <span className="font-['Source_Sans_3',sans-serif] text-[12px] uppercase w-24 shrink-0" style={{ fontWeight: 600 }}>{item.label}</span>
+              {item.icon ? (
+                <div className="flex items-center gap-2.5">
+                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path d={svgPaths.p3ed72680} fill="#888888" />
+                  </svg>
+                  <span className="font-['Source_Sans_3',sans-serif] text-[16px] text-white">{item.value}</span>
+                </div>
+              ) : (
+                <span className="font-['Source_Sans_3',sans-serif] text-[16px]">{item.value}</span>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Empty State */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Empty State
+        </p>
+        <div className="group/empty bg-[#1d1d1d] rounded-[15px] p-12 flex items-center justify-center max-w-xl relative">
+          <div className="absolute top-2 right-2 opacity-0 group-hover/empty:opacity-100 transition-opacity z-10">
+            <CopyButton token="bg-[#1d1d1d] rounded-[15px] p-12 | icon: 60x60 #888 | text: text-[14px] text-[#888]" />
+          </div>
+          <div className="flex items-center gap-5">
+            <div className="overflow-clip relative size-[60px] shrink-0">
+              <div className="absolute inset-0 mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0.001px_0px] mask-size-[60px_60px]" style={{ maskImage: `url('${imgGroup}')` }}>
+                <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60.0008 60">
+                  <path d={svgPaths.pf5d0c00} fill="#888888" />
+                  <path d={svgPaths.p1059d340} fill="#888888" />
+                  <path d={svgPaths.pa1ccc00} fill="#888888" />
+                  <path d={svgPaths.p2055340} fill="#888888" />
+                  <path clipRule="evenodd" d={svgPaths.pda7a680} fill="#888888" fillRule="evenodd" />
+                  <path clipRule="evenodd" d={svgPaths.pe04fd80} fill="#888888" fillRule="evenodd" />
+                  <path d={svgPaths.p18546240} fill="#888888" />
+                  <path clipRule="evenodd" d={svgPaths.pcc49e30} fill="#888888" fillRule="evenodd" />
+                </svg>
+              </div>
+            </div>
+            <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888]">
+              Please select an item from the list
+              <br />
+              to view its details
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Dividers */}
+      <div>
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Dividers
+        </p>
+        <div className="group/divs bg-[#1d1d1d] rounded-[15px] p-6 space-y-4 max-w-xl relative">
+          <div className="absolute top-2 right-2 opacity-0 group-hover/divs:opacity-100 transition-opacity z-10">
+            <CopyButton token="divider: bg-[#2e2e2e] h-px | subtle: bg-[#181818] h-px" />
+          </div>
+          <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-white">Content above divider</p>
+          <div className="bg-[#2e2e2e] h-px w-full" />
+          <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-white">Divider (#2E2E2E, 1px)</p>
+          <div className="bg-[#181818] h-px w-full" />
+          <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-white">Subtle divider (#181818, 1px)</p>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/app/components/design-system/PopoverMenu.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+/* ─── Sub-section label ─── */
+function SubLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <p className="font-['Source_Sans_3',sans-serif] text-foreground mb-5">
+      {children}
+    </p>
+  );
+}
+
+/* ════════════════════════════════════════════════════
+   Main export
+   ════════════════════════════════════════════════════ */
+export function PopoverMenu() {
+  return (
+    <section>
+      <SectionHeader
+        title="Popover Menu"
+        description="Dropdown/popover menus and their action items — extracted as CSS component classes in popover.css"
+      />
+
+      {/* ── Popover dropdown example ── */}
+      <SubLabel>A popover/dropdown menu for additional actions and links</SubLabel>
+
+      <div className="group/item relative inline-block mb-8">
+        <div className="popover-menu">
+          <div className="popover-btn">
+            <div className="popover-btn-inner">
+              <span className="popover-btn-text">Popover button</span>
+            </div>
+          </div>
+          <div className="popover-btn-last">
+            <div className="popover-btn-inner" style={{ paddingTop: 8 }}>
+              <span className="popover-btn-text">Edit</span>
+            </div>
+          </div>
+          <div className="popover-btn">
+            <div className="popover-btn-inner">
+              <span className="popover-btn-text">Delete</span>
+            </div>
+          </div>
+        </div>
+        <div className="absolute top-1 right-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+          <CopyButton token=".popover-menu" />
+        </div>
+      </div>
+
+      {/* ── Popover buttons with states ── */}
+      <SubLabel>Popover buttons</SubLabel>
+
+      <div className="flex flex-col gap-2.5 w-[240px]">
+        {/* Default */}
+        <div className="group/btn relative">
+          <div className="popover-btn">
+            <div className="popover-btn-inner">
+              <span className="popover-btn-text">Popover button</span>
+            </div>
+          </div>
+          <div className="absolute top-1 right-1 opacity-0 group-hover/btn:opacity-100 transition-opacity">
+            <CopyButton token=".popover-btn" />
+          </div>
+        </div>
+
+        {/* Hover (static display) */}
+        <div className="group/btn relative">
+          <div className="popover-btn !bg-link-hover !text-link-hover-foreground">
+            <div className="popover-btn-inner">
+              <span className="popover-btn-text">Hover</span>
+            </div>
+          </div>
+          <div className="absolute top-1 right-1 opacity-0 group-hover/btn:opacity-100 transition-opacity">
+            <CopyButton token=".popover-btn (hover state)" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/app/components/design-system/SectionHeader.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface SectionHeaderProps {
+  title: string;
+  description?: string;
+}
+
+export function SectionHeader({ title, description }: SectionHeaderProps) {
+  return (
+    <div className="mb-8">
+      <h2 className="font-['Source_Sans_3',sans-serif] text-[25px] text-foreground uppercase tracking-wide">
+        {title}
+      </h2>
+      {description && (
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-muted-foreground mt-1">
+          {description}
+        </p>
+      )}
+      <div className="h-px bg-border mt-4" />
+    </div>
+  );
+}

package/src/app/components/design-system/Spacing.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+export function Spacing() {
+  return (
+    <section>
+      <SectionHeader
+        title="Spacing & Layout"
+        description="Spacing scale, border radii, and grid system"
+      />
+
+      {/* Spacing Scale */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Spacing Scale
+        </p>
+        <div className="bg-[#1d1d1d] rounded-[15px] p-6 space-y-3">
+          {[
+            { px: 5, label: "xs" },
+            { px: 10, label: "sm" },
+            { px: 15, label: "md" },
+            { px: 20, label: "lg" },
+            { px: 30, label: "xl" },
+            { px: 40, label: "2xl" },
+            { px: 50, label: "3xl" },
+          ].map((item) => (
+            <div key={item.px} className="group/space flex items-center gap-4">
+              <span className="font-['Source_Sans_3',sans-serif] text-[12px] text-[#888] w-8 text-right font-mono">{item.px}</span>
+              <div className="bg-[#78eac1] h-3 rounded-sm" style={{ width: item.px * 3 }} />
+              <span className="font-['Source_Sans_3',sans-serif] text-[13px] text-[#888] flex-1">
+                {item.label} — {item.px}px
+              </span>
+              <div className="opacity-0 group-hover/space:opacity-100 transition-opacity">
+                <CopyButton token={`${item.px}px`} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Border Radii */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Border Radius
+        </p>
+        <div className="flex flex-wrap gap-6">
+          {[
+            { radius: 5, label: "5px — List items" },
+            { radius: 10, label: "10px — Buttons, Steps" },
+            { radius: 12, label: "12px — Wizard steps" },
+            { radius: 15, label: "15px — Cards" },
+            { radius: 30, label: "30px — Nav links, Tabs" },
+            { radius: 50, label: "50px — Pill buttons" },
+            { radius: 100, label: "Full — Avatars" },
+          ].map((item) => (
+            <div key={item.radius} className="group/rad flex flex-col items-center gap-2 relative">
+              <div
+                className="bg-[#262626] border border-[#78eac1]/30 size-16 flex items-center justify-center"
+                style={{ borderRadius: item.radius }}
+              >
+                <span className="font-['Source_Sans_3',sans-serif] text-[12px] text-[#78eac1] font-mono">{item.radius}</span>
+              </div>
+              <span className="font-['Source_Sans_3',sans-serif] text-[11px] text-[#888] text-center max-w-[100px]">
+                {item.label}
+              </span>
+              <div className="absolute -top-1 -right-1 opacity-0 group-hover/rad:opacity-100 transition-opacity">
+                <CopyButton token={`border-radius: ${item.radius}px`} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Grid System */}
+      <div>
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-[#888] uppercase tracking-wider mb-4">
+          Grid System
+        </p>
+        <div className="group/grid bg-[#1d1d1d] rounded-[15px] p-6 space-y-4 relative">
+          <div className="absolute top-2 right-2 opacity-0 group-hover/grid:opacity-100 transition-opacity z-10">
+            <CopyButton token="grid grid-cols-5 gap-[40px] | span-4 + span-1 layout" />
+          </div>
+          <p className="font-['Source_Sans_3',sans-serif] text-[12px] text-[#888]">
+            5-column grid with 40px gap — used for session header layouts
+          </p>
+          <div className="grid grid-cols-5 gap-[40px]">
+            {[1, 2, 3, 4, 5].map((col) => (
+              <div key={col} className="bg-[#262626] h-12 rounded-[10px] flex items-center justify-center">
+                <span className="font-['Source_Sans_3',sans-serif] text-[12px] text-[#888]">Col {col}</span>
+              </div>
+            ))}
+          </div>
+          <p className="font-['Source_Sans_3',sans-serif] text-[12px] text-[#888] mt-4">
+            Spans: Cards typically span 3-4 columns, action columns span 1
+          </p>
+          <div className="grid grid-cols-5 gap-[40px]">
+            <div className="bg-[#262626] h-12 rounded-[10px] flex items-center justify-center col-span-4">
+              <span className="font-['Source_Sans_3',sans-serif] text-[12px] text-[#888]">Card (span 4)</span>
+            </div>
+            <div className="bg-[#78eac1]/20 h-12 rounded-[10px] flex items-center justify-center border border-[#78eac1]/30">
+              <span className="font-['Source_Sans_3',sans-serif] text-[12px] text-[#78eac1]">Action (1)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/app/components/design-system/StatusIndicators.tsx

@@ -0,0 +1,194 @@
+import React from "react";
+import svgPaths from "../../../imports/svg-umftvfphsk";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+export function StatusIndicators() {
+  return (
+    <section>
+      <SectionHeader
+        title="Status Indicators"
+        description="Status icons, tags, counters, legends, and markers"
+      />
+
+      {/* Status Counters */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground uppercase tracking-wider mb-4">
+          Status Counter Items
+        </p>
+        <div className="bg-card rounded-xl p-6">
+          <div className="flex flex-wrap gap-8 items-center">
+            {/* Passed */}
+            <div className="group/item flex items-center gap-2.5 relative">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d={svgPaths.p30b87920} fill="var(--chart-1)" />
+              </svg>
+              <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground">50</span>
+              <div className="opacity-0 group-hover/item:opacity-100 transition-opacity">
+                <CopyButton token="icon: p30b87920 var(--chart-1) | text-sm text-foreground" />
+              </div>
+            </div>
+            {/* Failed */}
+            <div className="group/item flex items-center gap-2.5 relative">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d={svgPaths.p30bab400} fill="var(--chart-2)" />
+              </svg>
+              <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground">10</span>
+              <div className="opacity-0 group-hover/item:opacity-100 transition-opacity">
+                <CopyButton token="icon: p30bab400 var(--chart-2) | text-sm text-foreground" />
+              </div>
+            </div>
+            {/* Blocked */}
+            <div className="group/item flex items-center gap-2.5 relative">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d={svgPaths.p13555100} fill="var(--chart-3)" />
+              </svg>
+              <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground">1</span>
+              <div className="opacity-0 group-hover/item:opacity-100 transition-opacity">
+                <CopyButton token="icon: p13555100 var(--chart-3) | text-sm text-foreground" />
+              </div>
+            </div>
+            {/* Total */}
+            <span className="font-['Source_Sans_3',sans-serif] text-sm text-foreground text-right">
+              99 checks total
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Tags */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground uppercase tracking-wider mb-4">
+          Tags
+        </p>
+        <div className="flex flex-wrap gap-4">
+          <div className="group/tag bg-destructive flex items-center gap-1 h-8 px-4 py-1 rounded-lg relative">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d={svgPaths.p30bab400} fill="white" />
+            </svg>
+            <span className="font-['Source_Sans_3',sans-serif] text-base text-destructive-foreground">failed</span>
+            <div className="opacity-0 group-hover/tag:opacity-100 transition-opacity ml-1">
+              <CopyButton token="bg-destructive h-8 px-4 rounded-lg text-destructive-foreground" />
+            </div>
+          </div>
+          <div className="group/tag flex items-center gap-1 h-8 px-4 py-1 rounded-lg relative" style={{ backgroundColor: 'var(--chart-1)' }}>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d={svgPaths.p30b87920} fill="white" />
+            </svg>
+            <span className="font-['Source_Sans_3',sans-serif] text-base text-white">passed</span>
+            <div className="opacity-0 group-hover/tag:opacity-100 transition-opacity ml-1">
+              <CopyButton token="bg-[var(--chart-1)] h-8 px-4 rounded-lg text-white" />
+            </div>
+          </div>
+          <div className="group/tag flex items-center gap-1 h-8 px-4 py-1 rounded-lg relative" style={{ backgroundColor: 'var(--chart-3)' }}>
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <path d={svgPaths.p13555100} fill="white" />
+            </svg>
+            <span className="font-['Source_Sans_3',sans-serif] text-base text-white">blocked</span>
+            <div className="opacity-0 group-hover/tag:opacity-100 transition-opacity ml-1">
+              <CopyButton token="bg-[var(--chart-3)] h-8 px-4 rounded-lg text-white" />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Legends */}
+      <div className="mb-8">
+        <p className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground uppercase tracking-wider mb-4">
+          Chart Legends
+        </p>
+        <div className="bg-card rounded-xl p-6">
+          <div className="flex flex-wrap gap-6 items-center">
+            {/* Dot Legend */}
+            <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground uppercase mr-2">Dot Style:</p>
+            {[
+              { color: "var(--chart-1)", label: "12 passed" },
+              { color: "var(--chart-2)", label: "12 failed" },
+              { color: "var(--chart-3)", label: "12 blocked" },
+            ].map((item) => (
+              <div key={item.label} className="flex items-center gap-1.5">
+                <svg width="5" height="5" viewBox="0 0 5 5" fill="none">
+                  <circle cx="2.5" cy="2.5" r="2.5" fill={item.color} />
+                </svg>
+                <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">{item.label}</span>
+              </div>
+            ))}
+          </div>
+
+          <div className="h-px bg-secondary my-4" />
+
+          <div className="flex flex-wrap gap-6 items-center">
+            {/* Icon Legend */}
+            <p className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground uppercase mr-2">Icon Style:</p>
+            <div className="flex items-center gap-2.5">
+              <svg width="16" height="16" viewBox="0 0 16.0002 16.0002" fill="none">
+                <path d={svgPaths.p1c7818a0} fill="var(--chart-1)" />
+              </svg>
+              <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">passed</span>
+            </div>
+            <div className="flex items-center gap-2.5">
+              <svg width="16" height="16" viewBox="0 0 16.0002 16.0002" fill="none">
+                <path d={svgPaths.p35ef7800} fill="var(--chart-2)" />
+              </svg>
+              <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">failed</span>
+            </div>
+            <div className="flex items-center gap-2.5">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <path d={svgPaths.p3e1c0930} fill="var(--chart-3)" />
+              </svg>
+              <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">blocked</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Markers & Badges */}
+      <div>
+        <p className="font-['Source_Sans_3',sans-serif] text-sm text-muted-foreground uppercase tracking-wider mb-4">
+          Markers & Badges
+        </p>
+        <div className="flex flex-wrap gap-8 items-center">
+          {/* New marker */}
+          <div className="flex items-center gap-3">
+            <svg width="5" height="5" viewBox="0 0 5 5" fill="none">
+              <circle cx="2.5" cy="2.5" r="2.5" fill="var(--accent)" />
+            </svg>
+            <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">New Marker (purple dot)</span>
+          </div>
+
+          {/* Numbered badge */}
+          <div className="flex items-center gap-3">
+            <div className="bg-muted flex items-center justify-center rounded-lg size-10">
+              <span className="font-['Source_Sans_3',sans-serif] text-lg text-foreground" style={{ fontWeight: 800 }}>1</span>
+            </div>
+            <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">Numbered Badge</span>
+          </div>
+
+          {/* Donut chart mini */}
+          <div className="flex items-center gap-3">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <circle cx="10" cy="10" r="8" stroke="var(--border)" strokeWidth="4" />
+            </svg>
+            <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">Donut Mini (empty)</span>
+          </div>
+
+          {/* Donut chart mini with data */}
+          <div className="flex items-center gap-3">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+              <circle cx="10" cy="10" r="8" stroke="var(--border)" strokeWidth="4" />
+              <mask height="20" id="mask_demo" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="20" x="0" y="0">
+                <path d={svgPaths.p191a7b00} stroke="var(--secondary)" strokeWidth="4" />
+              </mask>
+              <g mask="url(#mask_demo)">
+                <rect fill="var(--chart-2)" height="10" width="10" x="9.88867" />
+                <rect fill="var(--chart-3)" height="10" width="10" x="10" y="10" />
+                <rect fill="var(--chart-1)" height="10" width="10" y="10" />
+              </g>
+            </svg>
+            <span className="font-['Source_Sans_3',sans-serif] text-xs text-muted-foreground">Donut Mini (with data)</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}