@magmonium/one 0.4.29 → 0.4.31

package/fesm2022/magmonium-one-icon-Dso-9RMN.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-icon-Dso-9RMN.mjs","names":["catchError"],"sources":["../../../../libs/one/src/lib/shared/ui/icon/type/magmonium.ts","../../../../libs/one/src/lib/shared/ui/icon/model/shared-icons.ts","../../../../libs/one/src/lib/shared/ui/icon/lib/lib-icon.ts","../../../../libs/one/src/lib/shared/config/size-context.token.ts","../../../../libs/one/src/lib/shared/ui/icon/ui/icon.ts","../../../../libs/one/src/lib/shared/ui/icon/lib/custom-icon.ts","../../../../libs/one/src/lib/shared/ui/icon/ui/custom-icon.ts","../../../../libs/one/src/lib/shared/ui/icon/ui/custom-icon-edit.ts"],"sourcesContent":["export const MAGMONIUM = `\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-15 -15 120 165\">\n        <g>\n          <path fill=\"#color\"  style=\"opacity: 0.7;\" d=\"M5 5 L5 65 L85 65 Z\" />\n          <path fill=\"#color\"  style=\"opacity: 0.3;\" d=\"M85 5 L5 65 L85 65 Z\" />\n        </g>\n        <g>\n          <path fill=\"#color\"  style=\"opacity: 0.3;\" d=\"M5 70 L85 70 L5 130 Z\" />\n          <path fill=\"#color\"  style=\"opacity: 0.7;\" d=\"M85 70 L5 70 L85 130 Z\" />\n        </g>\n      </svg>\n  `;\n","// AUTO-GENERATED by assets:compile — do not edit manually\nexport const SHARED_ICONS = [\n  'accordion_chevron',\n  'account_balance_wallet',\n  'activity',\n  'add-image',\n  'adjust',\n  'alert-circle',\n  'analytics',\n  'apps',\n  'arrow-down',\n  'arrow-left',\n  'arrow-left-right',\n  'arrow-right',\n  'arrow-up',\n  'arrow_back',\n  'bell',\n  'bold',\n  'books',\n  'calendar',\n  'calendar-open',\n  'camera',\n  'chat',\n  'check',\n  'chevron-down',\n  'chevron-left',\n  'chevron-right',\n  'chevron-up',\n  'chevron_left',\n  'chevrons-down',\n  'chevrons-left',\n  'chevrons-right',\n  'chevrons-up',\n  'clipboard',\n  'code',\n  'coins',\n  'color-picker',\n  'copy',\n  'copyright',\n  'corner-left-up',\n  'currency_exchange',\n  'dot',\n  'download',\n  'ellipsis-vertical',\n  'exclamation-triangle',\n  'eye',\n  'eye_close',\n  'file-code',\n  'file-data',\n  'file-image',\n  'file-markup',\n  'file-style',\n  'file-text',\n  'fixed',\n  'flower',\n  'folder',\n  'games',\n  'gear',\n  'heading',\n  'heart',\n  'heart_filled',\n  'help',\n  'hero',\n  'info',\n  'install',\n  'instrument',\n  'investments',\n  'italic',\n  'language',\n  'layers',\n  'layouts',\n  'link',\n  'link-broken',\n  'list',\n  'loading',\n  'loading-bars',\n  'loading-dots',\n  'loading-logo',\n  'loading-pulse',\n  'location',\n  'lock',\n  'logo',\n  'magazines',\n  'mail',\n  'menu',\n  'mic',\n  'minus',\n  'monitor',\n  'more',\n  'notification',\n  'notification_off',\n  'open',\n  'pause',\n  'pencil',\n  'play',\n  'plus',\n  'posts',\n  'quote',\n  'redo',\n  'reload',\n  'reset',\n  'save',\n  'scissors',\n  'search',\n  'section',\n  'security',\n  'settings',\n  'shield',\n  'smartphone',\n  'sort-alpha-asc',\n  'sort-alpha-desc',\n  'sparkles',\n  'square',\n  'star',\n  'store',\n  'strategies',\n  'strikethrough',\n  'sun',\n  'table',\n  'tablet',\n  'target',\n  'theme',\n  'trash',\n  'trash-2',\n  'trending-down',\n  'trending-up',\n  'undo',\n  'user',\n  'users',\n  'wallet_manager',\n  'wallet_owner',\n  'wallet_shareholder',\n  'wand',\n  'wifi',\n  'x',\n  'zap',\n];\n","import { Icon, MAGMONIUM } from '../type/icon';\nimport { ElementRef } from '@angular/core';\nimport { SHARED_ICONS } from '../model/shared-icons';\nexport { SHARED_ICONS };\n\nexport function isOneIcon(element: ElementRef<HTMLElement>, config?: Icon) {\n  if (typeof config?.one !== 'undefined') {\n    return !!config.one;\n  }\n\n  // cast SHARED_ICONS to a generic string array for runtime includes check\n  if (config?.name && (SHARED_ICONS as readonly string[]).includes(config.name)) {\n    return true;\n  }\n\n  const tagName = element.nativeElement.tagName;\n  return tagName === 'M-ONE-ICON';\n}\n\nfunction textToSvg(str = MAGMONIUM, color: string): string {\n  if (typeof str !== 'string') return str as unknown as string;\n  return str.replace(/#color/g, color).replace(/currentColor/g, color);\n}\n\nexport function svgElementFromString(str: string, color: string): SVGElement {\n  const parser = new DOMParser();\n  const doc = parser.parseFromString(textToSvg(str, color), 'image/svg+xml');\n  const svg = doc.documentElement;\n\n  if (svg && svg.nodeName === 'svg') {\n    return svg as unknown as SVGElement;\n  }\n\n  const errorSvg = parser.parseFromString(textToSvg(MAGMONIUM, color), 'image/svg+xml');\n  return errorSvg.documentElement as unknown as SVGElement;\n}\n","import { inject, InjectionToken, Provider, Signal, Type } from '@angular/core';\nimport { Size } from '../enum/scaling/size';\n\n/**\n * The Size in force for a subtree. Provided by the only components that may\n * declare one — Section, ButtonGroup, and the markup-composed SectionButtonGroup\n * (the last two are one seat, ADR 0008) — and injected `{ optional: true }` by\n * each of them (so a declarer falls back to the nearest one above it) and by\n * the few primitives whose size is a box dimension rather than a font size.\n *\n * Most components need nothing: a declarer also sets `font-size` on its own\n * host, so anything measured in `em` follows through ordinary CSS inheritance.\n * The token exists for what inheritance cannot do — a ButtonGroup or\n * SectionButtonGroup overriding its Section, and Icon sizing a square glyph.\n * See ADR 0008.\n */\nexport interface SizeContext {\n  readonly size: Signal<Size>;\n}\n\nexport const SIZE_CONTEXT = new InjectionToken<SizeContext>('SIZE_CONTEXT');\n\nexport interface SizeDeclarer {\n  readonly resolvedSize: Signal<Size>;\n}\n\n/**\n * Publishes a declarer's resolved Size to its subtree. Goes in `providers` and\n * never `viewProviders`: a Section's Cols and a ButtonGroup's Buttons are\n * projected content, which only `providers` reaches.\n */\nexport function provideSizeContext(\n  declarer: Type<SizeDeclarer>\n): Provider {\n  return {\n    provide: SIZE_CONTEXT,\n    useFactory: (): SizeContext => ({ size: inject(declarer).resolvedSize }),\n  };\n}\n\n/**\n * The Size in force above a declarer. `skipSelf` because a declarer provides\n * SIZE_CONTEXT itself, and injecting its own provider would be circular — what\n * it wants is the nearest declarer *above* it, so that a Section with no Size\n * of its own takes its parent Section's and a ButtonGroup takes its Section's.\n */\nexport function injectParentSize(): SizeContext | null {\n  return inject(SIZE_CONTEXT, { optional: true, skipSelf: true });\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  model,\n  untracked,\n} from '@angular/core';\nimport { Icon, MAGMONIUM } from '../type/icon';\nimport { isOneIcon, svgElementFromString } from '../lib/lib-icon';\nimport { SIZE_CONTEXT } from '../../../config/size-context.token';\nimport { resolveIconSize } from '../../../functions/size/size-converter';\nimport { AssetStore } from '../../../stores/asset.store';\nimport { HttpService } from '../../../services/http';\nimport { rxResource } from '@angular/core/rxjs-interop';\nimport { catchError } from 'rxjs/operators';\nimport { of } from 'rxjs';\nimport { applyColorsToElement, ThemeStore } from '../../../lib/theme';\nimport { ICON_SOURCE } from '../../../config/tokens';\n\n@Component({\n  selector: 'm-icon, m-one-icon',\n  template: `<ng-content></ng-content>`,\n  styleUrls: ['./icon.sass'],\n  host: {\n    '[class.has-color]': 'resolvedConfig()?.color',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class IconComponent {\n  // Kept for the callers that hand an Icon a whole object rather than write it\n  // out — a Button naming its own glyph, a SectionFormItem passing a Field's.\n  config = model<Icon | undefined>(undefined);\n\n  // `name` is the SVG's filename in `mag_assets/icons/`, not a config asset:\n  // an Icon resolves artwork, so it is the one primitive whose name points at\n  // a picture rather than at a description of itself (ADR 0010). `size` is a\n  // free length (number → em), not a Size — Size stays on Section / ButtonGroup\n  // (ADR 0008); set here only to overwrite the box SIZE_CONTEXT would give.\n  readonly name = input<string | undefined>();\n  readonly color = input<string | undefined>();\n  readonly size = input<number | string | undefined>();\n  readonly one = input<boolean | undefined>();\n  readonly baseUrl = input<string | undefined>();\n  readonly remote = input<string | undefined>();\n\n  // Attributes win over the bound object, and an omitted one leaves the\n  // object's key standing rather than blanking it.\n  protected readonly resolvedConfig = computed<Icon | undefined>(() => {\n    const config = this.config();\n    const overrides: Icon = {};\n    const name = this.name();\n    if (name !== undefined) overrides.name = name;\n    const color = this.color();\n    if (color !== undefined) overrides.color = color;\n    const one = this.one();\n    if (one !== undefined) overrides.one = one;\n    const baseUrl = this.baseUrl();\n    if (baseUrl !== undefined) overrides.baseUrl = baseUrl;\n    const remote = this.remote();\n    if (remote !== undefined) overrides.remote = remote;\n    if (!config && !Object.keys(overrides).length) return undefined;\n    return { ...config, ...overrides };\n  });\n\n  private readonly elementRef = inject(ElementRef);\n  // Icon sizes a square glyph through width/height, which no amount of\n  // inherited font-size can set — so it is one of the few primitives that\n  // reads the Size in force directly (ADR 0008).\n  private readonly sizeContext = inject(SIZE_CONTEXT, { optional: true });\n  private readonly assetStore = inject(AssetStore);\n  private readonly http = inject(HttpService);\n  private currentSvgElement: SVGElement | null = null;\n  private readonly themeStore = inject(ThemeStore);\n  private readonly isOneIcon = computed(() =>\n    isOneIcon(this.elementRef, this.resolvedConfig())\n  );\n  private readonly remoteBaseUrl = computed<string | undefined>(() => {\n    const remoteId = this.resolvedConfig()?.remote;\n    return remoteId ? this.http.buildWcAssetBaseUrl(remoteId) : undefined;\n  });\n\n  // Icons supplied by name from memory (e.g. a visual editor's unsaved glyphs).\n  // Read as a signal rather than through the resource below so that changing the\n  // markup under an unchanged name repaints every icon already using it.\n  private readonly iconSource = inject(ICON_SOURCE, { optional: true });\n  private readonly inlineSvg = computed(() => {\n    const name = this.resolvedConfig()?.name;\n    return name ? this.iconSource?.()?.[name] : undefined;\n  });\n\n  private readonly text = rxResource({\n    params: computed(\n      () => ({\n        name: this.resolvedConfig()?.name,\n        isOneIcon: untracked(() => this.isOneIcon()),\n        remoteBaseUrl: this.remoteBaseUrl(),\n      }),\n      { equal: (a, b) => a?.name === b?.name && a?.remoteBaseUrl === b?.remoteBaseUrl }\n    ),\n    stream: ({ params: { name, isOneIcon, remoteBaseUrl } }) => {\n      if (!name) return untracked(() =>\n        this.assetStore.resolve<string>('icons', 'logo', true).pipe(catchError(() => of(MAGMONIUM)))\n      );\n      // Skips the request entirely for an in-memory glyph — there is no asset\n      // behind it, so fetching only ever produces a 404 and the fallback logo.\n      const inline = untracked(() => this.inlineSvg());\n      if (inline) return of(inline);\n      return untracked(() =>\n        this.assetStore\n          .resolve<string>('icons', name, isOneIcon, remoteBaseUrl)\n          .pipe(catchError(() => of(MAGMONIUM)))\n      );\n    },\n  });\n\n  private readonly pallet = computed(() =>\n    applyColorsToElement(\n      this.resolvedConfig()?.color ?? this.themeStore.color()?.mm ?? '#fff',\n      this.themeStore.color(),\n      this.elementRef.nativeElement\n    )\n  );\n\n  constructor() {\n    effect(this.updateElement);\n    effect(this.applySize);\n  }\n\n  private readonly applySize = (): void => {\n    this.elementRef.nativeElement.style.setProperty(\n      '--m-icon-size',\n      resolveIconSize(this.size(), this.sizeContext?.size())\n    );\n  };\n\n  private readonly updateElement = (): void => {\n    const element = this.elementRef.nativeElement;\n    if (this.currentSvgElement) {\n      this.currentSvgElement.remove();\n      this.currentSvgElement = null;\n    }\n    const svg = svgElementFromString(\n      this.inlineSvg() ?? (this.text.value() as string),\n      this.pallet()?.color ?? this.themeStore.color()?.mm ?? '#fff'\n    );\n    if (!svg) return;\n    this.currentSvgElement = svg;\n    svg.removeAttribute('width');\n    svg.removeAttribute('height');\n    svg.style.width = 'var(--m-icon-size, 1em)';\n    svg.style.height = 'var(--m-icon-size, 1em)';\n    svg.style.flexShrink = '0';\n    svg.removeAttribute('stroke-width');\n    svg.style.setProperty('stroke-width', '2px');\n    svg.querySelectorAll('*').forEach((el) => {\n      el.removeAttribute('stroke-width');\n      if (el instanceof HTMLElement || el instanceof SVGElement) {\n        el.style.removeProperty('stroke-width');\n      }\n    });\n    element.prepend(svg);\n  };\n}\n","import { CustomIcon } from '../type/icon';\nimport { ThemeColor } from '@magmonium/cli';\n\nfunction genColor(colors: ThemeColor, color: string) {\n  return colors[color as keyof ThemeColor] ?? color;\n}\n\nexport function isLargeImage(svg: CustomIcon): boolean {\n  const width = svg.width || 0;\n  const height = svg.height || 0;\n  const area = width * height;\n  return area > 2000000 || width > 2000 || height > 2000;\n}\n\nexport function genViewPort(svg: CustomIcon | undefined) {\n  if (!svg) return '0 0 0 0';\n  const width = svg.width || 0;\n  const height = svg.height || 0;\n  return `0 0 ${width} ${height}`;\n}\n\nexport function computedFillColor(\n  svg: CustomIcon,\n  colors?: ThemeColor,\n  fillColor?: string\n) {\n  const { lineColor, backgroundColor, invertSvg } = svg.edit;\n  if (!colors) {\n    return fillColor ?? backgroundColor;\n  }\n  return genColor(\n    colors,\n    invertSvg ? lineColor : (fillColor ?? backgroundColor)\n  );\n}\n\nexport function computeLineColor(\n  svg: CustomIcon,\n  colors?: ThemeColor,\n  strokeColor?: string\n) {\n  const { lineColor, backgroundColor, invertSvg } = svg.edit;\n  if (!colors) {\n    return strokeColor ?? lineColor;\n  }\n  return genColor(\n    colors,\n    invertSvg ? backgroundColor : (strokeColor ?? lineColor)\n  );\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  inject,\n  input,\n} from '@angular/core';\nimport { CustomIcon } from '../type/icon';\nimport {\n  computedFillColor,\n  computeLineColor,\n  genViewPort,\n  isLargeImage,\n} from '../lib/custom-icon';\nimport { ThemeStore } from '../../../lib/theme';\n\n@Component({\n  selector: 'm-custom-icon',\n  template: `\n    <!-- eslint-disable local/no-raw-svg -->\n    @if (svg(); as svg) {\n      <svg\n        xmlns=\"http:/www.w3.org/2000/svg\"\n        [attr.viewBox]=\"viewBox()\"\n        [attr.width]=\"svg.width\"\n        [attr.height]=\"svg.height\"\n        preserveAspectRatio=\"xMidYMid meet\"\n      >\n        @if (_fillColor(); as fillColor) {\n          <rect\n            [attr.width]=\"svg.width\"\n            [attr.height]=\"svg.height\"\n            [attr.fill]=\"fillColor\"\n          />\n        }\n        @if (_strokeColor(); as stroke) {\n          @for (path of svg?.paths; track $index) {\n            <path\n              class=\"svg-path\"\n              [attr.d]=\"path\"\n              [attr.fill]=\"'none'\"\n              [attr.stroke]=\"stroke\"\n              [attr.stroke-linecap]=\"svg?.edit?.linecap\"\n              [attr.stroke-linejoin]=\"svg?.edit?.linejoin\"\n              [attr.stroke-width]=\"svg.edit.strokeWidth\"\n              [attr.vector-effect]=\"vectorEffect()\"\n            />\n          }\n        }\n      </svg>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CustomIconClass {\n  svg = input.required<CustomIcon>();\n  strokeColor = input<string | undefined>(undefined);\n  fillColor = input<string | undefined>(undefined);\n  strokeWidth = input<number | undefined>(undefined);\n\n  protected readonly viewBox = computed(() => genViewPort(this.svg()));\n  protected readonly vectorEffect = computed(() => {\n    return isLargeImage(this.svg()) ? 'non-scaling-stroke' : null;\n  });\n  private readonly themeStore = inject(ThemeStore);\n  protected readonly _fillColor = computed(() =>\n    computedFillColor(this.svg(), this.themeStore.color(), this.fillColor())\n  );\n  protected readonly _strokeColor = computed(() => {\n    return computeLineColor(\n      this.svg(),\n      this.themeStore.color(),\n      this.strokeColor()\n    );\n  });\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  HostListener,\n  computed,\n  inject,\n  input,\n  model,\n} from '@angular/core';\nimport { CustomIcon } from '../type/icon';\nimport {\n  computedFillColor,\n  computeLineColor,\n  genViewPort,\n  isLargeImage,\n} from '../lib/custom-icon';\nimport { ThemeStore } from '../../../lib/theme';\n\n@Component({\n  selector: 'm-custom-icon-edit',\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <!-- eslint-disable local/no-raw-svg -->\n    @if (svg(); as svg) {\n      <svg\n        xmlns=\"http:/www.w3.org/2000/svg\"\n        [attr.viewBox]=\"_viewBox()\"\n        [attr.width]=\"svg.width\"\n        [attr.height]=\"svg.height\"\n        preserveAspectRatio=\"xMidYMid meet\"\n      >\n        @if (_fillColor(); as fillColor) {\n          <rect\n            [attr.width]=\"svg.width\"\n            [attr.height]=\"svg.height\"\n            [attr.fill]=\"fillColor\"\n          />\n        }\n        @for (path of svg.paths; track $index) {\n          <path\n            class=\"svg-path\"\n            (click)=\"_onPathClick($index)\"\n            [class.interactive]=\"svg.edit.canInteract\"\n            [class.selected]=\"_selectedIndex.includes($index)\"\n            [attr.d]=\"path\"\n            [attr.fill]=\"'none'\"\n            [attr.stroke]=\"_strokeColor()\"\n            [attr.stroke-linecap]=\"svg.edit.linecap\"\n            [attr.stroke-linejoin]=\"svg.edit.linejoin\"\n            [attr.stroke-width]=\"svg.edit.strokeWidth\"\n            [attr.vector-effect]=\"_vectorEffect()\"\n          />\n        }\n      </svg>\n    }\n  `,\n  styleUrl: './custom-icon-edit.sass',\n})\nexport class CustomIconEditComponent {\n  svg = model<CustomIcon | undefined>(undefined);\n  strokeColor = input<string | undefined>(undefined);\n  fillColor = input<string | undefined>(undefined);\n\n  private readonly themeStore = inject(ThemeStore);\n\n  @HostListener('window:keydown', ['$event'])\n  onKeydown(event: KeyboardEvent) {\n    if (!this.svg()?.edit?.canInteract || this._selectedIndex.length === 0) {\n      return;\n    }\n    if (event.key === ' ') {\n      event.preventDefault();\n      this.deleteSelectedPaths();\n    } else if (event.key === 'Escape') {\n      event.preventDefault();\n      this._selectedIndex = [];\n    }\n  }\n\n  protected readonly _viewBox = computed(() => genViewPort(this.svg()));\n\n  protected readonly _vectorEffect = computed(() => {\n    const svg = this.svg();\n    return svg && isLargeImage(svg) ? 'non-scaling-stroke' : null;\n  });\n\n  protected readonly _fillColor = computed(() => {\n    const svg = this.svg();\n    if (!svg) return undefined;\n    return computedFillColor(svg, this.themeStore.color(), this.fillColor());\n  });\n\n  protected readonly _strokeColor = computed(() => {\n    const svg = this.svg();\n    if (!svg) return undefined;\n    return computeLineColor(svg, this.themeStore.color(), this.strokeColor());\n  });\n\n  protected readonly _onPathClick = (index: number) => {\n    if (!this.svg()?.edit?.canInteract) return;\n    this._selectedIndex = Array.from(new Set([...this._selectedIndex, index]));\n  };\n\n  readonly deleteSelectedPaths = () => {\n    this.svg.update((prev) => {\n      if (!prev) return prev;\n      return {\n        ...prev,\n        paths: prev.paths.filter((_, i) => !this._selectedIndex.includes(i)),\n      };\n    });\n    this._selectedIndex = [];\n  };\n\n  protected _selectedIndex: number[] = [];\n}\n"],"mappings":";;;;;;;;AAAA,MAAa,YAAY;;;;;;;;;;;;ACCzB,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD;ACnID,SAAgB,UAAU,SAAkC,QAAa;CACvE,IAAI,OAAO,QAAQ,QAAQ,aACzB,OAAO,CAAC,CAAC,OAAO;CAIlB,IAAI,QAAQ,QAAS,aAAmC,SAAS,OAAO,IAAI,GAC1E,OAAO;CAIT,OADgB,QAAQ,cAAc,YACnB;AACrB;AAEA,SAAS,UAAU,MAAM,WAAW,OAAa;CAC/C,IAAI,OAAO,QAAQ,UAAU,OAAO;CACpC,OAAO,IAAI,QAAQ,WAAW,KAAK,CAAC,CAAC,QAAQ,iBAAiB,KAAK;AACrE;AAEA,SAAgB,qBAAqB,KAAa,OAAa;CAC7D,MAAM,SAAS,IAAI,UAAS;CAE5B,MAAM,MADM,OAAO,gBAAgB,UAAU,KAAK,KAAK,GAAG,eAC9C,CAAA,CAAI;CAEhB,IAAI,OAAO,IAAI,aAAa,OAC1B,OAAO;CAIT,OADiB,OAAO,gBAAgB,UAAU,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"}

package/fesm2022/magmonium-one-image-editor-C7AtzEf6.mjs

@@ -0,0 +1,438 @@
+import { t as ButtonComponent } from "./magmonium-one-button-rVNnp6G8.mjs";
+import { t as HeaderComponent } from "./magmonium-one-header-DPVnaEOV.mjs";
+import { t as InputType } from "./magmonium-one-input-DqHPorA1.mjs";
+import { t as RangeInputComponent } from "./magmonium-one-range-CmmZAr57.mjs";
+import { a as initialFraming, c as parseRatio, i as encodeFramed, l as renameForType, n as cropRect, r as drawFramed, s as outputSize, t as clampFraming } from "./magmonium-one-image-frame-BTSaUSAi.mjs";
+import { MODAL_REF } from "./magmonium-one.mjs";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, computed, effect, inject, input, signal, viewChild } from "@angular/core";
+const WHEEL_ZOOM_RATE = .0015;
+const distance = (a, b) => Math.hypot(a.x - b.x, a.y - b.y);
+var ImageEditorComponent = class ImageEditorComponent {
+	file = input.required(...ngDevMode ? [{ debugName: "file" }] : /* istanbul ignore next */ []);
+	ratio = input.required(...ngDevMode ? [{ debugName: "ratio" }] : /* istanbul ignore next */ []);
+	width = input.required(...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	#modalRef = inject(MODAL_REF);
+	stage = viewChild("stage", ...ngDevMode ? [{ debugName: "stage" }] : /* istanbul ignore next */ []);
+	source = signal(void 0, ...ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []);
+	sourceUrl = signal(void 0, ...ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []);
+	isApplying = signal(false, ...ngDevMode ? [{ debugName: "isApplying" }] : /* istanbul ignore next */ []);
+	framing = signal({
+		cx: 0,
+		cy: 0,
+		zoom: 1
+	}, ...ngDevMode ? [{ debugName: "framing" }] : /* istanbul ignore next */ []);
+	stageWidth = signal(0, ...ngDevMode ? [{ debugName: "stageWidth" }] : /* istanbul ignore next */ []);
+	pointers = /* @__PURE__ */ new Map();
+	isPanning = signal(false, ...ngDevMode ? [{ debugName: "isPanning" }] : /* istanbul ignore next */ []);
+	#settled = false;
+	zoomConfig = computed(() => ({
+		name: "zoom",
+		label: "zoom",
+		type: InputType.RANGE,
+		min: 100,
+		max: 400
+	}), ...ngDevMode ? [{ debugName: "zoomConfig" }] : /* istanbul ignore next */ []);
+	aspect = computed(() => parseRatio(this.ratio()) ?? 1, ...ngDevMode ? [{ debugName: "aspect" }] : /* istanbul ignore next */ []);
+	output = computed(() => outputSize(this.ratio(), this.width()), ...ngDevMode ? [{ debugName: "output" }] : /* istanbul ignore next */ []);
+	sizeParams = computed(() => {
+		const size = this.output();
+		return {
+			width: String(size?.width ?? ""),
+			height: String(size?.height ?? "")
+		};
+	}, ...ngDevMode ? [{ debugName: "sizeParams" }] : /* istanbul ignore next */ []);
+	imageSize = computed(() => {
+		const bitmap = this.source();
+		return bitmap ? {
+			width: bitmap.width,
+			height: bitmap.height
+		} : void 0;
+	}, ...ngDevMode ? [{ debugName: "imageSize" }] : /* istanbul ignore next */ []);
+	zoomPercent = computed(() => String(Math.round(this.framing().zoom * 100)), ...ngDevMode ? [{ debugName: "zoomPercent" }] : /* istanbul ignore next */ []);
+	imageBox = computed(() => {
+		const image = this.imageSize();
+		const stage = this.stageWidth();
+		if (!image || !stage) return {
+			width: 0,
+			height: 0,
+			transform: "none"
+		};
+		const rect = cropRect(image, this.aspect(), this.framing());
+		const scale = stage / rect.width;
+		return {
+			width: image.width * scale,
+			height: image.height * scale,
+			transform: `translate(${-rect.x * scale}px, ${-rect.y * scale}px)`
+		};
+	}, ...ngDevMode ? [{ debugName: "imageBox" }] : /* istanbul ignore next */ []);
+	load = effect((onCleanup) => {
+		const file = this.file();
+		let cancelled = false;
+		const url = URL.createObjectURL(file);
+		this.sourceUrl.set(url);
+		createImageBitmap(file, { imageOrientation: "from-image" }).then((bitmap) => {
+			if (cancelled) {
+				bitmap.close();
+				return;
+			}
+			this.framing.set(initialFraming({
+				width: bitmap.width,
+				height: bitmap.height
+			}));
+			this.source.set(bitmap);
+		}).catch(() => {
+			if (!cancelled) this.settle({ unreadable: true });
+		});
+		onCleanup(() => {
+			cancelled = true;
+			URL.revokeObjectURL(url);
+			this.source()?.close();
+		});
+	}, ...ngDevMode ? [{ debugName: "load" }] : /* istanbul ignore next */ []);
+	measure = effect((onCleanup) => {
+		const stage = this.stage()?.nativeElement;
+		if (!stage) return;
+		this.stageWidth.set(stage.clientWidth);
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(([entry]) => this.stageWidth.set(entry.contentRect.width));
+		observer.observe(stage);
+		onCleanup(() => observer.disconnect());
+	}, ...ngDevMode ? [{ debugName: "measure" }] : /* istanbul ignore next */ []);
+	reportDismissal = inject(DestroyRef).onDestroy(() => this.settle(void 0));
+	onPointerDown = (event) => {
+		if (!this.source()) return;
+		event.currentTarget.setPointerCapture?.(event.pointerId);
+		this.pointers.set(event.pointerId, {
+			x: event.clientX,
+			y: event.clientY
+		});
+		this.isPanning.set(true);
+	};
+	onPointerMove = (event) => {
+		const previous = this.pointers.get(event.pointerId);
+		if (!previous) return;
+		const next = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		const others = [...this.pointers.entries()].filter(([id]) => id !== event.pointerId);
+		if (others.length === 1) {
+			const anchor = others[0][1];
+			const before = distance(previous, anchor);
+			if (before > 0) this.zoomBy(distance(next, anchor) / before);
+		} else if (others.length === 0) this.panBy(next.x - previous.x, next.y - previous.y);
+		this.pointers.set(event.pointerId, next);
+	};
+	onPointerUp = (event) => {
+		this.pointers.delete(event.pointerId);
+		this.isPanning.set(this.pointers.size > 0);
+	};
+	onWheel = (event) => {
+		if (!this.source()) return;
+		event.preventDefault();
+		this.zoomBy(Math.exp(-event.deltaY * WHEEL_ZOOM_RATE));
+	};
+	onZoom = (percent) => {
+		const zoom = Number(percent) / 100;
+		if (!Number.isFinite(zoom)) return;
+		this.updateFraming((framing) => ({
+			...framing,
+			zoom
+		}));
+	};
+	apply = async () => {
+		const bitmap = this.source();
+		const image = this.imageSize();
+		const output = this.output();
+		if (!bitmap || !image || !output || this.isApplying()) return;
+		this.isApplying.set(true);
+		try {
+			const rect = cropRect(image, this.aspect(), this.framing());
+			const blob = await encodeFramed(drawFramed(bitmap, rect, output));
+			const original = this.file();
+			this.settle({ file: new File([blob], renameForType(original.name, blob.type), {
+				type: blob.type,
+				lastModified: Date.now()
+			}) });
+		} catch {
+			this.settle({ unreadable: true });
+		}
+	};
+	panBy = (dx, dy) => {
+		const image = this.imageSize();
+		const stage = this.stageWidth();
+		if (!image || !stage) return;
+		const perPixel = cropRect(image, this.aspect(), this.framing()).width / stage;
+		this.updateFraming((framing) => ({
+			...framing,
+			cx: framing.cx - dx * perPixel,
+			cy: framing.cy - dy * perPixel
+		}));
+	};
+	zoomBy = (factor) => {
+		this.updateFraming((framing) => ({
+			...framing,
+			zoom: framing.zoom * factor
+		}));
+	};
+	updateFraming = (change) => {
+		const image = this.imageSize();
+		if (!image) return;
+		this.framing.update((framing) => clampFraming(image, this.aspect(), change(framing)));
+	};
+	settle = (result) => {
+		if (this.#settled) return;
+		this.#settled = true;
+		this.#modalRef.close(result);
+	};
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ImageEditorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: ImageEditorComponent,
+		isStandalone: true,
+		selector: "m-image-editor",
+		inputs: {
+			file: {
+				classPropertyName: "file",
+				publicName: "file",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ratio: {
+				classPropertyName: "ratio",
+				publicName: "ratio",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			}
+		},
+		viewQueries: [{
+			propertyName: "stage",
+			first: true,
+			predicate: ["stage"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="image-editor">
+      <m-header
+        [level]="3"
+        label="edit-image-size"
+        [params]="sizeParams()"
+      />
+      <div
+        #stage
+        class="image-editor__stage"
+        [style.aspect-ratio]="aspect()"
+        [style.--m-image-editor-aspect]="aspect()"
+        [class.image-editor__stage--panning]="isPanning()"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)"
+        (wheel)="onWheel($event)"
+      >
+        @if (sourceUrl(); as url) {
+          <img
+            class="image-editor__image"
+            [src]="url"
+            alt=""
+            draggable="false"
+            [style.width.px]="imageBox().width"
+            [style.height.px]="imageBox().height"
+            [style.transform]="imageBox().transform"
+          />
+        }
+      </div>
+      <m-range
+        [config]="zoomConfig()"
+        [value]="zoomPercent()"
+        (valueChange)="onZoom($event)"
+      />
+      <!-- asset: buttons/okay.yml. No cancel beside it: the Modal's own close
+           is the cancel, and it drops the image the same way. -->
+      <m-one-button
+        name="okay"
+        label="apply"
+        [disabled]="!source() || isApplying()"
+        (clicked)="apply()"
+      />
+    </div>
+  `,
+		isInline: true,
+		styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block}.image-editor{display:flex;flex-direction:column;gap:1rem;width:100%;min-width:0;padding:1.5rem}.image-editor__stage{position:relative;width:100%;max-width:calc((90vh - 16rem) * var(--m-image-editor-aspect, 1));margin-inline:auto;overflow:hidden;border:1px solid var(--m-border);background:var(--m-background-lite);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.image-editor__stage--panning{cursor:grabbing}.image-editor__image{position:absolute;top:0;left:0;max-width:none;transform-origin:0 0;pointer-events:none}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: ButtonComponent,
+				selector: "m-button,m-one-button",
+				inputs: [
+					"config",
+					"color",
+					"labelClass",
+					"fullWidth",
+					"nav",
+					"navParams",
+					"href",
+					"disabled",
+					"variant",
+					"name",
+					"baseUrl",
+					"one",
+					"remote",
+					"label",
+					"noTranslate",
+					"params",
+					"noNative",
+					"icon",
+					"isRightIcon",
+					"iconOnly",
+					"stacked",
+					"imgSrc",
+					"nonClickable",
+					"inverted",
+					"isSubmit",
+					"tabindex"
+				],
+				outputs: ["configChange", "clicked"]
+			},
+			{
+				kind: "component",
+				type: HeaderComponent,
+				selector: "m-header",
+				inputs: [
+					"level",
+					"label",
+					"icon",
+					"actionButton",
+					"actionLabel",
+					"noTranslate",
+					"params"
+				],
+				outputs: ["actionClick"]
+			},
+			{
+				kind: "component",
+				type: RangeInputComponent,
+				selector: "m-range"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ImageEditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "m-image-editor",
+			template: `
+    <div class="image-editor">
+      <m-header
+        [level]="3"
+        label="edit-image-size"
+        [params]="sizeParams()"
+      />
+      <div
+        #stage
+        class="image-editor__stage"
+        [style.aspect-ratio]="aspect()"
+        [style.--m-image-editor-aspect]="aspect()"
+        [class.image-editor__stage--panning]="isPanning()"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)"
+        (wheel)="onWheel($event)"
+      >
+        @if (sourceUrl(); as url) {
+          <img
+            class="image-editor__image"
+            [src]="url"
+            alt=""
+            draggable="false"
+            [style.width.px]="imageBox().width"
+            [style.height.px]="imageBox().height"
+            [style.transform]="imageBox().transform"
+          />
+        }
+      </div>
+      <m-range
+        [config]="zoomConfig()"
+        [value]="zoomPercent()"
+        (valueChange)="onZoom($event)"
+      />
+      <!-- asset: buttons/okay.yml. No cancel beside it: the Modal's own close
+           is the cancel, and it drops the image the same way. -->
+      <m-one-button
+        name="okay"
+        label="apply"
+        [disabled]="!source() || isApplying()"
+        (clicked)="apply()"
+      />
+    </div>
+  `,
+			imports: [
+				ButtonComponent,
+				HeaderComponent,
+				RangeInputComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			styles: ["@keyframes toggle-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}@keyframes thumb-slide{0%{transform:translate(0) scale(1)}50%{transform:translate(.3em) scale(.9)}to{transform:translate(.6em) scale(1)}}:host{display:block}.image-editor{display:flex;flex-direction:column;gap:1rem;width:100%;min-width:0;padding:1.5rem}.image-editor__stage{position:relative;width:100%;max-width:calc((90vh - 16rem) * var(--m-image-editor-aspect, 1));margin-inline:auto;overflow:hidden;border:1px solid var(--m-border);background:var(--m-background-lite);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.image-editor__stage--panning{cursor:grabbing}.image-editor__image{position:absolute;top:0;left:0;max-width:none;transform-origin:0 0;pointer-events:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		file: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "file",
+				required: true
+			}]
+		}],
+		ratio: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ratio",
+				required: true
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: true
+			}]
+		}],
+		stage: [{
+			type: i0.ViewChild,
+			args: ["stage", { isSignal: true }]
+		}]
+	}
+});
+export { ImageEditorComponent };
+
+//# sourceMappingURL=magmonium-one-image-editor-C7AtzEf6.mjs.map

package/fesm2022/magmonium-one-image-editor-C7AtzEf6.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"magmonium-one-image-editor-C7AtzEf6.mjs","names":[],"sources":["../../../../libs/one/src/lib/shared/ui/input/ui/file-upload-input/image-editor.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '../../../button/ui/button';\nimport { HeaderComponent } from '../../../header';\nimport { RangeInputComponent } from '../range/range';\nimport { InputType, RangeInput } from '../../model/input';\nimport { MODAL_REF, ModalRef } from '../../../../config/modal-ref';\nimport {\n  clampFraming,\n  cropRect,\n  drawFramed,\n  encodeFramed,\n  Framing,\n  FrameSize,\n  initialFraming,\n  MAX_ZOOM,\n  MIN_ZOOM,\n  outputSize,\n  parseRatio,\n  renameForType,\n} from './image-frame';\n\n/**\n * What an ImageEditor closes with. The framed file on an apply, `unreadable`\n * when the picture never decoded, and neither for a dismissal — a flat object\n * rather than a union, so the web-component build (no `strict`) reads it too.\n */\nexport type ImageEditorResult = { file?: File; unreadable?: boolean };\n\ntype Point = { x: number; y: number };\n\nconst WHEEL_ZOOM_RATE = 0.0015;\n\nconst distance = (a: Point, b: Point): number =>\n  Math.hypot(a.x - b.x, a.y - b.y);\n\n@Component({\n  selector: 'm-image-editor',\n  template: `\n    <div class=\"image-editor\">\n      <m-header\n        [level]=\"3\"\n        label=\"edit-image-size\"\n        [params]=\"sizeParams()\"\n      />\n      <div\n        #stage\n        class=\"image-editor__stage\"\n        [style.aspect-ratio]=\"aspect()\"\n        [style.--m-image-editor-aspect]=\"aspect()\"\n        [class.image-editor__stage--panning]=\"isPanning()\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (wheel)=\"onWheel($event)\"\n      >\n        @if (sourceUrl(); as url) {\n          <img\n            class=\"image-editor__image\"\n            [src]=\"url\"\n            alt=\"\"\n            draggable=\"false\"\n            [style.width.px]=\"imageBox().width\"\n            [style.height.px]=\"imageBox().height\"\n            [style.transform]=\"imageBox().transform\"\n          />\n        }\n      </div>\n      <m-range\n        [config]=\"zoomConfig()\"\n        [value]=\"zoomPercent()\"\n        (valueChange)=\"onZoom($event)\"\n      />\n      <!-- asset: buttons/okay.yml. No cancel beside it: the Modal's own close\n           is the cancel, and it drops the image the same way. -->\n      <m-one-button\n        name=\"okay\"\n        label=\"apply\"\n        [disabled]=\"!source() || isApplying()\"\n        (clicked)=\"apply()\"\n      />\n    </div>\n  `,\n  imports: [ButtonComponent, HeaderComponent, RangeInputComponent],\n  styleUrl: './image-editor.sass',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ImageEditorComponent {\n  readonly file = input.required<File>();\n  readonly ratio = input.required<string>();\n  readonly width = input.required<number>();\n\n  readonly #modalRef = inject<ModalRef<ImageEditorResult | undefined>>(MODAL_REF);\n  private readonly stage = viewChild<ElementRef<HTMLDivElement>>('stage');\n\n  protected readonly source = signal<ImageBitmap | undefined>(undefined);\n  protected readonly sourceUrl = signal<string | undefined>(undefined);\n  protected readonly isApplying = signal(false);\n  private readonly framing = signal<Framing>({ cx: 0, cy: 0, zoom: MIN_ZOOM });\n  private readonly stageWidth = signal(0);\n  private readonly pointers = new Map<number, Point>();\n  protected readonly isPanning = signal(false);\n  #settled = false;\n\n  protected readonly zoomConfig = computed<RangeInput>(() => ({\n    name: 'zoom',\n    label: 'zoom',\n    type: InputType.RANGE,\n    min: MIN_ZOOM * 100,\n    max: MAX_ZOOM * 100,\n  }));\n\n  protected readonly aspect = computed(() => parseRatio(this.ratio()) ?? 1);\n\n  private readonly output = computed<FrameSize | undefined>(() =>\n    outputSize(this.ratio(), this.width())\n  );\n\n  protected readonly sizeParams = computed(() => {\n    const size = this.output();\n    return {\n      width: String(size?.width ?? ''),\n      height: String(size?.height ?? ''),\n    };\n  });\n\n  private readonly imageSize = computed<FrameSize | undefined>(() => {\n    const bitmap = this.source();\n    return bitmap ? { width: bitmap.width, height: bitmap.height } : undefined;\n  });\n\n  protected readonly zoomPercent = computed(() =>\n    String(Math.round(this.framing().zoom * 100))\n  );\n\n  /** The whole picture laid out so the box shows exactly the crop. */\n  protected readonly imageBox = computed(() => {\n    const image = this.imageSize();\n    const stage = this.stageWidth();\n    if (!image || !stage) return { width: 0, height: 0, transform: 'none' };\n    const rect = cropRect(image, this.aspect(), this.framing());\n    const scale = stage / rect.width;\n    return {\n      width: image.width * scale,\n      height: image.height * scale,\n      transform: `translate(${-rect.x * scale}px, ${-rect.y * scale}px)`,\n    };\n  });\n\n  private readonly load = effect((onCleanup) => {\n    const file = this.file();\n    let cancelled = false;\n    const url = URL.createObjectURL(file);\n    this.sourceUrl.set(url);\n    // EXIF orientation applied here, so the geometry below and the <img> the\n    // stage draws agree on which way is up.\n    createImageBitmap(file, { imageOrientation: 'from-image' })\n      .then((bitmap) => {\n        if (cancelled) {\n          bitmap.close();\n          return;\n        }\n        this.framing.set(\n          initialFraming({ width: bitmap.width, height: bitmap.height })\n        );\n        this.source.set(bitmap);\n      })\n      .catch(() => {\n        if (!cancelled) this.settle({ unreadable: true });\n      });\n    onCleanup(() => {\n      cancelled = true;\n      URL.revokeObjectURL(url);\n      this.source()?.close();\n    });\n  });\n\n  private readonly measure = effect((onCleanup) => {\n    const stage = this.stage()?.nativeElement;\n    if (!stage) return;\n    this.stageWidth.set(stage.clientWidth);\n    if (typeof ResizeObserver === 'undefined') return;\n    const observer = new ResizeObserver(([entry]) =>\n      this.stageWidth.set(entry.contentRect.width)\n    );\n    observer.observe(stage);\n    onCleanup(() => observer.disconnect());\n  });\n\n  // The Modal's own close affordance destroys the body without a word, and a\n  // dismissal is a cancel: whoever opened the editor is still waiting.\n  private readonly reportDismissal = inject(DestroyRef).onDestroy(() =>\n    this.settle(undefined)\n  );\n\n  protected onPointerDown = (event: PointerEvent): void => {\n    if (!this.source()) return;\n    (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);\n    this.pointers.set(event.pointerId, { x: event.clientX, y: event.clientY });\n    this.isPanning.set(true);\n  };\n\n  protected onPointerMove = (event: PointerEvent): void => {\n    const previous = this.pointers.get(event.pointerId);\n    if (!previous) return;\n    const next = { x: event.clientX, y: event.clientY };\n    const others = [...this.pointers.entries()].filter(\n      ([id]) => id !== event.pointerId\n    );\n    if (others.length === 1) {\n      // Pinch: the gap between two fingers is the zoom.\n      const anchor = others[0][1];\n      const before = distance(previous, anchor);\n      if (before > 0) this.zoomBy(distance(next, anchor) / before);\n    } else if (others.length === 0) {\n      this.panBy(next.x - previous.x, next.y - previous.y);\n    }\n    this.pointers.set(event.pointerId, next);\n  };\n\n  protected onPointerUp = (event: PointerEvent): void => {\n    this.pointers.delete(event.pointerId);\n    this.isPanning.set(this.pointers.size > 0);\n  };\n\n  protected onWheel = (event: WheelEvent): void => {\n    if (!this.source()) return;\n    event.preventDefault();\n    this.zoomBy(Math.exp(-event.deltaY * WHEEL_ZOOM_RATE));\n  };\n\n  protected onZoom = (percent: string): void => {\n    const zoom = Number(percent) / 100;\n    if (!Number.isFinite(zoom)) return;\n    this.updateFraming((framing) => ({ ...framing, zoom }));\n  };\n\n  protected apply = async (): Promise<void> => {\n    const bitmap = this.source();\n    const image = this.imageSize();\n    const output = this.output();\n    if (!bitmap || !image || !output || this.isApplying()) return;\n    this.isApplying.set(true);\n    try {\n      const rect = cropRect(image, this.aspect(), this.framing());\n      const blob = await encodeFramed(drawFramed(bitmap, rect, output));\n      const original = this.file();\n      this.settle({\n        file: new File([blob], renameForType(original.name, blob.type), {\n          type: blob.type,\n          lastModified: Date.now(),\n        }),\n      });\n    } catch {\n      this.settle({ unreadable: true });\n    }\n  };\n\n  /** Screen pixels dragged, moved into source pixels at the current scale. */\n  private panBy = (dx: number, dy: number): void => {\n    const image = this.imageSize();\n    const stage = this.stageWidth();\n    if (!image || !stage) return;\n    const rect = cropRect(image, this.aspect(), this.framing());\n    const perPixel = rect.width / stage;\n    this.updateFraming((framing) => ({\n      ...framing,\n      cx: framing.cx - dx * perPixel,\n      cy: framing.cy - dy * perPixel,\n    }));\n  };\n\n  private zoomBy = (factor: number): void => {\n    this.updateFraming((framing) => ({\n      ...framing,\n      zoom: framing.zoom * factor,\n    }));\n  };\n\n  private updateFraming = (change: (framing: Framing) => Framing): void => {\n    const image = this.imageSize();\n    if (!image) return;\n    this.framing.update((framing) =>\n      clampFraming(image, this.aspect(), change(framing))\n    );\n  };\n\n  private settle = (result: ImageEditorResult | undefined): void => {\n    if (this.#settled) return;\n    this.#settled = true;\n    this.#modalRef.close(result);\n  };\n}\n"],"mappings":";;;;;;;;AAyCA,MAAM,kBAAkB;AAExB,MAAM,YAAY,GAAU,MAC1B,KAAK,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;AAsDjC,IAAa,uBAAb,MAAa,qBAAoB;CACtB,OAAO,MAAM,SAAgB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC7B,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEhC,YAAY,OAAgD,SAAS;CAC7D,QAAQ,UAAsC,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEpD,SAAS,OAAgC,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CACnD,YAAY,OAA2B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACjD,aAAa,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAC5B,UAAU,OAAgB;EAAE,IAAI;EAAG,IAAI;EAAG,MAAA;CAAc,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAC3D,aAAa,OAAO,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,2BAAW,IAAI,IAAG;CAChB,YAAY,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAC5C,WAAW;CAEQ,aAAa,gBAA4B;EAC1D,MAAM;EACN,OAAO;EACP,MAAM,UAAU;EAChB,KAAA;EACA,KAAA;CACD,IAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEgB,SAAS,eAAe,WAAW,KAAK,MAAK,CAAE,KAAK,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAExD,SAAS,eACxB,WAAW,KAAK,MAAK,GAAI,KAAK,MAAK,CAAE,GACtC,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEkB,aAAa,eAAc;EAC5C,MAAM,OAAO,KAAK,OAAM;EACxB,OAAO;GACL,OAAO,OAAO,MAAM,SAAS,EAAE;GAC/B,QAAQ,OAAO,MAAM,UAAU,EAAE;EAClC;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEe,YAAY,eAAqC;EAChE,MAAM,SAAS,KAAK,OAAM;EAC1B,OAAO,SAAS;GAAE,OAAO,OAAO;GAAO,QAAQ,OAAO;EAAM,IAAK;CACnE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,cAAc,eAC/B,OAAO,KAAK,MAAM,KAAK,QAAO,CAAE,CAAC,OAAO,GAAG,CAAC,GAC7C,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGkB,WAAW,eAAc;EAC1C,MAAM,QAAQ,KAAK,UAAS;EAC5B,MAAM,QAAQ,KAAK,WAAU;EAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,OAAO;GAAE,OAAO;GAAG,QAAQ;GAAG,WAAW;EAAM;EACrE,MAAM,OAAO,SAAS,OAAO,KAAK,OAAM,GAAI,KAAK,QAAO,CAAE;EAC1D,MAAM,QAAQ,QAAQ,KAAK;EAC3B,OAAO;GACL,OAAO,MAAM,QAAQ;GACrB,QAAQ,MAAM,SAAS;GACvB,WAAW,aAAa,CAAC,KAAK,IAAI,MAAK,MAAO,CAAC,KAAK,IAAI,MAAK;EAC9D;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEe,OAAO,QAAQ,cAAa;EAC3C,MAAM,OAAO,KAAK,KAAI;EACtB,IAAI,YAAY;EAChB,MAAM,MAAM,IAAI,gBAAgB,IAAI;EACpC,KAAK,UAAU,IAAI,GAAG;EAGtB,kBAAkB,MAAM,EAAE,kBAAkB,aAAY,CAAE,CAAC,CACxD,MAAM,WAAU;GACf,IAAI,WAAW;IACb,OAAO,MAAK;IACZ;GACF;GACA,KAAK,QAAQ,IACX,eAAe;IAAE,OAAO,OAAO;IAAO,QAAQ,OAAO;GAAM,CAAE,CAAC;GAEhE,KAAK,OAAO,IAAI,MAAM;EACxB,CAAC,CAAC,CACD,YAAW;GACV,IAAI,CAAC,WAAW,KAAK,OAAO,EAAE,YAAY,KAAI,CAAE;EAClD,CAAC;EACH,gBAAe;GACb,YAAY;GACZ,IAAI,gBAAgB,GAAG;GACvB,KAAK,OAAM,CAAE,EAAE,MAAK;EACtB,CAAC;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEe,UAAU,QAAQ,cAAa;EAC9C,MAAM,QAAQ,KAAK,MAAK,CAAE,EAAE;EAC5B,IAAI,CAAC,OAAO;EACZ,KAAK,WAAW,IAAI,MAAM,WAAW;EACrC,IAAI,OAAO,mBAAmB,aAAa;EAC3C,MAAM,WAAW,IAAI,gBAAgB,CAAC,WACpC,KAAK,WAAW,IAAI,MAAM,YAAY,KAAK,CAAC;EAE9C,SAAS,QAAQ,KAAK;EACtB,gBAAgB,SAAS,WAAU,CAAE;CACvC,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAIe,kBAAkB,OAAO,UAAU,CAAC,CAAC,gBACpD,KAAK,OAAO,MAAS,CAAC;CAGd,iBAAiB,UAA6B;EACtD,IAAI,CAAC,KAAK,OAAM,GAAI;EACnB,MAAM,cAA8B,oBAAoB,MAAM,SAAS;EACxE,KAAK,SAAS,IAAI,MAAM,WAAW;GAAE,GAAG,MAAM;GAAS,GAAG,MAAM;EAAO,CAAE;EACzE,KAAK,UAAU,IAAI,IAAI;CACzB;CAEU,iBAAiB,UAA6B;EACtD,MAAM,WAAW,KAAK,SAAS,IAAI,MAAM,SAAS;EAClD,IAAI,CAAC,UAAU;EACf,MAAM,OAAO;GAAE,GAAG,MAAM;GAAS,GAAG,MAAM;EAAO;EACjD,MAAM,SAAS,CAAC,GAAG,KAAK,SAAS,QAAO,CAAE,CAAC,CAAC,QACzC,CAAC,QAAQ,OAAO,MAAM,SAAS;EAElC,IAAI,OAAO,WAAW,GAAG;GAEvB,MAAM,SAAS,OAAO,EAAE,CAAC;GACzB,MAAM,SAAS,SAAS,UAAU,MAAM;GACxC,IAAI,SAAS,GAAG,KAAK,OAAO,SAAS,MAAM,MAAM,IAAI,MAAM;EAC7D,OAAO,IAAI,OAAO,WAAW,GAC3B,KAAK,MAAM,KAAK,IAAI,SAAS,GAAG,KAAK,IAAI,SAAS,CAAC;EAErD,KAAK,SAAS,IAAI,MAAM,WAAW,IAAI;CACzC;CAEU,eAAe,UAA6B;EACpD,KAAK,SAAS,OAAO,MAAM,SAAS;EACpC,KAAK,UAAU,IAAI,KAAK,SAAS,OAAO,CAAC;CAC3C;CAEU,WAAW,UAA2B;EAC9C,IAAI,CAAC,KAAK,OAAM,GAAI;EACpB,MAAM,eAAc;EACpB,KAAK,OAAO,KAAK,IAAI,CAAC,MAAM,SAAS,eAAe,CAAC;CACvD;CAEU,UAAU,YAAyB;EAC3C,MAAM,OAAO,OAAO,OAAO,IAAI;EAC/B,IAAI,CAAC,OAAO,SAAS,IAAI,GAAG;EAC5B,KAAK,eAAe,aAAa;GAAE,GAAG;GAAS;EAAI,EAAG;CACxD;CAEU,QAAQ,YAA0B;EAC1C,MAAM,SAAS,KAAK,OAAM;EAC1B,MAAM,QAAQ,KAAK,UAAS;EAC5B,MAAM,SAAS,KAAK,OAAM;EAC1B,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,UAAU,KAAK,WAAU,GAAI;EACvD,KAAK,WAAW,IAAI,IAAI;EACxB,IAAI;GACF,MAAM,OAAO,SAAS,OAAO,KAAK,OAAM,GAAI,KAAK,QAAO,CAAE;GAC1D,MAAM,OAAO,MAAM,aAAa,WAAW,QAAQ,MAAM,MAAM,CAAC;GAChE,MAAM,WAAW,KAAK,KAAI;GAC1B,KAAK,OAAO,EACV,MAAM,IAAI,KAAK,CAAC,IAAI,GAAG,cAAc,SAAS,MAAM,KAAK,IAAI,GAAG;IAC9D,MAAM,KAAK;IACX,cAAc,KAAK,IAAG;GACvB,CAAA,EACF,CAAA;EACH,QAAQ;GACN,KAAK,OAAO,EAAE,YAAY,KAAI,CAAE;EAClC;CACF;CAGQ,SAAS,IAAY,OAAoB;EAC/C,MAAM,QAAQ,KAAK,UAAS;EAC5B,MAAM,QAAQ,KAAK,WAAU;EAC7B,IAAI,CAAC,SAAS,CAAC,OAAO;EAEtB,MAAM,WADO,SAAS,OAAO,KAAK,OAAM,GAAI,KAAK,QAAO,CACvC,CAAA,CAAK,QAAQ;EAC9B,KAAK,eAAe,aAAa;GAC/B,GAAG;GACH,IAAI,QAAQ,KAAK,KAAK;GACtB,IAAI,QAAQ,KAAK,KAAK;EACvB,EAAC;CACJ;CAEQ,UAAU,WAAwB;EACxC,KAAK,eAAe,aAAa;GAC/B,GAAG;GACH,MAAM,QAAQ,OAAO;EACtB,EAAC;CACJ;CAEQ,iBAAiB,WAA+C;EACtE,MAAM,QAAQ,KAAK,UAAS;EAC5B,IAAI,CAAC,OAAO;EACZ,KAAK,QAAQ,QAAQ,YACnB,aAAa,OAAO,KAAK,OAAM,GAAI,OAAO,OAAO,CAAC,CAAC;CAEvD;CAEQ,UAAU,WAA+C;EAC/D,IAAI,KAAK,UAAU;EACnB,KAAK,WAAW;EAChB,KAAK,UAAU,MAAM,MAAM;CAC7B;CA5MW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,aAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAAA,CAAA,OAAA;GAAA,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UAlDrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6CT,UAAA;EAAA,QAAA,CAAA,0wBAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MACS;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,gBAAA,SAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA,CAAA,aAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAmB,UAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAIpD,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EApDhC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,UAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CT,SACQ;IAAC;IAAiB;IAAiB;GAAmB;GAAC,iBAE/C,wBAAwB;GAAM,QAAA,CAAA,0wBAAA;EAAA,CAAA;CAQgB,CAAA;CAAA,gBAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,SAAO,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}

package/fesm2022/magmonium-one-image-frame-BTSaUSAi.mjs

@@ -0,0 +1,116 @@
+const EDITABLE_TYPES = [
+	"image/png",
+	"image/jpeg",
+	"image/webp"
+];
+const isEditableImage = (file) => EDITABLE_TYPES.includes(file.type.toLowerCase());
+const parseRatio = (ratio) => {
+	if (typeof ratio !== "string") return void 0;
+	const match = /^\s*(\d+(?:\.\d+)?)\s*:\s*(\d+(?:\.\d+)?)\s*$/.exec(ratio);
+	if (!match) return void 0;
+	const width = Number(match[1]);
+	const height = Number(match[2]);
+	return width > 0 && height > 0 ? width / height : void 0;
+};
+const outputSize = (ratio, width) => {
+	const aspect = parseRatio(ratio);
+	const pixels = Math.round(Number(width));
+	if (!aspect || !Number.isFinite(pixels) || pixels < 1) return void 0;
+	return {
+		width: pixels,
+		height: Math.max(1, Math.round(pixels / aspect))
+	};
+};
+const coverCrop = (image, aspect) => image.width / image.height > aspect ? {
+	width: image.height * aspect,
+	height: image.height
+} : {
+	width: image.width,
+	height: image.width / aspect
+};
+const initialFraming = (image) => ({
+	cx: image.width / 2,
+	cy: image.height / 2,
+	zoom: 1
+});
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const clampFraming = (image, aspect, framing) => {
+	const zoom = clamp(framing.zoom, 1, 4);
+	const cover = coverCrop(image, aspect);
+	const halfW = cover.width / zoom / 2;
+	const halfH = cover.height / zoom / 2;
+	return {
+		zoom,
+		cx: clamp(framing.cx, halfW, image.width - halfW),
+		cy: clamp(framing.cy, halfH, image.height - halfH)
+	};
+};
+const cropRect = (image, aspect, framing) => {
+	const { cx, cy, zoom } = clampFraming(image, aspect, framing);
+	const cover = coverCrop(image, aspect);
+	const width = cover.width / zoom;
+	const height = cover.height / zoom;
+	return {
+		x: cx - width / 2,
+		y: cy - height / 2,
+		width,
+		height
+	};
+};
+const renameForType = (name, type) => {
+	const extension = type === "image/jpeg" ? "jpg" : type.split("/")[1] ?? "bin";
+	const dot = name.lastIndexOf(".");
+	return `${dot > 0 ? name.slice(0, dot) : name}.${extension}`;
+};
+const createCanvas = (size) => {
+	const canvas = document.createElement("canvas");
+	canvas.width = Math.max(1, Math.round(size.width));
+	canvas.height = Math.max(1, Math.round(size.height));
+	return canvas;
+};
+const smoothContext = (canvas) => {
+	const context = canvas.getContext("2d");
+	if (!context) throw new Error("2d canvas unavailable");
+	context.imageSmoothingEnabled = true;
+	context.imageSmoothingQuality = "high";
+	return context;
+};
+const drawFramed = (source, rect, output) => {
+	let from = source;
+	let area = rect;
+	while (area.width >= output.width * 2 && area.height >= output.height * 2) {
+		const step = createCanvas({
+			width: area.width / 2,
+			height: area.height / 2
+		});
+		smoothContext(step).drawImage(from, area.x, area.y, area.width, area.height, 0, 0, step.width, step.height);
+		from = step;
+		area = {
+			x: 0,
+			y: 0,
+			width: step.width,
+			height: step.height
+		};
+	}
+	const canvas = createCanvas(output);
+	smoothContext(canvas).drawImage(from, area.x, area.y, area.width, area.height, 0, 0, canvas.width, canvas.height);
+	return canvas;
+};
+const ENCODE_QUALITY = .9;
+const toBlob = (canvas, type) => new Promise((resolve) => canvas.toBlob(resolve, type, ENCODE_QUALITY));
+const hasTransparency = (canvas) => {
+	const { data } = smoothContext(canvas).getImageData(0, 0, canvas.width, canvas.height);
+	for (let i = 3; i < data.length; i += 4) if (data[i] < 255) return true;
+	return false;
+};
+const encodeFramed = async (canvas) => {
+	const webp = await toBlob(canvas, "image/webp");
+	if (webp?.type === "image/webp") return webp;
+	const type = hasTransparency(canvas) ? "image/png" : "image/jpeg";
+	const fallback = await toBlob(canvas, type);
+	if (!fallback) throw new Error("canvas encode failed");
+	return fallback;
+};
+export { initialFraming as a, parseRatio as c, encodeFramed as i, renameForType as l, cropRect as n, isEditableImage as o, drawFramed as r, outputSize as s, clampFraming as t };
+
+//# sourceMappingURL=magmonium-one-image-frame-BTSaUSAi.mjs.map