mnfst 0.5.166 → 0.5.168

package/lib/manifest.appwrite.auth.js

@@ -3215,29 +3215,50 @@ function mergeRoles(manifestRoles, userGeneratedRoles) {
     return merged;
 }
 
-// Normalize custom roles for Appwrite (add "owner" if any role requires it)
+// Appwrite membership role tokens allow only [a-zA-Z0-9._-]. Role definitions are
+// keyed by display name (which may contain spaces/unicode), so we store an
+// Appwrite-safe slug on the membership and resolve by matching slug(token) against
+// slug(defName). Idempotent, and "owner" (Appwrite's intrinsic role) passes through.
+function roleSlug(name) {
+    if (name === 'owner') return 'owner';
+    return String(name)
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9._-]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+
+// Normalize custom roles for Appwrite: slugify tokens (so space/unicode names stay
+// assignable) and add "owner" if any role requires it.
 function normalizeRolesForAppwrite(customRoles, memberRoles, userGeneratedRoles = null) {
     if (!Array.isArray(customRoles)) {
         return customRoles;
     }
 
+    const slugged = customRoles.map(role => roleSlug(role));
+
     // Merge manifest and user-generated roles
     const allRoles = mergeRoles(memberRoles, userGeneratedRoles);
 
-    // If no roles config, return as-is (will use Appwrite's default behavior)
+    // If no roles config, return slugged tokens (Appwrite handles owner default)
     if (!allRoles || Object.keys(allRoles).length === 0) {
-        return customRoles;
+        return slugged;
     }
 
-    // Check if any custom role requires owner
-    const requiresOwner = customRoles.some(role => roleRequiresOwner(role, allRoles));
+    // Which definition slugs require owner — checked by slug so this works whether the
+    // incoming tokens are display names or already slugged.
+    const ownerSlugs = new Set();
+    for (const name of Object.keys(allRoles)) {
+        if (roleRequiresOwner(name, allRoles)) ownerSlugs.add(roleSlug(name));
+    }
+    const requiresOwner = slugged.some(s => ownerSlugs.has(s));
 
     // If owner is already in the list, don't duplicate
-    if (requiresOwner && !customRoles.includes('owner')) {
-        return [...customRoles, 'owner'];
+    if (requiresOwner && !slugged.includes('owner')) {
+        return [...slugged, 'owner'];
     }
 
-    return customRoles;
+    return slugged;
 }
 
 // Normalize Appwrite roles for display (filter "owner" if a custom role replaces it)
@@ -3249,10 +3270,15 @@ function normalizeRolesForDisplay(appwriteRoles, memberRoles, userGeneratedRoles
     // Merge manifest and user-generated roles
     const allRoles = mergeRoles(memberRoles, userGeneratedRoles);
 
-    // If custom roles are defined, always filter out "owner" (it's a background Appwrite role)
-    // "owner" is automatically added by Appwrite for permissions, but shouldn't be displayed
+    // If custom roles are defined, filter out "owner" (a background Appwrite role) and
+    // translate slug tokens back to their display names (legacy exact-name tokens map
+    // through slug() too; unknown tokens pass through as-is).
     if (allRoles && Object.keys(allRoles).length > 0) {
-        return appwriteRoles.filter(role => role !== 'owner');
+        const bySlug = {};
+        for (const name of Object.keys(allRoles)) bySlug[roleSlug(name)] = name;
+        return appwriteRoles
+            .filter(role => role !== 'owner')
+            .map(role => bySlug[roleSlug(role)] || role);
     }
 
     // If no custom roles config, show "owner" as-is (legacy behavior)
@@ -3303,9 +3329,13 @@ function hasPermission(userRoles, permission, memberRoles, userGeneratedRoles =
         return true;
     }
 
-    // Check if any of the user's custom roles has this permission
+    // Check if any of the user's custom roles has this permission. Match by slug so
+    // display-name definitions resolve against slugged membership tokens, and legacy
+    // exact-name tokens still resolve.
+    const bySlug = {};
+    for (const [name, perms] of Object.entries(allRoles)) bySlug[roleSlug(name)] = perms;
     for (const roleName of customRoles) {
-        const rolePermissions = allRoles[roleName];
+        const rolePermissions = bySlug[roleSlug(roleName)];
         if (rolePermissions && Array.isArray(rolePermissions) && rolePermissions.includes(permission)) {
             return true;
         }
@@ -3360,6 +3390,10 @@ function initializeTeamsRoles() {
                 return getOwnerPermissions();
             };
 
+            store.roleSlug = function (name) {
+                return roleSlug(name);
+            };
+
             store.validateRoleConfig = async function () {
                 const appwriteConfig = await config.getAppwriteConfig();
                 const memberRoles = appwriteConfig?.memberRoles || null;
@@ -3532,6 +3566,7 @@ window.ManifestAppwriteAuthTeamsRoles = {
     roleHasAllOwnerPermissions,
     getUserGeneratedRoles,
     mergeRoles,
+    roleSlug,
     normalizeRolesForAppwrite,
     normalizeRolesForDisplay,
     getPrimaryDisplayRole,
@@ -4218,7 +4253,13 @@ function initializeTeamsMembers() {
 
                     const result = await this._appwrite.teams.createMembership(membershipParams);
 
-                    return { success: true, membership: result };
+                    // Surface the requested vs. stored tokens. They diverge by design —
+                    // role names are slugified for Appwrite, and owner-level roles carry the
+                    // "owner" token — so `normalized: true` signals an intentional transform,
+                    // not a failed write.
+                    const normalized = !(rolesArray.length === normalizedRoles.length
+                        && rolesArray.every((r, i) => r === normalizedRoles[i]));
+                    return { success: true, membership: result, requestedRoles: rolesArray, normalizedRoles, normalized };
                 } catch (error) {
                     this.error = error.message;
                     return { success: false, error: error.message };
@@ -4475,7 +4516,13 @@ function initializeTeamsMembers() {
                         await this.refreshPermissionCache();
                     }
 
-                    return { success: true, membership: result };
+                    // `normalized: true` signals the stored tokens intentionally differ from
+                    // the requested roles (slugified names, and an appended "owner" token for
+                    // owner-level roles) — a by-design transform, not a failed write.
+                    const normalized = !(Array.isArray(roles) && Array.isArray(normalizedRoles)
+                        && roles.length === normalizedRoles.length
+                        && roles.every((r, i) => r === normalizedRoles[i]));
+                    return { success: true, membership: result, requestedRoles: roles, normalizedRoles, normalized };
                 } catch (error) {
                     // Revert optimistic update on error
                     if (this.currentTeam && this.currentTeam.$id === teamId && this.listMemberships) {
@@ -5446,7 +5493,19 @@ function initializeTeamsConvenience() {
                     const userMembership = this.currentTeamMemberships.find(
                         m => m.userId === this.user.$id
                     );
-                    return userMembership?.roles || [];
+                    const raw = userMembership?.roles || [];
+                    // Membership tokens are Appwrite-safe slugs; translate them back to the
+                    // author's display names using the cached role map. "owner" and unknown
+                    // tokens pass through unchanged.
+                    const slug = this.roleSlug;
+                    const allRoles = (this.allTeamRoles && this.allTeamRoles(this.currentTeam)) || {};
+                    const keys = Object.keys(allRoles);
+                    if (typeof slug !== 'function' || !keys.length) {
+                        return raw;
+                    }
+                    const bySlug = {};
+                    for (const name of keys) bySlug[slug(name)] = name;
+                    return raw.map(r => (r === 'owner' ? 'owner' : (bySlug[slug(r)] || r)));
                 };
 
                 // Check if current user has a specific permission in the current team
@@ -5494,9 +5553,13 @@ function initializeTeamsConvenience() {
                     }
 
                     // Granted if any of the user's custom roles includes this permission
-                    // (built-in or custom key).
+                    // (built-in or custom key). Match by slug so slugged/legacy membership
+                    // tokens resolve against display-name definitions.
+                    const slug = this.roleSlug || (x => x);
+                    const bySlug = {};
+                    for (const [name, perms] of Object.entries(allRoles)) bySlug[slug(name)] = perms;
                     for (const roleName of customRoles) {
-                        const rolePermissions = allRoles[roleName];
+                        const rolePermissions = bySlug[slug(roleName)];
                         if (Array.isArray(rolePermissions) && rolePermissions.includes(permission)) {
                             return true;
                         }
@@ -5510,7 +5573,8 @@ function initializeTeamsConvenience() {
                         return false;
                     }
                     const userRoles = this.getCurrentTeamRoles();
-                    return userRoles.includes(roleName);
+                    const slug = this.roleSlug || (x => x);
+                    return userRoles.some(r => slug(r) === slug(roleName));
                 };
 
                 // Get current user's primary role in current team

package/lib/manifest.chat.js

@@ -3,7 +3,7 @@
 /*  https://manifestx.dev
 /*
 /*  Handle = reactive conversation view fed by an adapter; drives intents. The
-/*  plugin transports/stores nothing — see CHAT-PLUGIN-DESIGN.md.
+/*  plugin transports/stores nothing — see templates/chat-adapter/README.md.
 */
 
 (function () {
@@ -287,8 +287,11 @@
         function mk(cid, channel, parts, msgs, closed) {
             convs.set(cid, { id: cid, channel, closed: !!closed, participants: parts, messages: msgs });
         }
-        const m = (cid, author, text, minsAgo, extra) =>
-            Object.assign({ id: id('m'), conversationId: cid, author, body: { text }, ts: t(minsAgo), status: 'delivered' }, extra || {});
+        const m = (cid, author, text, minsAgo, extra) => {
+            const msg = Object.assign({ id: id('m'), conversationId: cid, author, body: { text }, ts: t(minsAgo), status: 'delivered' }, extra || {});
+            if (msg.media) { msg.body.media = msg.media; delete msg.media; }   // media lives on body
+            return msg;
+        };
 
         // 1:1 AI co-pilot
         mk('dm-ai', 'webchat', [me, bot], [
@@ -296,6 +299,26 @@
             m('dm-ai', me, 'How many free credits do I get?', 11)
         ]);
 
+        // Attachment showcase — one of every media kind, both directions
+        // (harness-only conversation; asset paths resolve in the test project)
+        mk('media-1', 'webchat', [me, bot], [
+            m('media-1', me, 'Here is the artwork and the brief.', 22, {
+                media: [
+                    { kind: 'image', url: '/test/media/sample.png', name: 'artwork.png', mediaType: 'image/png' },
+                    { kind: 'document', url: '/test/media/sample.pdf', name: 'brief.pdf', mediaType: 'application/pdf' }
+                ]
+            }),
+            m('media-1', bot, 'Received — and here is everything back in every format:', 20, {
+                media: [
+                    { kind: 'image', url: '/test/media/sample.png', name: 'render.png', mediaType: 'image/png' },
+                    { kind: 'audio', url: '/test/media/sample.wav', name: 'jingle.wav', mediaType: 'audio/wav' },
+                    { kind: 'voice', url: '/test/media/sample.wav', name: 'voice note', mediaType: 'audio/wav' },
+                    { kind: 'video', url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4', name: 'clip.mp4', mediaType: 'video/mp4' },
+                    { kind: 'document', url: '/test/media/sample.pdf', name: 'summary.pdf', mediaType: 'application/pdf' }
+                ]
+            })
+        ]);
+
         // group with reactions + a small reply tree
         const g1 = m('grp-1', ana, 'Ship the v2 doc today?', 30);
         mk('grp-1', 'webchat', [me, ana, bo], [
@@ -378,7 +401,20 @@
                 setTimeout(() => deliver(target, msg), 60);   // server echo (reconciles media/status by id)
                 return { id: msg.id, ts: msg.ts, conversationId: target.id };
             },
-            async react(cid, mid, emoji) { const c = backend.convs.get(cid); const msg = c && c.messages.find(x => x.id === mid); if (msg) { msg.reactions = [{ emoji, count: 1, byMe: true, by: [backend.me.id] }]; emit(cid, h => h.onReaction && h.onReaction(mid, msg.reactions)); } return { ok: true }; },
+            async react(cid, mid, emoji) {
+                // toggle: off if I reacted, join if others did, add if new
+                const c = backend.convs.get(cid); const msg = c && c.messages.find(x => x.id === mid);
+                if (msg) {
+                    const rs = (msg.reactions || []).map(r => Object.assign({}, r));
+                    const r = rs.find(x => x.emoji === emoji);
+                    if (r && r.byMe) { r.count--; r.byMe = false; }
+                    else if (r) { r.count++; r.byMe = true; }
+                    else rs.push({ emoji, count: 1, byMe: true });
+                    msg.reactions = rs.filter(x => x.count > 0);
+                    emit(cid, h => h.onReaction && h.onReaction(mid, msg.reactions));
+                }
+                return { ok: true };
+            },
             async addParticipant(cid, p) { const c = backend.convs.get(cid); if (c && !c.participants.some(x => x.id === p.id)) { c.participants.push(p); emit(cid, h => h.onParticipant && h.onParticipant(p, 'added')); } return { ok: true }; },
             async transfer(cid, from, to, role) { emit(cid, h => h.onParticipant && h.onParticipant({ id: to, role: role || 'assignee' }, 'changed')); return { ok: true }; },
             async setTyping(cid, on) { emit(cid, h => h.onTyping && h.onTyping(backend.me.id, on)); },
@@ -413,11 +449,11 @@
 
     // ---- simulation hooks (button-driven; deterministic for verification) ---
     const sim = {
-        // stream an AI reply token-by-token into a conversation
-        aiReply(cid, text) {
+        // stream an AI reply token-by-token into a conversation (media attaches on completion)
+        aiReply(cid, text, media) {
             const c = backend.convs.get(cid); if (!c) return;
             const mid = backend.id('m');
-            const msg = { id: mid, conversationId: cid, author: backend.bot, body: { text: '' }, ts: backend.t(0), status: 'streaming', meta: { authoredBy: 'u_me' } };
+            const msg = { id: mid, conversationId: cid, author: backend.bot, body: { text: '', media: media || undefined }, ts: backend.t(0), status: 'streaming', meta: { authoredBy: 'u_me' } };
             c.messages.push(msg);
             emit(cid, h => h.onMessage && h.onMessage(msg));
             const words = (text || 'Every account starts with 5,000 free credits each month.').split(' ');
@@ -482,7 +518,8 @@
             // Same-origin relay mnfst-run serves for an `ai` block; override via
             // opts.endpoint / window.CHAT_LLM_ENDPOINT.
             const endpoint = opts.endpoint || window.CHAT_LLM_ENDPOINT || '/_ai/chat';
-            const system = opts.system || 'You are a helpful assistant for the Manifest framework docs. Answer in concise markdown.';
+            // only when set — the relay's ai block (system + grounding) is the default
+            const system = opts.system || undefined;
             const handlers = {};   // conversationId -> subscribe handlers
             let seq = 0;
             const id = (p) => p + '_' + Date.now().toString(36) + '_' + (++seq);
@@ -498,12 +535,15 @@
             const toMsg = (r) => ({ id: r.id, conversationId: null, author: r.role === 'assistant' ? BOT : USER, body: { text: r.text }, ts: r.ts, status: 'delivered' });
 
             // Build the Anthropic messages array; attachments → image/document blocks.
+            // Only what the API accepts is forwarded (images + PDFs with data);
+            // audio/video/voice render locally but don't reach the model.
             function apiMessages(cid, draft) {
                 const hist = loadStore(cid).map(r => ({ role: r.role, content: r.text }));
-                const media = (draft.body && draft.body.media) || [];
+                const media = ((draft.body && draft.body.media) || []).filter(a =>
+                    a.data && (a.kind === 'image' || a.mediaType === 'application/pdf'));
                 const blocks = media.map(a => a.kind === 'image'
                     ? { type: 'image', source: { type: 'base64', media_type: a.mediaType, data: a.data } }
-                    : { type: 'document', source: { type: 'base64', media_type: a.mediaType || 'application/pdf', data: a.data } });
+                    : { type: 'document', source: { type: 'base64', media_type: 'application/pdf', data: a.data } });
                 const text = (draft.body && draft.body.text) || draft.text || '';
                 const last = blocks.length ? { role: 'user', content: [...blocks, { type: 'text', text }] } : { role: 'user', content: text };
                 return [...hist, last];
@@ -555,6 +595,129 @@
 })();
 
 
+/*  Manifest Chat — Appwrite adapter (conversations as app data)
+ *  By Andrew Matlock under MIT license
+ *  https://manifestx.dev
+ *
+ *  Messages live as rows in an Appwrite table; inbound arrives over Appwrite
+ *  Realtime; identity comes from $auth (guest sessions cover anonymous use).
+ *  Built for comments, support threads, and small-group chat — high-volume
+ *  messaging belongs on a purpose-built bus behind a custom adapter.
+ *
+ *  Config: opts { databaseId, tableId, ttlHours } or manifest.json
+ *  chat: { appwriteDatabaseId, appwriteTableId, ttlHours }.
+ *  Table columns: conversationId (indexed) · text · authorId · authorName ·
+ *  authorColor? · replyTo?  — ts/id come from $createdAt/$id.
+ */
+
+(function () {
+    'use strict';
+
+    function ready(fn) {
+        if (window.ManifestChatAdapters) return fn();
+        const t = setInterval(() => { if (window.ManifestChatAdapters) { clearInterval(t); fn(); } }, 20);
+        setTimeout(() => clearInterval(t), 5000);
+    }
+
+    ready(function () {
+        function hashColor(id) {
+            let h = 0; for (const ch of String(id)) h = (h * 31 + ch.charCodeAt(0)) >>> 0;
+            return `hsl(${h % 360} 60% 45%)`;
+        }
+
+        function appwriteAdapter(opts) {
+            opts = opts || {};
+            let cfg = null;
+
+            async function config() {
+                if (cfg) return cfg;
+                let databaseId = opts.databaseId, tableId = opts.tableId, ttlHours = opts.ttlHours;
+                if ((!databaseId || !tableId) && window.ManifestDataConfig && window.ManifestDataConfig.ensureManifest) {
+                    const m = await window.ManifestDataConfig.ensureManifest();
+                    const c = (m && m.chat) || {};
+                    databaseId = databaseId || c.appwriteDatabaseId;
+                    tableId = tableId || c.appwriteTableId;
+                    if (ttlHours == null) ttlHours = c.ttlHours;
+                }
+                if (!databaseId || !tableId) console.warn('[Manifest Chat] appwrite adapter needs databaseId + tableId (opts or manifest.json chat block).');
+                cfg = { databaseId, tableId, ttlHours };
+                return cfg;
+            }
+
+            function me() {
+                const auth = window.Alpine ? window.Alpine.store('auth') : null;
+                const u = auth && auth.user;
+                if (u && u.$id) return { id: u.$id, kind: 'human', displayName: u.name || u.email || 'Guest', color: hashColor(u.$id) };
+                let gid = null;
+                try { gid = localStorage.getItem('mnfst.chat.gid'); if (!gid) { gid = 'g_' + Math.random().toString(36).slice(2, 10); localStorage.setItem('mnfst.chat.gid', gid); } } catch (_) { gid = 'g_anon'; }
+                return { id: gid, kind: 'human', displayName: 'Guest', color: hashColor(gid) };
+            }
+
+            function toMsg(row) {
+                return {
+                    id: row.$id, conversationId: row.conversationId,
+                    author: { id: row.authorId, kind: 'human', displayName: row.authorName, color: row.authorColor || hashColor(row.authorId) },
+                    body: { text: row.text }, replyTo: row.replyTo || undefined,
+                    ts: row.$createdAt, status: 'delivered'
+                };
+            }
+
+            return {
+                identity: () => me(),
+
+                async load(cid) {
+                    const { databaseId, tableId, ttlHours } = await config();
+                    if (!databaseId) return { messages: [], participants: [] };
+                    // tablesDB directly (not loadTableRows): public read("any") tables
+                    // must load before any session exists — no auth gate on reads.
+                    const services = await window.ManifestDataAppwrite.getAppwriteDataServices();
+                    const Q = window.Appwrite.Query;
+                    const queries = [Q.equal('conversationId', cid), Q.orderDesc('$createdAt'), Q.limit(100)];
+                    if (ttlHours) queries.push(Q.greaterThan('$createdAt', new Date(Date.now() - ttlHours * 3600e3).toISOString()));
+                    const res = await services.tablesDB.listRows({ databaseId, tableId, queries });
+                    return { messages: res.rows.map(toMsg).reverse(), participants: [] };
+                },
+
+                subscribe(cid, handlers) {
+                    let unsub = null, closed = false;
+                    (async () => {
+                        const { databaseId, tableId } = await config();
+                        if (!databaseId) return;
+                        const services = await window.ManifestDataAppwrite.getAppwriteDataServices();
+                        if (!services || !services.realtime || closed) return;
+                        unsub = services.realtime.subscribe(`databases.${databaseId}.tables.${tableId}.rows`, (res) => {
+                            if (!res || !res.payload || res.payload.conversationId !== cid) return;
+                            const events = Array.isArray(res.events) ? res.events : [res.events];
+                            if (events.some(e => typeof e === 'string' && e.endsWith('.create'))) handlers.onMessage(toMsg(res.payload));
+                        });
+                        if (handlers.onConnection) handlers.onConnection(true);
+                    })();
+                    return () => { closed = true; try { unsub && unsub(); } catch (_) { } };
+                },
+
+                async send(cid, draft) {
+                    const { databaseId, tableId } = await config();
+                    const auth = window.Alpine ? window.Alpine.store('auth') : null;
+                    if (auth && !auth.isAuthenticated && typeof auth.requestGuest === 'function') {
+                        try { await auth.requestGuest(); } catch (_) { }   // guests may create
+                    }
+                    const who = me();
+                    const text = (draft.body && draft.body.text) || draft.text || '';
+                    const row = await window.ManifestDataAppwrite.createRow(databaseId, tableId, {
+                        conversationId: cid, text,
+                        authorId: who.id, authorName: who.displayName, authorColor: who.color,
+                        replyTo: draft.replyTo || null
+                    });
+                    return { id: row.$id, ts: row.$createdAt };
+                }
+            };
+        }
+
+        window.ManifestChatAdapters.register('appwrite', appwriteAdapter);
+    });
+})();
+
+
 /*  Manifest Chat — magic + init
 /*  By Andrew Matlock under MIT license
 /*  https://manifestx.dev

package/lib/manifest.code.css

@@ -220,13 +220,20 @@
 
     :where(.code-copied-icon) {
         display: inline-block;
+        vertical-align: middle;
         width: 1em;
         height: 1em;
         background-color: currentColor;
         mask-image: var(--icon-code-copied);
-        mask-size: contain;
+        mask-size: 1em;
         mask-repeat: no-repeat;
-        mask-position: center
+        mask-position: center;
+
+        /* Fill the line box so the mask centers optically */
+        @supports (height: 1lh) {
+            height: 1lh;
+            vertical-align: top
+        }
     }
 
     /* Pre code blocks (individual or tab grouped) */

package/lib/manifest.code.min.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");:root{--icon-code-copy:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");--icon-code-copied:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jb3B5LWNoZWNrLWljb24gbHVjaWRlLWNvcHktY2hlY2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTEyIDE1IDIgMiA0LTQiLz48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjgiIHk9IjgiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik00IDE2Yy0xLjEgMC0yLS45LTItMlY0YzAtMS4xLjktMiAyLTJoMTBjMS4xIDAgMiAuOSAyIDIiLz48L3N2Zz4=");--icon-code-expand:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--color-code-keyword:#b8860b;--color-code-string:#8b4513;--color-code-comment:gray;--color-code-function:peru;--color-code-number:sienna;--color-code-operator:#2f4f4f;--color-code-class-name:#daa520;--color-code-tag:#4682b4;--color-code-attr-name:#ff8c00;--color-code-attr-value:#8b4513;--color-code-property:sienna;--color-code-selector:#4682b4;--color-code-punctuation:#2f4f4f;--color-code-builtin:#b8860b;--color-code-constant:sienna;--color-code-boolean:sienna;--color-code-regex:#8b4513;--color-code-symbol:#daa520;--color-code-entity:#daa520;--color-code-url:sienna;--color-code-atrule:#b8860b;--color-code-rule:#4682b4;--color-code-doctype:gray;--color-code-cdata:gray;--color-code-prolog:gray;--color-code-namespace:gray;--color-code-important:#b8860b;--color-code-inserted:#228b22;--color-code-deleted:#dc143c;--color-code-char:#8b4513}.dark{--color-code-keyword:#f4a460;--color-code-string:#deb887;--color-code-comment:#8b8b8b;--color-code-function:#daa520;--color-code-number:tan;--color-code-operator:wheat;--color-code-class-name:peru;--color-code-tag:#87ceeb;--color-code-attr-name:gold;--color-code-attr-value:#deb887;--color-code-property:tan;--color-code-selector:#87ceeb;--color-code-punctuation:wheat;--color-code-builtin:#f4a460;--color-code-constant:tan;--color-code-boolean:tan;--color-code-regex:#deb887;--color-code-symbol:peru;--color-code-entity:peru;--color-code-url:tan;--color-code-atrule:#f4a460;--color-code-rule:#98fb98;--color-code-doctype:#8b8b8b;--color-code-cdata:#8b8b8b;--color-code-prolog:#8b8b8b;--color-code-namespace:#8b8b8b;--color-code-important:#f4a460;--color-code-inserted:#98fb98;--color-code-deleted:#f08080;--color-code-char:#deb887}@layer utilities{.hljs-comment{color:var(--color-code-comment)!important}.hljs-keyword{color:var(--color-code-keyword)!important}.hljs-string{color:var(--color-code-string)!important}.hljs-number{color:var(--color-code-number)!important}.hljs-literal{color:var(--color-code-constant)!important}.hljs-type{color:var(--color-code-class-name)!important}.hljs-variable{color:var(--color-code-property)!important}.hljs-variable.language_{color:var(--color-code-keyword)!important}.hljs-variable.constant_{color:var(--color-code-constant)!important}.hljs-title{color:var(--color-code-function)!important}.hljs-title.class_.inherited__{color:var(--color-code-class-name)!important}.hljs-title.function_.invoke__{color:var(--color-code-function)!important}.hljs-params{color:var(--color-code-property)!important}.hljs-doctag{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-meta{color:var(--color-code-comment)!important}.hljs-meta.keyword_,.hljs-meta.prompt_{color:var(--color-code-keyword)!important}.hljs-meta.string_{color:var(--color-code-string)!important}.hljs-section{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-name{color:var(--color-code-tag)!important}.hljs-attribute{color:var(--color-code-attr-name)!important}.hljs-bullet{color:var(--color-code-punctuation)!important}.hljs-code{color:var(--color-code-property)!important}.hljs-formula{color:var(--color-code-number)!important}.hljs-quote{color:var(--color-code-string)!important}.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:var(--color-code-selector)!important}.hljs-template-tag{color:var(--color-code-tag)!important}.hljs-template-variable{color:var(--color-code-property)!important}.hljs-subst{color:var(--color-code-string)!important}}@layer components{:where(code[role=button]){height:fit-content}:where(.code-copied-icon){background-color:currentColor;display:inline-block;height:1em;mask-image:var(--icon-code-copied);mask-position:center;mask-repeat:no-repeat;mask-size:contain;width:1em}:where([x-code],[x-code-group]):not(.unstyle){position:relative;:where(header):not(:where(:is(aside.frame) header)){align-items:center;background-color:color-mix(in oklch,var(--color-content-stark,oklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0));display:flex;flex-direction:row;font-family:var(--font-sans,sans-serif);font-size:inherit;min-height:var(--spacing-field-height,2.25rem);padding-inline-end:var(--spacing-field-height);padding-inline-start:calc(var(--spacing, .25rem)*4);width:100%;&:has(button[role=tab]){padding-inline-start:calc(var(--spacing, .25rem)*2)}& [role=tablist]{display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}& button[role=tab]{background:transparent;border:0;color:inherit;flex-shrink:0;font-family:inherit;font-size:inherit;height:fit-content;justify-content:start;&:hover{background-color:var(--color-field-surface,color-mix(oklch(20.5% 0 0) 10%,transparent));color:var(--color-content-stark,oklch(43.9% 0 0))}&[aria-selected=true]{color:var(--color-brand-content,oklch(68.1% .162 75.834));pointer-events:none;position:relative}}}}& button.copy{background-color:transparent;font-size:75%;inset-inline-end:0;position:absolute;top:0;&:hover{background-color:transparent;&:after{background-color:var(--color-field-inverse,oklch(43.9% 0 0))}}&:after{background-color:var(--color-content-neutral,oklch(43.9% 0 0));content:"";display:block;height:.8125rem;mask-image:var(--icon-code-copy);mask-repeat:no-repeat;mask-size:contain;width:.8125rem}&.copied:after{mask-image:var(--icon-code-copied)}}:where(header)::-webkit-scrollbar{display:none}& .lines{background-color:var(--color-page,oklch(98.5% 0 0));color:var(--color-content-subtle,oklch(55.6% 0 0));display:inline-flex;flex-direction:column;font-family:inherit;font-size:inherit;inset-inline-start:0;line-height:inherit;padding:calc(var(--spacing, .25rem)*4);pointer-events:none;position:absolute;text-align:end;user-select:none}&:has(.lines) code{padding-inline-start:calc(var(--spacing, .25rem)*8 + 2ch)}:where(code){flex:1 1 100%;min-width:0;white-space:pre;white-space-collapse:preserve}& button.expand{align-items:center;background:transparent;border:0;border-radius:0;color:var(--color-content-subtle,oklch(55.6% 0 0));cursor:pointer;display:flex;font-family:var(--font-sans,sans-serif);font-size:inherit;height:var(--spacing-field-height,2.25rem);justify-content:center;order:99;padding:0 calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out);width:100%;&:hover{background:color-mix(in oklch,var(--color-content-stark,oklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0))}}&[data-collapsed] .lines,&[data-collapsed] code{mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3em),transparent calc(100% - .75em),transparent);max-height:calc(var(--collapse-lines, 20)*1.7em + var(--spacing, .25rem)*8);overflow:hidden}:where(aside.frame){background:unset;border:0;box-shadow:unset;color:unset;font-family:unset;font-size:unset;font-weight:unset;line-height:unset;white-space:normal;white-space-collapse:collapse}}:where([x-code-group]){flex-flow:column;:where([x-code]){background:transparent;border:0;border-radius:0}}:where([x-code]):has(>header){& .lines{top:var(--spacing-field-height,2.25rem)}}}
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");:root{--icon-code-copy:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");--icon-code-copied:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jb3B5LWNoZWNrLWljb24gbHVjaWRlLWNvcHktY2hlY2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0ibTEyIDE1IDIgMiA0LTQiLz48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjgiIHk9IjgiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik00IDE2Yy0xLjEgMC0yLS45LTItMlY0YzAtMS4xLjktMiAyLTJoMTBjMS4xIDAgMiAuOSAyIDIiLz48L3N2Zz4=");--icon-code-expand:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");--color-code-keyword:#b8860b;--color-code-string:#8b4513;--color-code-comment:gray;--color-code-function:peru;--color-code-number:sienna;--color-code-operator:#2f4f4f;--color-code-class-name:#daa520;--color-code-tag:#4682b4;--color-code-attr-name:#ff8c00;--color-code-attr-value:#8b4513;--color-code-property:sienna;--color-code-selector:#4682b4;--color-code-punctuation:#2f4f4f;--color-code-builtin:#b8860b;--color-code-constant:sienna;--color-code-boolean:sienna;--color-code-regex:#8b4513;--color-code-symbol:#daa520;--color-code-entity:#daa520;--color-code-url:sienna;--color-code-atrule:#b8860b;--color-code-rule:#4682b4;--color-code-doctype:gray;--color-code-cdata:gray;--color-code-prolog:gray;--color-code-namespace:gray;--color-code-important:#b8860b;--color-code-inserted:#228b22;--color-code-deleted:#dc143c;--color-code-char:#8b4513}.dark{--color-code-keyword:#f4a460;--color-code-string:#deb887;--color-code-comment:#8b8b8b;--color-code-function:#daa520;--color-code-number:tan;--color-code-operator:wheat;--color-code-class-name:peru;--color-code-tag:#87ceeb;--color-code-attr-name:gold;--color-code-attr-value:#deb887;--color-code-property:tan;--color-code-selector:#87ceeb;--color-code-punctuation:wheat;--color-code-builtin:#f4a460;--color-code-constant:tan;--color-code-boolean:tan;--color-code-regex:#deb887;--color-code-symbol:peru;--color-code-entity:peru;--color-code-url:tan;--color-code-atrule:#f4a460;--color-code-rule:#98fb98;--color-code-doctype:#8b8b8b;--color-code-cdata:#8b8b8b;--color-code-prolog:#8b8b8b;--color-code-namespace:#8b8b8b;--color-code-important:#f4a460;--color-code-inserted:#98fb98;--color-code-deleted:#f08080;--color-code-char:#deb887}@layer utilities{.hljs-comment{color:var(--color-code-comment)!important}.hljs-keyword{color:var(--color-code-keyword)!important}.hljs-string{color:var(--color-code-string)!important}.hljs-number{color:var(--color-code-number)!important}.hljs-literal{color:var(--color-code-constant)!important}.hljs-type{color:var(--color-code-class-name)!important}.hljs-variable{color:var(--color-code-property)!important}.hljs-variable.language_{color:var(--color-code-keyword)!important}.hljs-variable.constant_{color:var(--color-code-constant)!important}.hljs-title{color:var(--color-code-function)!important}.hljs-title.class_.inherited__{color:var(--color-code-class-name)!important}.hljs-title.function_.invoke__{color:var(--color-code-function)!important}.hljs-params{color:var(--color-code-property)!important}.hljs-doctag{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-meta{color:var(--color-code-comment)!important}.hljs-meta.keyword_,.hljs-meta.prompt_{color:var(--color-code-keyword)!important}.hljs-meta.string_{color:var(--color-code-string)!important}.hljs-section{color:var(--color-code-keyword)!important;font-weight:600!important}.hljs-name{color:var(--color-code-tag)!important}.hljs-attribute{color:var(--color-code-attr-name)!important}.hljs-bullet{color:var(--color-code-punctuation)!important}.hljs-code{color:var(--color-code-property)!important}.hljs-formula{color:var(--color-code-number)!important}.hljs-quote{color:var(--color-code-string)!important}.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:var(--color-code-selector)!important}.hljs-template-tag{color:var(--color-code-tag)!important}.hljs-template-variable{color:var(--color-code-property)!important}.hljs-subst{color:var(--color-code-string)!important}}@layer components{:where(code[role=button]){height:fit-content}:where(.code-copied-icon){background-color:currentColor;display:inline-block;height:1em;mask-image:var(--icon-code-copied);mask-position:center;mask-repeat:no-repeat;mask-size:1em;vertical-align:middle;width:1em;@supports (height:1lh){height:1lh;vertical-align:top}}:where([x-code],[x-code-group]):not(.unstyle){position:relative;:where(header):not(:where(:is(aside.frame) header)){align-items:center;background-color:color-mix(in oklch,var(--color-content-stark,oklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0));display:flex;flex-direction:row;font-family:var(--font-sans,sans-serif);font-size:inherit;min-height:var(--spacing-field-height,2.25rem);padding-inline-end:var(--spacing-field-height);padding-inline-start:calc(var(--spacing, .25rem)*4);width:100%;&:has(button[role=tab]){padding-inline-start:calc(var(--spacing, .25rem)*2)}& [role=tablist]{display:flex;flex-direction:row;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}& button[role=tab]{background:transparent;border:0;color:inherit;flex-shrink:0;font-family:inherit;font-size:inherit;height:fit-content;justify-content:start;&:hover{background-color:var(--color-field-surface,color-mix(oklch(20.5% 0 0) 10%,transparent));color:var(--color-content-stark,oklch(43.9% 0 0))}&[aria-selected=true]{color:var(--color-brand-content,oklch(68.1% .162 75.834));pointer-events:none;position:relative}}}}& button.copy{background-color:transparent;font-size:75%;inset-inline-end:0;position:absolute;top:0;&:hover{background-color:transparent;&:after{background-color:var(--color-field-inverse,oklch(43.9% 0 0))}}&:after{background-color:var(--color-content-neutral,oklch(43.9% 0 0));content:"";display:block;height:.8125rem;mask-image:var(--icon-code-copy);mask-repeat:no-repeat;mask-size:contain;width:.8125rem}&.copied:after{mask-image:var(--icon-code-copied)}}:where(header)::-webkit-scrollbar{display:none}& .lines{background-color:var(--color-page,oklch(98.5% 0 0));color:var(--color-content-subtle,oklch(55.6% 0 0));display:inline-flex;flex-direction:column;font-family:inherit;font-size:inherit;inset-inline-start:0;line-height:inherit;padding:calc(var(--spacing, .25rem)*4);pointer-events:none;position:absolute;text-align:end;user-select:none}&:has(.lines) code{padding-inline-start:calc(var(--spacing, .25rem)*8 + 2ch)}:where(code){flex:1 1 100%;min-width:0;white-space:pre;white-space-collapse:preserve}& button.expand{align-items:center;background:transparent;border:0;border-radius:0;color:var(--color-content-subtle,oklch(55.6% 0 0));cursor:pointer;display:flex;font-family:var(--font-sans,sans-serif);font-size:inherit;height:var(--spacing-field-height,2.25rem);justify-content:center;order:99;padding:0 calc(var(--spacing, .25rem)*2);transition:var(--transition,all .05s ease-in-out);width:100%;&:hover{background:color-mix(in oklch,var(--color-content-stark,oklch(43.9% 0 0)) 8%,transparent);color:var(--color-content-neutral,oklch(43.9% 0 0))}}&[data-collapsed] .lines,&[data-collapsed] code{mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 3em),transparent calc(100% - .75em),transparent);max-height:calc(var(--collapse-lines, 20)*1.7em + var(--spacing, .25rem)*8);overflow:hidden}:where(aside.frame){background:unset;border:0;box-shadow:unset;color:unset;font-family:unset;font-size:unset;font-weight:unset;line-height:unset;white-space:normal;white-space-collapse:collapse}}:where([x-code-group]){flex-flow:column;:where([x-code]){background:transparent;border:0;border-radius:0}}:where([x-code]):has(>header){& .lines{top:var(--spacing-field-height,2.25rem)}}}

package/lib/manifest.combobox.css

@@ -72,16 +72,25 @@
         gap: var(--spacing, 0.25rem);
         max-width: 100%;
         height: calc(var(--spacing-field-height, 2.25rem) - var(--spacing, 0.25rem) * 2.5);
+        margin: 0;
+        padding: 0;
         padding-inline-start: calc(var(--spacing, 0.25rem) * 2);
         font-size: 0.875rem;
+        line-height: normal;
         color: var(--color-content-stark, oklch(43.9% 0 0));
         background-color: var(--color-popover-surface, oklch(100% 0 0));
+        border: 0;
         border-radius: calc(var(--radius, 0.5rem) * 0.7);
         overflow: hidden;
         user-select: none;
 
         /* Label */
         &>span {
+            min-width: 0;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font: inherit;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap
@@ -92,15 +101,23 @@
             display: inline-flex;
             align-items: center;
             justify-content: center;
+            box-sizing: border-box;
+            flex: none;
+            width: auto !important;
             min-width: 0;
+            max-width: none;
             height: 100%;
+            min-height: 0;
             aspect-ratio: 1 / 1;
+            margin: 0;
             padding: 0;
+            border: 0;
+            border-radius: 0;
             font-size: 1em;
             line-height: 1;
             color: var(--color-content-neutral, oklch(43.9% 0 0));
             background: transparent;
-            border-radius: 0;
+            box-shadow: none;
             cursor: pointer;
 
             &:hover {