@kubex/zinc 1.1.62 → 1.1.64

package/src/components/remarkd-editor/remarkd-editor.scss

@@ -0,0 +1,241 @@
+@use "../../wc";
+// Remarkd's official output styles, scoped under .remarkd-rendered.
+@use "../../../node_modules/remarkd-js/docs/assets/remarkd-output";
+
+:host {
+  display: block;
+}
+
+.remarkd-editor {
+  position: relative;
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
+}
+
+.remarkd-editor__toolbar {
+  display: flex;
+  gap: 2px;
+  flex-wrap: wrap;
+  padding: var(--zn-spacing-x-small);
+  border-bottom: 1px solid rgb(var(--zn-border-color));
+}
+
+.remarkd-editor__body {
+  padding: var(--zn-spacing-large) var(--zn-spacing-large) var(--zn-spacing-large) 88px;
+  min-height: 10rem;
+}
+
+.remarkd-editor--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.remarkd-editor__block {
+  position: relative;
+  border-radius: var(--zn-border-radius);
+}
+
+.remarkd-editor__actions {
+  position: absolute;
+  left: -80px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.remarkd-editor__block:hover .remarkd-editor__actions,
+.remarkd-editor__actions:focus-within {
+  opacity: 1;
+}
+
+.remarkd-editor__drag-handle {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px;
+  color: var(--zn-color-neutral-400, #9aa4b2);
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.remarkd-editor__ghost {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 20;
+  pointer-events: none;
+  opacity: 0.9;
+  background: var(--zn-color-neutral-0, white);
+  border-radius: var(--zn-border-radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  max-width: 50%;
+  max-height: 160px;
+  overflow: hidden;
+}
+
+.remarkd-editor__block--dragging {
+  opacity: 0.4;
+}
+
+.remarkd-editor__block--drop-before::before,
+.remarkd-editor__block--drop-after::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 6px;
+  border-radius: 3px;
+  background: rgba(var(--zn-primary), 0.6);
+  pointer-events: none;
+}
+
+.remarkd-editor__block--drop-before::before {
+  top: -4px;
+}
+
+.remarkd-editor__block--drop-after::after {
+  bottom: -4px;
+}
+
+.remarkd-editor__rendered {
+  padding: var(--zn-spacing-x-small);
+  border-radius: var(--zn-border-radius);
+  cursor: text;
+
+  &:hover {
+    background: var(--zn-color-neutral-100);
+  }
+}
+
+// The shell keeps the block's rendered chrome while its source is edited —
+// remarkd hint classes (hint-note, hint-tip, …) apply their own styling here.
+.remarkd-editor__edit-shell {
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  background: var(--zn-color-neutral-0, white);
+  padding: var(--zn-spacing-x-small);
+
+  // Hint shells keep their own left accent — only tint the other edges.
+  &:focus-within {
+    border-top-color: rgb(var(--zn-primary));
+    border-right-color: rgb(var(--zn-primary));
+    border-bottom-color: rgb(var(--zn-primary));
+  }
+
+  &:not([class*="hint-"]):focus-within {
+    border-left-color: rgb(var(--zn-primary));
+  }
+}
+
+.remarkd-editor__input {
+  display: block;
+  width: 100%;
+  resize: none;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0;
+  outline: none;
+}
+
+// Hints edit in the rendered font so they read as the same block.
+.remarkd-editor__edit-shell[class*="hint-"] .remarkd-editor__input {
+  font: inherit;
+}
+
+.remarkd-editor__edit-shell--h1 .remarkd-editor__input,
+.remarkd-editor__edit-shell--h2 .remarkd-editor__input,
+.remarkd-editor__edit-shell--h3 .remarkd-editor__input {
+  font-family: inherit;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.remarkd-editor__edit-shell--h1 .remarkd-editor__input {
+  font-size: 26px;
+}
+
+.remarkd-editor__edit-shell--h2 .remarkd-editor__input {
+  font-size: 21px;
+}
+
+.remarkd-editor__edit-shell--h3 .remarkd-editor__input {
+  font-size: 17px;
+}
+
+.remarkd-editor__edit-shell--code {
+  background: var(--rmd-code-bg, #0f1626);
+
+  .remarkd-editor__input {
+    color: var(--rmd-code-text, #f5f8ff);
+  }
+}
+
+.remarkd-editor__add {
+  padding: var(--zn-spacing-x-small);
+  min-height: 1.8em;
+  color: var(--zn-color-neutral-400, #9aa4b2);
+  cursor: text;
+}
+
+.remarkd-editor__edit-wrap {
+  position: relative;
+}
+
+.remarkd-editor__slash-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 10;
+  min-width: 12rem;
+  margin-top: 4px;
+  padding: 4px;
+  border: 1px solid rgb(var(--zn-border-color));
+  border-radius: var(--zn-border-radius);
+  background: var(--zn-color-neutral-0, white);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  display: flex;
+  flex-direction: column;
+}
+
+.remarkd-editor__slash-item {
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-x-small);
+  padding: 6px 8px;
+  border: 0;
+  border-radius: var(--zn-border-radius);
+  background: none;
+  color: var(--zn-color-text, #222);
+  font: inherit;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+
+  &:hover,
+  &--active {
+    background: var(--zn-color-neutral-100);
+  }
+}
+
+.remarkd-editor__validation {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  pointer-events: none;
+  border: 0;
+  padding: 0;
+}

package/src/components/remarkd-editor/remarkd-editor.test.ts

@@ -0,0 +1,147 @@
+import '../../../dist/zn.min.js';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnRemarkdEditor from './remarkd-editor.component';
+
+describe('<zn-remarkd-editor>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-remarkd-editor></zn-remarkd-editor>`);
+    expect(el).to.exist;
+  });
+
+  it('should split the value into rendered remarkd blocks', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title
+
+NOTE: a note"></zn-remarkd-editor>`);
+    const blocks = el.shadowRoot!.querySelectorAll('.remarkd-editor__block');
+    expect(blocks.length).to.equal(2);
+    expect(blocks[1].innerHTML).to.contain('hint-note');
+  });
+
+  it('should keep fenced content as a single block', async () => {
+    const fenced = '```\n\ncode\n\n```';
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value=${fenced}></zn-remarkd-editor>`);
+    expect(el.shadowRoot!.querySelectorAll('.remarkd-editor__block').length).to.equal(1);
+  });
+
+  it('should swap a block to source editing on click and commit on blur', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    expect(input).to.exist;
+    expect(input.value).to.equal('# Title');
+
+    input.value = '# Changed';
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('# Changed');
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__rendered')!.innerHTML).to.contain('Changed');
+  });
+
+  it('should remove a block committed as empty', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="# Title
+
+Second"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelectorAll<HTMLElement>('.remarkd-editor__rendered')[1].click();
+    await el.updateComplete;
+
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    input.value = '';
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('# Title');
+    expect(el.shadowRoot!.querySelectorAll('.remarkd-editor__block').length).to.equal(1);
+  });
+
+  it('should render an always-visible toolbar', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor></zn-remarkd-editor>`);
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__toolbar')).to.exist;
+  });
+
+  it('should open the slash menu when "/" starts an empty block', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    input.value = '/';
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    await el.updateComplete;
+
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__slash-menu')).to.exist;
+  });
+
+  it('should start a new block on shift+enter', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="First"></zn-remarkd-editor>`);
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    input.dispatchEvent(new KeyboardEvent('keydown', {key: 'Enter', shiftKey: true, bubbles: true}));
+    await el.updateComplete;
+
+    // First block committed and rendered; a fresh draft textarea sits below it.
+    expect(el.shadowRoot!.querySelectorAll('.remarkd-editor__block').length).to.equal(1);
+    const draft = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    expect(draft).to.exist;
+    expect(draft.value).to.equal('');
+  });
+
+  it('should open the image dialog from the toolbar', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor></zn-remarkd-editor>`);
+    const buttons = el.shadowRoot!.querySelectorAll('.remarkd-editor__toolbar zn-button');
+    const imageButton = buttons[buttons.length - 1];
+    imageButton.dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    const dialog = el.shadowRoot!.querySelector('.remarkd-editor__image-dialog')!;
+    expect(dialog).to.exist;
+    // No attachment-url configured — the dialog falls back to a URL input.
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__image-url')).to.exist;
+  });
+
+  it('should toggle a checkbox in the source instead of opening the editor', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="- [ ] First
+- [x] Second"></zn-remarkd-editor>`);
+    const boxes = el.shadowRoot!.querySelectorAll<HTMLInputElement>('input[type="checkbox"]');
+    boxes[0].dispatchEvent(new MouseEvent('click', {bubbles: true, composed: true, cancelable: true}));
+    await el.updateComplete;
+
+    expect(el.value).to.equal('- [x] First\n- [x] Second');
+    expect(el.shadowRoot!.querySelector('.remarkd-editor__input')).to.not.exist;
+  });
+
+  it('should emit zn-change when a block edit changes the value', async () => {
+    const el = await fixture<ZnRemarkdEditor>(html`
+      <zn-remarkd-editor value="Hello"></zn-remarkd-editor>`);
+    let fired = false;
+    el.addEventListener('zn-change', () => {
+      fired = true;
+    });
+
+    el.shadowRoot!.querySelector<HTMLElement>('.remarkd-editor__rendered')!.click();
+    await el.updateComplete;
+    const input = el.shadowRoot!.querySelector<HTMLTextAreaElement>('.remarkd-editor__input')!;
+    input.value = 'Hello world';
+    input.dispatchEvent(new Event('input', {bubbles: true}));
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(fired).to.be.true;
+  });
+});

package/src/components/select/select.component.ts

@@ -1109,6 +1109,10 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
       this.updateComplete.then(() => {
         this.emit('zn-input');
         this.emit('zn-change');
+
+        if (this.triggerSubmit) {
+          this.formControlController.submit();
+        }
       });
     }
   }

package/src/components/select/select.test.ts

@@ -260,6 +260,35 @@ describe('<zn-select>', () => {
     });
   });
 
+  describe('trigger-submit', () => {
+    it('submits the form when a tag is removed', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <zn-select multiple trigger-submit value="a b">
+            <zn-option value="a">Option 1</zn-option>
+            <zn-option value="b">Option 2</zn-option>
+          </zn-select>
+        </form>
+      `);
+      const el = form.querySelector<ZnSelect>('zn-select')!;
+      await el.updateComplete;
+
+      let submitted = false;
+      form.addEventListener('submit', e => {
+        e.preventDefault();
+        submitted = true;
+      });
+
+      const removeIcon = el.shadowRoot!.querySelector<HTMLElement>('.select__tags zn-icon[slot="action"]')!;
+      removeIcon.click();
+      await el.updateComplete;
+      await el.updateComplete;
+
+      expect(el.value).to.deep.equal(['b']);
+      expect(submitted).to.be.true;
+    });
+  });
+
   describe('free-text', () => {
     const type = (el: ZnSelect, text: string) => {
       const displayInput = el.shadowRoot!.querySelector<HTMLInputElement>('.select__display-input')!;

package/src/components/sp/sp.scss

@@ -36,6 +36,10 @@
   height: 100%;
   margin: var(--zn-default-margin, 0 auto);
 
+  &--divide {
+    gap: calc(var(--zn-sp-gap) * 2);
+  }
+
   &--divide.sp--no-gap {
     ::slotted(*:not(:last-child)) {
       border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
@@ -54,7 +58,7 @@
         left: 0;
         width: 100%;
         max-width: 100%;
-        bottom: calc((var(--zn-sp-gap) / 2) * -1);
+        bottom: calc((var(--zn-sp-gap) / 1) * -1);
         background-color: rgb(var(--zn-border-color));
       }
     }

package/src/components/tabs/tabs.component.ts

@@ -10,6 +10,11 @@ import ZincElement from '../../internal/zinc-element';
 
 import styles from './tabs.scss';
 
+// Every element that manages its own tabs (ZnTabs and its subclasses). Tab
+// registration must stop at these so an outer container never claims a nested
+// container's tabs.
+const tabContainerSelector = 'zn-tabs, zn-page, zn-page-nav';
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/tabs
@@ -228,7 +233,7 @@ export default class ZnTabs extends ZincElement {
       }
     }
 
-    for (const uriTab of deepQuerySelectorAll("[tab-uri]", this, '')) {
+    for (const uriTab of deepQuerySelectorAll("[tab-uri]", this, tabContainerSelector)) {
       const uri: string = uriTab.getAttribute("tab-uri")!;
       const eleTabId = this._uriToId(uri);
       if (eleTabId === tabId) {
@@ -459,11 +464,11 @@ export default class ZnTabs extends ZincElement {
   }
 
   _registerTabs = () => {
-    deepQuerySelectorAll('[tab]', this, 'zn-tabs').forEach(ele => {
+    deepQuerySelectorAll('[tab]', this, tabContainerSelector).forEach(ele => {
       this._addTab(ele as HTMLElement);
     });
 
-    deepQuerySelectorAll('[tab-uri]', this, 'zn-tabs').forEach(ele => {
+    deepQuerySelectorAll('[tab-uri]', this, tabContainerSelector).forEach(ele => {
       if (ele.getAttribute('tab-uri') === "") {
         ele.setAttribute('tab', "");
         ele.removeAttribute('tab-uri');
@@ -471,7 +476,7 @@ export default class ZnTabs extends ZincElement {
       this._addTab(ele as HTMLElement);
     });
 
-    deepQuerySelectorAll('[ref-tab-uri]', this, 'zn-tabs').forEach(ele => {
+    deepQuerySelectorAll('[ref-tab-uri]', this, tabContainerSelector).forEach(ele => {
       if (!ele.hasAttribute('ref-tab')) {
         ele.setAttribute('ref-tab', this._uriToId(ele.getAttribute('ref-tab-uri')!));
         ele.removeAttribute('ref-tab-uri');

package/src/components/tabs/tabs.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html } from '@open-wc/testing';
+import type ZnTabs from './tabs.component';
 
 describe('<zn-tabs>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,44 @@ describe('<zn-tabs>', () => {
 
     expect(el).to.exist;
   });
+
+  it('does not register tabs belonging to a nested zn-page', async () => {
+    const el = await fixture<ZnTabs>(html`
+      <zn-tabs>
+        <div class="outer-home">Outer Home</div>
+        <div id="outer-second">
+          <zn-page caption="Nested Page">
+            <zn-tab caption="Overview">Overview Content</zn-tab>
+            <zn-tab caption="Details">Details Content</zn-tab>
+          </zn-page>
+        </div>
+      </zn-tabs>
+    `);
+    await aTimeout(60);
+
+    el.setActiveTab('outer-second', false, false);
+    await aTimeout(20);
+
+    // A menu selection bubbling out of the page (e.g. an ellipses action menu)
+    // makes the outer tabs re-register; it must not claim the page's nav items.
+    const page = el.querySelector('zn-page')!;
+    page.dispatchEvent(new CustomEvent('zn-menu-select', { bubbles: true, composed: true }));
+    await aTimeout(250);
+
+    const navbar = page.shadowRoot!.querySelector('zn-navbar')!;
+    const navItems = Array.from(navbar.shadowRoot!.querySelectorAll<HTMLElement>('li:not(.more)'));
+
+    navItems[1].click();
+    await aTimeout(40);
+    navItems[0].click();
+    await aTimeout(40);
+
+    const outerHome = el.querySelector('.outer-home')!;
+    const outerSecond = el.querySelector('#outer-second')!;
+    expect(outerSecond.hasAttribute('selected')).to.equal(true);
+    expect(outerHome.hasAttribute('selected')).to.equal(false);
+
+    const selectedPagePanel = page.shadowRoot!.querySelector<HTMLElement>('#content > div[selected]')!;
+    expect(selectedPagePanel.id).to.equal('');
+  });
 });

package/src/components/tile/tile.scss

@@ -25,8 +25,12 @@
     padding-inline: var(--zn-base-gap);
   }
 
+  &--has-description#{&}--has-caption {
+    padding-block: var(--zn-spacing-small);
+  }
+
   &--has-image {
-    padding: var(--zn-base-gap);
+    padding: var(--zn-spacing-small);
   }
 
   &--has-href {

package/src/components/toggle/toggle.component.ts

@@ -36,7 +36,7 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'description');
 
   private readonly formControlController = new FormControlController(this, {
-    value: (control: ZnToggle) => (control.checked ? control.value || 'on' : undefined),
+    value: (control: ZnToggle) => (control.checked ? control.value || 'on' : control.fallbackValue),
     defaultValue: (control: ZnToggle) => control.defaultChecked,
     setValue: (control: ZnToggle, checked: boolean) => (control.checked = checked)
   });
@@ -51,7 +51,8 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
 
   @property() value: string;
 
-  @property({ attribute: 'fallback' }) fallbackValue: string = '';
+  /** The value submitted when the toggle is unchecked, so the toggle always submits a value. */
+  @property({ attribute: 'fallback' }) fallbackValue: string = 'off';
 
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
@@ -167,15 +168,6 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
   // End Public API methods
 
   render() {
-    let fallback = html``;
-    if (this.fallbackValue !== '') {
-      fallback = html`
-        <input type="hidden"
-               name=${this.name}
-               value=${this.fallbackValue}
-        />`;
-    }
-
     const tooltipContent = this.checked ? this.onText : this.offText;
     const showTooltip = !!tooltipContent;
     const hasHelpText = this.helpText ? true : this.hasSlotController.test('help-text');
@@ -183,7 +175,6 @@ export default class ZnToggle extends ZincElement implements ZincFormControl {
 
     const toggle = html`
       <div class="switch__input-wrapper" part="base">
-        ${fallback}
         <input
           class="switch__input"
           type="checkbox"

package/src/components/toggle/toggle.test.ts

@@ -18,4 +18,33 @@ describe('<zn-toggle>', () => {
     expect(description.textContent).to.include('Receive an email when mentioned.');
     expect(label.nextElementSibling).to.equal(description);
   });
+
+  describe('form submission', () => {
+    it('should submit the value when checked', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <zn-toggle name="feature" value="enabled" checked></zn-toggle>
+        </form>`);
+
+      expect(new FormData(form).get('feature')).to.equal('enabled');
+    });
+
+    it('should submit "off" when unchecked', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <zn-toggle name="feature" value="enabled"></zn-toggle>
+        </form>`);
+
+      expect(new FormData(form).get('feature')).to.equal('off');
+    });
+
+    it('should submit the fallback value when unchecked', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <zn-toggle name="feature" value="enabled" fallback="disabled"></zn-toggle>
+        </form>`);
+
+      expect(new FormData(form).get('feature')).to.equal('disabled');
+    });
+  });
 });

package/src/events/zn-error.ts

@@ -1,4 +1,4 @@
-export type ZnErrorEvent = CustomEvent<{ status?: number }>;
+export type ZnErrorEvent = CustomEvent<{ status?: number; message?: string }>;
 
 declare global {
   interface GlobalEventHandlersEventMap {

package/src/zinc.ts

@@ -101,6 +101,7 @@ export { default as TranslationGroup } from './components/translation-group';
 export { default as OptGroup } from './components/opt-group';
 export { default as PriorityList } from './components/priority-list';
 export { default as MarkdownEditor } from './components/markdown-editor';
+export { default as RemarkdEditor } from './components/remarkd-editor';
 export { default as FlowBuilder } from './components/flow-builder';
 export { default as FlowSteps } from './components/flow-builder/modules/flow-steps';
 export { default as FlowStepGroup } from './components/flow-builder/modules/flow-step-group';
@@ -109,6 +110,7 @@ export { default as FlowBranchConditions } from './components/flow-builder/modul
 export { default as PageBuilder } from './components/page-builder';
 export { default as PagePaletteItem } from './components/page-builder/modules/page-palette-item';
 export { default as PageSectionCard } from './components/page-builder/modules/page-section-card';
+export { default as PreviewFrame } from './components/preview-frame';
 /* plop:component */
 
 // Base Component