@sveltia/ui 0.34.0 → 0.35.1

package/dist/components/button/button.svelte

@@ -260,7 +260,8 @@ button.pill {
   border-radius: 80px;
   padding: var(--sui-button-medium-pill-padding, 0 12px);
 }
-button.flex {
+button.flex:not([hidden]) {
+  display: inline-flex;
   flex: auto;
   width: -moz-available;
   width: -webkit-fill-available;

package/dist/components/calendar/calendar.svelte

@@ -15,6 +15,14 @@
    * @property {string} [value] Date.
    */
 
+  /**
+   * List of month names for month selector. We use a fixed date to avoid issues with daylight
+   * saving time.
+   */
+  const MONTH_NAMES = Array.from({ length: 12 }, (__, i) =>
+    new Date(2000, i, 10).toLocaleDateString('en', { month: 'short' }),
+  );
+
   /**
    * @type {Props & Record<string, any>}
    */
@@ -24,10 +32,6 @@
     /* eslint-enable prefer-const */
   } = $props();
 
-  /** @type {{ day: Date }[]} */
-  const dayList = [];
-  /** @type {{ day: Date }[][]} */
-  const weeks = [];
   const now = new Date();
 
   const date = $derived(value ? new Date(value) : now);
@@ -38,29 +42,21 @@
     firstDay = new Date(firstDayOfMonth);
   });
 
-  /**
-   * Populate {@link weeks} as per the current {@link firstDay}.
-   */
-  const getWeeks = () => {
+  const dayList = $derived.by(() => {
+    if (!firstDay) return [];
+
     const cursor = new Date(firstDay);
 
     // Start from Sunday
     cursor.setDate(1 - cursor.getUTCDay());
 
-    for (let i = 0; i < 42; i += 1) {
-      const week = Math.floor(i / 7);
+    return Array.from({ length: 42 }, () => {
+      const day = new Date(cursor);
 
-      dayList[i] = { day: new Date(cursor) };
-      weeks[week] ||= [];
-      weeks[week][cursor.getUTCDay() % 7] = { day: new Date(cursor) };
       cursor.setUTCDate(cursor.getUTCDate() + 1);
-    }
-  };
 
-  $effect(() => {
-    if (firstDay) {
-      getWeeks();
-    }
+      return { day };
+    });
   });
 </script>
 
@@ -113,13 +109,9 @@
           <Divider orientation="vertical" />
           <div role="group" aria-label={$_('_sui.calendar.month')}>
             <div role="none" class="grid">
-              {#each [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as month}
+              {#each MONTH_NAMES as monthName}
                 <div role="none">
-                  <Button>
-                    {new Date(date.getUTCFullYear(), month, 10).toLocaleDateString('en', {
-                      month: 'short',
-                    })}
-                  </Button>
+                  <Button>{monthName}</Button>
                 </div>
               {/each}
             </div>

package/dist/components/divider/spacer.svelte

@@ -23,7 +23,8 @@
 
 <div {...restProps} role="none" class="sui spacer {className}" class:flex></div>
 
-<style>.spacer.flex {
+<style>.spacer.flex:not([hidden]) {
+  display: block;
   flex: auto;
 }
 .spacer:not(.flex) {

package/dist/components/select/combobox.svelte

@@ -20,6 +20,12 @@
    * @import { ComboboxProps, TextInputProps } from '../../typedefs';
    */
 
+  /**
+   * Selector for the currently selected option in the popup. Used to update the selected option
+   * when the value is changed externally.
+   */
+  const SELECTED_SELECTOR = '[role="option"][aria-selected="true"]';
+
   /**
    * @type {ComboboxProps & TextInputProps & Record<string, any>}
    */
@@ -43,7 +49,6 @@
   } = $props();
 
   const id = $props.id();
-  const selectedSelector = '[role="option"][aria-selected="true"]';
   let isPopupOpen = $state(false);
 
   /** @type {HTMLElement | undefined} */
@@ -67,17 +72,15 @@
    * Update the {@link label} and selected option when the {@link value} is changed.
    */
   const _onChange = () => {
-    const selected = popupContent?.querySelector(selectedSelector);
-
-    const target = /** @type {HTMLButtonElement} */ (
+    const target = /** @type {HTMLButtonElement | null} */ (
       popupContent?.querySelector(`[role="option"][data-value="${value}"]`)
     );
 
     if (target) {
       label = target.dataset.label || target.dataset.value || target.textContent || '';
 
-      if (selected !== target) {
-        selected?.setAttribute('aria-selected', 'false');
+      if (target.getAttribute('aria-selected') !== 'true') {
+        popupContent?.querySelector(SELECTED_SELECTOR)?.setAttribute('aria-selected', 'false');
         target.setAttribute('aria-selected', 'true');
       }
     }
@@ -99,7 +102,7 @@
   $effect(() => {
     if (popupContent) {
       globalThis.requestAnimationFrame(() => {
-        const selected = popupContent?.querySelector(selectedSelector);
+        const selected = popupContent?.querySelector(SELECTED_SELECTOR);
 
         if (selected) {
           _onSelect(/** @type {HTMLButtonElement} */ (selected));

package/dist/components/text-editor/code-editor.svelte

@@ -115,4 +115,7 @@
 <style>.code-editor {
   margin: var(--sui-focus-ring-width);
   width: calc(100% - var(--sui-focus-ring-width) * 2);
+}
+.code-editor.flex:not([hidden]) {
+  display: block;
 }</style>

package/dist/components/text-editor/constants.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/text-editor/constants.test.js

@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'vitest';
+import {
+  AVAILABLE_BUTTONS,
+  BLOCK_BUTTON_TYPES,
+  IMAGE_COMPONENT_IDS,
+  INLINE_BUTTON_TYPES,
+  TEXT_FORMAT_BUTTON_TYPES,
+} from './constants.js';
+
+describe('AVAILABLE_BUTTONS', () => {
+  it('should contain all expected button keys', () => {
+    const expectedKeys = [
+      'bold',
+      'italic',
+      'strikethrough',
+      'code',
+      'link',
+      'paragraph',
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+      'bulleted-list',
+      'numbered-list',
+      'blockquote',
+      'code-block',
+    ];
+
+    expectedKeys.forEach((key) => {
+      expect(AVAILABLE_BUTTONS).toHaveProperty(key);
+    });
+  });
+
+  it('should mark inline buttons correctly', () => {
+    expect(AVAILABLE_BUTTONS.bold.inline).toBe(true);
+    expect(AVAILABLE_BUTTONS.italic.inline).toBe(true);
+    expect(AVAILABLE_BUTTONS.link.inline).toBe(true);
+    expect(AVAILABLE_BUTTONS.paragraph.inline).toBe(false);
+    expect(AVAILABLE_BUTTONS['heading-1'].inline).toBe(false);
+  });
+
+  it('should have a labelKey and icon for each button', () => {
+    Object.values(AVAILABLE_BUTTONS).forEach(({ labelKey, icon }) => {
+      expect(typeof labelKey).toBe('string');
+      expect(labelKey.length).toBeGreaterThan(0);
+      expect(typeof icon).toBe('string');
+      expect(icon.length).toBeGreaterThan(0);
+    });
+  });
+});
+
+describe('TEXT_FORMAT_BUTTON_TYPES', () => {
+  it('should include bold, italic, strikethrough, code', () => {
+    expect(TEXT_FORMAT_BUTTON_TYPES).toEqual(['bold', 'italic', 'strikethrough', 'code']);
+  });
+});
+
+describe('INLINE_BUTTON_TYPES', () => {
+  it('should include all text format types plus link', () => {
+    expect(INLINE_BUTTON_TYPES).toContain('bold');
+    expect(INLINE_BUTTON_TYPES).toContain('italic');
+    expect(INLINE_BUTTON_TYPES).toContain('strikethrough');
+    expect(INLINE_BUTTON_TYPES).toContain('code');
+    expect(INLINE_BUTTON_TYPES).toContain('link');
+  });
+
+  it('should be a superset of TEXT_FORMAT_BUTTON_TYPES', () => {
+    TEXT_FORMAT_BUTTON_TYPES.forEach((type) => {
+      expect(INLINE_BUTTON_TYPES).toContain(type);
+    });
+  });
+});
+
+describe('BLOCK_BUTTON_TYPES', () => {
+  it('should include paragraph and all heading levels', () => {
+    expect(BLOCK_BUTTON_TYPES).toContain('paragraph');
+
+    for (let i = 1; i <= 6; i += 1) {
+      expect(BLOCK_BUTTON_TYPES).toContain(`heading-${i}`);
+    }
+  });
+
+  it('should include list, blockquote, and code-block types', () => {
+    expect(BLOCK_BUTTON_TYPES).toContain('bulleted-list');
+    expect(BLOCK_BUTTON_TYPES).toContain('numbered-list');
+    expect(BLOCK_BUTTON_TYPES).toContain('blockquote');
+    expect(BLOCK_BUTTON_TYPES).toContain('code-block');
+  });
+});
+
+describe('IMAGE_COMPONENT_IDS', () => {
+  it('should include image and linked-image', () => {
+    expect(IMAGE_COMPONENT_IDS).toContain('image');
+    expect(IMAGE_COMPONENT_IDS).toContain('linked-image');
+  });
+});

package/dist/components/text-editor/core.js

@@ -212,14 +212,15 @@ const getSelectionTypes = () => {
 /**
  * Listen to changes made on the editor and trigger the Update event.
  * @param {LexicalEditor} editor Editor instance.
+ * @param {any[]} transformers Active transformers for this editor instance.
  */
-const onEditorUpdate = (editor) => {
+const onEditorUpdate = (editor, transformers) => {
   editor.getRootElement()?.dispatchEvent(
     new CustomEvent('Update', {
       detail: {
         value: $convertToMarkdownString(
           // Use underscores for italic text in Markdown instead of asterisks
-          allTransformers.filter((/** @type {any} */ { tag }) => tag !== '*'),
+          transformers.filter((/** @type {any} */ { tag }) => tag !== '*'),
         ) // Remove unnecessary backslash for underscore and backslash characters
           // @see https://github.com/sveltia/sveltia-cms/issues/430
           // @see https://github.com/sveltia/sveltia-cms/issues/512
@@ -245,12 +246,16 @@ export const initEditor = ({
   isCodeEditor = false,
   defaultLanguage = 'plain',
 }) => {
-  components.forEach(({ node, transformer }) => {
-    /** @type {any[]} */ (editorConfig.nodes).unshift(node);
-    allTransformers.unshift(transformer);
-  });
+  // Build per-instance copies to avoid permanently mutating the shared module-level arrays
+  const localNodes = components.length
+    ? [...components.map(({ node }) => node), .../** @type {any[]} */ (editorConfig.nodes)]
+    : editorConfig.nodes;
+
+  const localTransformers = components.length
+    ? [...components.map(({ transformer }) => transformer), ...allTransformers]
+    : allTransformers;
 
-  const editor = createEditor(editorConfig);
+  const editor = createEditor({ ...editorConfig, nodes: localNodes });
 
   registerRichText(editor);
   registerDragonSupport(editor);
@@ -326,7 +331,7 @@ export const initEditor = ({
         }
       }
 
-      onEditorUpdate(editor);
+      onEditorUpdate(editor, localTransformers);
     });
   });
 

package/dist/components/text-editor/store.svelte.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/text-editor/store.svelte.test.js

@@ -0,0 +1,196 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
+import { describe, expect, it, vi } from 'vitest';
+import { createEditorStore } from './store.svelte.js';
+
+describe('createEditorStore', () => {
+  it('should have correct initial values', () => {
+    const store = createEditorStore();
+
+    expect(store.initialized).toBe(false);
+    expect(store.editor).toBeUndefined();
+    expect(store.inputValue).toBe('');
+    expect(store.useRichText).toBe(true);
+    expect(store.hasConverterError).toBe(false);
+    expect(store.showConverterError).toBe(false);
+    expect(store.selection).toEqual({
+      blockNodeKey: null,
+      blockType: 'paragraph',
+      inlineTypes: [],
+    });
+  });
+
+  it('should return a non-empty editorId string', () => {
+    const store = createEditorStore();
+
+    expect(typeof store.editorId).toBe('string');
+    expect(store.editorId.length).toBeGreaterThan(0);
+  });
+
+  it('should generate unique editorIds for each store instance', () => {
+    const a = createEditorStore();
+    const b = createEditorStore();
+
+    expect(a.editorId).not.toBe(b.editorId);
+  });
+
+  it('should set initialized', () => {
+    const store = createEditorStore();
+
+    store.initialized = true;
+    expect(store.initialized).toBe(true);
+  });
+
+  it('should set useRichText to true when first mode is rich-text', () => {
+    const store = createEditorStore();
+
+    store.config = {
+      modes: ['rich-text'],
+      enabledButtons: [],
+      components: [],
+      isCodeEditor: false,
+    };
+    expect(store.useRichText).toBe(true);
+  });
+
+  it('should set useRichText to false when first mode is plain-text', () => {
+    const store = createEditorStore();
+
+    store.config = {
+      modes: ['plain-text'],
+      enabledButtons: [],
+      components: [],
+      isCodeEditor: false,
+    };
+    expect(store.useRichText).toBe(false);
+  });
+
+  it('should set useRichText to true when isCodeEditor is true regardless of modes', () => {
+    const store = createEditorStore();
+
+    store.config = { modes: [], enabledButtons: [], components: [], isCodeEditor: true };
+    expect(store.useRichText).toBe(true);
+  });
+
+  it('should set useRichText to false when modes is empty and isCodeEditor is false', () => {
+    const store = createEditorStore();
+
+    store.config = { modes: [], enabledButtons: [], components: [], isCodeEditor: false };
+    expect(store.useRichText).toBe(false);
+  });
+
+  it('should set hasConverterError and cascade useRichText and showConverterError', () => {
+    const store = createEditorStore();
+
+    store.hasConverterError = true;
+    expect(store.hasConverterError).toBe(true);
+    expect(store.useRichText).toBe(false);
+    expect(store.showConverterError).toBe(true);
+  });
+
+  it('should allow clearing hasConverterError without re-enabling rich text', () => {
+    const store = createEditorStore();
+
+    store.hasConverterError = true;
+    store.hasConverterError = false;
+    // Setting to false does NOT automatically re-enable rich text
+    expect(store.hasConverterError).toBe(false);
+    expect(store.useRichText).toBe(false);
+  });
+
+  it('should allow setting showConverterError directly', () => {
+    const store = createEditorStore();
+
+    store.showConverterError = true;
+    expect(store.showConverterError).toBe(true);
+    store.showConverterError = false;
+
+    expect(store.showConverterError).toBe(false);
+  });
+
+  it('should allow setting and reading selection', () => {
+    const store = createEditorStore();
+
+    const sel = {
+      blockNodeKey: 'abc',
+      blockType: /** @type {const} */ ('heading-2'),
+      inlineTypes: /** @type {import('../../typedefs').TextEditorInlineType[]} */ ([
+        'bold',
+        'italic',
+      ]),
+    };
+
+    store.selection = sel;
+    expect(store.selection).toEqual(sel);
+  });
+
+  it('should allow setting inputValue when useRichText is false', () => {
+    const store = createEditorStore();
+
+    store.useRichText = false;
+    store.inputValue = 'hello world';
+    expect(store.inputValue).toBe('hello world');
+  });
+
+  it('should not change inputValue on duplicate assignment', () => {
+    const store = createEditorStore();
+
+    store.useRichText = false;
+    store.inputValue = 'same';
+    store.inputValue = 'same'; // no-op since unchanged
+    expect(store.inputValue).toBe('same');
+  });
+
+  it('should expose convertMarkdown as a function', () => {
+    const store = createEditorStore();
+
+    expect(typeof store.convertMarkdown).toBe('function');
+  });
+
+  it('should allow getting and setting the editor (covers line 63)', () => {
+    const store = createEditorStore();
+    const fakeEditor = /** @type {any} */ ({ __testId: 'test-editor' });
+
+    store.editor = fakeEditor; // line 63: editor = newValue
+    // Svelte 5 $state wraps objects in a Proxy, so use toEqual for value comparison
+    // @ts-ignore
+    expect(store.editor?.__testId).toBe('test-editor');
+  });
+
+  it('should allow reading the config via getter (covers line 72)', () => {
+    const store = createEditorStore();
+    const cfg = store.config; // line 72: return config
+
+    expect(cfg.modes).toHaveLength(0);
+    expect(cfg.isCodeEditor).toBe(false);
+  });
+
+  it('should call convertMarkdown (returns early) when inputValue changes with useRichText=true', async () => {
+    const store = createEditorStore();
+
+    // useRichText is true by default; no editor set → convertMarkdown returns early (line 40)
+    store.inputValue = 'hello'; // triggers line 89: convertMarkdown()
+    await new Promise((r) => {
+      setTimeout(r, 0);
+    });
+    expect(store.inputValue).toBe('hello');
+    expect(store.hasConverterError).toBe(false);
+  });
+
+  it('should set hasConverterError when convertMarkdownToLexical throws', async () => {
+    const store = createEditorStore();
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+    // Mock editor that has no .update() method → convertMarkdownToLexical will throw inside the
+    // new Promise executor, rejecting it and triggering the catch block (lines 48-52)
+    const mockEditor = /** @type {any} */ ({ getEditorState: () => ({ isEmpty: () => false }) });
+
+    store.editor = mockEditor;
+    store.initialized = true;
+    store.inputValue = 'some text'; // triggers convertMarkdown (line 89), which awaits the rejection
+    await new Promise((r) => {
+      setTimeout(r, 0);
+    });
+    expect(store.hasConverterError).toBe(true);
+    consoleSpy.mockRestore();
+  });
+});

package/dist/components/text-editor/text-editor.svelte

@@ -128,6 +128,9 @@
   margin: var(--sui-focus-ring-width);
   width: calc(100% - var(--sui-focus-ring-width) * 2);
 }
+.text-editor.flex:not([hidden]) {
+  display: block;
+}
 .text-editor :global(.sui.text-area) {
   margin: 0 !important;
   width: 100% !important;

package/dist/components/text-editor/transformers/hr.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/text-editor/transformers/hr.test.js

@@ -0,0 +1,108 @@
+// cSpell:ignore-words horizontalrule
+
+import { describe, expect, it, vi } from 'vitest';
+import { HR } from './hr.js';
+
+// Mock @lexical/extension so we can call HR.replace without a real Lexical editor context
+vi.mock('@lexical/extension', () => {
+  const mockHRNode = {
+    __type: 'horizontalrule',
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    selectNext: vi.fn(),
+  };
+
+  return {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    $createHorizontalRuleNode: vi.fn(() => mockHRNode),
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    $isHorizontalRuleNode: (/** @type {{ __type: string; }} */ node) =>
+      node?.__type === 'horizontalrule',
+    /**
+     *
+     */
+    HorizontalRuleNode: class {},
+  };
+});
+
+describe('HR transformer', () => {
+  it('should have the correct type', () => {
+    expect(HR.type).toBe('element');
+  });
+
+  it('should include HorizontalRuleNode in dependencies', () => {
+    expect(HR.dependencies).toHaveLength(1);
+  });
+
+  it('regExp should match --- divider', () => {
+    expect(HR.regExp.test('---')).toBe(true);
+  });
+
+  it('regExp should match *** divider', () => {
+    expect(HR.regExp.test('***')).toBe(true);
+  });
+
+  it('regExp should match ___ divider', () => {
+    expect(HR.regExp.test('___')).toBe(true);
+  });
+
+  it('regExp should match dividers with trailing space', () => {
+    expect(HR.regExp.test('--- ')).toBe(true);
+    expect(HR.regExp.test('*** ')).toBe(true);
+  });
+
+  it('regExp should not match partial dividers', () => {
+    expect(HR.regExp.test('--')).toBe(false);
+    expect(HR.regExp.test('**')).toBe(false);
+    expect(HR.regExp.test('__')).toBe(false);
+  });
+
+  it('export should return null for a non-HR node', () => {
+    const fakeNode = { __type: 'paragraph' };
+
+    expect(HR.export(/** @type {any} */ (fakeNode), () => '')).toBeNull();
+  });
+
+  it('export should return "***" for an HR node', () => {
+    const hrNode = { __type: 'horizontalrule' };
+
+    expect(HR.export(/** @type {any} */ (hrNode), () => '')).toBe('***');
+  });
+
+  it('replace should call parentNode.replace when isImport is true', () => {
+    const parentNode = {
+      replace: vi.fn(),
+      insertBefore: vi.fn(),
+      getNextSibling: vi.fn().mockReturnValue(null),
+    };
+
+    HR.replace(/** @type {any} */ (parentNode), [], /** @type {any} */ (['---']), true);
+    expect(parentNode.replace).toHaveBeenCalledOnce();
+    expect(parentNode.insertBefore).not.toHaveBeenCalled();
+  });
+
+  it('replace should call parentNode.replace when there is a next sibling', () => {
+    const siblingNode = { __type: 'paragraph' };
+
+    const parentNode = {
+      replace: vi.fn(),
+      insertBefore: vi.fn(),
+      getNextSibling: vi.fn().mockReturnValue(siblingNode),
+    };
+
+    HR.replace(/** @type {any} */ (parentNode), [], /** @type {any} */ (['---']), false);
+    expect(parentNode.replace).toHaveBeenCalledOnce();
+    expect(parentNode.insertBefore).not.toHaveBeenCalled();
+  });
+
+  it('replace should call parentNode.insertBefore when not import and no next sibling', () => {
+    const parentNode = {
+      replace: vi.fn(),
+      insertBefore: vi.fn(),
+      getNextSibling: vi.fn().mockReturnValue(null),
+    };
+
+    HR.replace(/** @type {any} */ (parentNode), [], /** @type {any} */ (['---']), false);
+    expect(parentNode.insertBefore).toHaveBeenCalledOnce();
+    expect(parentNode.replace).not.toHaveBeenCalled();
+  });
+});

package/dist/components/text-editor/transformers/table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/text-editor/transformers/table.test.js

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+import { TABLE } from './table.js';
+
+describe('TABLE transformer', () => {
+  it('should have the correct type', () => {
+    expect(TABLE.type).toBe('element');
+  });
+
+  it('should have TableNode, TableRowNode, and TableCellNode in dependencies', () => {
+    expect(TABLE.dependencies).toHaveLength(3);
+  });
+
+  it('regExp should match a table row line', () => {
+    expect(TABLE.regExp.test('| foo | bar |')).toBe(true);
+    expect(TABLE.regExp.test('| single |')).toBe(true);
+  });
+
+  it('regExp should not match lines without pipe borders', () => {
+    expect(TABLE.regExp.test('foo bar')).toBe(false);
+    expect(TABLE.regExp.test('- item')).toBe(false);
+  });
+
+  it('export should return null for a non-table node', () => {
+    const fakeNode = { __type: 'paragraph' };
+
+    expect(TABLE.export(/** @type {any} */ (fakeNode), () => '')).toBeNull();
+  });
+});

package/dist/components/text-field/number-input.svelte

@@ -204,7 +204,8 @@
   margin: var(--sui-focus-ring-width);
   min-width: var(--sui-textbox-singleline-min-width);
 }
-.number-input.flex {
+.number-input.flex:not([hidden]) {
+  display: inline-flex;
   width: -moz-available;
   width: -webkit-fill-available;
   width: stretch;