@mcp-elements/css 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mayur Rawte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/base.css

@@ -0,0 +1,88 @@
+/* Design tokens for mcp-elements. Import tailwindcss separately in your project. */
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+  /* Semantic color tokens (OKLCH for perceptual uniformity) */
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.145 0 0);
+  --color-primary: oklch(0.205 0.042 265.755);
+  --color-primary-foreground: oklch(0.985 0 0);
+  --color-secondary: oklch(0.97 0.001 286.375);
+  --color-secondary-foreground: oklch(0.205 0.042 265.755);
+  --color-accent: oklch(0.97 0.001 286.375);
+  --color-accent-foreground: oklch(0.205 0.042 265.755);
+  --color-muted: oklch(0.97 0.001 286.375);
+  --color-muted-foreground: oklch(0.556 0.019 286);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.922 0.004 286.32);
+  --color-input: oklch(0.922 0.004 286.32);
+  --color-ring: oklch(0.708 0.028 256);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.145 0 0);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.145 0 0);
+  --color-overlay: oklch(0 0 0 / 0.8);
+
+  /* Radius scale */
+  --radius-sm: 0.25rem;
+  --radius-md: calc(var(--radius-sm) + 0.125rem);
+  --radius-lg: calc(var(--radius-sm) + 0.25rem);
+  --radius-xl: calc(var(--radius-sm) + 0.5rem);
+
+  /* Animation tokens */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height, auto); }
+}
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height, auto); }
+  to { height: 0; }
+}
+
+/* Base reset */
+@layer base {
+  *,
+  *::before,
+  *::after {
+    border-color: var(--color-border);
+  }
+
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+/* Dark theme overrides */
+@layer base {
+  [data-theme='dark'] {
+    --color-background: oklch(0.145 0 0);
+    --color-foreground: oklch(0.985 0 0);
+    --color-primary: oklch(0.985 0 0);
+    --color-primary-foreground: oklch(0.205 0.042 265.755);
+    --color-secondary: oklch(0.269 0.007 286.033);
+    --color-secondary-foreground: oklch(0.985 0 0);
+    --color-muted: oklch(0.269 0.007 286.033);
+    --color-muted-foreground: oklch(0.708 0.014 285.823);
+    --color-accent: oklch(0.269 0.007 286.033);
+    --color-accent-foreground: oklch(0.985 0 0);
+    --color-destructive: oklch(0.704 0.191 22.216);
+    --color-destructive-foreground: oklch(0.985 0 0);
+    --color-border: oklch(0.269 0.007 286.033);
+    --color-input: oklch(0.269 0.007 286.033);
+    --color-ring: oklch(0.442 0.017 285.786);
+    --color-card: oklch(0.205 0.015 286);
+    --color-card-foreground: oklch(0.985 0 0);
+    --color-popover: oklch(0.205 0.015 286);
+    --color-popover-foreground: oklch(0.985 0 0);
+    --color-overlay: oklch(0 0 0 / 0.8);
+  }
+}

package/components/accordion.css

@@ -0,0 +1,24 @@
+@layer components {
+  .mcpe-accordion-item {
+    @apply border-b;
+  }
+  .mcpe-accordion-trigger {
+    @apply flex w-full flex-1 items-center justify-between py-4 text-sm font-medium
+           text-left transition-all cursor-pointer hover:underline active:bg-muted/50;
+  }
+  .mcpe-accordion-trigger[aria-expanded='true'] .mcpe-accordion-chevron {
+    @apply rotate-180;
+  }
+  .mcpe-accordion-chevron {
+    @apply h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200;
+  }
+  .mcpe-accordion-content {
+    @apply overflow-hidden text-sm;
+  }
+  .mcpe-accordion-content[hidden] {
+    display: none;
+  }
+  .mcpe-accordion-content:not([hidden]) {
+    @apply pb-4 pt-0;
+  }
+}

package/components/ai-badge.css

@@ -0,0 +1,17 @@
+@layer components {
+  .mcpe-ai-badge {
+    @apply inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium
+           [&_svg]:size-3 [&_svg]:shrink-0;
+  }
+  .mcpe-ai-badge-default {
+    background: linear-gradient(135deg, oklch(0.541 0.281 293.009 / 0.15), oklch(0.627 0.265 303.9 / 0.15));
+    @apply text-[oklch(0.641_0.181_293.009)] border border-[oklch(0.541_0.281_293.009_/_0.2)];
+  }
+  .mcpe-ai-badge-prominent {
+    background: linear-gradient(135deg, oklch(0.541 0.281 293.009), oklch(0.627 0.265 303.9));
+    @apply text-white shadow-sm;
+  }
+  .mcpe-ai-badge-subtle {
+    @apply border border-[oklch(0.541_0.281_293.009_/_0.3)] text-[oklch(0.641_0.181_293.009)] bg-transparent;
+  }
+}

package/components/alert.css

@@ -0,0 +1,25 @@
+@layer components {
+  .mcpe-alert {
+    @apply relative w-full rounded-lg border px-4 py-3 text-sm
+           [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4
+           [&>svg]:text-foreground [&>svg~*]:pl-7;
+  }
+  .mcpe-alert-default {
+    @apply bg-background text-foreground;
+  }
+  .mcpe-alert-destructive {
+    @apply border-destructive/50 text-destructive [&>svg]:text-destructive;
+  }
+  .mcpe-alert-success {
+    @apply border-green-500/50 text-green-600 [&>svg]:text-green-600;
+  }
+  .mcpe-alert-warning {
+    @apply border-yellow-500/50 text-yellow-600 [&>svg]:text-yellow-600;
+  }
+  .mcpe-alert-title {
+    @apply mb-1 font-medium leading-none tracking-tight;
+  }
+  .mcpe-alert-description {
+    @apply text-sm [&_p]:leading-relaxed;
+  }
+}

package/components/avatar.css

@@ -0,0 +1,11 @@
+@layer components {
+  .mcpe-avatar {
+    @apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
+  }
+  .mcpe-avatar-image {
+    @apply aspect-square h-full w-full object-cover;
+  }
+  .mcpe-avatar-fallback {
+    @apply flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground;
+  }
+}

package/components/badge.css

@@ -0,0 +1,10 @@
+@layer components {
+  .mcpe-badge {
+    @apply inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold
+           transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+  }
+  .mcpe-badge-default     { @apply border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80; }
+  .mcpe-badge-secondary   { @apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80; }
+  .mcpe-badge-outline     { @apply text-foreground; }
+  .mcpe-badge-destructive { @apply border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80; }
+}

package/components/button.css

@@ -0,0 +1,21 @@
+@layer components {
+  .mcpe-btn {
+    @apply inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium
+           whitespace-nowrap transition-all cursor-pointer active:scale-[0.98]
+           focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+           disabled:pointer-events-none disabled:opacity-50
+           [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
+  }
+  /* Variants */
+  .mcpe-btn-primary   { @apply bg-primary text-primary-foreground shadow hover:bg-primary/90; }
+  .mcpe-btn-secondary { @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80; }
+  .mcpe-btn-outline   { @apply border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground; }
+  .mcpe-btn-ghost     { @apply hover:bg-accent hover:text-accent-foreground; }
+  .mcpe-btn-destructive { @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90; }
+  .mcpe-btn-link      { @apply text-primary underline-offset-4 hover:underline; }
+  /* Sizes */
+  .mcpe-btn-sm   { @apply h-8 rounded-md px-3 text-xs; }
+  .mcpe-btn-md   { @apply h-9 px-4 py-2; }
+  .mcpe-btn-lg   { @apply h-10 rounded-md px-8; }
+  .mcpe-btn-icon { @apply h-9 w-9; }
+}

package/components/card.css

@@ -0,0 +1,20 @@
+@layer components {
+  .mcpe-card {
+    @apply rounded-xl border bg-card text-card-foreground shadow;
+  }
+  .mcpe-card-header {
+    @apply flex flex-col space-y-1.5 p-6;
+  }
+  .mcpe-card-title {
+    @apply font-semibold leading-none tracking-tight;
+  }
+  .mcpe-card-description {
+    @apply text-sm text-muted-foreground;
+  }
+  .mcpe-card-content {
+    @apply p-6 pt-0;
+  }
+  .mcpe-card-footer {
+    @apply flex items-center p-6 pt-0;
+  }
+}

package/components/chat-bubble.css

@@ -0,0 +1,47 @@
+@layer components {
+  .mcpe-chat-bubble {
+    @apply flex gap-2.5 max-w-[80%];
+  }
+  .mcpe-chat-bubble-user {
+    @apply flex-row-reverse self-end;
+  }
+  .mcpe-chat-bubble-ai {
+    @apply flex-row self-start;
+  }
+  .mcpe-chat-bubble-avatar {
+    @apply h-8 w-8 shrink-0 rounded-full object-cover;
+  }
+  .mcpe-chat-bubble-content {
+    @apply rounded-2xl px-4 py-2.5 text-sm leading-relaxed;
+  }
+  .mcpe-chat-bubble-user .mcpe-chat-bubble-content {
+    @apply bg-primary text-primary-foreground rounded-br-md;
+  }
+  .mcpe-chat-bubble-ai .mcpe-chat-bubble-content {
+    @apply bg-secondary text-secondary-foreground rounded-bl-md;
+  }
+  .mcpe-chat-bubble-timestamp {
+    @apply block text-xs text-muted-foreground mt-1 px-1;
+  }
+  .mcpe-chat-bubble-user .mcpe-chat-bubble-timestamp {
+    @apply text-right;
+  }
+  .mcpe-chat-bubble-typing {
+    @apply flex items-center gap-1 px-4 py-3 rounded-2xl bg-secondary rounded-bl-md;
+  }
+  .mcpe-chat-bubble-typing-dot {
+    @apply h-1.5 w-1.5 rounded-full bg-muted-foreground/60;
+    animation: mcpe-chat-bounce 1.4s ease-in-out infinite both;
+  }
+  .mcpe-chat-bubble-typing-dot:nth-child(2) {
+    animation-delay: 0.16s;
+  }
+  .mcpe-chat-bubble-typing-dot:nth-child(3) {
+    animation-delay: 0.32s;
+  }
+}
+
+@keyframes mcpe-chat-bounce {
+  0%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-4px); }
+}

package/components/chips.css

@@ -0,0 +1,28 @@
+@layer components {
+  .mcpe-chips {
+    @apply flex flex-wrap gap-1.5;
+  }
+  .mcpe-chip {
+    @apply inline-flex items-center gap-1 rounded-md border px-2.5 py-0.5 text-xs font-medium
+           transition-colors cursor-default;
+  }
+  .mcpe-chip-default {
+    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
+  }
+  .mcpe-chip-primary {
+    @apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
+  }
+  .mcpe-chip-outline {
+    @apply border-border text-foreground;
+  }
+  .mcpe-chip-destructive {
+    @apply border-transparent bg-destructive text-destructive-foreground;
+  }
+  .mcpe-chip-removable {
+    @apply cursor-pointer;
+  }
+  .mcpe-chip-remove {
+    @apply ml-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full
+           opacity-60 hover:opacity-100 transition-opacity;
+  }
+}

package/components/counter.css

@@ -0,0 +1,22 @@
+@layer components {
+  .mcpe-counter {
+    @apply inline-flex items-center;
+  }
+  .mcpe-counter-button {
+    @apply inline-flex h-9 w-9 items-center justify-center rounded-md border border-input
+           bg-transparent text-sm font-medium shadow-sm transition-colors cursor-pointer
+           hover:bg-accent hover:text-accent-foreground
+           focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+           disabled:pointer-events-none disabled:opacity-50;
+  }
+  .mcpe-counter-input {
+    @apply h-9 w-14 border-y border-input bg-transparent text-center text-sm
+           focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring;
+  }
+  .mcpe-counter-button:first-child {
+    @apply rounded-r-none;
+  }
+  .mcpe-counter-button:last-child {
+    @apply rounded-l-none;
+  }
+}

package/components/dialog.css

@@ -0,0 +1,26 @@
+@layer components {
+  .mcpe-dialog-overlay {
+    @apply fixed inset-0 z-50 bg-[var(--color-overlay)];
+  }
+  .mcpe-dialog-content {
+    @apply fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2
+           gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg;
+  }
+  .mcpe-dialog-header {
+    @apply flex flex-col space-y-1.5 text-center sm:text-left;
+  }
+  .mcpe-dialog-footer {
+    @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
+  }
+  .mcpe-dialog-title {
+    @apply text-lg font-semibold leading-none tracking-tight;
+  }
+  .mcpe-dialog-description {
+    @apply text-sm text-muted-foreground;
+  }
+  .mcpe-dialog-close {
+    @apply absolute right-4 top-4 rounded-sm opacity-70 transition-opacity
+           hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+           disabled:pointer-events-none;
+  }
+}

package/components/drawer.css

@@ -0,0 +1,39 @@
+@layer components {
+  .mcpe-drawer-overlay {
+    @apply fixed inset-0 z-50 bg-[var(--color-overlay)];
+  }
+  .mcpe-drawer-content {
+    @apply fixed z-50 bg-background shadow-lg transition-transform duration-300 ease-in-out;
+  }
+  .mcpe-drawer-content-right {
+    @apply inset-y-0 right-0 h-full w-3/4 max-w-sm border-l;
+  }
+  .mcpe-drawer-content-left {
+    @apply inset-y-0 left-0 h-full w-3/4 max-w-sm border-r;
+  }
+  .mcpe-drawer-content-top {
+    @apply inset-x-0 top-0 border-b;
+  }
+  .mcpe-drawer-content-bottom {
+    @apply inset-x-0 bottom-0 border-t;
+  }
+  .mcpe-drawer-header {
+    @apply flex flex-col space-y-1.5 p-4;
+  }
+  .mcpe-drawer-footer {
+    @apply flex flex-col-reverse gap-2 p-4 sm:flex-row sm:justify-end;
+  }
+  .mcpe-drawer-title {
+    @apply text-lg font-semibold leading-none tracking-tight;
+  }
+  .mcpe-drawer-description {
+    @apply text-sm text-muted-foreground;
+  }
+  .mcpe-drawer-close {
+    @apply absolute right-4 top-4 rounded-sm opacity-70 transition-opacity
+           hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
+  }
+  .mcpe-drawer-body {
+    @apply flex-1 overflow-y-auto p-4;
+  }
+}

package/components/dropdown-menu.css

@@ -0,0 +1,28 @@
+@layer components {
+  .mcpe-dropdown-menu-content {
+    @apply z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1
+           text-popover-foreground shadow-md;
+  }
+  .mcpe-dropdown-menu-item {
+    @apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5
+           text-sm outline-none transition-colors;
+  }
+  .mcpe-dropdown-menu-item-active {
+    @apply bg-accent text-accent-foreground;
+  }
+  .mcpe-dropdown-menu-item[aria-disabled='true'] {
+    @apply pointer-events-none opacity-50;
+  }
+  .mcpe-dropdown-menu-separator {
+    @apply -mx-1 my-1 h-px bg-muted;
+  }
+  .mcpe-dropdown-menu-label {
+    @apply px-2 py-1.5 text-sm font-semibold;
+  }
+  .mcpe-dropdown-menu-shortcut {
+    @apply ml-auto text-xs tracking-widest opacity-60;
+  }
+  .mcpe-dropdown-menu-item-icon {
+    @apply mr-2 h-4 w-4;
+  }
+}

package/components/feedback.css

@@ -0,0 +1,33 @@
+@layer components {
+  .mcpe-feedback {
+    @apply inline-flex items-center gap-0.5;
+  }
+  .mcpe-feedback-btn {
+    @apply inline-flex items-center justify-center h-8 w-8 rounded-md transition-colors
+           hover:bg-accent cursor-pointer border-0 bg-transparent text-muted-foreground
+           [&_svg]:size-4 [&_svg]:shrink-0;
+  }
+  .mcpe-feedback-btn-selected {
+    @apply ring-1 ring-ring;
+  }
+  .mcpe-feedback-btn-up.mcpe-feedback-btn-selected {
+    @apply text-emerald-500 bg-emerald-500/10 hover:bg-emerald-500/15;
+  }
+  .mcpe-feedback-btn-down.mcpe-feedback-btn-selected {
+    @apply text-destructive bg-destructive/10 hover:bg-destructive/15;
+  }
+  .mcpe-feedback-separator {
+    @apply inline-block w-px h-4 bg-border mx-1;
+  }
+  .mcpe-feedback-form {
+    @apply flex gap-2 items-center mt-2;
+  }
+  .mcpe-feedback-input {
+    @apply flex-1 rounded-md border border-input bg-background px-3 py-1.5 text-sm
+           placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring;
+  }
+  .mcpe-feedback-submit {
+    @apply rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm font-medium
+           cursor-pointer hover:bg-primary/90 transition-colors;
+  }
+}

package/components/input.css

@@ -0,0 +1,16 @@
+@layer components {
+  .mcpe-input {
+    @apply flex h-9 w-full rounded-md border border-input px-3 py-1 text-base
+           shadow-sm transition-colors
+           file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground
+           placeholder:text-muted-foreground
+           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background
+           disabled:cursor-not-allowed disabled:opacity-50
+           md:text-sm;
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+  }
+  .mcpe-input::placeholder {
+    color: var(--color-muted-foreground);
+  }
+}

package/components/loader.css

@@ -0,0 +1,23 @@
+@layer components {
+  .mcpe-loader {
+    @apply inline-block animate-spin rounded-full border-2 border-current border-t-transparent;
+  }
+  .mcpe-loader-sm {
+    @apply h-4 w-4;
+  }
+  .mcpe-loader-md {
+    @apply h-6 w-6;
+  }
+  .mcpe-loader-lg {
+    @apply h-8 w-8;
+  }
+  .mcpe-loader-xl {
+    @apply h-12 w-12;
+  }
+  .mcpe-loader-muted {
+    @apply text-muted-foreground;
+  }
+  .mcpe-loader-primary {
+    @apply text-primary;
+  }
+}

package/components/mcp-app-frame.css

@@ -0,0 +1,12 @@
+@layer components {
+  .mcpe-mcp-app-frame {
+    @apply block w-full rounded-xl overflow-hidden;
+    border: 1px solid var(--color-border);
+    background-color: var(--color-card);
+  }
+
+  .mcpe-mcp-app-frame iframe {
+    @apply block w-full;
+    border: none;
+  }
+}

package/components/mcp-consent-dialog.css

@@ -0,0 +1,51 @@
+@layer components {
+  .mcpe-mcp-consent-dialog-server {
+    @apply flex items-center gap-3 pb-4;
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .mcpe-mcp-consent-dialog-icon {
+    @apply h-10 w-10 rounded-lg overflow-hidden flex items-center justify-center text-lg font-bold shrink-0;
+    background-color: var(--color-accent);
+    color: var(--color-accent-foreground);
+  }
+
+  .mcpe-mcp-consent-dialog-server-name {
+    @apply font-semibold text-base;
+  }
+
+  .mcpe-mcp-consent-dialog-server-meta {
+    @apply text-xs;
+    color: var(--color-muted-foreground);
+  }
+
+  .mcpe-mcp-consent-dialog-scopes {
+    @apply flex flex-col gap-2 py-3;
+  }
+
+  .mcpe-mcp-consent-dialog-scope-item {
+    @apply flex items-start gap-2 rounded-lg p-3;
+    background-color: var(--color-muted);
+    border: 1px solid var(--color-border);
+  }
+
+  .mcpe-mcp-consent-dialog-scope-resource {
+    @apply font-mono text-xs font-semibold;
+    color: var(--color-primary);
+  }
+
+  .mcpe-mcp-consent-dialog-scope-perms {
+    @apply flex flex-wrap gap-1 mt-0.5;
+  }
+
+  .mcpe-mcp-consent-dialog-scope-perm {
+    @apply rounded px-1.5 py-0.5 text-[10px] font-medium font-mono uppercase;
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-foreground);
+  }
+
+  .mcpe-mcp-consent-dialog-actions {
+    @apply flex gap-2 pt-2;
+    border-top: 1px solid var(--color-border);
+  }
+}

package/components/mcp-resource-browser.css

@@ -0,0 +1,42 @@
+@layer components {
+  .mcpe-mcp-resource-browser {
+    @apply flex flex-col gap-1;
+  }
+
+  .mcpe-mcp-resource-browser-item {
+    @apply flex items-center gap-3 rounded-lg px-3 py-2.5 cursor-pointer transition-colors;
+    border: 1px solid transparent;
+  }
+
+  .mcpe-mcp-resource-browser-item:hover {
+    background-color: var(--color-accent);
+    border-color: var(--color-border);
+  }
+
+  .mcpe-mcp-resource-browser-item-selected {
+    background-color: var(--color-accent);
+    border-color: var(--color-ring);
+  }
+
+  .mcpe-mcp-resource-browser-icon {
+    @apply h-8 w-8 rounded-md flex items-center justify-center text-xs font-mono shrink-0;
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+  }
+
+  .mcpe-mcp-resource-browser-name {
+    @apply text-sm font-medium truncate;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .mcpe-mcp-resource-browser-type {
+    @apply text-xs font-mono shrink-0;
+    color: var(--color-muted-foreground);
+  }
+
+  .mcpe-mcp-resource-browser-empty {
+    @apply py-8 text-center text-sm;
+    color: var(--color-muted-foreground);
+  }
+}

package/components/mcp-scope-inspector.css

@@ -0,0 +1,49 @@
+@layer components {
+  .mcpe-mcp-scope-inspector {
+    @apply flex flex-col gap-1;
+  }
+
+  .mcpe-mcp-scope-inspector-item {
+    @apply rounded-lg overflow-hidden;
+    border: 1px solid var(--color-border);
+  }
+
+  .mcpe-mcp-scope-inspector-trigger {
+    @apply flex w-full items-center justify-between px-4 py-3 text-left;
+    background-color: var(--color-card);
+  }
+
+  .mcpe-mcp-scope-inspector-trigger:hover {
+    background-color: var(--color-accent);
+  }
+
+  .mcpe-mcp-scope-inspector-resource {
+    @apply font-mono text-sm font-medium;
+  }
+
+  .mcpe-mcp-scope-inspector-perms {
+    @apply flex items-center gap-1;
+  }
+
+  .mcpe-mcp-scope-inspector-perm {
+    @apply rounded px-1.5 py-0.5 text-[10px] font-mono font-medium uppercase;
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-foreground);
+  }
+
+  .mcpe-mcp-scope-inspector-chevron {
+    @apply h-4 w-4 shrink-0 transition-transform duration-200;
+    color: var(--color-muted-foreground);
+  }
+
+  .mcpe-mcp-scope-inspector-chevron-open {
+    transform: rotate(180deg);
+  }
+
+  .mcpe-mcp-scope-inspector-body {
+    @apply px-4 py-3 text-sm;
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+    border-top: 1px solid var(--color-border);
+  }
+}