@pantoia/ui 0.1.0 → 0.3.0

package/tokens.css

@@ -0,0 +1,272 @@
+:root, .light {
+  --pds-bg:                           #ffffff;
+  --pds-bg-overlay:                   rgba(0,0,0,0.2);
+  --pds-bg-panel:                     #ffffff;
+  --pds-bg-well:                      #f2f4f6;
+
+  --pds-bg-brand-solid:                       var(--pds-brand-500);
+  --pds-bg-brand-solid-hover:                 var(--pds-brand-600);
+  --pds-bg-brand-weak:                        var(--pds-brand-50);
+  --pds-bg-danger-solid:                      var(--pds-red-500);
+  --pds-bg-danger-solid-hover:                var(--pds-red-600);
+  --pds-bg-danger-weak:                       var(--pds-red-50);
+  --pds-bg-info-solid:                        var(--pds-blue-500);
+  --pds-bg-info-weak:                         var(--pds-blue-50);
+  --pds-bg-neutral-disabled:                  var(--pds-gray-200);
+  --pds-bg-neutral-hover:                     rgba(0,23,51,0.02);
+  --pds-bg-neutral-knob:                      #ffffff;
+  --pds-bg-neutral-selected:                  rgba(2,32,71,0.05);
+  --pds-bg-neutral-selected-hover:            rgba(0,27,55,0.1);
+  --pds-bg-neutral-solid:                     var(--pds-gray-900);
+  --pds-bg-neutral-solid-checked-disabled:    var(--pds-gray-600);
+  --pds-bg-neutral-solid-hover:               var(--pds-gray-800);
+  --pds-bg-success-solid:                     var(--pds-green-500);
+  --pds-bg-success-weak:                      var(--pds-green-50);
+  --pds-bg-warning-solid:                     var(--pds-orange-500);
+  --pds-bg-warning-weak:                      var(--pds-orange-50);
+
+  --pds-fg-brand-contrast:                    var(--pds-brand-700);
+  --pds-fg-brand-solid-contrast:              #ffffff;
+  --pds-fg-danger:                            var(--pds-red-500);
+  --pds-fg-danger-contrast:                   var(--pds-red-700);
+  --pds-fg-info:                              var(--pds-blue-500);
+  --pds-fg-info-contrast:                     var(--pds-blue-700);
+  --pds-fg-neutral-solid-contrast:            var(--pds-gray-50);
+  --pds-fg-success:                           var(--pds-green-500);
+  --pds-fg-success-contrast:                  var(--pds-green-700);
+  --pds-fg-warning:                           var(--pds-orange-500);
+  --pds-fg-warning-contrast:                  var(--pds-orange-700);
+
+  --pds-line-brand-weak:                      var(--pds-brand-200);
+  --pds-line-danger:                          var(--pds-red-500);
+  --pds-line-danger-weak:                     var(--pds-red-200);
+  --pds-line-focus-ring:                      var(--pds-blue-500);
+  --pds-line-info:                            var(--pds-blue-500);
+  --pds-line-info-weak:                       var(--pds-blue-200);
+  --pds-line-neutral-solid:                   var(--pds-gray-900);
+  --pds-line-strong:                          var(--pds-gray-300);
+  --pds-line-success:                         var(--pds-green-500);
+  --pds-line-success-weak:                    var(--pds-green-200);
+  --pds-line-warning:                         var(--pds-orange-500);
+  --pds-line-warning-weak:                    var(--pds-orange-200);
+
+  --pds-black:                                #000000;
+  --pds-fg:                           var(--pds-gray-900);
+  --pds-fg-disabled:                  var(--pds-gray-600);
+  --pds-fg-muted:                     var(--pds-gray-700);
+  --pds-fg-placeholder:               var(--pds-gray-400);
+  --pds-fg-subtle:                    var(--pds-gray-500);
+  --pds-line:                                 var(--pds-gray-200);
+  --pds-white:                                #ffffff;
+}
+
+.dark {
+  --pds-bg:                           #17171c;
+  --pds-bg-overlay:                   rgba(0,0,0,0.56);
+  --pds-bg-panel:                     #202027;
+  --pds-bg-well:                      #101013;
+
+  --pds-bg-brand-solid:                       var(--pds-brand-500);
+  --pds-bg-brand-solid-hover:                 var(--pds-brand-600);
+  --pds-bg-brand-weak:                        var(--pds-brand-50);
+  --pds-bg-danger-solid:                      var(--pds-red-500);
+  --pds-bg-danger-solid-hover:                var(--pds-red-600);
+  --pds-bg-danger-weak:                       var(--pds-red-50);
+  --pds-bg-info-solid:                        var(--pds-blue-500);
+  --pds-bg-info-weak:                         var(--pds-blue-50);
+  --pds-bg-neutral-disabled:                  var(--pds-gray-200);
+  --pds-bg-neutral-hover:                     rgba(209,209,253,0.05);
+  --pds-bg-neutral-knob:                      #2c2c35;
+  --pds-bg-neutral-selected:                  rgba(217,217,255,0.11);
+  --pds-bg-neutral-selected-hover:            rgba(222,222,255,0.19);
+  --pds-bg-neutral-solid:                     var(--pds-gray-900);
+  --pds-bg-neutral-solid-checked-disabled:    var(--pds-gray-600);
+  --pds-bg-neutral-solid-hover:               var(--pds-gray-800);
+  --pds-bg-success-solid:                     var(--pds-green-500);
+  --pds-bg-success-weak:                      var(--pds-green-50);
+  --pds-bg-warning-solid:                     var(--pds-orange-500);
+  --pds-bg-warning-weak:                      var(--pds-orange-50);
+
+  --pds-fg-brand-contrast:                    var(--pds-brand-700);
+  --pds-fg-brand-solid-contrast:              #ffffff;
+  --pds-fg-danger:                            var(--pds-red-500);
+  --pds-fg-danger-contrast:                   var(--pds-red-700);
+  --pds-fg-info:                              var(--pds-blue-500);
+  --pds-fg-info-contrast:                     var(--pds-blue-700);
+  --pds-fg-neutral-solid-contrast:            var(--pds-gray-50);
+  --pds-fg-success:                           var(--pds-green-500);
+  --pds-fg-success-contrast:                  var(--pds-green-700);
+  --pds-fg-warning:                           var(--pds-orange-500);
+  --pds-fg-warning-contrast:                  var(--pds-orange-700);
+
+  --pds-line-brand-weak:                      var(--pds-brand-200);
+  --pds-line-danger:                          var(--pds-red-500);
+  --pds-line-danger-weak:                     var(--pds-red-200);
+  --pds-line-focus-ring:                      var(--pds-blue-500);
+  --pds-line-info:                            var(--pds-blue-500);
+  --pds-line-info-weak:                       var(--pds-blue-200);
+  --pds-line-neutral-solid:                   var(--pds-gray-900);
+  --pds-line-strong:                          var(--pds-gray-300);
+  --pds-line-success:                         var(--pds-green-500);
+  --pds-line-success-weak:                    var(--pds-green-200);
+  --pds-line-warning:                         var(--pds-orange-500);
+  --pds-line-warning-weak:                    var(--pds-orange-200);
+
+  --pds-black:                                #000000;
+  --pds-fg:                           var(--pds-gray-900);
+  --pds-fg-disabled:                  var(--pds-gray-600);
+  --pds-fg-muted:                     var(--pds-gray-700);
+  --pds-fg-placeholder:               var(--pds-gray-400);
+  --pds-fg-subtle:                    var(--pds-gray-500);
+  --pds-line:                                 var(--pds-gray-200);
+  --pds-white:                                #ffffff;
+}
+
+@theme inline {
+  --color-bg:                         var(--pds-bg);
+  --color-bg-overlay:                 var(--pds-bg-overlay);
+  --color-bg-panel:                   var(--pds-bg-panel);
+  --color-bg-well:                    var(--pds-bg-well);
+  --color-bg-brand-solid:                     var(--pds-bg-brand-solid);
+  --color-bg-brand-solid-hover:               var(--pds-bg-brand-solid-hover);
+  --color-bg-brand-weak:                      var(--pds-bg-brand-weak);
+  --color-bg-danger-solid:                    var(--pds-bg-danger-solid);
+  --color-bg-danger-solid-hover:              var(--pds-bg-danger-solid-hover);
+  --color-bg-danger-weak:                     var(--pds-bg-danger-weak);
+  --color-bg-info-solid:                      var(--pds-bg-info-solid);
+  --color-bg-info-weak:                       var(--pds-bg-info-weak);
+  --color-bg-neutral-disabled:                var(--pds-bg-neutral-disabled);
+  --color-bg-neutral-hover:                   var(--pds-bg-neutral-hover);
+  --color-bg-neutral-knob:                    var(--pds-bg-neutral-knob);
+  --color-bg-neutral-selected:                var(--pds-bg-neutral-selected);
+  --color-bg-neutral-selected-hover:          var(--pds-bg-neutral-selected-hover);
+  --color-bg-neutral-solid:                   var(--pds-bg-neutral-solid);
+  --color-bg-neutral-solid-checked-disabled:  var(--pds-bg-neutral-solid-checked-disabled);
+  --color-bg-neutral-solid-hover:             var(--pds-bg-neutral-solid-hover);
+  --color-bg-success-solid:                   var(--pds-bg-success-solid);
+  --color-bg-success-weak:                    var(--pds-bg-success-weak);
+  --color-bg-warning-solid:                   var(--pds-bg-warning-solid);
+  --color-bg-warning-weak:                    var(--pds-bg-warning-weak);
+  --color-fg-brand-contrast:                  var(--pds-fg-brand-contrast);
+  --color-fg-brand-solid-contrast:            var(--pds-fg-brand-solid-contrast);
+  --color-fg-danger:                          var(--pds-fg-danger);
+  --color-fg-danger-contrast:                 var(--pds-fg-danger-contrast);
+  --color-fg-info:                            var(--pds-fg-info);
+  --color-fg-info-contrast:                   var(--pds-fg-info-contrast);
+  --color-fg-neutral-solid-contrast:          var(--pds-fg-neutral-solid-contrast);
+  --color-fg-success:                         var(--pds-fg-success);
+  --color-fg-success-contrast:                var(--pds-fg-success-contrast);
+  --color-fg-warning:                         var(--pds-fg-warning);
+  --color-fg-warning-contrast:                var(--pds-fg-warning-contrast);
+  --color-line-brand-weak:                    var(--pds-line-brand-weak);
+  --color-line-danger:                        var(--pds-line-danger);
+  --color-line-danger-weak:                   var(--pds-line-danger-weak);
+  --color-line-focus-ring:                    var(--pds-line-focus-ring);
+  --color-line-info:                          var(--pds-line-info);
+  --color-line-info-weak:                     var(--pds-line-info-weak);
+  --color-line-neutral-solid:                 var(--pds-line-neutral-solid);
+  --color-line-strong:                        var(--pds-line-strong);
+  --color-line-success:                       var(--pds-line-success);
+  --color-line-success-weak:                  var(--pds-line-success-weak);
+  --color-line-warning:                       var(--pds-line-warning);
+  --color-line-warning-weak:                  var(--pds-line-warning-weak);
+  --color-black:                              var(--pds-black);
+  --color-fg:                         var(--pds-fg);
+  --color-fg-disabled:                var(--pds-fg-disabled);
+  --color-fg-muted:                   var(--pds-fg-muted);
+  --color-fg-placeholder:             var(--pds-fg-placeholder);
+  --color-fg-subtle:                  var(--pds-fg-subtle);
+  --color-line:                               var(--pds-line);
+  --color-white:                              var(--pds-white);
+}
+
+@theme {
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold:   700;
+
+  --font-sans: "Pretendard Variable", "Pretendard", -apple-system, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", "Pretendard Variable", "Pretendard", ui-monospace, monospace;
+
+  --text-display:    28px; --text-display--line-height:    38px; --text-display--font-weight:    700;
+  --text-title:      24px; --text-title--line-height:      32px; --text-title--font-weight:      700;
+  --text-section:    20px; --text-section--line-height:    27px; --text-section--font-weight:    700;
+  --text-subsection: 16px; --text-subsection--line-height: 22px; --text-subsection--font-weight: 700;
+  --text-label:      14px; --text-label--line-height:      19px; --text-label--font-weight:      500;
+  --text-caption:    13px; --text-caption--line-height:    18px; --text-caption--font-weight:    400;
+  --text-micro:      11px; --text-micro--line-height:      15px; --text-micro--font-weight:      500;
+
+  --text-t10: 10px; --text-t10--line-height: 14px; --text-t10--font-weight: 400;
+  --text-t11: 11px; --text-t11--line-height: 15px; --text-t11--font-weight: 400;
+  --text-t12: 12px; --text-t12--line-height: 16px; --text-t12--font-weight: 400;
+  --text-t13: 13px; --text-t13--line-height: 18px; --text-t13--font-weight: 400;
+  --text-t14: 14px; --text-t14--line-height: 19px; --text-t14--font-weight: 400;
+  --text-t16: 16px; --text-t16--line-height: 22px; --text-t16--font-weight: 400;
+  --text-t18: 18px; --text-t18--line-height: 24px; --text-t18--font-weight: 400;
+  --text-t20: 20px; --text-t20--line-height: 27px; --text-t20--font-weight: 400;
+  --text-t24: 24px; --text-t24--line-height: 32px; --text-t24--font-weight: 400;
+  --text-t28: 28px; --text-t28--line-height: 38px; --text-t28--font-weight: 400;
+  --text-t32: 32px; --text-t32--line-height: 43px; --text-t32--font-weight: 400;
+  --text-t40: 40px; --text-t40--line-height: 54px; --text-t40--font-weight: 400;
+  --text-t48: 48px; --text-t48--line-height: 65px; --text-t48--font-weight: 400;
+  --text-t56: 56px; --text-t56--line-height: 76px; --text-t56--font-weight: 400;
+  --text-t64: 64px; --text-t64--line-height: 86px; --text-t64--font-weight: 400;
+}
+
+:root {
+  --pds-prose: 16px; --pds-prose-lh: 24px;
+  --pds-value: 16px; --pds-value-lh: 22px;
+
+  @variant sm { --pds-prose: 14px; --pds-prose-lh: 22px; }
+  @variant sm { --pds-value: 14px; --pds-value-lh: 19px; }
+}
+
+@theme {
+  --breakpoint-xs: 30rem;
+}
+
+@theme {
+  --spacing-tight:    4px;
+  --spacing-stack:   16px;
+  --spacing-block:   32px;
+  --spacing-section: 48px;
+  --spacing-gutter:  16px;
+}
+
+@theme {
+  --radius-r2:   2px;  --radius-r4:   4px;  --radius-r6:   6px;
+  --radius-r8:   8px;  --radius-r10: 10px;  --radius-r12: 12px;
+  --radius-r14: 14px;  --radius-r16: 16px;  --radius-r20: 20px;
+  --radius-r24: 24px;
+}
+
+@theme {
+  --ease-state: cubic-bezier(.35, 0, .65, 1);
+  --ease-enter: cubic-bezier(0, 0, .15, 1);
+  --ease-exit:  cubic-bezier(.35, 0, 1, 1);
+}
+
+:root {
+  --dur-state: 150ms;
+  --dur-enter: 200ms;
+  --dur-exit:  150ms;
+  --enter-scale: 0.95;
+  --draw-len: 24;
+  --scale-press: 0.97;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root:root { --enter-scale: 1; --scale-press: 1; }
+}
+
+@theme {
+  --shadow-s1: 0 1px  4px 0 var(--pds-shadow-1);
+  --shadow-s2: 0 2px 10px 0 var(--pds-shadow-2);
+  --shadow-s3: 0 4px 16px 0 var(--pds-shadow-3);
+}
+
+:root, .light { --pds-shadow-1:#00000014; --pds-shadow-2:#0000001a; --pds-shadow-3:#0000001f; }
+.dark { --pds-shadow-1:#00000080; --pds-shadow-2:#000000ad; --pds-shadow-3:#000000cc; }
+
+:root, .light { --pds-pressed-dim: rgba(0,23,51,0.12); }
+.dark         { --pds-pressed-dim: rgba(209,209,253,0.14); }

package/tooltip/AGENTS.md

@@ -3,7 +3,7 @@
 ```
 받기   npx @pantoia/ui add tooltip
 층     ui
-파일   tooltip/index.tsx · tooltip/AGENTS.md
+파일   tooltip/index.tsx, tooltip/AGENTS.md
 ```
 
 ## 부위
@@ -11,7 +11,7 @@
 | 이름 | props |
 |---|---|
 | `Tooltip` | `TooltipProps` |
-| `TooltipTrigger` | — |
+| `TooltipTrigger` | - |
 | `TooltipContent` | `TooltipContentProps` |
 
 ### `TooltipTrigger`

package/tooltip/index.tsx

@@ -32,6 +32,12 @@ export interface TooltipContentProps extends Omit<ComponentProps<typeof TooltipP
   arrow?: boolean
 }
 
+const tooltipContent = tv({
+  base: 'float text-fg rounded-r12 z-overlay'
+    + ' text-caption max-w-64 px-3 py-1'
+    + ' open:animate-enter closed:animate-exit',
+})
+
 export function TooltipContent({
   side = 'top',
   arrow = true,
@@ -45,12 +51,16 @@ export function TooltipContent({
         {...rest}
         side={side}
         sideOffset={6}
-        className={tv({ base: 'bg-float text-fg rounded-r12 shadow-s3 z-overlay'
-          + ' text-caption max-w-64 px-3 py-1'
-          + ' open:animate-enter closed:animate-exit' })({ className })}
+        className={tooltipContent({ className })}
       >
         {children}
-        {arrow && <TooltipPrimitive.Arrow className="fill-float" width={10} height={5} />}
+        {arrow && (
+          <TooltipPrimitive.Arrow asChild width={10} height={5}>
+            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-bg-panel -translate-y-px">
+              <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
+            </svg>
+          </TooltipPrimitive.Arrow>
+        )}
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )

package/tv.ts

@@ -7,7 +7,6 @@ export const tv = createTV({
     theme: {
       spacing: ['tight', 'stack', 'block', 'section', 'gutter'],
       radius: [
-        'mark', 'well', 'panel', 'float',
         'r2', 'r4', 'r6', 'r8', 'r10', 'r12', 'r14', 'r16', 'r20', 'r24',
       ],
       text: [

package/utilities.css

@@ -0,0 +1,119 @@
+@custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
+
+@custom-variant current (&[aria-current="page"]);
+
+@custom-variant invalid (&[aria-invalid="true"]);
+
+@custom-variant invalid-within (&:has([aria-invalid="true"]));
+
+@custom-variant in-invalid (&:where([aria-invalid="true"] *));
+
+@custom-variant described (&:has([data-description]));
+
+@custom-variant checked (&:where([data-state="checked"], [data-state="indeterminate"]));
+@custom-variant open    (&[data-state="open"]);
+@custom-variant closed  (&[data-state="closed"]);
+@custom-variant on      (&[data-state="on"]);
+@custom-variant selected (&[data-selected]:not([data-selected="false"]));
+@custom-variant unset    (&[data-placeholder]);
+
+@custom-variant menu-gutter (.menu:has(.menu-lead) &:not(:has(.menu-lead)));
+
+@layer base {
+  :root { color-scheme: light; }
+  .dark { color-scheme: dark; }
+
+  body {
+    background-color: var(--color-bg);
+    color: var(--color-fg);
+    font-family: var(--font-sans);
+  }
+
+  code, pre, kbd, samp { font-family: var(--font-mono); }
+}
+
+@utility text-prose {
+  font-size: var(--pds-prose);
+  line-height: var(--tw-leading, var(--pds-prose-lh));
+  font-weight: var(--tw-font-weight, 400);
+}
+
+@utility text-value {
+  font-size: var(--pds-value);
+  line-height: var(--tw-leading, var(--pds-value-lh));
+  font-weight: var(--tw-font-weight, 400);
+}
+
+@utility transition-state {
+  transition-property: color, background-color, box-shadow, scale;
+  transition-duration: var(--dur-state);
+  transition-timing-function: var(--ease-state);
+}
+
+@keyframes enter { from { opacity: 0; scale: var(--enter-scale); } }
+@keyframes exit  { to   { opacity: 0; scale: var(--enter-scale); } }
+
+@utility animate-enter { animation: enter var(--dur-enter) var(--ease-enter); }
+@utility animate-exit  { animation: exit  var(--dur-exit)  var(--ease-exit);  }
+
+@keyframes draw { from { stroke-dashoffset: var(--draw-len); } }
+
+@utility animate-draw {
+  stroke-dasharray: var(--draw-len);
+  animation: draw var(--dur-enter) var(--ease-enter);
+}
+
+@keyframes fade-in  { from { opacity: 0; } }
+@keyframes fade-out { to   { opacity: 0; } }
+
+@utility animate-fade-in  { animation: fade-in  var(--dur-enter) var(--ease-enter); }
+@utility animate-fade-out { animation: fade-out var(--dur-exit)  var(--ease-exit);  }
+
+@utility z-sticky  { z-index: 10; }
+@utility z-overlay { z-index: 50; }
+@utility z-toast   { z-index: 60; }
+
+@utility frame {
+  @apply bg-bg-panel border border-line;
+}
+
+@utility card {
+  @apply bg-bg-panel shadow-s3;
+}
+
+@utility float {
+  @apply bg-bg-panel border border-line shadow-s3;
+}
+
+@utility sheet {
+  @apply bg-bg-panel;
+}
+
+@utility press {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: var(--pds-pressed-dim);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--dur-state) var(--ease-state);
+  }
+
+  &:active:not(:disabled):not([aria-disabled="true"])::after,
+  &[data-pressed]:not(:disabled):not([aria-disabled="true"])::after {
+    opacity: 1;
+    transition-duration: 0s;
+  }
+}
+
+@utility press-shrink {
+  &:active:not(:disabled):not([aria-disabled="true"]),
+  &[data-pressed]:not(:disabled):not([aria-disabled="true"]) {
+    scale: var(--scale-press);
+    transition-duration: 0s;
+  }
+}

package/code-block/AGENTS.md

@@ -1,60 +0,0 @@
-# CodeBlock
-
-```
-받기   npx @pantoia/ui add code-block
-층     ui
-파일   code-block/index.tsx · code-block/index.module.css · code-block/AGENTS.md
-```
-
-## 부위
-
-| 이름 | props |
-|---|---|
-| `CodeBlock` | `CodeBlockProps` |
-| `CodeBlockHeader` | — |
-
-### `CodeBlockHeader`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `className` | `string` |  |
-| `children` | `ReactNode` |  |
-
-## props
-
-### `CodeBlockFold`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `maxLines` | `number` | 예 |
-| `more` | `string` | 예 |
-| `moreCount` | `string` | 예 |
-| `less` | `string` | 예 |
-
-### `CodeBlockProps`
-
-| 이름 | 타입 | 필수 |
-|---|---|---|
-| `code` | `string` | 예 |
-| `wrap` | `boolean` |  |
-| `numbers` | `boolean` |  |
-| `fold` | `CodeBlockFold` |  |
-| `className` | `string` |  |
-| `header` | `ReactNode` |  |
-| `line` | `(line: string, index: number) => ReactNode` |  |
-
-## 변형 — `codeBlock`
-
-슬롯 `root` · `viewport` · `pre` · `chevron`
-
-| 축 | 값 | 기본 |
-|---|---|---|
-| `folded` | `false` | — |
-
-## 함께 받는 것
-
-`tv`
-
-## npm 의존
-
-`lucide-react`

package/code-block/index.module.css

@@ -1,46 +0,0 @@
-.code {
-  margin: 0;
-  padding: 1rem;
-  counter-reset: ln;
-
-  --code-block-keyword: var(--purple-700);
-  --code-block-name: var(--orange-800);
-  --code-block-string: var(--green-800);
-  --code-block-comment: var(--gray-500);
-  --code-block-value: var(--blue-700);
-}
-
-.code-keyword { color: var(--code-block-keyword); }
-.code-name { color: var(--code-block-name); }
-.code-string { color: var(--code-block-string); }
-.code-comment { color: var(--code-block-comment); }
-.code-value { color: var(--code-block-value); }
-.line { display: block; white-space: pre; min-height: 1lh; }
-.wrap .line { white-space: pre-wrap; word-break: break-all; }
-
-.numbers { padding-left: 0; }
-.numbers .line::before {
-  counter-increment: ln;
-  content: counter(ln);
-  display: inline-block;
-  width: 3.4em;
-  padding-right: 0.9em;
-  text-align: right;
-  color: var(--color-fg-subtle);
-  user-select: none;
-  pointer-events: none;
-}
-
-.numbers:not(.wrap) .line::before {
-  position: sticky;
-  left: 0;
-  background: var(--color-well);
-}
-
-.numbers.wrap .line { padding-left: 3.4em; text-indent: -3.4em; }
-
-.clip {
-  max-height: calc(var(--code-block-max-lines) * 1lh + 2rem);
-  overflow-y: hidden;
-  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
-}

package/code-block/index.tsx

@@ -1,127 +0,0 @@
-'use client'
-
-import { ChevronDown } from 'lucide-react'
-import { useCallback, useState, useSyncExternalStore, type CSSProperties, type ReactNode } from 'react'
-
-import { tv } from '../tv'
-
-import s from './index.module.css'
-
-export const codeToken = {
-  keyword: s['code-keyword'],
-  name: s['code-name'],
-  string: s['code-string'],
-  comment: s['code-comment'],
-  value: s['code-value'],
-  none: '',
-} as const
-
-export interface CodeBlockFold {
-  maxLines: number
-  more: string
-  moreCount: string
-  less: string
-}
-
-export const codeBlock = tv({
-  slots: {
-    root: 'bg-well rounded-well text-value font-mono overflow-hidden',
-    viewport: 'scroll-slim overflow-auto'
-      + ' focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring',
-    pre: '',
-    chevron: 'size-4 transition-transform motion-reduce:transition-none',
-  },
-
-  variants: {
-    folded: { false: { chevron: 'rotate-180' } },
-  },
-})
-
-export interface CodeBlockProps {
-  code: string
-  wrap?: boolean
-  numbers?: boolean
-  fold?: CodeBlockFold
-  className?: string
-  header?: ReactNode
-  line?: (line: string, index: number) => ReactNode
-}
-
-export function CodeBlock({
-  code,
-  wrap = false,
-  numbers = false,
-  fold,
-  className,
-  header,
-  line,
-}: CodeBlockProps) {
-  const [folded, setFolded] = useState(true)
-  const [box, setBox] = useState<HTMLDivElement | null>(null)
-
-  const subscribe = useCallback((onChange: () => void) => {
-    if (!box) return () => {}
-    const observer = new ResizeObserver(onChange)
-    observer.observe(box)
-    if (box.firstElementChild) observer.observe(box.firstElementChild)
-    return () => observer.disconnect()
-  }, [box])
-
-  const overflows = useSyncExternalStore(
-    subscribe,
-    () => box !== null && (box.scrollWidth > box.clientWidth || box.scrollHeight > box.clientHeight),
-    () => false,
-  )
-
-  const lines = code.split('\n')
-  const foldable = !!fold && lines.length > fold.maxLines
-  const rest = lines.length - (fold?.maxLines ?? 0)
-
-  const ui = codeBlock({ folded })
-
-  const pre = [s.code, wrap ? s.wrap : '', numbers ? s.numbers : '', ui.pre()]
-    .filter(Boolean).join(' ')
-
-  const viewport = [ui.viewport(), foldable && folded ? s.clip : '']
-    .filter(Boolean).join(' ')
-
-  return (
-    <div className={ui.root({ className })}>
-      {header}
-
-      <div
-        ref={setBox}
-        tabIndex={overflows ? 0 : undefined}
-        className={viewport}
-        style={{ '--code-block-max-lines': fold?.maxLines } as CSSProperties}
-      ><pre className={pre}>{lines.map((text, i) => (
-        <span key={i} className={s.line}>{line ? line(text, i) : text}</span>
-      ))}</pre></div>
-
-      {foldable && (
-        <button
-          type="button"
-          className="border-line text-caption text-fg-muted flex w-full items-center justify-center
-             gap-tight border-t py-2 transition-state press
-             enabled:hover:bg-hover
-             focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"
-          onClick={() => setFolded(!folded)}
-        >
-          <ChevronDown className={ui.chevron()} />
-          {folded ? (wrap ? fold.more : fold.moreCount.replace('{count}', String(rest))) : fold.less}
-        </button>
-      )}
-    </div>
-  )
-}
-
-export function CodeBlockHeader({ className, children }: { className?: string, children?: ReactNode }) {
-  return (
-    <div
-      className={tv({ base: 'border-line text-caption text-fg-muted'
-        + ' flex items-center gap-stack border-b px-4 py-2' })({ className })}
-    >
-      {children}
-    </div>
-  )
-}