@shelamkoff/rector 1.0.0 → 1.0.2

package/dist/plugins/shared/layer.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Keep a plugin surface above neighbouring editor blocks while it is open.
+ * Calls are reference-counted so a source editor can coexist with a settings
+ * panel owned by the same block.
+ *
+ * @param {HTMLElement} owner Element inside the plugin block.
+ * @param {AbortSignal} signal Plugin render lifecycle signal.
+ * @returns {{ open: () => void, close: () => void }}
+ */
+export function createPluginLayer(owner: HTMLElement, signal: AbortSignal): {
+    open: () => void;
+    close: () => void;
+};

package/dist/plugins/shared/layer.js

@@ -0,0 +1,45 @@
+const openLayers = new WeakMap()
+
+/**
+ * Keep a plugin surface above neighbouring editor blocks while it is open.
+ * Calls are reference-counted so a source editor can coexist with a settings
+ * panel owned by the same block.
+ *
+ * @param {HTMLElement} owner Element inside the plugin block.
+ * @param {AbortSignal} signal Plugin render lifecycle signal.
+ * @returns {{ open: () => void, close: () => void }}
+ */
+export function createPluginLayer(owner, signal) {
+  /** @type {HTMLElement | null} */
+  let block = null
+  let opened = false
+
+  const close = () => {
+    if (!opened || !block) return
+    const currentBlock = block
+    opened = false
+    block = null
+    const next = Math.max(0, (openLayers.get(currentBlock) || 1) - 1)
+    if (next === 0) {
+      openLayers.delete(currentBlock)
+      currentBlock.removeAttribute('data-oe-layer-open')
+      return
+    }
+    openLayers.set(currentBlock, next)
+  }
+
+  signal.addEventListener('abort', close, { once: true })
+
+  return {
+    open() {
+      if (opened || signal.aborted) return
+      const candidate = owner.closest('.oe-block')
+      if (!(candidate instanceof HTMLElement)) return
+      block = candidate
+      opened = true
+      openLayers.set(block, (openLayers.get(block) || 0) + 1)
+      block.setAttribute('data-oe-layer-open', 'true')
+    },
+    close,
+  }
+}

package/dist/plugins/shared/sourceEditor.css

@@ -0,0 +1,165 @@
+.oe-source-editor {
+  position: absolute;
+  inset: 0;
+  z-index: var(--oe-plugin-dialog-z-index, 1200);
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  min-height: 220px;
+  padding: 16px;
+}
+
+.oe-source-editor--preloaded {
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.oe-source-editor[data-oe-source-editor='html'] {
+  min-height: min(26rem, calc(100vh - 2rem));
+}
+
+.oe-source-editor__backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  background: var(--oe-overlay-dark, rgba(0, 0, 0, 0.7));
+  border: 0;
+  border-radius: inherit;
+  cursor: default;
+}
+
+.oe-source-editor__panel {
+  position: relative;
+  display: grid;
+  gap: 12px;
+  box-sizing: border-box;
+  width: min(100%, 32rem);
+  max-height: calc(100vh - 2rem);
+  padding: 16px;
+  overflow-y: auto;
+  background: var(--oe-surface-elevated, #1e1e24);
+  border: 1px solid var(--oe-border-hover, #2a2a2a);
+  border-radius: var(--oe-radius, 8px);
+  box-shadow: var(--oe-toolbar-shadow, 0 8px 24px rgba(0, 0, 0, 0.4));
+  text-align: left;
+}
+
+.oe-source-editor[data-oe-source-editor='url'] .oe-source-editor__panel {
+  width: min(100%, 28rem);
+}
+
+.oe-source-editor__title {
+  margin: 0;
+  color: var(--oe-text-1, #f5f5f5);
+  font: inherit;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.oe-source-editor__label {
+  display: grid;
+  gap: 8px;
+  color: var(--oe-text-2, #c4c4c4);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.oe-source-editor__field {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 42px;
+  padding: 10px 12px;
+  resize: vertical;
+  color: var(--oe-text-1, #f5f5f5);
+  background: var(--oe-input-bg, #2c2c33);
+  border: 1px solid var(--oe-border-hover, #2a2a2a);
+  border-radius: var(--oe-radius-sm, 4px);
+  outline: none;
+  font: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.oe-source-editor textarea.oe-source-editor__field {
+  min-height: 9rem;
+  max-height: min(40vh, 20rem);
+}
+
+.oe-source-editor__field:hover {
+  background: var(--oe-input-bg-hover, #353540);
+}
+
+.oe-source-editor .oe-source-editor__field:focus,
+.oe-source-editor .oe-source-editor__field:focus-visible {
+  border-color: var(--oe-border-hover, #2a2a2a);
+  outline: none;
+  outline-offset: 0;
+  box-shadow: none;
+}
+
+.oe-source-editor__field[aria-invalid='true'] {
+  border-color: var(--oe-danger, #f87171);
+}
+
+.oe-source-editor__error {
+  color: var(--oe-danger-light, #fca5a5);
+  font-size: 13px;
+}
+
+.oe-source-editor__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.oe-source-editor__button {
+  min-height: 36px;
+  padding: 7px 14px;
+  border: 1px solid transparent;
+  border-radius: var(--oe-radius-sm, 4px);
+  font: inherit;
+  font-size: 13px;
+  font-weight: 650;
+  cursor: pointer;
+}
+
+.oe-source-editor__button--secondary {
+  color: var(--oe-text-1, #f5f5f5);
+  background: var(--oe-card, #111);
+  border-color: var(--oe-border-hover, #2a2a2a);
+}
+
+.oe-source-editor__button--secondary:hover {
+  background: var(--oe-card-hover, #191919);
+}
+
+.oe-source-editor__button--primary {
+  color: var(--oe-text-on-accent, #fff);
+  background: var(--oe-accent, #4357b4);
+}
+
+.oe-source-editor__button--primary:hover {
+  filter: brightness(1.08);
+}
+
+@media (max-width: 520px) {
+  .oe-source-editor {
+    padding: 10px;
+  }
+
+  .oe-source-editor__panel {
+    max-height: calc(100vh - 1.25rem);
+    padding: 14px;
+  }
+
+  .oe-source-editor__actions {
+    flex-direction: column-reverse;
+  }
+
+  .oe-source-editor__button {
+    width: 100%;
+  }
+}

package/dist/plugins/shared/sourceEditor.d.ts

@@ -0,0 +1,97 @@
+/**
+ * @typedef {Object} SourceEditorConfig
+ * @property {HTMLElement} wrapper Plugin wrapper that owns the editor.
+ * @property {AbortSignal} signal Plugin render lifecycle signal.
+ * @property {'url' | 'html'} kind Source value kind.
+ * @property {string} title Dialog title.
+ * @property {string} label Accessible field label.
+ * @property {string} placeholder Field placeholder.
+ * @property {string} submitText Submit button label.
+ * @property {string} cancelText Cancel button label.
+ * @property {string} invalidText Validation error.
+ * @property {(value: string) => string} normalize Sanitizes and validates input.
+ * @property {(value: string) => void} onSubmit Receives the normalized value.
+ */
+/**
+ * Build URL/HTML forms while the owning plugin view is rendered so their
+ * first style and layout pass does not happen in the user's click handler.
+ *
+ * @param {HTMLElement} wrapper Plugin wrapper that owns the editor.
+ * @param {AbortSignal} signal Plugin render lifecycle signal.
+ * @param {Array<'url' | 'html'>} kinds Forms used by the current plugin view.
+ * @returns {void}
+ */
+export function preloadSourceEditor(wrapper: HTMLElement, signal: AbortSignal, kinds: Array<"url" | "html">): void;
+/**
+ * Open an editor-owned URL or HTML input surface without relying on native
+ * browser prompts.
+ *
+ * @param {SourceEditorConfig} config Source editor configuration.
+ * @returns {{ close: () => void }}
+ */
+export function openSourceEditor(config: SourceEditorConfig): {
+    close: () => void;
+};
+export type SourceEditorConfig = {
+    /**
+     * Plugin wrapper that owns the editor.
+     */
+    wrapper: HTMLElement;
+    /**
+     * Plugin render lifecycle signal.
+     */
+    signal: AbortSignal;
+    /**
+     * Source value kind.
+     */
+    kind: "url" | "html";
+    /**
+     * Dialog title.
+     */
+    title: string;
+    /**
+     * Accessible field label.
+     */
+    label: string;
+    /**
+     * Field placeholder.
+     */
+    placeholder: string;
+    /**
+     * Submit button label.
+     */
+    submitText: string;
+    /**
+     * Cancel button label.
+     */
+    cancelText: string;
+    /**
+     * Validation error.
+     */
+    invalidText: string;
+    /**
+     * Sanitizes and validates input.
+     */
+    normalize: (value: string) => string;
+    /**
+     * Receives the normalized value.
+     */
+    onSubmit: (value: string) => void;
+};
+export type SourceEditorSurface = {
+    root: HTMLElement;
+    backdrop: HTMLButtonElement;
+    panel: HTMLFormElement;
+    title: HTMLHeadingElement;
+    labelText: HTMLSpanElement;
+    field: HTMLInputElement | HTMLTextAreaElement;
+    error: HTMLDivElement;
+    cancel: HTMLButtonElement;
+    submit: HTMLButtonElement;
+    signal: AbortSignal;
+    layer: {
+        open: () => void;
+        close: () => void;
+    };
+    destroy: () => void;
+};

package/dist/plugins/shared/sourceEditor.js

@@ -0,0 +1,260 @@
+import { createPluginLayer } from './layer.js'
+
+/**
+ * @typedef {Object} SourceEditorSurface
+ * @property {HTMLElement} root
+ * @property {HTMLButtonElement} backdrop
+ * @property {HTMLFormElement} panel
+ * @property {HTMLHeadingElement} title
+ * @property {HTMLSpanElement} labelText
+ * @property {HTMLInputElement | HTMLTextAreaElement} field
+ * @property {HTMLDivElement} error
+ * @property {HTMLButtonElement} cancel
+ * @property {HTMLButtonElement} submit
+ * @property {AbortSignal} signal
+ * @property {{ open: () => void, close: () => void }} layer
+ * @property {() => void} destroy
+ */
+
+/** @type {WeakMap<HTMLElement, { close: () => void, surface: SourceEditorSurface }>} */
+const activeEditors = new WeakMap()
+
+/** @type {WeakMap<HTMLElement, Map<'url' | 'html', SourceEditorSurface>>} */
+const surfaces = new WeakMap()
+
+/**
+ * @typedef {Object} SourceEditorConfig
+ * @property {HTMLElement} wrapper Plugin wrapper that owns the editor.
+ * @property {AbortSignal} signal Plugin render lifecycle signal.
+ * @property {'url' | 'html'} kind Source value kind.
+ * @property {string} title Dialog title.
+ * @property {string} label Accessible field label.
+ * @property {string} placeholder Field placeholder.
+ * @property {string} submitText Submit button label.
+ * @property {string} cancelText Cancel button label.
+ * @property {string} invalidText Validation error.
+ * @property {(value: string) => string} normalize Sanitizes and validates input.
+ * @property {(value: string) => void} onSubmit Receives the normalized value.
+ */
+
+/**
+ * Build URL/HTML forms while the owning plugin view is rendered so their
+ * first style and layout pass does not happen in the user's click handler.
+ *
+ * @param {HTMLElement} wrapper Plugin wrapper that owns the editor.
+ * @param {AbortSignal} signal Plugin render lifecycle signal.
+ * @param {Array<'url' | 'html'>} kinds Forms used by the current plugin view.
+ * @returns {void}
+ */
+export function preloadSourceEditor(wrapper, signal, kinds) {
+  if (signal.aborted) return
+  for (const kind of new Set(kinds)) ensureSurface(wrapper, signal, kind)
+}
+
+/**
+ * Open an editor-owned URL or HTML input surface without relying on native
+ * browser prompts.
+ *
+ * @param {SourceEditorConfig} config Source editor configuration.
+ * @returns {{ close: () => void }}
+ */
+export function openSourceEditor(config) {
+  if (config.signal.aborted) return { close() {} }
+  activeEditors.get(config.wrapper)?.close()
+
+  const surface = ensureSurface(config.wrapper, config.signal, config.kind)
+  if (!surface) return { close() {} }
+  const controller = new AbortController()
+  const { root, backdrop, panel, title, labelText, field, error, cancel, submit } = surface
+  backdrop.setAttribute('aria-label', config.cancelText)
+  panel.setAttribute('aria-label', config.title)
+  title.textContent = config.title
+  labelText.textContent = config.label
+  field.value = ''
+  field.placeholder = config.placeholder
+  field.removeAttribute('aria-invalid')
+  error.textContent = ''
+  error.hidden = true
+  cancel.textContent = config.cancelText
+  submit.textContent = config.submitText
+  setSurfaceVisible(surface, true)
+  surface.layer.open()
+
+  let closed = false
+  const close = () => {
+    if (closed) return
+    closed = true
+    if (activeEditors.get(config.wrapper)?.close === close) activeEditors.delete(config.wrapper)
+    controller.abort()
+    surface.layer.close()
+    setSurfaceVisible(surface, false)
+  }
+  activeEditors.set(config.wrapper, { close, surface })
+
+  config.signal.addEventListener('abort', close, { once: true, signal: controller.signal })
+  backdrop.addEventListener('click', close, { signal: controller.signal })
+  cancel.addEventListener('click', close, { signal: controller.signal })
+  root.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      event.preventDefault()
+      event.stopPropagation()
+      close()
+    }
+  }, { signal: controller.signal })
+  panel.addEventListener('submit', (event) => {
+    event.preventDefault()
+    let value = ''
+    try {
+      value = config.normalize(field.value)
+    } catch {
+      value = ''
+    }
+    if (!value) {
+      error.textContent = config.invalidText
+      error.hidden = false
+      field.setAttribute('aria-invalid', 'true')
+      field.focus()
+      return
+    }
+    close()
+    config.onSubmit(value)
+  }, { signal: controller.signal })
+  field.addEventListener('input', () => {
+    error.hidden = true
+    field.removeAttribute('aria-invalid')
+  }, { signal: controller.signal })
+
+  queueMicrotask(() => {
+    if (!closed) field.focus({ preventScroll: true })
+  })
+
+  return { close }
+}
+
+/**
+ * @param {HTMLElement} wrapper
+ * @param {AbortSignal} signal
+ * @param {'url' | 'html'} kind
+ * @returns {SourceEditorSurface | null}
+ */
+function ensureSurface(wrapper, signal, kind) {
+  if (signal.aborted) return null
+
+  let owned = surfaces.get(wrapper)
+  if (!owned) {
+    owned = new Map()
+    surfaces.set(wrapper, owned)
+  }
+
+  const cached = owned.get(kind)
+  if (cached?.signal === signal && cached.root.isConnected) return cached
+  cached?.destroy()
+
+  const root = document.createElement('div')
+  root.className = 'oe-source-editor oe-source-editor--preloaded'
+  root.dataset.oeSourceEditor = kind
+  root.setAttribute('aria-hidden', 'true')
+  root.inert = true
+
+  const backdrop = document.createElement('button')
+  backdrop.type = 'button'
+  backdrop.className = 'oe-source-editor__backdrop'
+  backdrop.setAttribute('aria-label', 'Cancel')
+  backdrop.tabIndex = -1
+
+  const panel = document.createElement('form')
+  panel.className = 'oe-source-editor__panel'
+  panel.noValidate = true
+  panel.setAttribute('role', 'dialog')
+  panel.setAttribute('aria-modal', 'true')
+  panel.setAttribute('aria-label', 'Source')
+
+  const title = document.createElement('h3')
+  title.className = 'oe-source-editor__title'
+  title.textContent = 'Source'
+
+  const label = document.createElement('label')
+  label.className = 'oe-source-editor__label'
+  const labelText = document.createElement('span')
+  labelText.textContent = 'Source'
+
+  /** @type {HTMLInputElement | HTMLTextAreaElement} */
+  let field
+  if (kind === 'html') {
+    const textarea = document.createElement('textarea')
+    textarea.rows = 6
+    textarea.spellcheck = false
+    field = textarea
+  } else {
+    const input = document.createElement('input')
+    input.type = 'url'
+    input.inputMode = 'url'
+    input.setAttribute('autocomplete', 'url')
+    field = input
+  }
+  field.className = 'oe-source-editor__field'
+  field.required = true
+  label.append(labelText, field)
+
+  const error = document.createElement('div')
+  error.className = 'oe-source-editor__error'
+  error.setAttribute('role', 'alert')
+  error.hidden = true
+
+  const actions = document.createElement('div')
+  actions.className = 'oe-source-editor__actions'
+
+  const cancel = document.createElement('button')
+  cancel.type = 'button'
+  cancel.className = 'oe-source-editor__button oe-source-editor__button--secondary'
+  cancel.textContent = 'Cancel'
+
+  const submit = document.createElement('button')
+  submit.type = 'submit'
+  submit.className = 'oe-source-editor__button oe-source-editor__button--primary'
+  submit.textContent = 'Insert'
+
+  actions.append(cancel, submit)
+  panel.append(title, label, error, actions)
+  root.append(backdrop, panel)
+  wrapper.appendChild(root)
+
+  const layer = createPluginLayer(wrapper, signal)
+  /** @type {SourceEditorSurface} */
+  let surface
+  const destroy = () => {
+    const active = activeEditors.get(wrapper)
+    if (active?.surface === surface) active.close()
+    root.remove()
+    if (owned?.get(kind) === surface) owned.delete(kind)
+    if (owned?.size === 0) surfaces.delete(wrapper)
+  }
+  surface = {
+    root,
+    backdrop,
+    panel,
+    title,
+    labelText,
+    field,
+    error,
+    cancel,
+    submit,
+    signal,
+    layer,
+    destroy,
+  }
+  owned.set(kind, surface)
+  signal.addEventListener('abort', destroy, { once: true })
+  return surface
+}
+
+/**
+ * @param {SourceEditorSurface} surface
+ * @param {boolean} visible
+ * @returns {void}
+ */
+function setSurfaceVisible(surface, visible) {
+  surface.root.classList.toggle('oe-source-editor--preloaded', !visible)
+  surface.root.setAttribute('aria-hidden', String(!visible))
+  surface.root.inert = !visible
+}

package/dist/plugins/spoiler/index.js

@@ -5,14 +5,13 @@
 // =============================================================================
 
 import { sanitizeHtml } from '../../core/sanitize.js'
-import { resolvePath } from '../../shared/resolvePath.js'
 import { BlockPluginAbstract } from '../BlockPluginAbstract.js'
 import { validateSpoilerData } from '../../shared/blockDataValidators.js'
 import { mapSpoilerTextFields } from '../../shared/mapTextFields.js'
 import { normalizeTextValue } from '../../shared/textFormat.js'
 import { READ_ONLY_INTERACTIVE_ATTRIBUTE } from '../../core/constants.js'
 
-const editorStyles = resolvePath('./spoiler.css', import.meta.url)
+const editorStyles = new URL('./spoiler.css', import.meta.url).href
 
 // Tabler icon: eye-off
 const ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"/><path d="M16.681 16.673a8.717 8.717 0 0 1-4.681 1.327c-3.6 0-6.6-2-9-6 1.272-2.12 2.712-3.678 4.32-4.674m2.86-1.146a9.055 9.055 0 0 1 1.82-.18c3.6 0 6.6 2 9 6-.666 1.11-1.379 2.067-2.138 2.87"/><path d="M3 3l18 18"/></svg>'

package/dist/plugins/table/index.js

@@ -1,10 +1,9 @@
 import { sanitizeHtml } from '../../core/sanitize.js'
-import { resolvePath } from '../../shared/resolvePath.js'
 import { BlockPluginAbstract } from '../BlockPluginAbstract.js'
 import { validateTableData } from '../../shared/blockDataValidators.js'
 import { mapTableTextFields } from '../../shared/mapTextFields.js'
 
-const editorStyles = resolvePath('./table.css', import.meta.url)
+const editorStyles = new URL('./table.css', import.meta.url).href
 
 // Tabler icon: table
 const ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14z"/><path d="M3 10h18"/><path d="M10 3v18"/></svg>'

package/dist/plugins/toggle/index.js

@@ -1,12 +1,11 @@
 import { sanitizeHtml } from '../../core/sanitize.js'
-import { resolvePath } from '../../shared/resolvePath.js'
 import { BlockPluginAbstract } from '../BlockPluginAbstract.js'
 import { validateToggleData } from '../../shared/blockDataValidators.js'
 import { mapToggleTextFields } from '../../shared/mapTextFields.js'
 import { normalizeTextValue } from '../../shared/textFormat.js'
 import { READ_ONLY_INTERACTIVE_ATTRIBUTE } from '../../core/constants.js'
 
-const editorStyles = resolvePath('./toggle.css', import.meta.url)
+const editorStyles = new URL('./toggle.css', import.meta.url).href
 
 let toggleSequence = 0
 

package/dist/plugins/warning/index.js

@@ -5,13 +5,12 @@
 // =============================================================================
 
 import { sanitizeHtml } from '../../core/sanitize.js'
-import { resolvePath } from '../../shared/resolvePath.js'
 import { BlockPluginAbstract } from '../BlockPluginAbstract.js'
 import { validateWarningData } from '../../shared/blockDataValidators.js'
 import { normalizeTextValue } from '../../shared/textFormat.js'
 import { mapWarningTextFields } from '../../shared/mapTextFields.js'
 
-const editorStyles = resolvePath('./warning.css', import.meta.url)
+const editorStyles = new URL('./warning.css', import.meta.url).href
 
 // Tabler icon: alert-triangle
 const ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87l-8.106-13.536a1.914 1.914 0 0 0-3.274 0z"/><path d="M12 16h.01"/></svg>'

package/dist/renderer/index.js

@@ -2,7 +2,6 @@
 import { InvalidBlockDataError, UnknownBlockTypeError } from './errors.js'
 import { createInlineParser } from './inline.js'
 import { createDefaultRenderers, getSupportedBlockTypes } from './renderers/index.js'
-import { resolvePath } from '../shared/resolvePath.js'
 import { deserializeInlineHtml } from '../shared/inlineMarshal.js'
 import { cloneEditorData } from '../shared/cloneEditorData.js'
 import defaultLocale from './locale/en.js'
@@ -11,7 +10,7 @@ import { validateKnownBlockData } from '../shared/blockDataValidators.js'
 import { normalizeKnownBlockData } from '../shared/blockDataNormalizers.js'
 import { normalizeTextAlign } from '../shared/textFormat.js'
 
-const baseCssUrl = resolvePath('./styles/base.css', import.meta.url)
+const baseCssUrl = new URL('./styles/base.css', import.meta.url).href
 
 /**
  * Renders Rector document blocks to DOM elements.

package/dist/renderer/renderers/attaches/index.js

@@ -1,12 +1,11 @@
 // @ts-check
-import { resolvePath } from '../../../shared/resolvePath.js'
 import { getFileIcon, getExtension, formatSize, EXT_COLORS } from '../../../shared/fileUtils.js'
 import { sanitizeDownloadUrl, setSafeUrlAttribute } from '../../../shared/sanitize/sanitizeUrl.js'
 import { loadZipRuntime } from '../../../shared/zipRuntime.js'
 
 let groupSequence = 0
 
-const styles = resolvePath('./styles.css', import.meta.url)
+const styles = new URL('./styles.css', import.meta.url).href
 
 const ICON_CHEVRON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>'
 const ICON_FILE_DEFAULT = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4"/><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"/></svg>'