mnfst 0.5.192 → 0.5.194

package/README.md

@@ -23,9 +23,18 @@ Get [CDN links](https://manifestx.dev/getting-started/setup) for existing projec
 **Alpine Plugins:**
 - Color Themes
 - Components
-- Data Sources
+- Data Sources (local, API & Appwrite)
+- Authentication & Teams (Appwrite)
 - Localization
 - SPA Routing
+- Payments
+- Chat
+- Charts
+- Presence & Status
+- Virtual Scrolling
+- Datepicker, Colorpicker & Combobox
+- Markdown, Code & Icons
+- Native App Support (Capacitor)
 
 **UX/UI:**
 - Global Theme
@@ -38,7 +47,14 @@ Get [CDN links](https://manifestx.dev/getting-started/setup) for existing projec
 
 ## 📚 Documentation
 
-For full documentation visit [manifestx.dev](https://manifestx.dev).
+For full documentation visit [manifestx.dev](https://manifestx.dev) — every article is searchable with ⌘K.
+
+<br>
+
+## 🛠 Development
+
+- `npm run start:src` — dev server for the `src/` test project
+- `npm run build` — regenerate `lib/` from `src/` and re-sync `packages/*`
 
 <br>
 
@@ -51,9 +67,11 @@ Each package publishes independently to npm. The `release:*` scripts auto-bump t
 | `npm run release` | `mnfst` | (root) |
 | `npm run release:run` | `mnfst-run` | `packages/run/` |
 | `npm run release:render` | `mnfst-render` | `packages/render/` |
+| `npm run release:publish` | `mnfst-publish` | `packages/publish/` |
+| `npm run release:types` | `mnfst-types` | `packages/types/` |
 | `npm run release:starter` | `mnfst-starter` | `packages/create-starter/` |
 
-Run only the scripts whose package you actually changed.
+Run only the scripts whose package you actually changed (`npm run release:all` publishes everything).
 
 For a **minor** or **major** bump, run `npm version minor` (or `major`) inside the relevant package directory before publishing:
 ```sh

package/lib/manifest.accordion.css

@@ -58,11 +58,8 @@
                 width: 1rem;
                 height: 1rem;
                 background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 50%, var(--color-field-inverse, oklch(43.9% 0 0)));
-                -webkit-mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
                 mask-image: var(--icon-accordion, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 256 256'%3E%3Cpath fill='%23000' d='m184.49 136.49l-80 80a12 12 0 0 1-17-17L159 128L87.51 56.49a12 12 0 1 1 17-17l80 80a12 12 0 0 1-.02 17'/%3E%3C/svg%3E"));
-                -webkit-mask-repeat: no-repeat;
                 mask-repeat: no-repeat;
-                -webkit-mask-size: 100% 100%;
                 mask-size: 100% 100%;
                 transform: rotate(0);
                 transition: 0.25s transform ease

package/lib/manifest.appwrite.auth.js

@@ -1147,8 +1147,7 @@ function initializeAuthMagic() {
                     if (typeof value === 'function') {
                         return value.bind(store);
                     }
-                    // CRITICAL: If property exists but is not a function, check if it should be a convenience method
-                    // This handles cases where the store was recreated and methods are missing
+                    // Non-function value that should be a convenience method → store was recreated
                     if (typeof prop === 'string') {
                         const convenienceMethodNames = [
                             'isCreatingTeam', 'isUpdatingTeam', 'isDeletingTeam', 'isInvitingMember',
@@ -1163,12 +1162,10 @@ function initializeAuthMagic() {
                         ];
 
                         if (convenienceMethodNames.includes(prop)) {
-                            // This should be a function but isn't - try to reinitialize synchronously
+                            // Reinitialize synchronously, then re-check
                             if (window.ManifestAppwriteAuthTeamsConvenience && window.ManifestAppwriteAuthTeamsConvenience.initialize) {
                                 try {
-                                    // Call initialize which will check and re-add methods if needed
                                     window.ManifestAppwriteAuthTeamsConvenience.initialize();
-                                    // Immediately check again - initialize should have added the method
                                     const reinitializedValue = store[prop];
                                     if (typeof reinitializedValue === 'function') {
                                         return reinitializedValue.bind(store);
@@ -1177,8 +1174,7 @@ function initializeAuthMagic() {
                                     // Failed to reinitialize, continue to fallback
                                 }
                             }
-                            // Return a safe fallback function that returns false/empty
-                            // This prevents "is not a function" errors while methods are being reinitialized
+                            // Safe fallbacks while methods reinitialize
                             if (prop.startsWith('is') || prop.startsWith('can') || prop.startsWith('has')) {
                                 return () => false;
                             }
@@ -1191,8 +1187,7 @@ function initializeAuthMagic() {
                             return () => ({ success: false, error: 'Method not initialized' });
                         }
                     }
-                    // CRITICAL: Handle null values - return loading proxy to allow safe chaining
-                    // This prevents errors when accessing $auth.user.email when user is null
+                    // Null/undefined: loading proxy keeps $auth.user.email chains safe
                     if (value === null || value === undefined) {
                         return createAuthLoadingProxy();
                     }
@@ -1232,9 +1227,7 @@ function initializeAuthMagic() {
                     return value;
                 }
 
-                // CRITICAL: If property doesn't exist, check if convenience methods need reinitialization
-                // This prevents "$auth.isCreatingTeam is not a function" errors after idle/reinitialization
-                // Only check for known convenience method names to avoid unnecessary work
+                // Missing property: reinitialize known convenience methods (guards post-idle errors)
                 const convenienceMethodNames = [
                     'isCreatingTeam', 'isUpdatingTeam', 'isDeletingTeam', 'isInvitingMember',
                     'isUpdatingMember', 'isDeletingMember', 'createTeamFromName', 'updateCurrentTeamName',
@@ -3141,8 +3134,7 @@ function validateRoleConfig(memberRoles, creatorRole) {
     const errors = [];
     const warnings = [];
 
-    // If teams not enabled, roles are ignored (graceful degradation)
-    // This validation assumes teams are enabled
+    // Assumes teams enabled; roles are ignored otherwise
 
     // Validate memberRoles structure
     if (memberRoles && typeof memberRoles !== 'object') {
@@ -3167,8 +3159,7 @@ function validateRoleConfig(memberRoles, creatorRole) {
             if (typeof permission !== 'string') {
                 errors.push(`Role "${roleName}" has invalid permission type. Permissions must be strings.`);
             } else if (!OWNER_PERMISSIONS.includes(permission)) {
-                // Custom permission - this is allowed, just log for info
-                // No error, as custom permissions are valid
+                // Custom permissions are valid; no error
             }
         }
     }
@@ -3223,8 +3214,7 @@ async function getUserGeneratedRoles(teamId, appwrite) {
         const prefs = await appwrite.teams.getPrefs({ teamId });
         return prefs?.roles || null;
     } catch (error) {
-        // Team preferences might not have roles yet, or team might be deleted (404)
-        // Silently return null for deleted teams (expected behavior)
+        // Prefs may lack roles, or team deleted (404) → null
         if (error.message && error.message.includes('could not be found')) {
             return null;
         }
@@ -3347,20 +3337,12 @@ function hasPermission(userRoles, permission, memberRoles, userGeneratedRoles =
         return userRoles.includes('owner');
     }
 
-    // IMPORTANT: When custom roles are defined, we ONLY check custom roles, NOT the owner role.
-    // This is because Appwrite automatically grants "owner" role to users with custom roles
-    // that have native permissions, but we want to restrict them to ONLY the permissions
-    // explicitly defined in their custom role(s).
-
-    // Get user's custom roles (excluding "owner")
+    // With custom roles defined, check ONLY custom roles — Appwrite auto-grants "owner"
+    // alongside them, but permissions must stay limited to the custom role(s).
     const customRoles = userRoles.filter(role => role !== 'owner');
 
-    // If user has no custom roles (only "owner" or empty), grant all permissions
-    // This handles edge cases where:
-    // - User's role was deleted
-    // - User was never assigned a custom role
+    // No custom roles (deleted or never assigned) → full owner permissions
     if (customRoles.length === 0) {
-        // User has no custom roles, so they should have all owner permissions
         return true;
     }
 
@@ -6582,9 +6564,7 @@ function initializeOAuth() {
     const waitForStore = () => {
         const store = Alpine.store('auth');
         if (store && !store.loginOAuth) {
-            // Add OAuth method to store
-            // Note: Appwrite accepts any provider string (google, github, etc.) and validates on their side
-            // No need to maintain a registry of supported providers
+            // Appwrite validates provider strings server-side; no registry needed here
             store.loginOAuth = async function (provider, successUrl = window.location.href, failureUrl = window.location.href) {
                 if (!this._appwrite) {
                     this._appwrite = await config.getAppwriteClient();
@@ -6604,11 +6584,8 @@ function initializeOAuth() {
                 const cleanSuccessUrl = `${currentUrl.origin}${currentUrl.pathname}`;
                 const cleanFailureUrl = `${currentUrl.origin}${currentUrl.pathname}`;
 
-                // Delete any existing anonymous sessions before OAuth
-                // This prevents conflicts where anonymous sessions might interfere with OAuth
-                // Appwrite will create a new account for OAuth if needed.
-                // EXCEPTION: when guest upgrade is enabled we keep the anonymous session
-                // active so Appwrite can link the OAuth identity to it (preserving teams).
+                // Drop anonymous sessions before OAuth — except with guestUpgrade, where the
+                // session stays so Appwrite links the OAuth identity to it (preserving teams)
                 if (this.isAnonymous && this.session && !appwriteConfig?.guestUpgrade) {
                     try {
                         await this._appwrite.account.deleteSession(this.session.$id);
@@ -6641,9 +6618,8 @@ function initializeOAuth() {
                 this.error = null;
 
                 try {
-                    // Use createOAuth2Token (like the working implementation)
-                    // This returns a token/redirect URL that we manually navigate to
-                    // After OAuth, Appwrite redirects back with userId and secret in URL params
+                    // createOAuth2Token returns a URL we navigate to; Appwrite redirects
+                    // back with userId + secret in URL params
                     const token = await this._appwrite.account.createOAuth2Token(
                         provider,
                         cleanSuccessUrl,
@@ -6651,8 +6627,7 @@ function initializeOAuth() {
                         ['email'] // Scopes
                     );
 
-                    // Check for redirectUrl - Appwrite may return it in various formats
-                    // Try multiple property names and formats
+                    // Appwrite may return the redirect URL in several formats
                     let redirectUrl = null;
 
                     if (typeof token === 'string') {
@@ -6669,30 +6644,23 @@ function initializeOAuth() {
                         }
                     }
 
-                    // Clear error state before redirect (whether we found URL or not)
-                    // This prevents any error flash before redirect
+                    // Clear error before redirect to avoid an error flash
                     this.error = null;
 
                     if (redirectUrl) {
-                        // Use requestAnimationFrame to ensure Alpine processes the error clearing
-                        // before redirect happens, preventing error flash
+                        // rAF lets Alpine process the error clear before navigating
                         requestAnimationFrame(() => {
                             window.location.href = redirectUrl;
                         });
-                        // Return immediately - redirect will happen asynchronously
                         return { success: true, redirectUrl: redirectUrl };
                     } else {
-                        // If we can't find redirect URL, log it but don't show error to user
-                        // The redirect might still work via Appwrite's internal handling
+                        // No extractable URL: warn but stay silent — Appwrite's own redirect may still fire
                         console.warn('[Manifest Appwrite Auth] Could not extract redirect URL from token:', token);
-                        // Don't set error - just return failure silently
-                        // This prevents error flash when redirect might still succeed
                         this.inProgress = false;
                         return { success: false, error: 'Could not extract redirect URL' };
                     }
                 } catch (error) {
-                    // Don't show "No redirect URL" errors - they're usually false positives
-                    // Only show other meaningful errors
+                    // "No redirect URL" errors are usually false positives; surface the rest
                     if (!error.message.includes('No redirect URL') && !error.message.includes('redirect')) {
                         this.error = error.message;
                         this.inProgress = false;
@@ -6738,8 +6706,7 @@ function handleOAuthCallbacks() {
         }
         if (storedProvider) {
             store._oauthProvider = storedProvider;
-            // Keep it in localStorage (cleared on logout)
-            // This allows us to show the correct provider name even after page refresh
+            // Stays in localStorage until logout so the provider name survives refresh
         } else {
             console.warn('[Manifest Appwrite Auth] No OAuth provider found in storage');
         }

package/lib/manifest.appwrite.data.js

@@ -1220,13 +1220,8 @@ window.ManifestDataQueries = {
 
 /* Manifest Data Sources - Pagination (Appwrite) */
 
-/**
- * Get first page of results (cursor-based)
- * @param {string} dataSourceName - Name of the data source
- * @param {number} limit - Number of items per page
- * @param {Array} baseQueries - Base queries to apply (from manifest or scope)
- * @returns {Promise<{items: Array, cursor: string|null, total: number, hasMore: boolean}>}
- */
+// First page, cursor-based
+// Returns { items, cursor, total, hasMore }
 async function getFirstPage(dataSourceName, limit, baseQueries = []) {
     const manifest = await window.ManifestDataConfig.ensureManifest();
     if (!manifest?.data) {
@@ -1307,14 +1302,8 @@ async function getFirstPage(dataSourceName, limit, baseQueries = []) {
     }
 }
 
-/**
- * Get next page of results (cursor-based)
- * @param {string} dataSourceName - Name of the data source
- * @param {string} cursor - Cursor from previous page
- * @param {number} limit - Number of items per page
- * @param {Array} baseQueries - Base queries to apply
- * @returns {Promise<{items: Array, cursor: string|null, total: number, hasMore: boolean}>}
- */
+// Next page from cursor
+// Returns { items, cursor, total, hasMore }
 async function getNextPage(dataSourceName, cursor, limit, baseQueries = []) {
     if (!cursor) {
         throw new Error('[Manifest Data] Cursor is required for next page');
@@ -1392,14 +1381,8 @@ async function getNextPage(dataSourceName, cursor, limit, baseQueries = []) {
     }
 }
 
-/**
- * Get previous page of results (cursor-based)
- * @param {string} dataSourceName - Name of the data source
- * @param {string} cursor - Cursor from current page
- * @param {number} limit - Number of items per page
- * @param {Array} baseQueries - Base queries to apply
- * @returns {Promise<{items: Array, cursor: string|null, total: number, hasMore: boolean}>}
- */
+// Previous page from cursor
+// Returns { items, cursor, total, hasMore }
 async function getPrevPage(dataSourceName, cursor, limit, baseQueries = []) {
     if (!cursor) {
         throw new Error('[Manifest Data] Cursor is required for previous page');
@@ -1477,14 +1460,8 @@ async function getPrevPage(dataSourceName, cursor, limit, baseQueries = []) {
     }
 }
 
-/**
- * Get specific page (offset-based)
- * @param {string} dataSourceName - Name of the data source
- * @param {number} pageNumber - Page number (1-based)
- * @param {number} limit - Number of items per page
- * @param {Array} baseQueries - Base queries to apply
- * @returns {Promise<{items: Array, page: number, total: number, totalPages: number, hasMore: boolean}>}
- */
+// Specific page (1-based), offset-based
+// Returns { items, page, total, totalPages, hasMore }
 async function getPage(dataSourceName, pageNumber, limit, baseQueries = []) {
     if (pageNumber < 1) {
         throw new Error('[Manifest Data] Page number must be >= 1');

package/lib/manifest.button.css

@@ -71,11 +71,13 @@
         appearance: base-select;
 
         &::picker-icon {
-            content: "⌄";
-            height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
-            transform: scaleY(0.7);
-            font-size: 20px;
-            line-height: 0.4
+            content: "";
+            width: 1rem;
+            height: 1rem;
+            background-color: currentColor;
+            mask-repeat: no-repeat;
+            mask-size: 100% 100%;
+            mask-image: var(--icon-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"))
         }
     }
 }

package/lib/manifest.chart.css

@@ -184,9 +184,9 @@
 
             /* On a filled segment (bar/slice center) — read against the fill */
             &.inverse {
-                fill: black;
+                fill: var(--color-content-stark, oklch(20.5% 0 0));
                 paint-order: stroke;
-                stroke: rgba(255, 255, 255, 0.75);
+                stroke: color-mix(in oklch, var(--color-page, oklch(98.5% 0 0)) 75%, transparent);
                 stroke-width: 1.5px
             }
         }

package/lib/manifest.checkbox.css

@@ -4,6 +4,8 @@
 
 @layer components {
 
+    /* Deliberately unflattened: manifest.input.css supplies the field chrome via
+       a lower-specificity rule that sorts later, so this must outrank it. */
     input[type=checkbox]:not([role=switch], .unstyle) {
         position: relative;
         min-width: calc(var(--spacing-field-height, 2.25rem) * 0.6);
@@ -37,11 +39,8 @@
             width: 60%;
             height: 60%;
             background-color: var(--color-field-inverse, oklch(43.9% 0 0));
-            -webkit-mask-image: var(--icon-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
             mask-image: var(--icon-check, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='m0 11l2-2l5 5L18 3l2 2L7 18z'/%3E%3C/svg%3E"));
-            -webkit-mask-repeat: no-repeat;
             mask-repeat: no-repeat;
-            -webkit-mask-size: 100% 100%;
             mask-size: 100% 100%;
             transform-origin: center;
             transition: var(--transition, all .05s ease-in-out);

package/lib/manifest.code.css

@@ -3,9 +3,8 @@
 /*  https://manifestx.dev/styles/code
 */
 
-@layer base, components, utilities;
+@layer base, components, utilities, syntax;
 
-@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 {
 
@@ -80,136 +79,137 @@
     --color-code-char: #deb887;
 }
 
-/* Code syntax styles for highlight.js */
-@layer utilities {
+/* Code syntax styles for highlight.js. Own layer, ordered after utilities, so
+   token colors outrank the block chrome without !important. */
+@layer syntax {
     .hljs-comment {
-        color: var(--color-code-comment) !important
+        color: var(--color-code-comment)
     }
 
     .hljs-keyword {
-        color: var(--color-code-keyword) !important
+        color: var(--color-code-keyword)
     }
 
     .hljs-string {
-        color: var(--color-code-string) !important
+        color: var(--color-code-string)
     }
 
     .hljs-number {
-        color: var(--color-code-number) !important
+        color: var(--color-code-number)
     }
 
     .hljs-literal {
-        color: var(--color-code-constant) !important
+        color: var(--color-code-constant)
     }
 
     .hljs-type {
-        color: var(--color-code-class-name) !important
+        color: var(--color-code-class-name)
     }
 
     .hljs-variable {
-        color: var(--color-code-property) !important
+        color: var(--color-code-property)
     }
 
     .hljs-variable.language_ {
-        color: var(--color-code-keyword) !important
+        color: var(--color-code-keyword)
     }
 
     .hljs-variable.constant_ {
-        color: var(--color-code-constant) !important
+        color: var(--color-code-constant)
     }
 
     .hljs-title {
-        color: var(--color-code-function) !important
+        color: var(--color-code-function)
     }
 
     .hljs-title.class_.inherited__ {
-        color: var(--color-code-class-name) !important
+        color: var(--color-code-class-name)
     }
 
     .hljs-title.function_.invoke__ {
-        color: var(--color-code-function) !important
+        color: var(--color-code-function)
     }
 
     .hljs-params {
-        color: var(--color-code-property) !important
+        color: var(--color-code-property)
     }
 
     .hljs-doctag {
-        color: var(--color-code-keyword) !important;
-        font-weight: 600 !important
+        color: var(--color-code-keyword);
+        font-weight: 600
     }
 
     .hljs-meta {
-        color: var(--color-code-comment) !important
+        color: var(--color-code-comment)
     }
 
     .hljs-meta.prompt_ {
-        color: var(--color-code-keyword) !important
+        color: var(--color-code-keyword)
     }
 
     .hljs-meta.keyword_ {
-        color: var(--color-code-keyword) !important
+        color: var(--color-code-keyword)
     }
 
     .hljs-meta.string_ {
-        color: var(--color-code-string) !important
+        color: var(--color-code-string)
     }
 
     .hljs-section {
-        color: var(--color-code-keyword) !important;
-        font-weight: 600 !important
+        color: var(--color-code-keyword);
+        font-weight: 600
     }
 
     .hljs-name {
-        color: var(--color-code-tag) !important
+        color: var(--color-code-tag)
     }
 
     .hljs-attribute {
-        color: var(--color-code-attr-name) !important
+        color: var(--color-code-attr-name)
     }
 
     .hljs-bullet {
-        color: var(--color-code-punctuation) !important
+        color: var(--color-code-punctuation)
     }
 
     .hljs-code {
-        color: var(--color-code-property) !important
+        color: var(--color-code-property)
     }
 
     .hljs-formula {
-        color: var(--color-code-number) !important
+        color: var(--color-code-number)
     }
 
     .hljs-quote {
-        color: var(--color-code-string) !important
+        color: var(--color-code-string)
     }
 
     .hljs-selector-id {
-        color: var(--color-code-selector) !important
+        color: var(--color-code-selector)
     }
 
     .hljs-selector-class {
-        color: var(--color-code-selector) !important
+        color: var(--color-code-selector)
     }
 
     .hljs-selector-attr {
-        color: var(--color-code-selector) !important
+        color: var(--color-code-selector)
     }
 
     .hljs-selector-pseudo {
-        color: var(--color-code-selector) !important
+        color: var(--color-code-selector)
     }
 
     .hljs-template-tag {
-        color: var(--color-code-tag) !important
+        color: var(--color-code-tag)
     }
 
     .hljs-template-variable {
-        color: var(--color-code-property) !important
+        color: var(--color-code-property)
     }
 
     .hljs-subst {
-        color: var(--color-code-string) !important
+        color: var(--color-code-string)
     }
 }
 
@@ -407,7 +407,6 @@
             font-weight: unset;
             color: unset;
             background: unset;
-            border: unset;
             box-shadow: unset;
             border: 0 none;
             white-space: normal;

package/lib/manifest.code.min.css

@@ -1 +1 @@
-@layer base, components, utilities;@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(in oklch,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)}}}
+@layer base, components, utilities, syntax;: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 syntax{.hljs-comment{color:var(--color-code-comment)}.hljs-keyword{color:var(--color-code-keyword)}.hljs-string{color:var(--color-code-string)}.hljs-number{color:var(--color-code-number)}.hljs-literal{color:var(--color-code-constant)}.hljs-type{color:var(--color-code-class-name)}.hljs-variable{color:var(--color-code-property)}.hljs-variable.language_{color:var(--color-code-keyword)}.hljs-variable.constant_{color:var(--color-code-constant)}.hljs-title{color:var(--color-code-function)}.hljs-title.class_.inherited__{color:var(--color-code-class-name)}.hljs-title.function_.invoke__{color:var(--color-code-function)}.hljs-params{color:var(--color-code-property)}.hljs-doctag{color:var(--color-code-keyword);font-weight:600}.hljs-meta{color:var(--color-code-comment)}.hljs-meta.keyword_,.hljs-meta.prompt_{color:var(--color-code-keyword)}.hljs-meta.string_{color:var(--color-code-string)}.hljs-section{color:var(--color-code-keyword);font-weight:600}.hljs-name{color:var(--color-code-tag)}.hljs-attribute{color:var(--color-code-attr-name)}.hljs-bullet{color:var(--color-code-punctuation)}.hljs-code{color:var(--color-code-property)}.hljs-formula{color:var(--color-code-number)}.hljs-quote{color:var(--color-code-string)}.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-selector-pseudo{color:var(--color-code-selector)}.hljs-template-tag{color:var(--color-code-tag)}.hljs-template-variable{color:var(--color-code-property)}.hljs-subst{color:var(--color-code-string)}}@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(in oklch,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.colorpicker.css

@@ -2,6 +2,31 @@
 
 @layer base, components, utilities;
 
+/* mnfst:popover-base:start — self-contained so this stylesheet works on
+   its own; the build strips it from manifest.css. Edit styles/snippets/manifest.popover.css. */
+[popover]:not(.unstyle):not(:popover-open) {
+    display: none;
+}
+
+@layer base {
+
+    @keyframes mnfst-popover-in {
+        from {
+            transform: scale(.9)
+        }
+
+        to {
+            transform: none
+        }
+    }
+
+    :where([popover]):not(.unstyle):popover-open {
+        display: flex;
+        animation: mnfst-popover-in .15s ease-in both
+    }
+}
+/* mnfst:popover-base:end */
+
 :root {
     --color-picker-swatch: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
     --icon-color-solid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-paint-roller-icon lucide-paint-roller'%3E%3Crect width='16' height='6' x='2' y='2' rx='2'/%3E%3Cpath d='M10 16v-2a2 2 0 0 1 2-2h8a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2'/%3E%3Crect width='4' height='6' x='8' y='16' rx='1'/%3E%3C/svg%3E");