@opencode-ai/ui 0.0.0-dev-19174 → 0.0.0-dev-202609060432

package/src/{overlays/tooltip/tooltip.css → v2/components/tooltip-v2.css}

@@ -39,32 +39,6 @@
   }
 }
 
-[data-component="tooltip-v2"][data-appearance="standard"] {
-  display: block;
-  max-width: 320px;
-  padding: 2px 8px;
-  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
-  border-radius: var(--radius-sm);
-  background: var(--surface-float-base);
-  color: var(--text-invert-strong);
-  box-shadow: var(--shadow-md);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large);
-  letter-spacing: var(--letter-spacing-normal);
-  font-variant-numeric: normal;
-  font-variation-settings: normal;
-  user-select: text;
-  animation: none;
-
-  &[data-closed]:not([data-force-open="true"]) {
-    opacity: 0;
-    animation: none;
-  }
-}
-
 @keyframes tooltipV2In {
   from {
     opacity: 0;

package/src/{overlays/tooltip/tooltip.tsx → v2/components/tooltip-v2.tsx}

@@ -1,21 +1,19 @@
-import { Content, Portal, Root, Trigger } from "@kobalte/core/tooltip"
-import { createEffect, Match, onCleanup, splitProps, Switch, untrack, type JSX } from "solid-js"
+import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
+import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
-import "./tooltip.css"
+import "./tooltip-v2.css"
 
-export interface TooltipProps extends ComponentProps<typeof Root> {
+export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
   value: JSX.Element
-  appearance?: "standard" | "compact"
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
   inactive?: boolean
   forceOpen?: boolean
-  triggerTabIndex?: number
 }
 
-export function Tooltip(props: TooltipProps) {
+export function TooltipV2(props: TooltipV2Props) {
   let ref: HTMLDivElement | undefined
   const [state, setState] = createStore({
     open: false,
@@ -24,19 +22,16 @@ export function Tooltip(props: TooltipProps) {
   })
   const [local, others] = splitProps(props, [
     "children",
-    "appearance",
     "class",
     "contentClass",
     "contentStyle",
     "inactive",
     "forceOpen",
-    "triggerTabIndex",
     "ignoreSafeArea",
     "value",
   ])
 
   const close = () => setState("open", false)
-  const controlled = () => local.forceOpen !== undefined
 
   const inside = () => {
     const active = document.activeElement
@@ -45,7 +40,7 @@ export function Tooltip(props: TooltipProps) {
   }
 
   const drop = (expand = state.expand) => {
-    if (expand || !state.block) return
+    if (expand) return
     if (ref?.matches(":hover")) return
     if (inside()) return
     setState("block", false)
@@ -74,7 +69,7 @@ export function Tooltip(props: TooltipProps) {
 
   createEffect(() => {
     if (!ref) return
-    untrack(sync)
+    sync()
     const obs = new MutationObserver(sync)
     obs.observe(ref, {
       subtree: true,
@@ -91,16 +86,16 @@ export function Tooltip(props: TooltipProps) {
     <Switch>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={true}>
-        <Root
+        <KobalteTooltip
           gutter={4}
           openDelay={400}
           skipDelayDuration={300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
-          open={controlled() ? local.forceOpen : state.open}
+          open={local.forceOpen || state.open}
           onOpenChange={(open) => {
-            if (controlled()) return
+            if (local.forceOpen) return
             if (state.block && open) return
             if (justClickedTrigger) {
               justClickedTrigger = false
@@ -109,10 +104,9 @@ export function Tooltip(props: TooltipProps) {
             setState("open", open)
           }}
         >
-          <Trigger
+          <KobalteTooltip.Trigger
             ref={ref}
             as="div"
-            tabIndex={local.triggerTabIndex}
             data-component="tooltip-v2-trigger"
             class={local.class}
             onPointerDownCapture={arm}
@@ -124,15 +118,14 @@ export function Tooltip(props: TooltipProps) {
             onFocusOut={() => requestAnimationFrame(() => drop())}
           >
             {local.children}
-          </Trigger>
-          <Portal>
-            <Content
+          </KobalteTooltip.Trigger>
+          <KobalteTooltip.Portal>
+            <KobalteTooltip.Content
               ref={(el) => {
                 const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
-              data-appearance={local.appearance ?? "compact"}
               data-placement={props.placement}
               data-force-open={local.forceOpen}
               class={local.contentClass}
@@ -145,9 +138,9 @@ export function Tooltip(props: TooltipProps) {
               }}
             >
               {local.value}
-            </Content>
-          </Portal>
-        </Root>
+            </KobalteTooltip.Content>
+          </KobalteTooltip.Portal>
+        </KobalteTooltip>
       </Match>
     </Switch>
   )

package/src/v2/components/wordmark-v2.tsx

@@ -0,0 +1,71 @@
+import { createUniqueId, type ComponentProps } from "solid-js"
+
+export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
+  const mask = createUniqueId()
+  const maskGradient = createUniqueId()
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 720 129"
+      fill="none"
+      classList={{ [props.class ?? ""]: !!props.class }}
+    >
+      <g opacity="0.6">
+        <g mask={`url(#${mask})`}>
+          <g opacity="0.16">
+            <path
+              opacity="0.7"
+              d="M55.3846 36.4286H18.4615V91.7143H55.3846V36.4286ZM73.8462 110.143H0V18H73.8462V110.143Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M110.462 91.7143H147.385V36.4286H110.462V91.7143ZM165.846 110.143H110.462V128.571H92V18H165.846V110.143Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M258.846 73.2857H203.462V91.7143H258.846V110.143H185V18H258.846V73.2857ZM203.462 54.8571H240.385V36.4286H203.462V54.8571Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M332.385 36.4286H295.462V110.143H277V18H332.385V36.4286ZM350.846 110.143H332.385V36.4286H350.846V110.143Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M442.846 36.4286H387.462V91.7143H442.846V110.143H369V18H442.846V36.4286Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M517.385 36.4286H480.462V91.7143H517.385V36.4286ZM535.846 110.143H462V18H535.846V110.143Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M609.385 36.8571H572.462V92.1429H609.385V36.8571ZM627.846 110.571H554V18.4286H609.385V0H627.846V110.571Z"
+              fill="currentColor"
+            />
+            <path
+              opacity="0.7"
+              d="M664.462 36.4286V54.8571H701.385V36.4286H664.462ZM719.846 73.2857H664.462V91.7143H719.846V110.143H646V18H719.846V73.2857Z"
+              fill="currentColor"
+            />
+          </g>
+        </g>
+      </g>
+      <defs>
+        <mask id={mask} style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="720" height="129">
+          <rect width="720" height="129" fill={`url(#${maskGradient})`} />
+        </mask>
+        <linearGradient id={maskGradient} x1="360" y1="68" x2="360" y2="129" gradientUnits="userSpaceOnUse">
+          <stop stop-color="white" stop-opacity="0.7" />
+          <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}

package/src/{styles/tokens → v2/styles}/colors.css

@@ -128,18 +128,18 @@
     --v2-cyan-1200: #00353fff;
 
     /* ── Blue ── */
-    --v2-blue-100: #f5f8ffff;
-    --v2-blue-200: #ecf1feff;
+    --v2-blue-100: #ecf1feff;
+    --v2-blue-200: #d7e2fcff;
     --v2-blue-300: #c3d4fdff;
     --v2-blue-400: #a2bcffff;
     --v2-blue-500: #7698fdff;
     --v2-blue-600: #3b5cf6ff;
-    --v2-blue-700: #0b34f4ff;
-    --v2-blue-800: #3250dfff;
-    --v2-blue-900: #2c47c8ff;
-    --v2-blue-1000: #263fa9ff;
-    --v2-blue-1100: #22388fff;
-    --v2-blue-1200: #021945ff;
+    --v2-blue-700: #3250dfff;
+    --v2-blue-800: #2c47c8ff;
+    --v2-blue-900: #263fa9ff;
+    --v2-blue-1000: #22388fff;
+    --v2-blue-1100: #1c2e70ff;
+    --v2-blue-1200: #1b2852ff;
 
     /* ── Purple ── */
     --v2-purple-100: #ebecfeff;

package/src/{styles/tokens → v2/styles}/theme.css

@@ -1,4 +1,16 @@
 @layer theme {
+  html[data-theme="oc-2"] body:not([data-new-layout]) {
+    --text-diff-add-base: light-dark(#167517, #c4ffc0);
+    --text-diff-delete-base: light-dark(#fa3012, #ec2f14);
+    --syntax-comment: light-dark(#7a7a7a, #8f8f8f);
+    --syntax-keyword: light-dark(#a753ae, #edb2f1);
+    --syntax-string: #00ceb9;
+    --syntax-primitive: light-dark(#034cff, #8cb0ff);
+    --syntax-property: light-dark(#a753ae, #fab283);
+    --syntax-type: light-dark(#8a6f00, #fcd53a);
+    --syntax-critical: light-dark(#ff8c00, #fab283);
+  }
+
   :root {
     color-scheme: light;
 
@@ -11,10 +23,8 @@
     --v2-background-bg-layer-04: var(--v2-grey-400);
     --v2-background-bg-inverse: var(--v2-grey-1100);
     --v2-background-bg-contrast: var(--v2-grey-1000);
-    --v2-background-bg-icon-button-contrast: var(--v2-background-bg-contrast);
     --v2-background-bg-button-neutral: var(--v2-grey-50);
     --v2-background-bg-accent: var(--v2-blue-600);
-    --v2-background-bg-code-path: var(--v2-cyan-100);
 
     /* ── Text ── */
     --v2-text-text-base: var(--v2-grey-1100);
@@ -25,12 +35,10 @@
     --v2-text-text-accent: var(--v2-blue-600);
     --v2-text-text-accent-hover: var(--v2-blue-700);
     --v2-text-text-code-accent: var(--v2-blue-900);
-    --v2-text-text-code-path: var(--v2-blue-900);
 
     /* ── Icon ── */
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
-    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -65,7 +73,7 @@
     --v2-state-bg-danger: var(--v2-red-100);
     --v2-state-fg-danger: var(--v2-red-800);
     --v2-state-border-danger: var(--v2-red-300);
-    --v2-state-bg-info: var(--v2-blue-200);
+    --v2-state-bg-info: var(--v2-blue-100);
     --v2-state-fg-info: var(--v2-blue-800);
     --v2-state-border-info: var(--v2-blue-300);
 
@@ -132,12 +140,8 @@
     --v2-illustration-illustration-layer-02: var(--v2-grey-400);
     --v2-illustration-illustration-layer-03: var(--v2-grey-500);
 
-    --font-family-text: var(--font-family-sans);
-    --v2-font-family-sans: var(--font-family-sans);
-    --v2-font-family-code: var(--font-family-mono);
-    --line-height-tight: 12px;
-    --line-height-compact: 16px;
-    --line-height-base: 20px;
+    --font-family-text: "Inter", sans-serif;
+    --v2-font-family-sans: "Inter", sans-serif;
   }
 
   /* OS preference fallback (no JS needed) */
@@ -154,7 +158,6 @@
       --v2-background-bg-contrast: var(--v2-grey-700);
       --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
       --v2-background-bg-accent: var(--v2-blue-600);
-      --v2-background-bg-code-path: var(--v2-cyan-1200);
 
       --v2-text-text-base: var(--v2-grey-200);
       --v2-text-text-muted: var(--v2-grey-500);
@@ -164,11 +167,9 @@
       --v2-text-text-accent: var(--v2-blue-400);
       --v2-text-text-accent-hover: var(--v2-blue-300);
       --v2-text-text-code-accent: var(--v2-blue-400);
-      --v2-text-text-code-path: var(--v2-blue-300);
 
       --v2-icon-icon-base: var(--v2-grey-400);
       --v2-icon-icon-muted: var(--v2-grey-600);
-      --v2-icon-icon-faint: var(--v2-grey-500);
       --v2-icon-icon-inverse: var(--v2-grey-1000);
       --v2-icon-icon-contrast: var(--v2-grey-200);
       --v2-icon-icon-accent: var(--v2-blue-400);
@@ -268,10 +269,8 @@
     --v2-background-bg-layer-04: var(--v2-grey-400);
     --v2-background-bg-inverse: var(--v2-grey-1100);
     --v2-background-bg-contrast: var(--v2-grey-1000);
-    --v2-background-bg-icon-button-contrast: var(--v2-background-bg-contrast);
     --v2-background-bg-button-neutral: var(--v2-grey-50);
     --v2-background-bg-accent: var(--v2-blue-600);
-    --v2-background-bg-code-path: var(--v2-cyan-100);
 
     --v2-text-text-base: var(--v2-grey-1100);
     --v2-text-text-muted: var(--v2-grey-700);
@@ -281,11 +280,9 @@
     --v2-text-text-accent: var(--v2-blue-600);
     --v2-text-text-accent-hover: var(--v2-blue-700);
     --v2-text-text-code-accent: var(--v2-blue-900);
-    --v2-text-text-code-path: var(--v2-blue-900);
 
     --v2-icon-icon-base: var(--v2-grey-800);
     --v2-icon-icon-muted: var(--v2-grey-600);
-    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-50);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-600);
@@ -317,7 +314,7 @@
     --v2-state-bg-danger: var(--v2-red-100);
     --v2-state-fg-danger: var(--v2-red-800);
     --v2-state-border-danger: var(--v2-red-300);
-    --v2-state-bg-info: var(--v2-blue-200);
+    --v2-state-bg-info: var(--v2-blue-100);
     --v2-state-fg-info: var(--v2-blue-800);
     --v2-state-border-info: var(--v2-blue-300);
 
@@ -394,10 +391,8 @@
     --v2-background-bg-layer-04: var(--v2-grey-700);
     --v2-background-bg-inverse: var(--v2-grey-50);
     --v2-background-bg-contrast: var(--v2-grey-700);
-    --v2-background-bg-icon-button-contrast: var(--v2-grey-400);
     --v2-background-bg-button-neutral: var(--v2-alpha-light-6);
     --v2-background-bg-accent: var(--v2-blue-600);
-    --v2-background-bg-code-path: var(--v2-cyan-1200);
 
     --v2-text-text-base: var(--v2-grey-100);
     --v2-text-text-muted: var(--v2-grey-500);
@@ -407,11 +402,9 @@
     --v2-text-text-accent: var(--v2-blue-400);
     --v2-text-text-accent-hover: var(--v2-blue-300);
     --v2-text-text-code-accent: var(--v2-blue-400);
-    --v2-text-text-code-path: var(--v2-blue-300);
 
     --v2-icon-icon-base: var(--v2-grey-400);
     --v2-icon-icon-muted: var(--v2-grey-600);
-    --v2-icon-icon-faint: var(--v2-grey-500);
     --v2-icon-icon-inverse: var(--v2-grey-1100);
     --v2-icon-icon-contrast: var(--v2-grey-100);
     --v2-icon-icon-accent: var(--v2-blue-400);

package/dist/actions/button/button.d.ts

@@ -1,10 +0,0 @@
-import { Root } from "@kobalte/core/button";
-import { type ComponentProps } from "solid-js";
-import { type IconProps } from "@opencode-ai/ui/icon";
-import "./button.css";
-export interface ButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
-    size?: "small" | "normal" | "large";
-    variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "ghost-faint" | "loading";
-    icon?: IconProps["name"];
-}
-export declare function Button(props: ButtonProps): import("solid-js").JSX.Element;

package/dist/actions/icon-button/icon-button.d.ts

@@ -1,11 +0,0 @@
-import { Root } from "@kobalte/core/button";
-import { type ComponentProps } from "solid-js";
-import { JSX } from "solid-js";
-import "./icon-button.css";
-export interface IconButtonProps extends ComponentProps<typeof Root>, Pick<ComponentProps<"button">, "class" | "classList"> {
-    icon?: JSX.Element;
-    size?: "small" | "normal" | "large";
-    variant?: "neutral" | "contrast" | "ghost" | "ghost-muted";
-    state?: "rest" | "hover" | "pressed";
-}
-export declare function IconButton(props: ComponentProps<"button"> & IconButtonProps): JSX.Element;

package/dist/actions/split-button/split-button.d.ts

@@ -1,5 +0,0 @@
-import { type ComponentProps, type ParentProps } from "solid-js";
-import "./split-button.css";
-export declare function SplitButton(props: ParentProps<ComponentProps<"div">>): import("solid-js").JSX.Element;
-export declare function SplitButtonAction(props: ComponentProps<"button">): import("solid-js").JSX.Element;
-export declare function SplitButtonMenuTrigger(props: ComponentProps<"button">): import("solid-js").JSX.Element;

package/dist/context/marked-base.d.ts

@@ -1,3 +0,0 @@
-import { Marked } from "marked";
-export declare function createMarkdownBase(): Marked<string, string>;
-export declare function parseSmallMarkdown(text: string): string | undefined;

package/dist/data-display/badge/badge.d.ts

@@ -1,7 +0,0 @@
-import { type ComponentProps } from "solid-js";
-import "./badge.css";
-export interface BadgeProps extends ComponentProps<"span"> {
-    appearance?: "standard" | "compact";
-    variant?: "neutral" | "accent";
-}
-export declare function Badge(props: BadgeProps): import("solid-js").JSX.Element;

package/dist/data-display/keybind/keybind.d.ts

@@ -1,7 +0,0 @@
-import { type ComponentProps } from "solid-js";
-import "./keybind.css";
-export interface KeybindProps extends ComponentProps<"div"> {
-    keys: string[];
-    variant?: "neutral" | "ghost";
-}
-export declare function Keybind(props: KeybindProps): import("solid-js").JSX.Element;

package/dist/feedback/loader/loader.d.ts

@@ -1,3 +0,0 @@
-import { type ComponentProps } from "solid-js";
-import "./loader.css";
-export declare function Loader(props: ComponentProps<"svg">): import("solid-js").JSX.Element;

package/dist/feedback/toast/toast.d.ts

@@ -1,57 +0,0 @@
-import { type ToasterProps } from "solid-sonner";
-import type { ComponentProps, JSX } from "solid-js";
-import "../../actions/button/button.css";
-import "./toast.css";
-export interface ToastRegionProps extends ToasterProps {
-}
-declare function ToastRegion(props: ToastRegionProps): JSX.Element;
-export interface ToastRootComponentProps {
-    toastId: number;
-    children?: JSX.Element;
-}
-declare function ToastRoot(props: ToastRootComponentProps): JSX.Element;
-declare function ToastIcon(props: ComponentProps<"div">): JSX.Element;
-declare function ToastContent(props: ComponentProps<"div">): JSX.Element;
-declare function ToastTitle(props: ComponentProps<"div">): JSX.Element;
-declare function ToastDescription(props: ComponentProps<"div">): JSX.Element;
-declare function ToastActions(props: ComponentProps<"div">): JSX.Element;
-declare function ToastCloseButton(props: ComponentProps<"button">): JSX.Element;
-export declare const Toast: typeof ToastRoot & {
-    Region: typeof ToastRegion;
-    Icon: typeof ToastIcon;
-    Content: typeof ToastContent;
-    Title: typeof ToastTitle;
-    Description: typeof ToastDescription;
-    Actions: typeof ToastActions;
-    CloseButton: typeof ToastCloseButton;
-};
-export declare const toaster: {
-    show(render: (props: {
-        toastId: number;
-    }) => JSX.Element, options?: {
-        duration?: number;
-        persistent?: boolean;
-    }): number;
-    dismiss(toastId?: number): string | number | undefined;
-};
-export interface ToastAction {
-    label: string;
-    variant?: "primary" | "secondary";
-    onClick: "dismiss" | (() => void);
-}
-export interface ToastOptions {
-    title?: string;
-    description?: string;
-    icon?: JSX.Element;
-    variant?: "default" | "success" | "error" | "loading";
-    duration?: number;
-    persistent?: boolean;
-    actions?: ToastAction[];
-}
-export declare function showToast(options: ToastOptions | string): number;
-export interface ToastPromiseOptions<T, U = unknown> {
-    loading?: JSX.Element;
-    success?: (data: T) => JSX.Element;
-    error?: (error: U) => JSX.Element;
-}
-export {};

package/dist/forms/radio/radio.d.ts

@@ -1,16 +0,0 @@
-import { Item, Root } from "@kobalte/core/radio-group";
-import { type JSX } from "solid-js";
-import type { ComponentProps, ParentProps } from "solid-js";
-import "./radio.css";
-export interface RadioGroupProps extends ParentProps<ComponentProps<typeof Root>> {
-    label?: JSX.Element;
-    description?: JSX.Element;
-    hideLabel?: boolean;
-}
-export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
-export interface RadioItemProps extends ComponentProps<typeof Item> {
-    label: JSX.Element;
-    description?: JSX.Element;
-    hideLabel?: boolean;
-}
-export declare function RadioItem(props: RadioItemProps): JSX.Element;

package/dist/forms/textarea/textarea.d.ts

@@ -1,7 +0,0 @@
-import { type ComponentProps } from "solid-js";
-import "./textarea.css";
-export interface TextareaProps extends ComponentProps<"textarea"> {
-    /** Error styling for the field and value text. */
-    invalid?: boolean;
-}
-export declare function Textarea(props: TextareaProps): import("solid-js").JSX.Element;