@threadlabs/looma 0.28.5 → 0.28.6

package/vue/UiEditorTableToolbar.d.ts

@@ -1,6 +1,4 @@
 import type { PropType } from 'vue';
-declare const _default: typeof __VLS_export;
-export default _default;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     actions: {
         type: PropType<readonly ("align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "toggle-header-row" | "toggle-header-column" | "move-row-up" | "move-row-down" | "move-column-left" | "move-column-right" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table")[] | null>;
@@ -67,3 +65,5 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     headerColumn: boolean | null;
     cellAlignment: "left" | "right" | "center" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/vue/UiEditorTableToolbar.vue

@@ -1,27 +1,18 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
-<script lang="ts">
-const htmlNextAuthoredCheck2Reported = new Set<string>()
-function htmlNextAuthoredCheck2(accepted: boolean, location: string, message: string): boolean {
-  if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
-    htmlNextAuthoredCheck2Reported.add(location)
-    console.warn(message)
-  }
-  return accepted
-}
-</script>
-
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
+import { computed, getCurrentInstance, provide, ref, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
 import {
-  computed,
-  defineComponent,
-  getCurrentInstance,
-  h,
-  provide,
-  ref,
-  watchSyncEffect,
-} from 'vue'
-import type { PropType, VNode } from 'vue'
-import { createDispatch, useComponentHost } from './host'
+  attribute,
+  checkHydratedRoot,
+  concat,
+  createDispatch,
+  KeyedBoundary,
+  nativeAttrs,
+  uniqueKeys,
+  useComponentHost,
+  useReflectedProp,
+} from './host'
 import { acceptsControllerWrite } from './props'
 import { checkedProp, propValidityState, vPropValidity } from './props'
 import UiIcon from './UiIcon.vue'
@@ -266,64 +257,7 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const KeyedFailure = defineComponent({
-  props: { error: { type: null, required: true } },
-  setup(props) {
-    return () => {
-      throw props.error
-    }
-  },
-})
-const KeyedBoundary = defineComponent({
-  setup(_props, { slots }) {
-    let last: VNode[] = []
-    return () => {
-      try {
-        last = slots.default?.() ?? []
-        return last
-      } catch (error) {
-        if (
-          !(error instanceof Error)
-          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
-        ) throw error
-        if (typeof window === 'undefined') throw error
-        return [...last, h(KeyedFailure, { error })]
-      }
-    }
-  },
-})
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
+const reflectedProp = useReflectedProp()
 const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
   action: [
@@ -383,39 +317,13 @@ const sections = ref<
 >([])
 const hasOverflow = ref(false)
 const overflowOpen = ref(false)
-let guardedPrevious: any
-const guarded = computed(() => {
-  if (
-    !(htmlNextAuthoredCheck2(
-      overflowOpen.value == null || typeof overflowOpen.value === 'boolean',
-      '$overflowOpen:overflowOpen',
-      './components/ui-editor-table-toolbar/ui-editor-table-toolbar.html: HR007: Reference overflowOpen does not satisfy its declared type.',
-    ))
-  ) return guardedPrevious
-  return guardedPrevious = overflowOpen.value
-})
 provide('html-next:ui-editor-table-toolbar:alignments', alignments)
 provide('html-next:ui-editor-table-toolbar:structure', structure)
 provide('html-next:ui-editor-table-toolbar:swatches', swatches)
 provide('html-next:ui-editor-table-toolbar:sections', sections)
 provide('html-next:ui-editor-table-toolbar:hasOverflow', hasOverflow)
 provide('html-next:ui-editor-table-toolbar:overflowOpen', overflowOpen)
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
-) {
-  throw Object.assign(
-    new Error('HR005: Server markup for <ui-editor-table-toolbar> has an incompatible root.'),
-    {
-      name: 'HtmlDiagnosticError',
-      diagnostic: Object.freeze({
-        code: 'HR005',
-        message: 'Server markup for <ui-editor-table-toolbar> has an incompatible root.',
-      }),
-    },
-  )
-}
+checkHydratedRoot('div', 'ui-editor-table-toolbar')
 
 const isActionDetail = (
   detail: unknown,
@@ -576,70 +484,11 @@ useComponentHost(() => import('../components/ui-editor-table-toolbar/ui-editor-t
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { alignments, structure, swatches, sections, hasOverflow, overflowOpen },
 })
-
-function text(value: unknown): string {
-  if (Array.isArray(value)) return value.map(text).join(' ')
-  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
-}
-
-function attribute(value: unknown): any {
-  if (
-    value === null || value === undefined || value === false
-    || (typeof value === 'object' && !Array.isArray(value))
-  ) return undefined
-  return value === true ? '' : text(value)
-}
-
-// A nonempty scalar call cannot produce the invalid-result sentinel.
-type ConcatResult<T extends unknown[]> = T extends
-  [
-    string | number | boolean | null | undefined,
-    ...(string | number | boolean | null | undefined)[],
-  ] ? string | undefined
-  : string | symbol | undefined
-function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
-  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
-  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
-    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
-  }
-  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
-}
-
-function uniqueKeys<T>(
-  items: readonly T[],
-  keyOf: (
-    item: T,
-    index: number,
-    loop: { index: number; first: boolean; last: boolean; count: number },
-  ) => unknown,
-): readonly T[] {
-  const seen = new Set<unknown>()
-  for (let index = 0; index < items.length; index += 1) {
-    const key = keyOf(items[index]!, index, {
-      index,
-      first: index === 0,
-      last: index === items.length - 1,
-      count: items.length,
-    })
-    if (seen.has(key)) {
-      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
-      throw Object.assign(new Error(`HR004: ${message}`), {
-        name: 'HtmlDiagnosticError',
-        diagnostic: Object.freeze({ code: 'HR004', message }),
-      })
-    }
-    seen.add(key)
-  }
-  return items
-}
 </script>
 
 <template>
   <div
-    data-component="ui-editor-table-toolbar"
+    class="ui-editor-table-toolbar"
     role="toolbar"
     aria-label="Table actions"
     v-bind="nativeAttrs($attrs)"
@@ -665,7 +514,7 @@ function uniqueKeys<T>(
           :aria-pressed="item.active"
           :class="{ active: item.active }"
         >
-          <UiIcon :name="item.action" />
+          <UiIcon class="ui-icon" :name="item.action" />
         </button></KeyedBoundary>
     </div>
     <div v-if="alignments.length && structure.length" class="sep" aria-hidden="true"></div>
@@ -676,7 +525,7 @@ function uniqueKeys<T>(
           type="button"
           :data-action="item.action"
         >
-          <UiIcon :name="item.icon" />
+          <UiIcon class="ui-icon" :name="item.icon" />
           <span>{{ item.label }}</span>
         </button></KeyedBoundary>
     </div>
@@ -692,11 +541,11 @@ function uniqueKeys<T>(
         class="more"
         data-action="toggle-overflow"
         aria-haspopup="menu"
-        :aria-expanded="guarded"
+        :aria-expanded="overflowOpen"
       >
-        <UiIcon name="table" />
+        <UiIcon class="ui-icon" name="table" />
         <span>Table options</span>
-        <span class="chevron"><UiIcon name="chevron-down" /></span>
+        <span class="chevron"><UiIcon class="ui-icon" name="chevron-down" /></span>
       </button>
       <div v-if="overflowOpen" class="menu" role="menu" aria-label="More table actions">
         <div v-if="swatches.length" class="menu-section" role="none">
@@ -765,7 +614,7 @@ function uniqueKeys<T>(
                 :data-action="item.action"
                 :class="{ danger: item.danger }"
               >
-                <UiIcon :name="item.icon" />
+                <UiIcon class="ui-icon" :name="item.icon" />
                 <span>{{ item.label }}</span>
               </button></KeyedBoundary>
           </div></KeyedBoundary>
@@ -775,189 +624,165 @@ function uniqueKeys<T>(
 </template>
 
 <style scoped>
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] {
-  min-width: max-content;
-  min-height: 100%;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  backdrop-filter: none;
-}
-
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button {
-  min-height: 44px;
-  background: transparent;
-}
-
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active,
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle));
-}
-
-[data-component~="ui-editor-table-toolbar"] {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1);
-  padding: var(--ui-space-1);
-  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-  backdrop-filter: blur(10px);
-}
-
-.group {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  overflow: hidden;
-}
-
-.sep {
-  width: 1px;
-  align-self: stretch;
-  background: var(--ui-border-divider);
-}
-
-.overflow {
-  position: relative;
-}
-
-[data-component~="ui-editor-table-toolbar"] button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-space-2);
-  min-height: 32px;
-  border: 0;
-  border-radius: var(--ui-radius-sm);
-  background: transparent;
-  color: var(--ui-text-primary);
-  cursor: pointer;
-  font-size: var(--ui-font-size-sm);
-  font-weight: 500;
-  line-height: 1;
-  padding: var(--ui-space-2) var(--ui-space-2);
-  white-space: nowrap;
-}
-
-[data-component~="ui-editor-table-toolbar"] button:hover {
-  background: var(--ui-surface-hover);
-}
-
-[data-component~="ui-editor-table-toolbar"] button.active {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle));
-  color: var(--ui-accent-active);
-}
-
-.group button {
-  border-radius: var(--ui-radius-sm);
-}
-
-.group button + button {
-  border-left: 0;
-}
-
-[data-component~="ui-editor-table-toolbar"] .more {
-  border: 0;
-  border-radius: var(--ui-radius-sm);
-}
-
-[data-component~="ui-editor-table-toolbar"] button.danger {
-  color: var(--ui-danger);
-}
-
-[data-component~="ui-editor-table-toolbar"] {
-  --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
-  --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
-}
-
-.chevron {
-  display: inline-flex;
-  --_ui-default-icon-size: 0.875rem;
-}
-
-[data-component~="ui-editor-table-toolbar"] .icon-button {
-  width: 32px;
-  padding-inline: 0;
-}
-
-.menu {
-  box-sizing: border-box;
-  position: fixed;
-  inset: auto;
-  margin: 0;
-  min-width: 12rem;
-  max-width: min(17rem, calc(100vw - 24px));
-  padding: var(--ui-space-1);
-  background: var(--ui-surface);
-  border: var(--ui-border-width) solid var(--ui-border-strong);
-  border-radius: var(--ui-radius-md);
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  z-index: 2;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: thin;
-}
-
-.menu-section + .menu-section {
-  margin-top: var(--ui-space-1);
-  padding-top: var(--ui-space-1);
-  border-top: var(--ui-border-width) solid var(--ui-border-divider);
-}
-
-.menu-heading {
-  padding: var(--ui-space-1) var(--ui-space-2);
-  font-size: var(--ui-font-size-2xs);
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--ui-text-muted);
-}
-
-.menu button {
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  text-align: left;
-}
-
-.swatches {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 2px;
-}
-
-[data-component~="ui-editor-table-toolbar"] .swatch-button {
-  gap: var(--ui-space-1);
-  justify-content: flex-start;
-}
-
-.swatch {
-  width: 14px;
-  height: 14px;
-  flex: 0 0 14px;
-  border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-border) 80%, #000);
-  border-radius: var(--ui-radius-round);
-  background: var(--_swatch);
-}
-
-.swatch.default {
-  background:
-    linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
-    var(--ui-surface);
-}
-
-.swatch-button.selected {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle));
-}
-
-[data-component~="ui-editor-table-toolbar"][hidden] {
-  display: none;
+@scope (.ui-editor-table-toolbar) to (.ui-icon) {
+  :scope:where(:scope):is(.looma-editor__mobile-toolbar-shell *) {
+    min-width: max-content;
+    min-height: 100%;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+  .looma-editor__mobile-toolbar-shell :scope button {
+    min-height: 44px;
+    background: transparent;
+  }
+  .looma-editor__mobile-toolbar-shell :scope button.active,
+  .looma-editor__mobile-toolbar-shell :scope button.selected {
+    background: var(--ui-accent-soft, var(--ui-accent-subtle));
+  }
+  :scope:where(:scope) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ui-space-1);
+    padding: var(--ui-space-1);
+    background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: calc(var(--ui-radius-md) + 2 * var(--ui-border-width));
+    box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    backdrop-filter: blur(10px);
+  }
+  .group {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    overflow: hidden;
+  }
+  .sep {
+    width: 1px;
+    align-self: stretch;
+    background: var(--ui-border-divider);
+  }
+  .overflow {
+    position: relative;
+  }
+  :scope button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-2);
+    min-height: 32px;
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+    background: transparent;
+    color: var(--ui-text-primary);
+    cursor: pointer;
+    font-size: var(--ui-font-size-sm);
+    font-weight: 500;
+    line-height: 1;
+    padding: var(--ui-space-2) var(--ui-space-2);
+    white-space: nowrap;
+  }
+  :scope button:hover {
+    background: var(--ui-surface-hover);
+  }
+  :scope button.active {
+    background: var(--ui-accent-soft, var(--ui-accent-subtle));
+    color: var(--ui-accent-active);
+  }
+  .group button {
+    border-radius: var(--ui-radius-sm);
+  }
+  .group button + button {
+    border-left: 0;
+  }
+  :scope .more {
+    border: 0;
+    border-radius: var(--ui-radius-sm);
+  }
+  :scope button.danger {
+    color: var(--ui-danger);
+  }
+  :scope:where(:scope) {
+    --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+    --_ui-default-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+  }
+  .chevron {
+    display: inline-flex;
+    --_ui-default-icon-size: 0.875rem;
+  }
+  :scope .icon-button {
+    width: 32px;
+    padding-inline: 0;
+  }
+  .menu {
+    box-sizing: border-box;
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    min-width: 12rem;
+    max-width: min(17rem, calc(100vw - 24px));
+    padding: var(--ui-space-1);
+    background: var(--ui-surface);
+    border: var(--ui-border-width) solid var(--ui-border-strong);
+    border-radius: var(--ui-radius-md);
+    box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    z-index: 2;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+  }
+  .menu-section + .menu-section {
+    margin-top: var(--ui-space-1);
+    padding-top: var(--ui-space-1);
+    border-top: var(--ui-border-width) solid var(--ui-border-divider);
+  }
+  .menu-heading {
+    padding: var(--ui-space-1) var(--ui-space-2);
+    font-size: var(--ui-font-size-2xs);
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--ui-text-muted);
+  }
+  .menu button {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    text-align: left;
+  }
+  .swatches {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 2px;
+  }
+  :scope .swatch-button {
+    gap: var(--ui-space-1);
+    justify-content: flex-start;
+  }
+  .swatch {
+    width: 14px;
+    height: 14px;
+    flex: 0 0 14px;
+    border: var(--ui-border-width) solid color-mix(in srgb, var(--ui-border) 80%, #000);
+    border-radius: var(--ui-radius-round);
+    background: var(--_swatch);
+  }
+  .swatch.default {
+    background:
+      linear-gradient(135deg, transparent 44%, var(--ui-danger) 46% 54%, transparent 56%),
+      var(--ui-surface);
+  }
+  .swatch-button.selected {
+    background: var(--ui-accent-soft, var(--ui-accent-subtle));
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>