@streamscloud/kit 0.40.3 → 0.41.0

package/dist/core/theme/app-theme.svelte.d.ts

@@ -3,6 +3,7 @@ declare class AppThemeContainer {
     private _active;
     private _mediaQuery;
     private _isDarkMode;
+    private _transitionSuppressionId;
     get active(): AppThemeValue;
     /** Whether dark mode is currently active (resolves 'auto' based on system preference) */
     get isDarkMode(): boolean;

package/dist/core/theme/app-theme.svelte.js

@@ -1,10 +1,12 @@
 import { isBrowser } from '../utils';
 import { ThemeCookie } from './theme-cookie';
 import { getColorScheme } from './types';
+const NO_TRANSITION_CLASS = 'sc-kit-no-theme-transition';
 class AppThemeContainer {
     _active = $state('auto');
     _mediaQuery = null;
     _isDarkMode = $state(false);
+    _transitionSuppressionId = 0;
     get active() {
         return this._active;
     }
@@ -42,7 +44,15 @@ class AppThemeContainer {
         else {
             this._isDarkMode = this._active === 'dark';
         }
-        document.documentElement.style.colorScheme = getColorScheme(this._active);
+        const html = document.documentElement;
+        html.classList.add(NO_TRANSITION_CLASS);
+        html.style.colorScheme = getColorScheme(this._active);
+        const suppressionId = ++this._transitionSuppressionId;
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+            if (suppressionId === this._transitionSuppressionId) {
+                html.classList.remove(NO_TRANSITION_CLASS);
+            }
+        }));
     };
 }
 export const AppTheme = new AppThemeContainer();

package/dist/styles/_index.scss

@@ -3,3 +3,4 @@
 @use 'normalize';
 @use 'reset';
 @use 'semantic';
+@use 'theme';

package/dist/styles/_semantic.scss

@@ -194,7 +194,8 @@
   --sc-kit--shadow--md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
   --sc-kit--shadow--lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
   --sc-kit--shadow--xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
-  --sc-kit--shadow--card: 0 1px 1px rgba(0, 0, 0, 0.1);
+  --sc-kit--shadow--card: 0 2px 16px rgba(0, 0, 0, 0.035);
+  --sc-kit--shadow--hairline: 0 1px 1px rgba(0, 0, 0, 0.1);
   --sc-kit--shadow--focus: var(--sc-kit--focus-ring);
 
   // ============================================================

package/dist/styles/_theme.scss

@@ -0,0 +1,8 @@
+// !important: must override component-scoped transition declarations, including
+// transitions.transition() mixin output.
+.sc-kit-no-theme-transition,
+.sc-kit-no-theme-transition *,
+.sc-kit-no-theme-transition *::before,
+.sc-kit-no-theme-transition *::after {
+  transition: none !important;
+}

package/dist/ui/cropper/img-cropper/cmp.img-cropper-controls.svelte

@@ -61,7 +61,7 @@ Can be placed anywhere in the layout.
   color: var(--sc-kit--color--text--primary);
   background: var(--sc-kit--color--bg--panel);
   border: 1px solid var(--sc-kit--color--border);
-  box-shadow: var(--sc-kit--shadow--card);
+  box-shadow: var(--sc-kit--shadow--hairline);
 }
 .img-cropper-controls__button--cancel:hover {
   background: var(--sc-kit--color--bg--hover);

package/dist/ui/rich-text-input/cmp.rich-text-input.svelte

@@ -12,6 +12,7 @@ let toolbarRef = $state.raw(undefined);
 let editorRef = $state.raw(null);
 let lastVal;
 let everFocused = false;
+const loc = new RichTextInputLocalization();
 /** Insert an emoji at the current selection (or at the end if the editor was never focused). */
 const insertEmoji = (emojiChar) => {
     if (!editorRef) {
@@ -48,13 +49,15 @@ const applyChange = (editor) => {
     on?.change?.(lastVal);
 };
 onMount(async () => {
-    const loc = new RichTextInputLocalization();
     const { default: hugerte } = await import('hugerte');
+    // Snapshotted once — the editor does not re-init on a later theme change.
+    const isDarkMode = AppTheme.isDarkMode;
+    const skinUrl = isDarkMode ? 'hugerte-5-dark' : 'hugerte-5';
     await Promise.all([
         import('hugerte/models/dom'),
         import('hugerte/themes/silver'),
-        AppTheme.isDarkMode ? import('hugerte/skins/ui/hugerte-5-dark/skin.js') : import('hugerte/skins/ui/hugerte-5/skin.js'),
-        import('hugerte/skins/ui/hugerte-5/content.inline.js'),
+        isDarkMode ? import('hugerte/skins/ui/hugerte-5-dark/skin.js') : import('hugerte/skins/ui/hugerte-5/skin.js'),
+        isDarkMode ? import('hugerte/skins/ui/hugerte-5-dark/content.inline.js') : import('hugerte/skins/ui/hugerte-5/content.inline.js'),
         import('hugerte/icons/default'),
         import('hugerte/plugins/advlist'),
         import('hugerte/plugins/link'),
@@ -65,7 +68,7 @@ onMount(async () => {
         target: elementRef,
         inline: true,
         // Must match the injected skin's resource key (`ui/<skin_url>/skin.css`) or HugeRTE fetches it over the network and 404s.
-        skin_url: 'hugerte-5',
+        skin_url: skinUrl,
         content_css: false,
         fixed_toolbar_container: options?.fixedToolbarId ? `#${options.fixedToolbarId}` : undefined,
         fixed_toolbar_container_target: options?.fixedToolbarId ? undefined : toolbarRef,

package/dist/ui/rich-text-input/hugerte.declarations.d.ts

@@ -4,6 +4,7 @@ declare module 'hugerte/icons/default';
 declare module 'hugerte/skins/ui/hugerte-5/skin.js';
 declare module 'hugerte/skins/ui/hugerte-5-dark/skin.js';
 declare module 'hugerte/skins/ui/hugerte-5/content.inline.js';
+declare module 'hugerte/skins/ui/hugerte-5-dark/content.inline.js';
 declare module 'hugerte/plugins/advlist';
 declare module 'hugerte/plugins/link';
 declare module 'hugerte/plugins/lists';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.40.3",
+  "version": "0.41.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",