@adea-ai/ui 0.97.2 → 0.97.4

package/src/components/composites/appearance-editor/theme-preview.tsx

@@ -105,6 +105,64 @@ export function ThemeMiniatureSplit(props: { light: AdeaTheme; dark: AdeaTheme;
   )
 }
 
+/**
+ * The dropdown-item preview: the ThemePreview composition (rail + panel +
+ * text bars + action row) at menu scale, so a menu item carries the theme's
+ * actual chrome rather than the three-band trigger swatch. `aria-hidden` —
+ * the item's accessible name stays the theme name.
+ */
+export function ThemeMenuPreview(props: { theme: AdeaTheme; class?: string }) {
+  const colors = () => props.theme.colors
+  return (
+    <span
+      data-theme-menu-preview
+      aria-hidden="true"
+      class={cn(
+        'flex h-16 w-28 shrink-0 overflow-hidden rounded-md border border-(--appearance-preview-border)',
+        props.class
+      )}
+      style={{
+        'background-color': colors().surface,
+        '--appearance-preview-border': colors().border,
+      }}
+    >
+      <span
+        class="flex w-5 shrink-0 flex-col items-center gap-1.5 border-e border-(--appearance-preview-border) pt-2"
+        style={{ 'background-color': colors().surfaceElevated }}
+      >
+        <span class="size-1.5 rounded-[3px]" style={{ 'background-color': colors().accent }} />
+        <span
+          class="size-1.5 rounded-[3px]"
+          style={{ 'background-color': colors().surfaceActive }}
+        />
+        <span
+          class="size-1.5 rounded-[3px]"
+          style={{ 'background-color': colors().surfaceActive }}
+        />
+      </span>
+      <span
+        class="m-1 flex min-w-0 flex-1 flex-col gap-1 rounded-md border border-(--appearance-preview-border) p-1.5"
+        style={{
+          'background-color': colors().background,
+          '--appearance-preview-border': colors().border,
+        }}
+      >
+        <span class="h-1.5 w-8 rounded-full" style={{ 'background-color': colors().text }} />
+        <span class="h-1 w-full rounded-full" style={{ 'background-color': colors().textMuted }} />
+        <span class="h-1 w-3/4 rounded-full" style={{ 'background-color': colors().textMuted }} />
+        <span class="mt-auto flex items-center gap-1">
+          <span class="h-2.5 w-7 rounded-[3px]" style={{ 'background-color': colors().accent }} />
+          <span class="h-2.5 w-4 rounded-[3px]" style={{ 'background-color': colors().error }} />
+          <span
+            class="h-2.5 w-4 rounded-[3px]"
+            style={{ 'background-color': colors().surfaceActive }}
+          />
+        </span>
+      </span>
+    </span>
+  )
+}
+
 export function PalettePreview(props: { theme: AdeaTheme; class?: string }) {
   const bands = () => [
     props.theme.colors.surface,

package/src/components/composites/help-center/help-center.tsx

@@ -41,7 +41,7 @@ export function HelpCenter(props: HelpCenterProps) {
       </div>
       <Card>
         <CardHeader>
-          <h2 class="text-base font-semibold text-primary">Keyboard shortcuts</h2>
+          <h2 class="text-base font-semibold text-foreground">Keyboard shortcuts</h2>
         </CardHeader>
         <CardContent>
           <ul class="flex flex-col gap-3">
@@ -60,7 +60,7 @@ export function HelpCenter(props: HelpCenterProps) {
       </Card>
       <Card>
         <CardHeader>
-          <h2 class="text-base font-semibold text-primary">Project links</h2>
+          <h2 class="text-base font-semibold text-foreground">Project links</h2>
         </CardHeader>
         <CardContent>
           <ul class="flex flex-col gap-4">
@@ -71,6 +71,7 @@ export function HelpCenter(props: HelpCenterProps) {
                     as="a"
                     variant="link"
                     size="sm"
+                    class="text-foreground decoration-primary"
                     href={link.url}
                     target="_blank"
                     rel="noopener noreferrer"

package/src/components/composites/update-dialog/update-dialog.tsx

@@ -590,7 +590,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
                 <p class="text-2xs font-semibold tracking-widest text-muted-foreground uppercase">
                   Installed version
                 </p>
-                <p class="text-xl font-semibold tracking-tight text-primary">
+                <p class="text-xl font-semibold tracking-tight text-foreground">
                   v{state()?.currentVersion || local.fallbackVersion || '0.1.0'}
                 </p>
                 <p class="text-sm text-muted-foreground">
@@ -757,7 +757,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
           <Show when={notes()}>
             <div class="flex flex-col gap-2">
               <div class="flex items-center gap-2">
-                <h2 id="update-release-notes" class="text-sm font-semibold text-primary">
+                <h2 id="update-release-notes" class="text-sm font-semibold text-foreground">
                   What changed in this release
                 </h2>
                 <Badge variant="subtle" size="sm">
@@ -780,7 +780,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
 
           <Show when={changelog()}>
             <div class="flex flex-col gap-2">
-              <h2 id="update-changelog" class="text-sm font-semibold text-primary">
+              <h2 id="update-changelog" class="text-sm font-semibold text-foreground">
                 Installed changelog
               </h2>
               <p class="text-xs text-muted-foreground">