@happyvertical/smrt-messages 0.55.15 → 0.55.17

package/dist/index.js

@@ -1,11 +1,11 @@
 import { t as __exportAll } from "./chunks/rolldown-runtime-D7D4PA-g.js";
-import "./chunks/__smrt-register__-BFJ53fMS.js";
+import "./chunks/__smrt-register__-C6vkgxXs.js";
 import { a as registerMessagingProvider, n as getMessagingProvider, o as ZulipSender, r as listMessagingProviders, s as TelegramSender, t as ensureBuiltinMessagingProvidersRegistered } from "./chunks/providers-4iLula-V.js";
-import { r as Account, t as AccountCollection } from "./chunks/AccountCollection-Ddu9V850.js";
-import { t as Message } from "./chunks/Message-Sc8bIQ7X.js";
-import { t as MessageCollection } from "./chunks/MessageCollection-Cv1vwpZt.js";
-import { t as Email } from "./chunks/Email-BsLkVCcU.js";
-import { t as EmailFolder } from "./chunks/EmailFolder-DgP2t7vD.js";
+import { r as Account, t as AccountCollection } from "./chunks/AccountCollection-BM28F2y8.js";
+import { t as Message } from "./chunks/Message-CwqRAiRu.js";
+import { t as MessageCollection } from "./chunks/MessageCollection-DTmvgr8c.js";
+import { t as Email } from "./chunks/Email-CclqFojc.js";
+import { t as EmailFolder } from "./chunks/EmailFolder-DtvYtwiz.js";
 import { t as SlackSender } from "./chunks/SlackSender-CjSvwY1K.js";
 import { t as TweetSender } from "./chunks/TweetSender-CcLPNNi1.js";
 import { SmrtCollection, SmrtObject, SmrtRecipe, crossPackageRef, field, foreignKey, importOptionalDependency, isUniqueViolationError, smrt } from "@happyvertical/smrt-core";
@@ -98,7 +98,7 @@ var Attachment = class extends SmrtObject {
 	*/
 	async getMessage() {
 		if (!this.messageId) return null;
-		const { MessageCollection } = await import("./chunks/MessageCollection-Cv1vwpZt.js").then((n) => n.n);
+		const { MessageCollection } = await import("./chunks/MessageCollection-DTmvgr8c.js").then((n) => n.n);
 		return await (await MessageCollection.create(this.options)).get({ id: this.messageId });
 	}
 	/**
@@ -670,7 +670,7 @@ var EmailAccount = class extends Account {
 			for (const folderName of foldersToSync) try {
 				let folder = await folderCollection.getByPath(accountId, folderName);
 				if (!folder) {
-					const { EmailFolder } = await import("./chunks/EmailFolder-DgP2t7vD.js").then((n) => n.n);
+					const { EmailFolder } = await import("./chunks/EmailFolder-DtvYtwiz.js").then((n) => n.n);
 					folder = new EmailFolder({
 						...this.childOptions(),
 						accountId,
@@ -695,7 +695,7 @@ var EmailAccount = class extends Account {
 							result.messagesSkipped++;
 							continue;
 						}
-						const { Email } = await import("./chunks/Email-BsLkVCcU.js").then((n) => n.n);
+						const { Email } = await import("./chunks/Email-CclqFojc.js").then((n) => n.n);
 						let email = existingEmail;
 						if (!email) {
 							email = new Email({

package/dist/manifest.json

@@ -2,7 +2,7 @@
   "version": "1.0.0",
   "timestamp": 0,
   "packageName": "@happyvertical/smrt-messages",
-  "packageVersion": "0.55.15",
+  "packageVersion": "0.55.17",
   "objects": {
     "@happyvertical/smrt-messages:AccountCollection": {
       "name": "accountcollection",

package/dist/smrt-knowledge.json

@@ -3,12 +3,12 @@
   "sensitiveFieldsExcluded": true,
   "generatedAt": "1970-01-01T00:00:00.000Z",
   "packageName": "@happyvertical/smrt-messages",
-  "packageVersion": "0.55.15",
+  "packageVersion": "0.55.17",
   "sourceManifestPath": "dist/manifest.json",
   "agentDocPath": "AGENTS.md",
   "sourceHashes": {
-    "manifest": "462f03b991a3a0fac634eec7b4627b69a79a75fc97fb2785376c70b1ea03d031",
-    "packageJson": "5c234e82806bd6338dc4f59554a29a4aaad066b53341e1ecd33ffee5eb939469",
+    "manifest": "9972520001b85fdffde8552c0794d41e4d1ad2a3f911dbbd91fd4a9073d0ae7b",
+    "packageJson": "b1982e8d954d3255865b6aefaf739630709f223f7b94b8cf9ffa772c721f39da",
     "agents": "f2bbd8f6d74a68c2ab949153f2051c7a906bd2e4ba547873b3641d0779491c59"
   },
   "exports": [

package/dist/svelte/components/AccountAvatar.svelte

@@ -45,7 +45,7 @@ const _icon = $derived.by(() => {
   class:avatar--slack={providerType === 'slack'}
   class:avatar--twitter={providerType === 'twitter'}
   title={name}
-  aria-label={`${name} (${providerType})`}
+  aria-label={`${name} (${providerType})`} data-smrt-component="AccountAvatar"
 >
   {#if _icon}
     <span class="icon">{_icon}</span>
@@ -55,13 +55,15 @@ const _icon = $derived.by(() => {
 </span>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .avatar {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--smrt-radius-full, 9999px);
-    background: var(--smrt-color-secondary-container, #d7e3f7);
-    color: var(--smrt-color-on-secondary-container, #101c2b);
+    border-radius: var(--smrt-radius-full);
+    background: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
     font-weight: var(--smrt-typography-weight-medium, 500);
     flex-shrink: 0;
   }
@@ -85,18 +87,18 @@ const _icon = $derived.by(() => {
   }
 
   .avatar--email {
-    background: var(--smrt-color-primary-container, #d6e2ff);
-    color: var(--smrt-color-on-primary-container, #001a41);
+    background: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
   }
 
   .avatar--slack {
-    background: var(--smrt-color-tertiary-container, #e8def8);
-    color: var(--smrt-color-on-tertiary-container, #4a1175);
+    background: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
   }
 
   .avatar--twitter {
-    background: var(--smrt-color-secondary-container, #d3e8fd);
-    color: var(--smrt-color-on-secondary-container, #0c4a6e);
+    background: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
   }
 
   .icon {
@@ -107,4 +109,5 @@ const _icon = $derived.by(() => {
     text-transform: uppercase;
     letter-spacing: 0.02em;
   }
+}
 </style>

package/dist/svelte/components/AccountCard.svelte

@@ -80,6 +80,8 @@ const _lastSyncFormatted = $derived.by(() => {
 </Card>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .account-card {
     display: flex;
     flex-direction: column;
@@ -102,12 +104,12 @@ const _lastSyncFormatted = $derived.by(() => {
   .name {
     margin: 0;
     font: var(--smrt-typography-title-medium-font, 500 1rem / 1.25 sans-serif);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    color: var(--smrt-color-on-surface);
   }
 
   .email {
     font: var(--smrt-typography-body-small-font, 0.75rem / 1.33 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -115,7 +117,7 @@ const _lastSyncFormatted = $derived.by(() => {
 
   .provider {
     font: var(--smrt-typography-label-small-font, 500 0.6875rem / 1 sans-serif);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
     text-transform: uppercase;
     letter-spacing: 0.05em;
   }
@@ -134,22 +136,22 @@ const _lastSyncFormatted = $derived.by(() => {
   }
 
   .status--active {
-    background: var(--smrt-color-tertiary-container, #d7f8d7);
-    color: var(--smrt-color-on-tertiary-container, #0a3a0a);
+    background: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
   }
 
   .status--inactive {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .sync-time {
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .unread-count {
     font-weight: var(--smrt-typography-weight-medium, 500);
-    color: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-primary);
   }
 
   .actions {
@@ -169,19 +171,20 @@ const _lastSyncFormatted = $derived.by(() => {
    */
   .actions :global(.action-btn) {
     padding: 0.375rem 0.75rem;
-    border: 1px solid var(--smrt-color-outline, #72787e);
+    border: 1px solid var(--smrt-color-outline);
     border-radius: var(--smrt-radius-small, 0.25rem);
-    background: var(--smrt-color-surface, #fefbff);
-    color: var(--smrt-color-on-surface, #1a1c1e);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
     font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
   }
 
   .actions :global(.action-btn):hover {
-    background: var(--smrt-color-surface-variant, #e1e2ec);
+    background: var(--smrt-color-surface-variant);
   }
 
   .actions :global(.action-btn--danger) {
-    color: var(--smrt-color-error, #ba1a1a);
-    border-color: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-error);
+    border-color: var(--smrt-color-error);
   }
+}
 </style>

package/dist/svelte/components/AccountList.svelte

@@ -56,7 +56,7 @@ function handleAccountKeydown(event: KeyboardEvent, account: AccountData) {
 }
 </script>
 
-<div class="account-list" role="list" aria-label={t(M['messages.account_list.accounts'])}>
+<div class="account-list" role="list" aria-label={t(M['messages.account_list.accounts'])} data-smrt-component="AccountList">
   {#if loading}
     <div class="loading" role="status" aria-live="polite">
       <p>{t(M['messages.account_list.loading'])}</p>
@@ -90,15 +90,18 @@ function handleAccountKeydown(event: KeyboardEvent, account: AccountData) {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .loading,
   .empty {
     text-align: center;
     padding: var(--smrt-spacing-3xl, 3rem);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .loading p,
   .empty p {
     font: var(--smrt-typography-body-large-font, 1.125rem / 1.5 sans-serif);
   }
+}
 </style>

package/dist/svelte/components/AttachmentChip.svelte

@@ -47,7 +47,7 @@ const _formattedSize = $derived.by(() => {
     <span class="size">{_formattedSize}</span>
   </Button>
 {:else}
-  <span class="chip" title={`${attachment.filename} (${_formattedSize})`}>
+  <span class="chip" title={`${attachment.filename} (${_formattedSize})`} data-smrt-component="AttachmentChip">
     <span class="icon">{_icon}</span>
     <span class="name">{attachment.filename}</span>
     <span class="size">{_formattedSize}</span>
@@ -55,14 +55,16 @@ const _formattedSize = $derived.by(() => {
 {/if}
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .chip {
     display: inline-flex;
     align-items: center;
     gap: 0.375rem;
     padding: 0.25rem 0.625rem;
     border-radius: var(--smrt-radius-small, 0.25rem);
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
     font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
     border: none;
     cursor: default;
@@ -84,8 +86,8 @@ const _formattedSize = $derived.by(() => {
     gap: 0.375rem;
     padding: 0.25rem 0.625rem;
     border-radius: var(--smrt-radius-small, 0.25rem);
-    background: var(--smrt-color-surface-variant, #e1e2ec);
-    color: var(--smrt-color-on-surface-variant, #43474e);
+    background: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
     font: var(--smrt-typography-label-medium-font, 500 0.75rem / 1.33 sans-serif);
     cursor: pointer;
     max-width: 200px;
@@ -93,11 +95,11 @@ const _formattedSize = $derived.by(() => {
   }
 
   :global(.chip.chip--button):hover {
-    background: color-mix(in srgb, var(--smrt-color-surface-variant, #e1e2ec) 92%, var(--smrt-color-shadow, #000));
+    background: color-mix(in srgb, var(--smrt-color-surface-variant) 92%, var(--smrt-color-shadow));
   }
 
   :global(.chip.chip--button):focus-visible {
-    outline: 2px solid var(--smrt-color-primary, #005ac1);
+    outline: 2px solid var(--smrt-color-primary);
     outline-offset: 1px;
   }
 
@@ -117,4 +119,5 @@ const _formattedSize = $derived.by(() => {
     opacity: 0.7;
     font-size: var(--smrt-typography-label-small-size, 0.6875rem);
   }
+}
 </style>

package/dist/svelte/components/AttachmentUpload.svelte

@@ -57,7 +57,7 @@ export interface Props {
   }
 </script>
 
-<div class="attachment-upload">
+<div class="attachment-upload" data-smrt-component="AttachmentUpload">
   {#if attachments.length > 0}
     <div class="attachment-list">
       {#each attachments as attachment, i}
@@ -97,36 +97,38 @@ export interface Props {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   .attachment-upload {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
   }
 
   .attachment-list {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--smrt-spacing-1, 4px);
+    gap: var(--smrt-spacing-1);
   }
 
   .attachment-item {
     display: inline-flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-2, 8px);
-    border-radius: var(--smrt-radius-sm, 8px);
-    background: var(--smrt-color-surface-variant, #e7e0ec);
-    font-size: var(--smrt-typography-body-medium-size, 13px);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-sm);
+    background: var(--smrt-color-surface-variant);
+    font-size: var(--smrt-typography-body-medium-size);
     font-family: var(--smrt-font-family, system-ui);
   }
 
   .filename {
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
 
   .size {
-    color: var(--smrt-color-outline, #79747e);
-    font-size: var(--smrt-typography-label-small-size, 11px);
+    color: var(--smrt-color-outline);
+    font-size: var(--smrt-typography-label-small-size);
   }
 
   /*
@@ -138,22 +140,22 @@ export interface Props {
   .attachment-item :global(.remove) {
     background: none;
     border: none;
-    padding: 0 var(--smrt-spacing-1, 4px);
-    color: var(--smrt-color-error, #ba1a1a);
-    font-size: var(--smrt-typography-label-large-size, 14px);
+    padding: 0 var(--smrt-spacing-1);
+    color: var(--smrt-color-error);
+    font-size: var(--smrt-typography-label-large-size);
   }
 
   .drop-zone {
-    border: 2px dashed var(--smrt-color-outline-variant, #cac4d0);
-    border-radius: var(--smrt-radius-md, 12px);
-    padding: var(--smrt-spacing-3, 12px);
+    border: 2px dashed var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-md);
+    padding: var(--smrt-spacing-3);
     text-align: center;
     transition: border-color var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, ease);
   }
 
   .drop-zone.drag-over {
-    border-color: var(--smrt-color-primary, #6750a4);
-    background: var(--smrt-color-primary-container, #eaddff);
+    border-color: var(--smrt-color-primary);
+    background: var(--smrt-color-primary-container);
   }
 
   .upload-label {
@@ -169,8 +171,9 @@ export interface Props {
   }
 
   .upload-text {
-    color: var(--smrt-color-outline, #79747e);
-    font-size: var(--smrt-typography-body-medium-size, 13px);
+    color: var(--smrt-color-outline);
+    font-size: var(--smrt-typography-body-medium-size);
     font-family: var(--smrt-font-family, system-ui);
   }
+}
 </style>

package/dist/svelte/components/ComposeForm.svelte

@@ -145,7 +145,7 @@ export interface Props {
   }
 </script>
 
-<div class="compose-form-shell">
+<div class="compose-form-shell" data-smrt-component="ComposeForm">
 <Form class="compose-form" onsubmit={handleSend}>
   {#if accounts.length > 1}
     <div class="field">
@@ -285,6 +285,8 @@ export interface Props {
 </div>
 
 <style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
   /*
    * The form now renders through smrt-ui's <Form> (Provider-free base `<form>`).
    * `class="compose-form"` lands on the real `<form>` inside the Form child, so
@@ -294,22 +296,22 @@ export interface Props {
   .compose-form-shell :global(.compose-form) {
     display: flex;
     flex-direction: column;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-4, 16px);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-4);
     font-family: var(--smrt-font-family, system-ui);
   }
 
   .field {
     display: flex;
     align-items: center;
-    gap: var(--smrt-spacing-2, 8px);
-    padding: var(--smrt-spacing-1, 4px) 0;
-    border-bottom: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-1) 0;
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
   }
 
   .field-label {
-    font-size: var(--smrt-typography-label-large-size, 14px);
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    font-size: var(--smrt-typography-label-large-size);
+    color: var(--smrt-color-on-surface-variant);
     min-width: 56px;
   }
 
@@ -330,10 +332,10 @@ export interface Props {
     outline: none;
     box-shadow: none;
     font-family: inherit;
-    font-size: var(--smrt-typography-body-medium-size, 14px);
-    padding: var(--smrt-spacing-2, 8px) 0;
+    font-size: var(--smrt-typography-body-medium-size);
+    padding: var(--smrt-spacing-2) 0;
     background: transparent;
-    color: var(--smrt-color-on-surface, #1c1b1f);
+    color: var(--smrt-color-on-surface);
   }
 
   .field :global(.select) {
@@ -349,7 +351,7 @@ export interface Props {
 
   .cc-toggles {
     display: flex;
-    gap: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
     justify-content: flex-end;
   }
 
@@ -362,8 +364,8 @@ export interface Props {
   .cc-toggles :global(.link-btn) {
     background: none;
     border: none;
-    color: var(--smrt-color-primary, #6750a4);
-    font-size: var(--smrt-typography-label-large-size, 13px);
+    color: var(--smrt-color-primary);
+    font-size: var(--smrt-typography-label-large-size);
     text-decoration: underline;
   }
 
@@ -373,28 +375,28 @@ export interface Props {
 
   .char-count {
     text-align: right;
-    font-size: var(--smrt-typography-label-medium-size, 12px);
-    color: var(--smrt-color-outline, #79747e);
-    padding-top: var(--smrt-spacing-1, 4px);
+    font-size: var(--smrt-typography-label-medium-size);
+    color: var(--smrt-color-outline);
+    padding-top: var(--smrt-spacing-1);
   }
 
   .char-count.over-limit {
-    color: var(--smrt-color-error, #ba1a1a);
+    color: var(--smrt-color-error);
     font-weight: var(--smrt-typography-weight-semibold, 600);
   }
 
   .send-error {
-    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
-    border-radius: var(--smrt-radius-sm, 8px);
-    background: var(--smrt-color-error-container, #ffdad6);
-    color: var(--smrt-color-on-error-container, #410002);
-    font-size: var(--smrt-typography-body-small-size, 12px);
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border-radius: var(--smrt-radius-sm);
+    background: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
+    font-size: var(--smrt-typography-body-small-size);
   }
 
   .actions {
     display: flex;
-    gap: var(--smrt-spacing-2, 8px);
-    padding-top: var(--smrt-spacing-2, 8px);
+    gap: var(--smrt-spacing-2);
+    padding-top: var(--smrt-spacing-2);
   }
 
   /*
@@ -404,6 +406,7 @@ export interface Props {
    * ghost uses the primary color) — issue #1589.
    */
   .actions :global(.btn-text) {
-    color: var(--smrt-color-on-surface-variant, #49454f);
+    color: var(--smrt-color-on-surface-variant);
   }
+}
 </style>