@opencode/ui 0.0.0-beta-19507 → 0.0.0-dev-19274

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

@@ -4,7 +4,7 @@ import { type IconProps } from "@opencode/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" | "submit" | "ghost" | "ghost-muted" | "ghost-faint" | "loading";
+    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

@@ -5,7 +5,7 @@ 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" | "submit" | "ghost" | "ghost-muted";
+    variant?: "neutral" | "contrast" | "ghost" | "ghost-muted";
     state?: "rest" | "hover" | "pressed";
 }
 export declare function IconButton(props: ComponentProps<"button"> & IconButtonProps): JSX.Element;

package/dist/i18n/en.d.ts

@@ -94,13 +94,7 @@ declare const source: {
     "ui.messagePart.review.title": string;
     "ui.messagePart.questions.dismissed": string;
     "ui.messagePart.compaction": string;
-    "ui.messagePart.compaction.started": string;
-    "ui.messagePart.compaction.running": string;
-    "ui.messagePart.compaction.failed": string;
-    "ui.messagePart.compaction.cancelled": string;
-    "ui.messagePart.compaction.interrupted": string;
     "ui.messagePart.providerCompaction": string;
-    "ui.messagePart.compaction.usage": string;
     "ui.messagePart.context.details": string;
     "ui.messagePart.context.read.one": string;
     "ui.messagePart.context.read.other": string;
@@ -114,8 +108,7 @@ declare const source: {
     "ui.messagePart.context.thought.other": string;
     "ui.messagePart.context.match.one": string;
     "ui.messagePart.context.match.other": string;
-    "ui.messagePart.tools.used.one": string;
-    "ui.messagePart.tools.used.other": string;
+    "ui.messagePart.tools.used": string;
     "ui.list.loading": string;
     "ui.list.empty": string;
     "ui.list.clearFilter": string;

package/dist/icons/icon/icon.d.ts

@@ -2,14 +2,6 @@ import { type ComponentProps } from "solid-js";
 import { additionalIcons } from "./additional-icons";
 import "./icon.css";
 declare const icons: {
-    lock: {
-        viewBox: string;
-        body: string;
-    };
-    globe: {
-        viewBox: string;
-        body: string;
-    };
     flask: {
         viewBox: string;
         body: string;
@@ -198,10 +190,6 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
-    refresh: {
-        viewBox: string;
-        body: string;
-    };
     reset: {
         viewBox: string;
         body: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode/ui",
-  "version": "0.0.0-beta-19507",
+  "version": "0.0.0-dev-19274",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/actions/button/button.css

@@ -1,5 +1,3 @@
-@import "../submit.css";
-
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

package/src/actions/button/button.tsx

@@ -13,7 +13,6 @@ export interface ButtonProps
     | "warning"
     | "outline"
     | "contrast"
-    | "submit"
     | "ghost"
     | "ghost-muted"
     | "ghost-faint"

package/src/actions/icon-button/icon-button.css

@@ -1,5 +1,3 @@
-@import "../submit.css";
-
 * {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -71,6 +69,61 @@
   cursor: not-allowed;
 }
 
+/* Contrast */
+[data-component="icon-button-v2"][data-variant="contrast"] {
+  --icon-button-contrast-highlight: var(--v2-alpha-light-20);
+  --icon-button-contrast-hover: var(--v2-overlay-simple-overlay-contrast-hover);
+
+  background-image:
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
+  color: var(--v2-text-text-contrast);
+  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--v2-elevation-button-contrast);
+}
+
+[data-color-scheme="dark"] [data-component="icon-button-v2"][data-variant="contrast"] {
+  --icon-button-contrast-highlight: var(--v2-alpha-light-60);
+  --icon-button-contrast-hover: var(--v2-alpha-dark-8);
+
+  color: var(--v2-icon-icon-inverse);
+}
+
+[data-component="icon-button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-image:
+    linear-gradient(90deg, var(--icon-button-contrast-hover) 0%, var(--icon-button-contrast-hover) 100%),
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
+}
+
+[data-component="icon-button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-image:
+    linear-gradient(
+      90deg,
+      var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
+      var(--v2-overlay-simple-overlay-contrast-pressed) 100%
+    ),
+    linear-gradient(180deg, var(--icon-button-contrast-highlight) 0%, var(--v2-alpha-light-0) 100%),
+    linear-gradient(
+      90deg,
+      var(--v2-background-bg-icon-button-contrast) 0%,
+      var(--v2-background-bg-icon-button-contrast) 100%
+    );
+}
+
+[data-component="icon-button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* Ghost */
 [data-component="icon-button-v2"][data-variant="ghost"] {
   background-color: transparent;

package/src/actions/icon-button/icon-button.tsx

@@ -8,7 +8,7 @@ export interface IconButtonProps
     Pick<ComponentProps<"button">, "class" | "classList"> {
   icon?: JSX.Element
   size?: "small" | "normal" | "large"
-  variant?: "neutral" | "contrast" | "submit" | "ghost" | "ghost-muted"
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
   state?: "rest" | "hover" | "pressed"
 }
 

package/src/context/marked-base.tsx

@@ -16,35 +16,7 @@ let smallParser: Marked | undefined
 export function parseSmallMarkdown(text: string) {
   // Any possible KaTeX delimiter stays on the worker, including escaped ones.
   if (text.length > 1024 || text.includes("\\(") || text.includes("$$")) return
-  // Ordinary prose does not need the block/inline lexer's cold regular expressions.
-  // Keep every possible Markdown construct, autolink, and hard break on that lexer.
-  if (
-    /^[\p{L}\p{N} \t\r\n,.;:!?'"’“”()\-–—…$%]+$/u.test(text) &&
-    !/(?:^|[\r\n])(?:[ \t]|\d|[-])| {2}(?:\r\n?|\n)|www\./.test(text)
-  ) {
-    return text
-      .replace(/\r\n?/g, "\n")
-      .replace(/^\n+|\n+$/g, "")
-      .split(/\n{2,}/)
-      .filter(Boolean)
-      .map((paragraph) => `<p>${paragraph.replace(/["']/g, (value) => (value === '"' ? "&quot;" : "&#39;"))}</p>\n`)
-      .join("")
-  }
   const parser = (smallParser ??= createMarkdownBase())
-  const paragraphs = text.replace(/\r\n?/g, "\n")
-  // Inline formatting in ordinary paragraphs does not need the block lexer.
-  // Any possible block opener, HTML, table, or reference definition stays on it.
-  if (
-    !/[<|]/.test(paragraphs) &&
-    !/^(?:[ \t>\d\[\-=]|#{1,6}(?:[ \t]|$)|[`~]{3}|[+*](?:[ \t]|$)|(?:[*_][ \t]*){3,}$)/m.test(paragraphs)
-  ) {
-    return paragraphs
-      .replace(/^\n+|\n+$/g, "")
-      .split(/\n{2,}/)
-      .filter(Boolean)
-      .map((paragraph) => `<p>${parser.parseInline(paragraph, { async: false })}</p>\n`)
-      .join("")
-  }
   const tokens = parser.lexer(text)
   let code = false
   parser.walkTokens(tokens, (token) => {

package/src/forms/select/select.css

@@ -260,19 +260,20 @@
   --menu-v2-fg-muted: var(--v2-text-text-faint);
   --menu-v2-fg-subtle: var(--v2-text-text-muted);
   --menu-v2-icon: var(--v2-icon-icon-base);
+  --menu-v2-accent: var(--v2-text-text-accent);
   --menu-v2-badge-bg: var(--v2-background-bg-layer-02);
   --menu-v2-badge-border: var(--v2-border-border-base);
   --menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
 }
 
-/* Listbox uses data-selected; menu item CSS uses data-checked — mirror selection styling */
+/* Listbox uses data-selected; menu item CSS uses data-checked — mirror accent */
 [data-slot="select-v2-listbox"] [data-component="menu-v2-item"][data-selected] [data-slot="menu-v2-item-content"] {
-  font-weight: 440;
-  color: var(--menu-v2-fg);
+  font-weight: 530;
+  color: var(--menu-v2-accent);
 }
 
 [data-slot="select-v2-listbox"] [data-component="menu-v2-item"][data-selected] [data-slot="menu-v2-item-indicator"] {
-  color: var(--menu-v2-icon);
+  color: var(--menu-v2-accent);
 }
 
 [data-slot="select-v2-listbox"]

package/src/i18n/en.ts

@@ -104,13 +104,7 @@ const source = {
   "ui.messagePart.review.title": "Review your answers",
   "ui.messagePart.questions.dismissed": "Questions dismissed",
   "ui.messagePart.compaction": "Session compacted",
-  "ui.messagePart.compaction.started": "Session compaction started",
-  "ui.messagePart.compaction.running": "Compacting",
-  "ui.messagePart.compaction.failed": "Session compaction failed",
-  "ui.messagePart.compaction.cancelled": "Session compaction cancelled",
-  "ui.messagePart.compaction.interrupted": "Session compaction interrupted",
   "ui.messagePart.providerCompaction": "Session compacted by provider",
-  "ui.messagePart.compaction.usage": "{{input}} in · {{output}} out",
   "ui.messagePart.context.details": "Details",
   "ui.messagePart.context.read.one": "{{count}} read",
   "ui.messagePart.context.read.other": "{{count}} reads",
@@ -120,12 +114,11 @@ const source = {
   "ui.messagePart.context.list.other": "{{count}} lists",
   "ui.messagePart.context.notice.one": "{{count}} Notice",
   "ui.messagePart.context.notice.other": "{{count}} Notices",
-  "ui.messagePart.context.thought.one": "Thought",
-  "ui.messagePart.context.thought.other": "Thoughts",
+  "ui.messagePart.context.thought.one": "{{count}} Thought",
+  "ui.messagePart.context.thought.other": "{{count}} Thoughts",
   "ui.messagePart.context.match.one": "({{count}} match)",
   "ui.messagePart.context.match.other": "({{count}} matches)",
-  "ui.messagePart.tools.used.one": "Used {{count}} {{tools}}",
-  "ui.messagePart.tools.used.other": "Used {{count}} {{tools}}",
+  "ui.messagePart.tools.used": "Used {{tools}}",
 
   "ui.list.loading": "Loading",
   "ui.list.empty": "No results",

package/src/icons/icon/icon.tsx

@@ -4,14 +4,6 @@ import "./icon.css"
 
 // Consumers center the SVG viewport, so each icon must center its artwork within its viewBox.
 const icons = {
-  lock: {
-    viewBox: "0 0 16 16",
-    body: `<rect x="3.5" y="7" width="9" height="7" rx="1" stroke="currentColor"/><path d="M5 7V5a3 3 0 0 1 6 0v2M8 10v1" stroke="currentColor" stroke-linecap="round"/>`,
-  },
-  globe: {
-    viewBox: "0 0 16 16",
-    body: `<circle cx="8" cy="8" r="6" stroke="currentColor"/><ellipse cx="8" cy="8" rx="2.5" ry="6" stroke="currentColor"/><path d="M2 8h12" stroke="currentColor"/>`,
-  },
   flask: {
     viewBox: "0 0 16 16",
     body: `<path d="M5.5 2H10.5M6 2V6L2.5 12C2 13 2.5 14 3.5 14H12.5C13.5 14 14 13 13.5 12L10 6V2M4.25 9H11.75" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/>`,
@@ -200,10 +192,6 @@ const icons = {
     viewBox: "0 0 20 20",
     body: `<path d="M2.5 10s3.33-5.42 7.5-5.42S17.5 10 17.5 10s-3.33 5.42-7.5 5.42S2.5 10 2.5 10Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="10" r="2.5" stroke="currentColor"/><path d="M3 3 17 17" stroke="currentColor" stroke-linecap="round"/>`,
   },
-  refresh: {
-    viewBox: "0 0 20 20",
-    body: `<path d="M16.25 7.5A6.5 6.5 0 1 0 16.5 11M16.25 3.5v4h-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>`,
-  },
   reset: {
     viewBox: "0 0 20 20",
     body: `<path d="M5.83333 4.16406L2.5 7.4974L5.83333 10.8307M3.33333 7.4974H17.9167V15.4141H10" stroke="currentColor" stroke-linecap="square"/>`,

package/src/navigation/menu/menu.css

@@ -40,6 +40,7 @@
   --menu-v2-fg-muted: var(--v2-text-text-faint);
   --menu-v2-fg-subtle: var(--v2-text-text-muted);
   --menu-v2-icon: var(--v2-icon-icon-base);
+  --menu-v2-accent: var(--v2-text-text-accent);
   --menu-v2-badge-bg: var(--v2-background-bg-layer-02);
   --menu-v2-badge-border: var(--v2-border-border-base);
   --menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
@@ -145,12 +146,12 @@
   }
 
   &[data-checked] [data-slot="menu-v2-item-content"] {
-    font-weight: 440;
-    color: var(--menu-v2-fg);
+    font-weight: 530;
+    color: var(--menu-v2-accent);
   }
 
   &[data-checked] [data-slot="menu-v2-item-indicator"] {
-    color: var(--menu-v2-icon);
+    color: var(--menu-v2-accent);
   }
 
   &[data-disabled] {

package/src/actions/submit.css

@@ -1,74 +0,0 @@
-/* Shared by Composer submit actions and contrast icon buttons. */
-:is(
-  [data-component="button-v2"][data-variant="submit"],
-  [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
-) {
-  --submit-highlight: var(--v2-alpha-light-20);
-  --submit-hover: var(--v2-overlay-simple-overlay-contrast-hover);
-
-  background-image:
-    linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(
-      90deg,
-      var(--v2-background-bg-icon-button-contrast) 0%,
-      var(--v2-background-bg-icon-button-contrast) 100%
-    );
-  color: var(--v2-text-text-contrast);
-  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
-  box-shadow: var(--v2-elevation-button-contrast);
-}
-
-[data-color-scheme="dark"]
-  :is(
-    [data-component="button-v2"][data-variant="submit"],
-    [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
-  ) {
-  --submit-highlight: var(--v2-alpha-light-60);
-  --submit-hover: var(--v2-alpha-dark-8);
-
-  color: var(--v2-text-text-inverse);
-}
-
-[data-color-scheme="dark"] [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"]) {
-  color: var(--v2-icon-icon-inverse);
-}
-
-:is(
-    [data-component="button-v2"][data-variant="submit"],
-    [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
-  ):is(:hover, [data-state="hover"]):not(:disabled) {
-  background-image:
-    linear-gradient(90deg, var(--submit-hover) 0%, var(--submit-hover) 100%),
-    linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(
-      90deg,
-      var(--v2-background-bg-icon-button-contrast) 0%,
-      var(--v2-background-bg-icon-button-contrast) 100%
-    );
-}
-
-:is(
-    [data-component="button-v2"][data-variant="submit"],
-    [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
-  ):is(:active, [data-state="pressed"]):not(:disabled) {
-  background-image:
-    linear-gradient(
-      90deg,
-      var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
-      var(--v2-overlay-simple-overlay-contrast-pressed) 100%
-    ),
-    linear-gradient(180deg, var(--submit-highlight) 0%, var(--v2-alpha-light-0) 100%),
-    linear-gradient(
-      90deg,
-      var(--v2-background-bg-icon-button-contrast) 0%,
-      var(--v2-background-bg-icon-button-contrast) 100%
-    );
-}
-
-:is(
-  [data-component="button-v2"][data-variant="submit"],
-  [data-component="icon-button-v2"]:is([data-variant="submit"], [data-variant="contrast"])
-):is(:disabled, [data-state="disabled"]) {
-  opacity: 0.4;
-  cursor: not-allowed;
-}