@studiometa/ui 1.0.0-alpha.9 → 1.0.0-beta.0

package/{atoms/FigureVideo → FigureVideo}/FigureVideoTwicpics.twig

@@ -12,7 +12,7 @@
  */
 #}
 
-{% extends '@ui-pkg/atoms/FigureVideo/FigureVideo.twig' %}
+{% extends '@ui-pkg/FigureVideo/FigureVideo.twig' %}
 
 {% set twic_param = 'v1' %}
 {% if twic_transform is defined %}

package/{atoms/FigureVideo → FigureVideo}/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/atoms/FigureVideo/index.ts"],
+  "sources": ["../../packages/ui/FigureVideo/index.ts"],
   "sourcesContent": ["export * from './FigureVideo.js';\nexport * from './FigureVideoTwicpics.js';\n"],
   "mappings": "AAAA,cAAc;AACd,cAAc;",
   "names": []

package/{organisms/Frame → Frame}/Frame.js

@@ -122,7 +122,7 @@ class Frame extends Base {
     const doc = this.parseHTML(content);
     const el = doc.querySelector(`#${this.id}`);
     const newFrame = new Frame(el);
-    newFrame.$children.registerAll();
+    newFrame.__children.registerAll();
     this.$emit("after-fetch", url, content);
     this.$emit("before-leave");
     await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));

package/{organisms/Frame → Frame}/Frame.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/organisms/Frame/Frame.ts"],
-  "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\n\n/**\n * Get the scroll position.\n */\nfunction getScrollPosition() {\n  return {\n    left: window.pageXOffset,\n    top: window.pageYOffset,\n  };\n}\n\n/**\n * The fetch cache.\n */\nconst cache: Map<\n  string,\n  { promise: Promise<string>; status: 'pending' | 'resolved' | 'error'; content: string }\n> = new Map();\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    // eslint-disable-next-line no-use-before-define\n    Frame: Frame[];\n  };\n  $options: {\n    history: boolean;\n  };\n}\n\n/**\n * Class.\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: [\n      'before-fetch',\n      'after-fetch',\n      'before-leave',\n      'after-leave',\n      'before-content',\n      'after-content',\n      'before-enter',\n      'after-enter',\n    ],\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      Frame,\n    },\n    options: {\n      history: Boolean,\n    },\n  };\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * Get direct `FrameTarget` children.\n   */\n  get directChildrenFrameTarget(): FrameTarget[] {\n    return getDirectChildren(this, 'Frame', 'FrameTarget');\n  }\n\n  /**\n   * Prevent scroll top on unload.\n   */\n  onWindowUnload() {\n    const { history } = window;\n\n    if (!history.state) {\n      return;\n    }\n\n    history.replaceState(\n      {\n        ...history.state,\n        scroll: getScrollPosition(),\n      },\n      '',\n    );\n  }\n\n  /**\n   * Go to the previous URL on `popstate` event.\n   */\n  onWindowPopstate({ event }: { event: PopStateEvent }) {\n    this.goTo(window.location.href, null, event.state);\n  }\n\n  /**\n   * Prevent click on `FrameAnchor`.\n   */\n  onFrameAnchorClick({ target, event }: { event: MouseEvent, target: FrameAnchor }) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameAnchor', target)) {\n      return;\n    }\n\n    this.$log('onAFrameClick', target, event);\n    event.preventDefault();\n\n    // Do nothing when clicking links on the same page\n    // @todo handle hash change\n    if (target.href === window.location.href) {\n      return;\n    }\n\n    this.goTo(target.href);\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onFrameFormSubmit({ event, target }: { event: SubmitEvent, target: FrameForm }) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameForm', target)) {\n      return;\n    }\n\n    this.$log('onFrameFormFrameSubmit', target, event);\n    event.preventDefault();\n    const url = new URL(target.action);\n\n    if (target.$el.method === 'get') {\n      // @ts-ignore\n      url.search = new URLSearchParams(new FormData(target.$el)).toString();\n      this.goTo(url.toString());\n    }\n\n    if (target.$el.method === 'post') {\n      this.goTo(url.toString(), new FormData(target.$el));\n    }\n  }\n\n  /**\n   * Parge an HTML string into a DOM object.\n   */\n  parseHTML(string = '') {\n    return new DOMParser().parseFromString(string, 'text/html');\n  }\n\n  /**\n   * Go to the given url.\n   */\n  async goTo(url: string, formData: FormData = null, scroll: { top: number; left: number } = null) {\n    this.$log('goTo', url);\n    const parsedUrl = new URL(url);\n\n    if (parsedUrl.origin !== window.location.origin) {\n      throw new Error('Cross origin request are not allowed.');\n    }\n\n    this.$emit('before-fetch', url);\n\n    // @todo add option to use content as is or to parse it and extract the new frame\n    const content = await this.fetch(url, formData);\n    const doc = this.parseHTML(content);\n    const el = doc.querySelector(`#${this.id}`);\n    // @todo manage el === null\n    const newFrame = new Frame(el as HTMLElement);\n    newFrame.$children.registerAll();\n\n    this.$emit('after-fetch', url, content);\n\n    this.$emit('before-leave');\n    // Leave all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));\n\n    this.$emit('after-leave');\n    this.$emit('before-content');\n\n    // Update content\n    // @todo insert non existing FrameTarget as well\n    this.directChildrenFrameTarget.map((target, index) =>\n      target.updateContent(newFrame.directChildrenFrameTarget[index]),\n    );\n\n    // Push history\n    if (this.$options.history && formData === null) {\n      document.title = doc.title;\n      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });\n    }\n\n    if (scroll) {\n      document.scrollingElement.scrollTop = scroll.top;\n      document.scrollingElement.scrollLeft = scroll.left;\n    }\n\n    // Update components\n    await nextFrame();\n    this.$root.$update();\n    await nextFrame();\n\n    this.$emit('after-content');\n    this.$emit('before-enter');\n\n    // Enter all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));\n\n    this.$emit('after-enter');\n  }\n\n  /**\n   * Fetch the given url.\n   */\n  async fetch(url: string, formData: FormData = null): Promise<string> {\n    // @note skip cache for POST requests.\n    if (formData) {\n      const promise = fetch(url, {\n        method: 'post',\n        body: formData,\n      }).then((response) => response.text());\n\n      const content = await promise;\n      return content;\n    }\n\n    const cached = cache.get(url);\n\n    if (cached) {\n      if (cached.status === 'pending') {\n        return cached.promise;\n      }\n\n      return cached.content;\n    }\n\n    const promise = fetch(url).then((response) => response.text());\n\n    try {\n      cache.set(url, {\n        promise,\n        status: 'pending',\n        content: undefined,\n      });\n\n      const content = await promise;\n\n      cache.set(url, {\n        promise,\n        status: 'resolved',\n        content,\n      });\n\n      return content;\n    } catch (err) {\n      cache.set(url, {\n        promise,\n        status: 'error',\n        content: err,\n      });\n\n      return err;\n    }\n  }\n}\n"],
-  "mappings": "AAAA,SAAS,MAAM,eAAe,yBAAyB;AAEvD,SAAS,WAAW,mBAAmB;AACvC,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,mBAAmB;AAK5B,SAAS,oBAAoB;AAC3B,SAAO;AAAA,IACL,MAAM,OAAO;AAAA,IACb,KAAK,OAAO;AAAA,EACd;AACF;AAKA,MAAM,QAGF,oBAAI,IAAI;AAkBL,MAAM,cAA+C,KAAqB;AAAA;AAAA;AAAA;AAAA,EAI/E,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,IACX;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAK;AACP,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,4BAA2C;AAC7C,WAAO,kBAAkB,MAAM,SAAS,aAAa;AAAA,EACvD;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB;AACf,UAAM,EAAE,QAAQ,IAAI;AAEpB,QAAI,CAAC,QAAQ,OAAO;AAClB;AAAA,IACF;AAEA,YAAQ;AAAA,MACN;AAAA,QACE,GAAG,QAAQ;AAAA,QACX,QAAQ,kBAAkB;AAAA,MAC5B;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,iBAAiB,EAAE,MAAM,GAA6B;AACpD,SAAK,KAAK,OAAO,SAAS,MAAM,MAAM,MAAM,KAAK;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAmB,EAAE,QAAQ,MAAM,GAA+C;AAEhF,QAAI,CAAC,cAAc,MAAM,SAAS,eAAe,MAAM,GAAG;AACxD;AAAA,IACF;AAEA,SAAK,KAAK,iBAAiB,QAAQ,KAAK;AACxC,UAAM,eAAe;AAIrB,QAAI,OAAO,SAAS,OAAO,SAAS,MAAM;AACxC;AAAA,IACF;AAEA,SAAK,KAAK,OAAO,IAAI;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,kBAAkB,EAAE,OAAO,OAAO,GAA8C;AAE9E,QAAI,CAAC,cAAc,MAAM,SAAS,aAAa,MAAM,GAAG;AACtD;AAAA,IACF;AAEA,SAAK,KAAK,0BAA0B,QAAQ,KAAK;AACjD,UAAM,eAAe;AACrB,UAAM,MAAM,IAAI,IAAI,OAAO,MAAM;AAEjC,QAAI,OAAO,IAAI,WAAW,OAAO;AAE/B,UAAI,SAAS,IAAI,gBAAgB,IAAI,SAAS,OAAO,GAAG,CAAC,EAAE,SAAS;AACpE,WAAK,KAAK,IAAI,SAAS,CAAC;AAAA,IAC1B;AAEA,QAAI,OAAO,IAAI,WAAW,QAAQ;AAChC,WAAK,KAAK,IAAI,SAAS,GAAG,IAAI,SAAS,OAAO,GAAG,CAAC;AAAA,IACpD;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,SAAS,IAAI;AACrB,WAAO,IAAI,UAAU,EAAE,gBAAgB,QAAQ,WAAW;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,KAAK,KAAa,WAAqB,MAAM,SAAwC,MAAM;AAC/F,SAAK,KAAK,QAAQ,GAAG;AACrB,UAAM,YAAY,IAAI,IAAI,GAAG;AAE7B,QAAI,UAAU,WAAW,OAAO,SAAS,QAAQ;AAC/C,YAAM,IAAI,MAAM,uCAAuC;AAAA,IACzD;AAEA,SAAK,MAAM,gBAAgB,GAAG;AAG9B,UAAM,UAAU,MAAM,KAAK,MAAM,KAAK,QAAQ;AAC9C,UAAM,MAAM,KAAK,UAAU,OAAO;AAClC,UAAM,KAAK,IAAI,cAAc,IAAI,KAAK,EAAE,EAAE;AAE1C,UAAM,WAAW,IAAI,MAAM,EAAiB;AAC5C,aAAS,UAAU,YAAY;AAE/B,SAAK,MAAM,eAAe,KAAK,OAAO;AAEtC,SAAK,MAAM,cAAc;AAEzB,UAAM,QAAQ,IAAI,KAAK,0BAA0B,IAAI,CAAC,WAAW,OAAO,MAAM,CAAC,CAAC;AAEhF,SAAK,MAAM,aAAa;AACxB,SAAK,MAAM,gBAAgB;AAI3B,SAAK,0BAA0B;AAAA,MAAI,CAAC,QAAQ,UAC1C,OAAO,cAAc,SAAS,0BAA0B,KAAK,CAAC;AAAA,IAChE;AAGA,QAAI,KAAK,SAAS,WAAW,aAAa,MAAM;AAC9C,eAAS,QAAQ,IAAI;AACrB,kBAAY,EAAE,MAAM,UAAU,UAAU,QAAQ,UAAU,aAAa,CAAC;AAAA,IAC1E;AAEA,QAAI,QAAQ;AACV,eAAS,iBAAiB,YAAY,OAAO;AAC7C,eAAS,iBAAiB,aAAa,OAAO;AAAA,IAChD;AAGA,UAAM,UAAU;AAChB,SAAK,MAAM,QAAQ;AACnB,UAAM,UAAU;AAEhB,SAAK,MAAM,eAAe;AAC1B,SAAK,MAAM,cAAc;AAGzB,UAAM,QAAQ,IAAI,KAAK,0BAA0B,IAAI,CAAC,WAAW,OAAO,MAAM,CAAC,CAAC;AAEhF,SAAK,MAAM,aAAa;AAAA,EAC1B;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,MAAM,KAAa,WAAqB,MAAuB;AAEnE,QAAI,UAAU;AACZ,YAAMA,WAAU,MAAM,KAAK;AAAA,QACzB,QAAQ;AAAA,QACR,MAAM;AAAA,MACR,CAAC,EAAE,KAAK,CAAC,aAAa,SAAS,KAAK,CAAC;AAErC,YAAM,UAAU,MAAMA;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,SAAS,MAAM,IAAI,GAAG;AAE5B,QAAI,QAAQ;AACV,UAAI,OAAO,WAAW,WAAW;AAC/B,eAAO,OAAO;AAAA,MAChB;AAEA,aAAO,OAAO;AAAA,IAChB;AAEA,UAAM,UAAU,MAAM,GAAG,EAAE,KAAK,CAAC,aAAa,SAAS,KAAK,CAAC;AAE7D,QAAI;AACF,YAAM,IAAI,KAAK;AAAA,QACb;AAAA,QACA,QAAQ;AAAA,QACR,SAAS;AAAA,MACX,CAAC;AAED,YAAM,UAAU,MAAM;AAEtB,YAAM,IAAI,KAAK;AAAA,QACb;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,MACF,CAAC;AAED,aAAO;AAAA,IACT,SAAS,KAAK;AACZ,YAAM,IAAI,KAAK;AAAA,QACb;AAAA,QACA,QAAQ;AAAA,QACR,SAAS;AAAA,MACX,CAAC;AAED,aAAO;AAAA,IACT;AAAA,EACF;AACF;",
+  "sources": ["../../packages/ui/Frame/Frame.ts"],
+  "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { nextFrame, historyPush } from '@studiometa/js-toolkit/utils';\nimport { FrameAnchor } from './FrameAnchor.js';\nimport { FrameForm } from './FrameForm.js';\nimport { FrameTarget } from './FrameTarget.js';\n\n/**\n * Get the scroll position.\n */\nfunction getScrollPosition() {\n  return {\n    left: window.pageXOffset,\n    top: window.pageYOffset,\n  };\n}\n\n/**\n * The fetch cache.\n */\nconst cache: Map<\n  string,\n  { promise: Promise<string>; status: 'pending' | 'resolved' | 'error'; content: string }\n> = new Map();\n\nexport interface FrameProps extends BaseProps {\n  $children: {\n    FrameAnchor: FrameAnchor[];\n    FrameForm: FrameForm[];\n    FrameTarget: FrameTarget[];\n    // eslint-disable-next-line no-use-before-define\n    Frame: Frame[];\n  };\n  $options: {\n    history: boolean;\n  };\n}\n\n/**\n * Class.\n */\nexport class Frame<T extends BaseProps = BaseProps> extends Base<T & FrameProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Frame',\n    emits: [\n      'before-fetch',\n      'after-fetch',\n      'before-leave',\n      'after-leave',\n      'before-content',\n      'after-content',\n      'before-enter',\n      'after-enter',\n    ],\n    components: {\n      FrameAnchor,\n      FrameForm,\n      FrameTarget,\n      Frame,\n    },\n    options: {\n      history: Boolean,\n    },\n  };\n\n  /**\n   * Get uniq id.\n   */\n  get id() {\n    return this.$el.id;\n  }\n\n  /**\n   * Get direct `FrameTarget` children.\n   */\n  get directChildrenFrameTarget(): FrameTarget[] {\n    return getDirectChildren(this, 'Frame', 'FrameTarget');\n  }\n\n  /**\n   * Prevent scroll top on unload.\n   */\n  onWindowUnload() {\n    const { history } = window;\n\n    if (!history.state) {\n      return;\n    }\n\n    history.replaceState(\n      {\n        ...history.state,\n        scroll: getScrollPosition(),\n      },\n      '',\n    );\n  }\n\n  /**\n   * Go to the previous URL on `popstate` event.\n   */\n  onWindowPopstate({ event }: { event: PopStateEvent }) {\n    this.goTo(window.location.href, null, event.state);\n  }\n\n  /**\n   * Prevent click on `FrameAnchor`.\n   */\n  onFrameAnchorClick({ target, event }: { event: MouseEvent, target: FrameAnchor }) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameAnchor', target)) {\n      return;\n    }\n\n    this.$log('onAFrameClick', target, event);\n    event.preventDefault();\n\n    // Do nothing when clicking links on the same page\n    // @todo handle hash change\n    if (target.href === window.location.href) {\n      return;\n    }\n\n    this.goTo(target.href);\n  }\n\n  /**\n   * Prevent submit on forms.\n   */\n  onFrameFormSubmit({ event, target }: { event: SubmitEvent, target: FrameForm }) {\n    // Prevent propagation of nested frames\n    if (!isDirectChild(this, 'Frame', 'FrameForm', target)) {\n      return;\n    }\n\n    this.$log('onFrameFormFrameSubmit', target, event);\n    event.preventDefault();\n    const url = new URL(target.action);\n\n    if (target.$el.method === 'get') {\n      // @ts-ignore\n      url.search = new URLSearchParams(new FormData(target.$el)).toString();\n      this.goTo(url.toString());\n    }\n\n    if (target.$el.method === 'post') {\n      this.goTo(url.toString(), new FormData(target.$el));\n    }\n  }\n\n  /**\n   * Parge an HTML string into a DOM object.\n   */\n  parseHTML(string = '') {\n    return new DOMParser().parseFromString(string, 'text/html');\n  }\n\n  /**\n   * Go to the given url.\n   */\n  async goTo(url: string, formData: FormData = null, scroll: { top: number; left: number } = null) {\n    this.$log('goTo', url);\n    const parsedUrl = new URL(url);\n\n    if (parsedUrl.origin !== window.location.origin) {\n      throw new Error('Cross origin request are not allowed.');\n    }\n\n    this.$emit('before-fetch', url);\n\n    // @todo add option to use content as is or to parse it and extract the new frame\n    const content = await this.fetch(url, formData);\n    const doc = this.parseHTML(content);\n    const el = doc.querySelector(`#${this.id}`);\n    // @todo manage el === null\n    const newFrame = new Frame(el as HTMLElement);\n    newFrame.__children.registerAll();\n\n    this.$emit('after-fetch', url, content);\n\n    this.$emit('before-leave');\n    // Leave all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.leave()));\n\n    this.$emit('after-leave');\n    this.$emit('before-content');\n\n    // Update content\n    // @todo insert non existing FrameTarget as well\n    this.directChildrenFrameTarget.map((target, index) =>\n      target.updateContent(newFrame.directChildrenFrameTarget[index]),\n    );\n\n    // Push history\n    if (this.$options.history && formData === null) {\n      document.title = doc.title;\n      historyPush({ path: parsedUrl.pathname, search: parsedUrl.searchParams });\n    }\n\n    if (scroll) {\n      document.scrollingElement.scrollTop = scroll.top;\n      document.scrollingElement.scrollLeft = scroll.left;\n    }\n\n    // Update components\n    await nextFrame();\n    this.$root.$update();\n    await nextFrame();\n\n    this.$emit('after-content');\n    this.$emit('before-enter');\n\n    // Enter all\n    await Promise.all(this.directChildrenFrameTarget.map((target) => target.enter()));\n\n    this.$emit('after-enter');\n  }\n\n  /**\n   * Fetch the given url.\n   */\n  async fetch(url: string, formData: FormData = null): Promise<string> {\n    // @note skip cache for POST requests.\n    if (formData) {\n      const promise = fetch(url, {\n        method: 'post',\n        body: formData,\n      }).then((response) => response.text());\n\n      const content = await promise;\n      return content;\n    }\n\n    const cached = cache.get(url);\n\n    if (cached) {\n      if (cached.status === 'pending') {\n        return cached.promise;\n      }\n\n      return cached.content;\n    }\n\n    const promise = fetch(url).then((response) => response.text());\n\n    try {\n      cache.set(url, {\n        promise,\n        status: 'pending',\n        content: undefined,\n      });\n\n      const content = await promise;\n\n      cache.set(url, {\n        promise,\n        status: 'resolved',\n        content,\n      });\n\n      return content;\n    } catch (err) {\n      cache.set(url, {\n        promise,\n        status: 'error',\n        content: err,\n      });\n\n      return err;\n    }\n  }\n}\n"],
+  "mappings": "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",
   "names": ["promise"]
 }

package/{organisms/Frame → Frame}/FrameAnchor.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/organisms/Frame/FrameAnchor.ts"],
+  "sources": ["../../packages/ui/Frame/FrameAnchor.ts"],
   "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\nexport interface FrameAnchorProps extends BaseProps {\n  $el: HTMLAnchorElement;\n}\n\n/**\n * FrameAnchor class.\n */\nexport class FrameAnchor<T extends BaseProps = BaseProps> extends Base<T & FrameAnchorProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameAnchor',\n  };\n\n  /**\n   * Get the URL.\n   */\n  get href(): string {\n    return this.$el.href;\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAUd,MAAM,oBAAqD,KAA2B;AAAA;AAAA;AAAA;AAAA,EAI3F,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,OAAe;AACjB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;",
   "names": []

package/{organisms/Frame → Frame}/FrameForm.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/organisms/Frame/FrameForm.ts"],
+  "sources": ["../../packages/ui/Frame/FrameForm.ts"],
   "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface FrameFormProps extends BaseProps {\n  $el: HTMLFormElement;\n}\n\n/**\n * FrameForm class.\n */\nexport class FrameForm<T extends BaseProps = BaseProps> extends Base<T & FrameFormProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'FrameForm',\n  };\n\n  /**\n   * Get the form action.\n   */\n  get action(): string {\n    return this.$el.action;\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAUd,MAAM,kBAAmD,KAAyB;AAAA;AAAA;AAAA;AAAA,EAIvF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,SAAiB;AACnB,WAAO,KAAK,IAAI;AAAA,EAClB;AACF;",
   "names": []

package/{organisms/Frame → Frame}/FrameTarget.d.ts

@@ -1,5 +1,5 @@
 import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
-import { Transition } from '../../primitives/index.js';
+import { Transition } from '../Transition/index.js';
 export interface FrameTargetProps extends BaseProps {
     $options: {
         mode: 'replace' | 'prepend' | 'append';
@@ -25,7 +25,7 @@ export declare class FrameTarget<T extends BaseProps = BaseProps> extends Transi
     /**
      * Override options.
      */
-    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("#private/index.js").TransitionProps)["$options"];
+    get $options(): import("@studiometa/js-toolkit").BaseOptions & (T & FrameTargetProps & import("../index.js").TransitionProps)["$options"];
     /**
      * Get uniq ID.
      */

package/{organisms/Frame → Frame}/FrameTarget.js

@@ -1,5 +1,5 @@
 import { addClass, transition } from "@studiometa/js-toolkit/utils";
-import { Transition } from "../../primitives/index.js";
+import { Transition } from "../Transition/index.js";
 class FrameTarget extends Transition {
   /**
    * Config.

package/Frame/FrameTarget.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Frame/FrameTarget.ts"],
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { addClass, transition } from '@studiometa/js-toolkit/utils';\nimport { Transition } from '../Transition/index.js';\n\nexport interface FrameTargetProps extends BaseProps {\n  $options: {\n    mode: 'replace' | 'prepend' | 'append';\n    id: string;\n    leaveKeep: true;\n  };\n}\n\n/**\n * FrameTarget class.\n */\nexport class FrameTarget<T extends BaseProps = BaseProps> extends Transition<T & FrameTargetProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'FrameTarget',\n    log: true,\n    options: {\n      ...Transition.config.options,\n      mode: {\n        type: String,\n        default: 'replace', // or 'prepend' or 'append'\n      },\n      id: String,\n    },\n  };\n\n  /**\n   * Insert modes.\n   */\n  static __INSERT_MODES = {\n    prepend: 'afterbegin',\n    append: 'beforeend',\n  } as const;\n\n  /**\n   * Override options.\n   */\n  // @ts-ignore\n  get $options() {\n    const options = super.$options;\n\n    options.leaveKeep = true;\n\n    return options;\n  }\n\n  /**\n   * Get uniq ID.\n   */\n  get id(): string {\n    return this.$options.id ?? this.$el.id;\n  }\n\n  /**\n   * Enter transition.\n   */\n  async enter() {\n    this.$log('enter');\n\n    const { enterFrom: from, enterActive: active, enterTo: to, leaveTo, enterKeep } = this.$options;\n    const transitionStyles = { from, active, to };\n\n    switch (this.$options.mode) {\n      case 'append':\n      case 'prepend':\n        await Promise.all(\n          Array.from(this.$el.children)\n            .filter((child) =>\n              from.split(' ').every((className) => child.classList.contains(className)),\n            )\n            .map((child) =>\n              transition(child as HTMLElement, transitionStyles, enterKeep ? 'keep' : undefined),\n            ),\n        );\n        break;\n      case 'replace':\n      default:\n        transitionStyles.from = Array.from(new Set([from, leaveTo].flat())).join(' ');\n        await transition(this.$el, transitionStyles, enterKeep ? 'keep' : undefined);\n    }\n  }\n\n  /**\n   * Update the content from the new target.\n   * @param   {FrameTarget} newTarget The instance of the new target.\n   * @returns {void}\n   */\n  updateContent(newTarget: FrameTarget) {\n    // @todo manage 'prepend' and 'append' transition\n    // only the new content should have the transition\n    // - add the leaveTo and enterFrom classes to all `newTarget.children`\n    // - or wrap the new content in a custom div ?\n    switch (this.$options.mode) {\n      case 'prepend':\n      case 'append':\n        addClass(Array.from(newTarget.$el.children), this.$options.enterFrom.split(' '));\n        this.$el.insertAdjacentHTML(\n          FrameTarget.__INSERT_MODES[this.$options.mode],\n          newTarget.$el.innerHTML,\n        );\n        break;\n      case 'replace':\n      default:\n        this.$el.innerHTML = newTarget.$el.innerHTML;\n        break;\n    }\n  }\n}\n"],
+  "mappings": "AACA,SAAS,UAAU,kBAAkB;AACrC,SAAS,kBAAkB;AAapB,MAAM,oBAAqD,WAAiC;AAAA;AAAA;AAAA;AAAA,EAIjG,OAAO,SAAqB;AAAA,IAC1B,GAAG,WAAW;AAAA,IACd,MAAM;AAAA,IACN,KAAK;AAAA,IACL,SAAS;AAAA,MACP,GAAG,WAAW,OAAO;AAAA,MACrB,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,SAAS;AAAA;AAAA,MACX;AAAA,MACA,IAAI;AAAA,IACN;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,iBAAiB;AAAA,IACtB,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,WAAW;AACb,UAAM,UAAU,MAAM;AAEtB,YAAQ,YAAY;AAEpB,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,KAAa;AACf,WAAO,KAAK,SAAS,MAAM,KAAK,IAAI;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA,EAKA,MAAM,QAAQ;AACZ,SAAK,KAAK,OAAO;AAEjB,UAAM,EAAE,WAAW,MAAM,aAAa,QAAQ,SAAS,IAAI,SAAS,UAAU,IAAI,KAAK;AACvF,UAAM,mBAAmB,EAAE,MAAM,QAAQ,GAAG;AAE5C,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,cAAM,QAAQ;AAAA,UACZ,MAAM,KAAK,KAAK,IAAI,QAAQ,EACzB;AAAA,YAAO,CAAC,UACP,KAAK,MAAM,GAAG,EAAE,MAAM,CAAC,cAAc,MAAM,UAAU,SAAS,SAAS,CAAC;AAAA,UAC1E,EACC;AAAA,YAAI,CAAC,UACJ,WAAW,OAAsB,kBAAkB,YAAY,SAAS,MAAS;AAAA,UACnF;AAAA,QACJ;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,yBAAiB,OAAO,MAAM,KAAK,IAAI,IAAI,CAAC,MAAM,OAAO,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG;AAC5E,cAAM,WAAW,KAAK,KAAK,kBAAkB,YAAY,SAAS,MAAS;AAAA,IAC/E;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,cAAc,WAAwB;AAKpC,YAAQ,KAAK,SAAS,MAAM;AAAA,MAC1B,KAAK;AAAA,MACL,KAAK;AACH,iBAAS,MAAM,KAAK,UAAU,IAAI,QAAQ,GAAG,KAAK,SAAS,UAAU,MAAM,GAAG,CAAC;AAC/E,aAAK,IAAI;AAAA,UACP,YAAY,eAAe,KAAK,SAAS,IAAI;AAAA,UAC7C,UAAU,IAAI;AAAA,QAChB;AACA;AAAA,MACF,KAAK;AAAA,MACL;AACE,aAAK,IAAI,YAAY,UAAU,IAAI;AACnC;AAAA,IACJ;AAAA,EACF;AACF;",
+  "names": []
+}

package/{organisms/Frame → Frame}/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/organisms/Frame/index.ts"],
+  "sources": ["../../packages/ui/Frame/index.ts"],
   "sourcesContent": ["export * from './Frame.js';\nexport * from './FrameAnchor.js';\nexport * from './FrameForm.js';\nexport * from './FrameTarget.js';\n"],
   "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []

package/{organisms/Hero → Hero}/Hero.twig

@@ -108,7 +108,7 @@
   {% endblock %}
   {% block background %}
     {% if image.src %}
-      {% include '@ui/atoms/Figure/Figure.twig' with image only %}
+      {% include '@ui/Figure/Figure.twig' with image only %}
     {% endif %}
   {% endblock %}
   {% block content %}
@@ -138,7 +138,7 @@
         {% if actions %}
           <div {{ html_attributes(actions_attributes) }}>
             {% for action in actions %}
-              {% include '@ui/atoms/Button/StyledButtonRounded.twig' with action only %}
+              {% include '@ui/Button/StyledButtonRounded.twig' with action only %}
             {% endfor %}
           </div>
         {% endif %}

package/{atoms/Icon/IconInline.twig → Icon/Icon.twig}

@@ -23,7 +23,11 @@
 ) %}
 
 {%- set icon -%}
-  {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
+  {% if ':' in name %}
+    {{ meta_icon(name) }}
+  {% else %}
+    {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
+  {% endif %}
 {%- endset -%}
 
 {% if icon is not empty or not (ignore_missing ?? true)  %}

package/{atoms/Icon/IconInlineImg.twig → Icon/IconImg.twig}

@@ -12,7 +12,11 @@
  */
 #}
 {%- set svg -%}
-  {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
+  {% if ':' in name %}
+    {{ meta_icon(name) }}
+  {% else %}
+    {{ source('@svg/%s.svg'|format(name), ignore_missing = true) }}
+  {% endif %}
 {%- endset -%}
 
 {% if svg is not empty or not ignore_missing %}

package/{molecules/IconList → IconList}/IconList.twig

@@ -35,7 +35,7 @@
   {% for name, value in items %}
     {%- set rendered_icon -%}
       {%- block icon -%}
-        {%- include '@ui/atoms/Icon/IconInline.twig' with {
+        {%- include '@ui/Icon/Icon.twig' with {
           name: name,
           attr: icon_attributes,
           ignore_missing: true
@@ -47,16 +47,16 @@
       {% if value is iterable %}
         {% set href = value.attr.href ?? value.href ?? null %}
         {% set label = value.attr.label ?? value.label ?? (name|capitalize) %}
-        {% set title = value.attr.title ?? value.title %}
+        {% set title = value.attr.title ?? value.title ?? null %}
         {% set tag = value.tag
           ?? (action_tag|default(href is defined and href is not null ? 'a' : 'button'))
         %}
-        {% set current_attr = merge_html_attributes(value.attr ?? {}, action_attr) %}
+        {% set current_attr = merge_html_attributes(value.attr ?? {}, action_attr ?? {}) %}
       {% else %}
         {% set href = value %}
         {% set label = name|capitalize %}
         {% set tag = action_tag|default('a') %}
-        {% set current_attr = action_attr %}
+        {% set current_attr = action_attr ?? {} %}
       {% endif %}
 
       {% set action_attributes =

package/{organisms/ImageGrid → ImageGrid}/ImageGrid.twig

@@ -35,7 +35,7 @@
         }
       }) %}
       <div {{ html_attributes(image_attributes) }}>
-        {% include '@ui/atoms/Figure/Figure.twig' with image only %}
+        {% include '@ui/Figure/Figure.twig' with image only %}
       </div>
     {% endfor %}
   </div>

package/{atoms/LargeText → LargeText}/LargeText.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/atoms/LargeText/LargeText.ts"],
+  "sources": ["../../packages/ui/LargeText/LargeText.ts"],
   "sourcesContent": ["import { Base, withMountWhenInView } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface, ScrollServiceProps } from '@studiometa/js-toolkit';\nimport { damp, clamp, transform } from '@studiometa/js-toolkit/utils';\n\nexport interface LargeTextProps extends BaseProps {\n  $refs: {\n    target: HTMLElement;\n  };\n  $options: {\n    skew: boolean;\n    sensitivity: number;\n    skewSensitivity: number;\n  };\n}\n\n/**\n * Large text class.\n */\nexport class LargeText<T extends BaseProps = BaseProps>\n  extends withMountWhenInView(Base, { rootMargin: '50%' })<T & LargeTextProps>\n  implements BaseInterface\n{\n  /**\n   * Config.\n   */\n  static config = {\n    name: 'LargeText',\n    refs: ['target'],\n    options: {\n      skew: Boolean,\n      sensitivity: {\n        type: Number,\n        default: 1,\n      },\n      skewSensitivity: {\n        type: Number,\n        default: 1,\n      },\n    },\n  };\n\n  /**\n   * Translate X.\n   */\n  x = 0;\n\n  /**\n   * Scroll delta Y.\n   */\n  deltaY = 0;\n\n  /**\n   * Transform values.\n   */\n  transform = {\n    skewX: 0,\n    x: 0,\n  };\n\n  /**\n   * Target width.\n   */\n  width = 0;\n\n  /**\n   * Set width on mount.\n   */\n  mounted() {\n    this.width = this.$refs.target.clientWidth;\n  }\n\n  /**\n   * Set width on resize.\n   */\n  resized() {\n    this.width = this.$refs.target.clientWidth;\n  }\n\n  /**\n   * Update delta scroll on scroll.\n   */\n  scrolled(props: ScrollServiceProps) {\n    this.deltaY = props.delta.y;\n  }\n\n  /**\n   * Update values on raf.\n   */\n  ticked() {\n    this.x -= (Math.abs(this.deltaY) + 1) * this.$options.sensitivity;\n\n    this.transform.x = damp(this.x, this.transform.x, 0.25);\n\n    if (this.$options.skew) {\n      this.transform.skewX = damp(\n        clamp(this.deltaY * -1, -50, 50) * this.$options.skewSensitivity,\n        this.transform.skewX,\n        0.25,\n      );\n    }\n\n    if (this.x <= this.width * -1) {\n      this.x = 0;\n      this.transform.x += this.width;\n    } else if (this.$options.sensitivity < 0 && this.x >= this.width) {\n      this.x = 0;\n      this.transform.x -= this.width;\n    }\n\n    return () => {\n      transform(this.$refs.target, this.transform);\n    };\n  }\n}\n"],
   "mappings": "AAAA,SAAS,MAAM,2BAA2B;AAE1C,SAAS,MAAM,OAAO,iBAAiB;AAgBhC,MAAM,kBACH,oBAAoB,MAAM,EAAE,YAAY,MAAM,CAAC,EAEzD;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,QAAQ;AAAA,IACf,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,MACA,iBAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI;AAAA;AAAA;AAAA;AAAA,EAKJ,SAAS;AAAA;AAAA;AAAA;AAAA,EAKT,YAAY;AAAA,IACV,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,QAAQ;AAAA;AAAA;AAAA;AAAA,EAKR,UAAU;AACR,SAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,QAAQ,KAAK,MAAM,OAAO;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,OAA2B;AAClC,SAAK,SAAS,MAAM,MAAM;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS;AACP,SAAK,MAAM,KAAK,IAAI,KAAK,MAAM,IAAI,KAAK,KAAK,SAAS;AAEtD,SAAK,UAAU,IAAI,KAAK,KAAK,GAAG,KAAK,UAAU,GAAG,IAAI;AAEtD,QAAI,KAAK,SAAS,MAAM;AACtB,WAAK,UAAU,QAAQ;AAAA,QACrB,MAAM,KAAK,SAAS,IAAI,KAAK,EAAE,IAAI,KAAK,SAAS;AAAA,QACjD,KAAK,UAAU;AAAA,QACf;AAAA,MACF;AAAA,IACF;AAEA,QAAI,KAAK,KAAK,KAAK,QAAQ,IAAI;AAC7B,WAAK,IAAI;AACT,WAAK,UAAU,KAAK,KAAK;AAAA,IAC3B,WAAW,KAAK,SAAS,cAAc,KAAK,KAAK,KAAK,KAAK,OAAO;AAChE,WAAK,IAAI;AACT,WAAK,UAAU,KAAK,KAAK;AAAA,IAC3B;AAEA,WAAO,MAAM;AACX,gBAAU,KAAK,MAAM,QAAQ,KAAK,SAAS;AAAA,IAC7C;AAAA,EACF;AACF;",
   "names": []

package/{atoms/LargeText → LargeText}/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/atoms/LargeText/index.ts"],
+  "sources": ["../../packages/ui/LargeText/index.ts"],
   "sourcesContent": ["export * from './LargeText.js';\n"],
   "mappings": "AAAA,cAAc;",
   "names": []

package/{atoms/LazyInclude → LazyInclude}/LazyInclude.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/atoms/LazyInclude/LazyInclude.ts"],
+  "sources": ["../../packages/ui/LazyInclude/LazyInclude.ts"],
   "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseInterface } from '@studiometa/js-toolkit';\n\nexport interface LazyIncludeProps extends BaseProps {\n  $refs: {\n    loading: HTMLElement;\n    error: HTMLElement;\n  };\n  $options: {\n    src: string;\n    terminateOnLoad: boolean;\n  };\n}\n\n/**\n * LazyInclude class.\n */\nexport class LazyInclude<T extends BaseProps = BaseProps>\n  extends Base<T & LazyIncludeProps>\n  implements BaseInterface\n{\n  /**\n   * Config.\n   */\n  static config = {\n    name: 'LazyInclude',\n    refs: ['loading', 'error'],\n    emits: ['content', 'error', 'always'],\n    options: {\n      src: String,\n      terminateOnLoad: Boolean,\n    },\n  };\n\n  /**\n   * Load the lazy content on mount.\n   */\n  mounted() {\n    if (!this.$options.src) {\n      this.$log('The `src` option is missing. Define it with the `data-option-src` attribute');\n      return;\n    }\n\n    fetch(this.$options.src)\n      .then((response) => response.text())\n      .then((content) => {\n        this.$emit('content', content);\n      })\n      .catch((error) => {\n        this.$emit('error', error);\n      })\n      .finally(() => {\n        this.$emit('always');\n      });\n  }\n\n  /**\n   * Set content.\n   */\n  onContent({ args: [content] }: { args: [string] }) {\n    this.$refs.loading.style.display = 'none';\n    this.$el.innerHTML = content;\n  }\n\n  /**\n   * Set error.\n   */\n  onError() {\n    this.$refs.error.style.display = 'block';\n  }\n\n  /**\n   * Always.\n   */\n  onAlways() {\n    if (this.$options.terminateOnLoad) {\n      this.$terminate();\n    }\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAiBd,MAAM,oBACH,KAEV;AAAA;AAAA;AAAA;AAAA,EAIE,OAAO,SAAS;AAAA,IACd,MAAM;AAAA,IACN,MAAM,CAAC,WAAW,OAAO;AAAA,IACzB,OAAO,CAAC,WAAW,SAAS,QAAQ;AAAA,IACpC,SAAS;AAAA,MACP,KAAK;AAAA,MACL,iBAAiB;AAAA,IACnB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,QAAI,CAAC,KAAK,SAAS,KAAK;AACtB,WAAK,KAAK,6EAA6E;AACvF;AAAA,IACF;AAEA,UAAM,KAAK,SAAS,GAAG,EACpB,KAAK,CAAC,aAAa,SAAS,KAAK,CAAC,EAClC,KAAK,CAAC,YAAY;AACjB,WAAK,MAAM,WAAW,OAAO;AAAA,IAC/B,CAAC,EACA,MAAM,CAAC,UAAU;AAChB,WAAK,MAAM,SAAS,KAAK;AAAA,IAC3B,CAAC,EACA,QAAQ,MAAM;AACb,WAAK,MAAM,QAAQ;AAAA,IACrB,CAAC;AAAA,EACL;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU,EAAE,MAAM,CAAC,OAAO,EAAE,GAAuB;AACjD,SAAK,MAAM,QAAQ,MAAM,UAAU;AACnC,SAAK,IAAI,YAAY;AAAA,EACvB;AAAA;AAAA;AAAA;AAAA,EAKA,UAAU;AACR,SAAK,MAAM,MAAM,MAAM,UAAU;AAAA,EACnC;AAAA;AAAA;AAAA;AAAA,EAKA,WAAW;AACT,QAAI,KAAK,SAAS,iBAAiB;AACjC,WAAK,WAAW;AAAA,IAClB;AAAA,EACF;AACF;",
   "names": []

package/{atoms/LazyInclude → LazyInclude}/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/atoms/LazyInclude/index.ts"],
+  "sources": ["../../packages/ui/LazyInclude/index.ts"],
   "sourcesContent": ["export * from './LazyInclude.js';\n"],
   "mappings": "AAAA,cAAc;",
   "names": []

package/{molecules/MapboxStaticMap → MapboxStaticMap}/MapboxStaticMap.twig

@@ -45,7 +45,7 @@
  */
 #}
 
-{% extends '@ui-pkg/atoms/Figure/Figure.twig' %}
+{% extends '@ui-pkg/Figure/Figure.twig' %}
 
 {% set access_token = access_token|default('<MISSING_ACCESS_TOKEN>') %}
 {% set username = username|default('mapbox') %}

package/{molecules/Menu → Menu}/Menu.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/molecules/Menu/Menu.ts"],
+  "sources": ["../../packages/ui/Menu/Menu.ts"],
   "sourcesContent": ["import { Base, isDirectChild, getDirectChildren } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps, KeyServiceProps } from '@studiometa/js-toolkit';\nimport { nextTick } from '@studiometa/js-toolkit/utils';\nimport { MenuBtn } from './MenuBtn.js';\nimport { MenuList } from './MenuList.js';\n\nexport interface MenuProps extends BaseProps {\n  $children: {\n    // eslint-disable-next-line no-use-before-define\n    Menu: Menu[];\n    MenutBtn: MenuBtn[];\n    MenuList: MenuList[];\n  };\n  $options: {\n    mode: 'click' | 'hover';\n  };\n}\n\n/**\n * Menu class.\n */\nexport class Menu<T extends BaseProps = BaseProps> extends Base<T & MenuProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Menu',\n    components: {\n      MenuBtn,\n      MenuList,\n      Menu,\n    },\n    options: {\n      mode: {\n        type: String,\n        default: 'click', // or 'hover'\n      },\n    },\n  };\n\n  /**\n   * Get the first `MenuList` instance.\n   */\n  get menuList(): MenuList {\n    return getDirectChildren<MenuList>(this, 'Menu', 'MenuList')[0];\n  }\n\n  /**\n   * Get the first `MenuBtn` instance.\n   */\n  get menuBtn(): MenuBtn {\n    return getDirectChildren<MenuBtn>(this, 'Menu', 'MenuBtn')[0];\n  }\n\n  /**\n   * Test which mode to use.\n   */\n  get shouldReactOnClick(): boolean {\n    return this.$options.mode === 'click';\n  }\n\n  /**\n   * Wether the button or the items are hovered.\n   */\n  get isHover(): boolean {\n    return this.menuBtn.isHover || this.menuList.isHover;\n  }\n\n  /**\n   * Set attributes on mounted, destroy the component if it is missing required\n   * child components.\n   */\n  mounted() {\n    if (!this.menuBtn || !this.menuList) {\n      return this.$destroy();\n    }\n\n    this.menuBtn.$el.setAttribute('aria-controls', this.$id);\n    this.menuList.$el.setAttribute('id', this.$id);\n    this.menuList.close();\n  }\n\n  /**\n   * Keyboard management.\n   */\n  keyed({ ENTER, ESC, isUp }: KeyServiceProps) {\n    if (!isUp) {\n      return;\n    }\n\n    if (ESC) {\n      this.close();\n      return;\n    }\n\n    if (!this.shouldReactOnClick) {\n      const hasFocusElementWithin = document.activeElement === this.menuBtn.$el;\n\n      if (ENTER && hasFocusElementWithin) {\n        this.toggle();\n      }\n    }\n  }\n\n  /**\n   * Toggle menu items on button click.\n   */\n  onMenuBtnClick({ event, target }: { event: MouseEvent; target: MenuBtn }) {\n    if (isDirectChild(this, 'Menu', 'MenuBtn', target) && this.shouldReactOnClick) {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  /**\n   * Open menu items on button mouse enter.\n   */\n  onMenuBtnMouseenter({ target }: { target: MenuBtn }) {\n    if (target === this.menuBtn && !this.shouldReactOnClick) {\n      this.open();\n    }\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuBtnMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close menu items on button mouse leave.\n   */\n  onMenuListMouseleave() {\n    if (this.shouldReactOnClick) {\n      return;\n    }\n\n    nextTick(() => {\n      if (!this.isHover) {\n        this.close();\n      }\n    });\n  }\n\n  /**\n   * Close other non-parent menu items on menu items open.\n   */\n  onMenuListItemsOpen({ target }: { target: MenuList }) {\n    this.$children.MenuList.forEach((menuItem) => {\n      if (!menuItem.$el.contains(target.$el)) {\n        menuItem.close();\n      }\n    });\n  }\n\n  /**\n   * Close the menu.\n   */\n  close() {\n    this.menuList.close();\n  }\n\n  /**\n   * Open the menu.\n   */\n  open() {\n    this.menuList.open();\n  }\n\n  /**\n   * Toggle the menu.\n   */\n  toggle() {\n    this.menuList.toggle();\n  }\n}\n"],
   "mappings": "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",
   "names": []

package/{molecules/Menu → Menu}/MenuBtn.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/molecules/Menu/MenuBtn.ts"],
+  "sources": ["../../packages/ui/Menu/MenuBtn.ts"],
   "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\n\n/**\n * MenuBtn class.\n */\nexport class MenuBtn<T extends BaseProps = BaseProps> extends Base<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'MenuBtn',\n  };\n\n  /**\n   * Wether the button is hovered or not.\n   * @type {boolean}\n   */\n  isHover = false;\n\n  /**\n   * Dispatch the click event.\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onClick({ event }: { event: MouseEvent }) {\n    event.stopPropagation();\n  }\n\n  /**\n   * Dispatch the mouseenter event.\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onMouseenter({ event }: { event: MouseEvent }) {\n    this.isHover = true;\n    event.stopPropagation();\n  }\n\n  /**\n   * Dispatch the mouseleave event.\n   * @param   {MouseEvent} event\n   * @returns {void}\n   */\n  onMouseleave({ event }: { event: MouseEvent }) {\n    this.isHover = false;\n    event.stopPropagation();\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAMd,MAAM,gBAAiD,KAAQ;AAAA;AAAA;AAAA;AAAA,EAIpE,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOV,QAAQ,EAAE,MAAM,GAA0B;AACxC,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,EAAE,MAAM,GAA0B;AAC7C,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,aAAa,EAAE,MAAM,GAA0B;AAC7C,SAAK,UAAU;AACf,UAAM,gBAAgB;AAAA,EACxB;AACF;",
   "names": []

package/{molecules/Menu → Menu}/MenuList.d.ts

@@ -1,5 +1,5 @@
 import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';
-import { Transition } from '../../primitives/index.js';
+import { Transition } from '../Transition/index.js';
 export interface MenuListProps extends BaseProps {
     $children: {
         MenuList: MenuList[];
@@ -24,7 +24,7 @@ export declare class MenuList<T extends BaseProps = BaseProps> extends Transitio
     /**
      * Override `Transition` options.
      */
-    get $options(): import("@studiometa/js-toolkit/Base/managers/OptionsManager.js").OptionsManager & import("@studiometa/js-toolkit").BaseOptions & (T & MenuListProps & import("#private/index.js").TransitionProps)["$options"];
+    get $options(): import("@studiometa/js-toolkit").BaseOptions & (T & MenuListProps & import("../index.js").TransitionProps)["$options"];
     /**
      * Update tab indexes on mount.
      */

package/{molecules/Menu → Menu}/MenuList.js

@@ -1,4 +1,4 @@
-import { Transition } from "../../primitives/index.js";
+import { Transition } from "../Transition/index.js";
 const FOCUSABLE_ELEMENTS = [
   "a[href]:not([inert])",
   "area[href]:not([inert])",

package/Menu/MenuList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../packages/ui/Menu/MenuList.ts"],
+  "sourcesContent": ["import type { BaseConfig, BaseProps } from '@studiometa/js-toolkit';\nimport { Transition } from '../Transition/index.js';\n\nconst FOCUSABLE_ELEMENTS = [\n  'a[href]:not([inert])',\n  'area[href]:not([inert])',\n  'input:not([disabled]):not([inert])',\n  'select:not([disabled]):not([inert])',\n  'textarea:not([disabled]):not([inert])',\n  'button:not([disabled]):not([inert])',\n  'iframe:not([inert])',\n  'audio:not([inert])',\n  'video:not([inert])',\n  '[contenteditable]:not([inert])',\n  '[tabindex]:not([inert])',\n].join(',');\n\nexport interface MenuListProps extends BaseProps {\n  $children: {\n    // eslint-disable-next-line no-use-before-define\n    MenuList: MenuList[];\n  };\n}\n\n/**\n * MenuList class.\n */\nexport class MenuList<T extends BaseProps = BaseProps> extends Transition<T & MenuListProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...Transition.config,\n    name: 'MenuList',\n    emits: ['items-open', 'items-close', 'items-mouseleave'],\n    components: {\n      MenuList,\n    },\n  };\n\n  /**\n   * Are the menu items visible?\n   */\n  isOpen = false;\n\n  /**\n   * Wether the component is hovered.\n   */\n  isHover = false;\n\n  /**\n   * Override `Transition` options.\n   */\n  // @ts-ignore\n  get $options() {\n    const options = super.$options;\n\n    options.leaveKeep = true;\n    options.enterKeep = true;\n\n    return options;\n  }\n\n  /**\n   * Update tab indexes on mount.\n   */\n  mounted() {\n    this.__updateTabIndexes('close');\n  }\n\n  /**\n   * Set hover state.\n   */\n  onMouseenter() {\n    this.isHover = true;\n  }\n\n  /**\n   * Unset hover state.\n   */\n  onMouseleave() {\n    this.isHover = false;\n  }\n\n  /**\n   * Display the menu items.\n   */\n  open() {\n    if (this.isOpen) {\n      return;\n    }\n\n    // @todo Remove event listener when the close method is called.\n    const clickOutsideHandler = (event) => {\n      if (!this.$el.contains(event.target)) {\n        document.removeEventListener('click', clickOutsideHandler);\n        this.close();\n      }\n    };\n    document.addEventListener('click', clickOutsideHandler);\n\n    this.__updateTabIndexes('open');\n    this.$el.setAttribute('aria-hidden', 'false');\n    this.isOpen = true;\n    this.enter();\n    this.$emit('items-open');\n  }\n\n  /**\n   * Hide the menu items.\n   */\n  close() {\n    if (!this.isOpen) {\n      return;\n    }\n\n    // Close child menu items.\n    this.$children.MenuList.forEach((menuItem) => {\n      menuItem.close();\n    });\n\n    if (\n      document.activeElement instanceof HTMLElement &&\n      this.$el.contains(document.activeElement)\n    ) {\n      document.activeElement.blur();\n    }\n\n    this.$el.setAttribute('aria-hidden', 'true');\n    this.__updateTabIndexes('close');\n    this.isOpen = false;\n    this.leave();\n    this.$emit('items-close');\n  }\n\n  /**\n   * Toggle the menu items.\n   */\n  toggle() {\n    if (this.isOpen) {\n      this.close();\n    } else {\n      this.open();\n    }\n  }\n\n  /**\n   * Update `tabindex` attribute of child focusable elements.\n   * @private\n   */\n  __updateTabIndexes(mode: 'open' | 'close' = 'open') {\n    const focusableItems = Array.from(this.$el.querySelectorAll(FOCUSABLE_ELEMENTS)).filter(\n      (item) => this.__filterFocusableItems(item as HTMLElement),\n    );\n\n    focusableItems.forEach((item) => {\n      if (mode === 'close') {\n        item.setAttribute('tabindex', '-1');\n      } else {\n        item.removeAttribute('tabindex');\n      }\n    });\n  }\n\n  /**\n   * Filter out items which are inside a child `MenuList` instance.\n   * @private\n   */\n  __filterFocusableItems(item: HTMLElement): boolean {\n    let ancestor = item.parentElement;\n\n    // @ts-ignore\n    while (ancestor && (!ancestor.__base__ || !ancestor.__base__.has(this.constructor))) {\n      ancestor = ancestor.parentElement;\n    }\n\n    return ancestor === null || ancestor === this.$el;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/{molecules/Menu → Menu}/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/molecules/Menu/index.ts"],
+  "sources": ["../../packages/ui/Menu/index.ts"],
   "sourcesContent": ["export * from './Menu.js';\nexport * from './MenuBtn.js';\nexport * from './MenuList.js';\n"],
   "mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;",
   "names": []

package/{molecules/Modal → Modal}/Modal.d.ts

@@ -78,7 +78,7 @@ export declare class Modal<T extends BaseProps = BaseProps> extends Base<T & Mod
     /**
      * Add the moved refs to `this.$refs` when using the `move` options.
      */
-    get $refs(): import("@studiometa/js-toolkit/Base/managers").RefsManager & (T & ModalProps)["$refs"] & import("@studiometa/js-toolkit").BaseRefs;
+    get $refs(): (T & ModalProps)["$refs"] & import("@studiometa/js-toolkit").BaseRefs;
     /**
      * Unbind all events on destroy.
      */

package/{molecules/Modal → Modal}/Modal.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/molecules/Modal/Modal.ts"],
+  "sources": ["../../packages/ui/Modal/Modal.ts"],
   "sourcesContent": ["import { Base, KeyServiceProps } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport {\n  transition,\n  trapFocus as trap,\n  untrapFocus as untrap,\n  saveActiveElement,\n} from '@studiometa/js-toolkit/utils';\n\ntype ModalStates = Partial<\n  Record<'open' | 'active' | 'closed', string | Partial<CSSStyleDeclaration>>\n>;\n// eslint-disable-next-line no-use-before-define\ntype ModalStylesOption = Partial<Record<keyof ModalProps['$refs'], ModalStates>>;\n\nexport interface ModalProps extends BaseProps {\n  $refs: {\n    close: HTMLElement[];\n    container: HTMLElement;\n    content: HTMLElement;\n    modal: HTMLElement;\n    open: HTMLElement[];\n    overlay: HTMLElement;\n  };\n  $options: {\n    /**\n     * A selector where to move the modal to.\n     */\n    move: string;\n    /**\n     * A selector for the element to set the focus to when the modal opens.\n     */\n    autofocus: string;\n    /**\n     * Lock or allow scroll in the documentElement.\n     */\n    scrollLock: boolean;\n    /**\n     * The styles for the different state of the modal.\n     */\n    styles: ModalStylesOption;\n  };\n}\n\n/**\n * Modal class.\n */\nexport class Modal<T extends BaseProps = BaseProps> extends Base<T & ModalProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Modal',\n    refs: ['close[]', 'container', 'content', 'modal', 'open[]', 'overlay'],\n    emits: ['open', 'close'],\n    options: {\n      move: String,\n      autofocus: { type: String, default: '[autofocus]' },\n      styles: {\n        type: Object,\n        default: (): ModalStylesOption => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n              visibility: 'hidden',\n            },\n          },\n        }),\n      },\n      scrollLock: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Wether the modal is open or not.\n   */\n  isOpen = false;\n\n  /**\n   * @private\n   */\n  __refsBackup: (T & ModalProps)['$refs'];\n\n  /**\n   * @private\n   */\n  __refModalPlaceholder: Comment;\n\n  /**\n   * @private\n   */\n  __refModalParentBackup: HTMLElement;\n\n  /**\n   * @private\n   */\n  __refModalUnbindGetRefFilter: () => void;\n\n  /**\n   * Open the modal on click on the `open` ref.\n   */\n  get onOpenClick() {\n    return this.open;\n  }\n\n  /**\n   * Close the modal on click on the `close` ref.\n   */\n  get onCloseClick() {\n    return this.close;\n  }\n\n  /**\n   * Close the modal on click on the `overlay` ref.\n   * @returns {Function} The component's `close` method.\n   */\n  get onOverlayClick() {\n    return this.close;\n  }\n\n  /**\n   * Initialize the component's behaviours.\n   */\n  mounted() {\n    this.isOpen = false;\n    this.close();\n\n    if (this.$options.move) {\n      const target = document.querySelector(this.$options.move) || document.body;\n\n      this.__refsBackup = this.$refs;\n      this.__refModalPlaceholder = document.createComment('');\n      this.__refModalParentBackup = this.$refs.modal.parentElement || this.$el;\n      this.__refModalParentBackup.insertBefore(this.__refModalPlaceholder, this.$refs.modal);\n\n      target.append(this.$refs.modal);\n    }\n  }\n\n  /**\n   * Add the moved refs to `this.$refs` when using the `move` options.\n   */\n  get $refs() {\n    const $refs = super.$refs;\n\n    if (this.$options.move && this.__refsBackup) {\n      Object.entries(this.__refsBackup).forEach(([key, ref]) => {\n        if (!$refs[key]) {\n          // @ts-ignore\n          $refs[key] = ref;\n        }\n      });\n    }\n\n    return $refs;\n  }\n\n  /**\n   * Unbind all events on destroy.\n   */\n  destroyed() {\n    this.close();\n\n    if (this.$options.move && this.__refModalParentBackup) {\n      this.__refModalParentBackup.insertBefore(this.$refs.modal, this.__refModalPlaceholder);\n      this.__refModalPlaceholder.remove();\n      delete this.__refModalPlaceholder;\n      delete this.__refModalParentBackup;\n    }\n\n    return this;\n  }\n\n  /**\n   * Close the modal on `ESC` and trap the tabulation.\n   */\n  keyed({ event, isUp, isDown, ESC }: KeyServiceProps) {\n    if (!this.isOpen) {\n      return;\n    }\n\n    if (isDown) {\n      trap(this.$refs.modal, event);\n    }\n\n    if (ESC && isUp) {\n      this.close();\n    }\n  }\n\n  /**\n   * Open the modal.\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'false');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = 'hidden';\n    }\n\n    this.isOpen = true;\n    this.$emit('open');\n\n    /** @type {ModalRefs} */\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: closed,\n              active,\n              to: open,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => {\n      if (this.$options.autofocus && this.$refs.modal.querySelector(this.$options.autofocus)) {\n        saveActiveElement();\n        const autofocusElement = this.$refs.modal.querySelector(\n          this.$options.autofocus,\n        ) as HTMLElement;\n        autofocusElement.focus();\n      }\n      return Promise.resolve();\n    });\n  }\n\n  /**\n   * Close the modal.\n   */\n  async close() {\n    if (!this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.setAttribute('aria-hidden', 'true');\n\n    if (this.$options.scrollLock) {\n      document.documentElement.style.overflow = '';\n    }\n\n    this.isOpen = false;\n    untrap();\n    this.$emit('close');\n\n    const refs = this.$refs;\n\n    return Promise.all(\n      Object.entries(this.$options.styles).map(\n        ([refName, { open, active, closed } = { open: '', active: '', closed: '' }]) =>\n          transition(\n            refs[refName],\n            {\n              from: open,\n              active,\n              to: closed,\n            },\n            'keep',\n          ),\n      ),\n    ).then(() => Promise.resolve());\n  }\n}\n"],
   "mappings": "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",
   "names": []

package/{molecules/Modal → Modal}/Modal.twig

@@ -83,7 +83,7 @@
 
 <div {{ html_attributes(attributes) }}>
   {% block open %}
-    {% include '@ui/atoms/Button/Button.twig' with {
+    {% include '@ui/Button/Button.twig' with {
       label: 'Open',
       attr: { data_ref: 'open[]' }
     } %}
@@ -94,7 +94,7 @@
       <div {{ html_attributes(container_attributes) }}>
         {% block close %}
           <div class="absolute top-0 right-0 m-2">
-            {% include '@ui/atoms/Button/Button.twig' with {
+            {% include '@ui/Button/Button.twig' with {
               label: 'Close',
               attr: { data_ref: 'close[]' }
             } %}

package/{molecules/Modal → Modal}/ModalWithTransition.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/molecules/Modal/ModalWithTransition.ts"],
+  "sources": ["../../packages/ui/Modal/ModalWithTransition.ts"],
   "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { Modal } from './Modal.js';\n\n/**\n * ModalWithTransition class.\n */\nexport class ModalWithTransition<T extends BaseProps = BaseProps> extends Modal<T> {\n  /**\n   * Modal options.\n   */\n  static config: BaseConfig = {\n    name: 'ModalWithTransition',\n    options: {\n      styles: {\n        type: Object,\n        /**\n         * @returns {ModalStylesOption}\n         */\n        default: () => ({\n          modal: {\n            closed: {\n              opacity: '0',\n              pointerEvents: 'none',\n            },\n            active: 'transition duration-500 ease-out-expo',\n          },\n          overlay: {\n            closed: 'opacity-0',\n            active: 'transition duration-500 ease-out-expo',\n          },\n          container: {\n            closed: 'transform scale-95 opacity-0',\n            active: 'transition duration-500 ease-out-expo',\n          },\n        }),\n      },\n    },\n  };\n\n  open() {\n    this.$refs.modal.style.visibility = '';\n    return super.open();\n  }\n\n  async close() {\n    await super.close();\n    this.$refs.modal.style.visibility = 'hidden';\n    return Promise.resolve();\n  }\n}\n"],
   "mappings": "AACA,SAAS,aAAa;AAKf,MAAM,4BAA6D,MAAS;AAAA;AAAA;AAAA;AAAA,EAIjF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA;AAAA;AAAA,QAIN,SAAS,OAAO;AAAA,UACd,OAAO;AAAA,YACL,QAAQ;AAAA,cACN,SAAS;AAAA,cACT,eAAe;AAAA,YACjB;AAAA,YACA,QAAQ;AAAA,UACV;AAAA,UACA,SAAS;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,UACA,WAAW;AAAA,YACT,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO;AACL,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA,EAEA,MAAM,QAAQ;AACZ,UAAM,MAAM,MAAM;AAClB,SAAK,MAAM,MAAM,MAAM,aAAa;AACpC,WAAO,QAAQ,QAAQ;AAAA,EACzB;AACF;",
   "names": []

package/{molecules/Modal → Modal}/StyledModal.twig

@@ -23,10 +23,10 @@
  */
 #}
 
-{% extends '@ui/molecules/Modal/Modal.twig' %}
+{% extends '@ui/Modal/Modal.twig' %}
 
 {% block open %}
-  {% include '@ui/atoms/Button/StyledButton.twig' with {
+  {% include '@ui/Button/StyledButton.twig' with {
     label: 'Open',
     attr: { data_ref: 'open[]' }
   } %}
@@ -34,7 +34,7 @@
 
 {% block close %}
   <div class="absolute top-0 right-0 m-2">
-    {% include '@ui/atoms/Button/StyledButton.twig' with {
+    {% include '@ui/Button/StyledButton.twig' with {
       label: 'Close',
       attr: { data_ref: 'close[]' }
     } %}

package/{molecules/Modal → Modal}/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/molecules/Modal/index.ts"],
+  "sources": ["../../packages/ui/Modal/index.ts"],
   "sourcesContent": ["export * from './Modal.js';\nexport * from './ModalWithTransition.js';\n"],
   "mappings": "AAAA,cAAc;AACd,cAAc;",
   "names": []

package/{molecules/Panel → Panel}/Panel.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/molecules/Panel/Panel.ts"],
+  "sources": ["../../packages/ui/Panel/Panel.ts"],
   "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { transition, matrix } from '@studiometa/js-toolkit/utils';\nimport { Modal } from '../Modal/index.js';\n\nexport interface PanelProps extends BaseProps {\n  $options: {\n    position: 'top' | 'right' | 'bottom' | 'left';\n  };\n}\n\nconst DEFAULT_POSITION = 'left';\n\n/**\n * Panel class.\n */\nexport class Panel<T extends BaseProps = BaseProps> extends Modal<T & PanelProps> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'Panel',\n    options: {\n      position: {\n        type: String,\n        default: DEFAULT_POSITION,\n      },\n    },\n  };\n\n  static translateClasses = {\n    top: '-translate-y-full',\n    right: 'translate-x-full',\n    bottom: 'translate-y-full',\n    left: '-translate-x-full',\n  };\n\n  isClosing = false;\n\n  /**\n   * Get the translation class.\n   * @returns {string}\n   */\n  get translateClass() {\n    return (\n      Panel.translateClasses[this.$options.position] ?? Panel.translateClasses[DEFAULT_POSITION]\n    );\n  }\n\n  get containerOffset() {\n    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = this.$refs.container;\n\n    const store = {\n      top: {\n        translateY: (offsetTop + offsetHeight) * -1,\n      },\n      right: {\n        translateX: window.innerWidth - offsetLeft + offsetWidth * 2,\n      },\n      bottom: {\n        translateY: window.innerHeight - offsetTop + offsetHeight * 2,\n      },\n      left: {\n        translateX: (offsetLeft + offsetWidth) * -1,\n      },\n    };\n\n    return matrix(store[this.$options.position]);\n  }\n\n  /**\n   * Animate before opening.\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async open() {\n    if (this.isOpen) {\n      return Promise.resolve();\n    }\n\n    this.$refs.modal.classList.remove('pointer-events-none');\n    transition(\n      this.$refs.container,\n      {\n        from: {\n          transform: this.containerOffset,\n        },\n        to: {\n          transform: 'none',\n        },\n      },\n      'keep',\n    );\n    transition(this.$refs.overlay, {\n      from: 'opacity-0',\n    });\n\n    return super.open();\n  }\n\n  /**\n   * Animate before closing.\n   * @this {PanelInterface}\n   * @returns {Promise<void>}\n   */\n  async close() {\n    if (!this.isOpen || this.isClosing) {\n      return Promise.resolve();\n    }\n\n    this.isClosing = true;\n\n    this.$refs.modal.classList.add('pointer-events-none');\n    await Promise.all([\n      transition(\n        this.$refs.container,\n        {\n          from: {\n            transform: 'none',\n          },\n          to: {\n            transform: this.containerOffset,\n          },\n        },\n        'keep',\n      ),\n      transition(\n        this.$refs.overlay,\n        {\n          to: 'opacity-0',\n        },\n        'keep',\n      ),\n    ]);\n\n    this.isClosing = false;\n\n    return super.close();\n  }\n}\n"],
   "mappings": "AACA,SAAS,YAAY,cAAc;AACnC,SAAS,aAAa;AAQtB,MAAM,mBAAmB;AAKlB,MAAM,cAA+C,MAAsB;AAAA;AAAA;AAAA;AAAA,EAIhF,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EAEA,OAAO,mBAAmB;AAAA,IACxB,KAAK;AAAA,IACL,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EAEA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,EAMZ,IAAI,iBAAiB;AACnB,WACE,MAAM,iBAAiB,KAAK,SAAS,QAAQ,KAAK,MAAM,iBAAiB,gBAAgB;AAAA,EAE7F;AAAA,EAEA,IAAI,kBAAkB;AACpB,UAAM,EAAE,WAAW,YAAY,aAAa,aAAa,IAAI,KAAK,MAAM;AAExE,UAAM,QAAQ;AAAA,MACZ,KAAK;AAAA,QACH,aAAa,YAAY,gBAAgB;AAAA,MAC3C;AAAA,MACA,OAAO;AAAA,QACL,YAAY,OAAO,aAAa,aAAa,cAAc;AAAA,MAC7D;AAAA,MACA,QAAQ;AAAA,QACN,YAAY,OAAO,cAAc,YAAY,eAAe;AAAA,MAC9D;AAAA,MACA,MAAM;AAAA,QACJ,aAAa,aAAa,eAAe;AAAA,MAC3C;AAAA,IACF;AAEA,WAAO,OAAO,MAAM,KAAK,SAAS,QAAQ,CAAC;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,OAAO;AACX,QAAI,KAAK,QAAQ;AACf,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,MAAM,MAAM,UAAU,OAAO,qBAAqB;AACvD;AAAA,MACE,KAAK,MAAM;AAAA,MACX;AAAA,QACE,MAAM;AAAA,UACJ,WAAW,KAAK;AAAA,QAClB;AAAA,QACA,IAAI;AAAA,UACF,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA;AAAA,IACF;AACA,eAAW,KAAK,MAAM,SAAS;AAAA,MAC7B,MAAM;AAAA,IACR,CAAC;AAED,WAAO,MAAM,KAAK;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,MAAM,QAAQ;AACZ,QAAI,CAAC,KAAK,UAAU,KAAK,WAAW;AAClC,aAAO,QAAQ,QAAQ;AAAA,IACzB;AAEA,SAAK,YAAY;AAEjB,SAAK,MAAM,MAAM,UAAU,IAAI,qBAAqB;AACpD,UAAM,QAAQ,IAAI;AAAA,MAChB;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,MAAM;AAAA,YACJ,WAAW;AAAA,UACb;AAAA,UACA,IAAI;AAAA,YACF,WAAW,KAAK;AAAA,UAClB;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,QACE,KAAK,MAAM;AAAA,QACX;AAAA,UACE,IAAI;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,IACF,CAAC;AAED,SAAK,YAAY;AAEjB,WAAO,MAAM,MAAM;AAAA,EACrB;AACF;",
   "names": []

package/{molecules/Panel → Panel}/Panel.twig

@@ -10,7 +10,7 @@
  */
 #}
 
-{% extends '@ui/molecules/Modal/Modal.twig' %}
+{% extends '@ui/Modal/Modal.twig' %}
 
 {% set position = position ?? 'left' %}
 

package/{molecules/Panel → Panel}/StyledPanel.twig

@@ -10,14 +10,14 @@
  */
 #}
 
-{% extends '@ui/molecules/Panel/Panel.twig' %}
+{% extends '@ui/Panel/Panel.twig' %}
 
 {% set container_attr =
   merge_html_attributes(container_attr ?? null, required = { class: 'bg-white' })
 %}
 
 {% block open %}
-  {% include '@ui/atoms/Button/StyledButton.twig' with {
+  {% include '@ui/Button/StyledButton.twig' with {
     label: 'Open',
     attr: { data_ref: 'open[]' }
   } %}
@@ -25,7 +25,7 @@
 
 {% block close %}
   <div class="absolute top-0 right-0 m-2">
-    {% include '@ui/atoms/Button/StyledButton.twig' with {
+    {% include '@ui/Button/StyledButton.twig' with {
       label: 'Close',
       attr: { data_ref: 'close[]' }
     } %}

package/{molecules/Panel → Panel}/index.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/molecules/Panel/index.ts"],
+  "sources": ["../../packages/ui/Panel/index.ts"],
   "sourcesContent": ["export * from './Panel.js';\n"],
   "mappings": "AAAA,cAAc;",
   "names": []

package/{atoms/Prefetch → Prefetch}/AbstractPrefetch.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/atoms/Prefetch/AbstractPrefetch.ts"],
+  "sources": ["../../packages/ui/Prefetch/AbstractPrefetch.ts"],
   "sourcesContent": ["import { Base } from '@studiometa/js-toolkit';\nimport type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\n\nexport interface AbstractPrefetchProps extends BaseProps {\n  $el: HTMLAnchorElement;\n  $options: {\n    prefetch: boolean;\n  };\n}\n\n/**\n * AbstractPrefetch class.\n */\nexport class AbstractPrefetch<T extends BaseProps = BaseProps> extends Base<\n  T & AbstractPrefetchProps\n> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    name: 'AbstractPrefetch',\n    options: {\n      prefetch: {\n        type: Boolean,\n        default: true,\n      },\n    },\n  };\n\n  /**\n   * Store prefetched URL.\n   */\n  static prefetchedUrls: Set<string> = new Set();\n\n  /**\n   * Is the given anchor prefetchable?\n   */\n  isPrefetchable(url: URL): boolean {\n    if (!url || !url.href) {\n      return false;\n    }\n\n    if (!this.$options.prefetch) {\n      return false;\n    }\n\n    if (url.origin !== window.location.origin) {\n      return false;\n    }\n\n    if (!['http:', 'https:'].includes(url.protocol)) {\n      return false;\n    }\n\n    if (url.protocol === 'http:' && window.location.protocol === 'https:') {\n      return false;\n    }\n\n    if (\n      url.hash &&\n      url.pathname + url.search === window.location.pathname + window.location.search\n    ) {\n      return false;\n    }\n\n    return true;\n  }\n\n  /**\n   * Prefetch the given URL and terminate the component.\n   */\n  prefetch(url: URL) {\n    if (AbstractPrefetch.prefetchedUrls.has(url.href)) {\n      return;\n    }\n\n    if (!this.isPrefetchable(url)) {\n      return;\n    }\n\n    const prefetcher = document.createElement('link');\n    prefetcher.rel = 'prefetch';\n    prefetcher.href = url.href;\n    document.head.append(prefetcher);\n\n    AbstractPrefetch.prefetchedUrls.add(url.href);\n\n    this.$terminate();\n  }\n}\n"],
   "mappings": "AAAA,SAAS,YAAY;AAad,MAAM,yBAA0D,KAErE;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO,SAAqB;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,iBAA8B,oBAAI,IAAI;AAAA;AAAA;AAAA;AAAA,EAK7C,eAAe,KAAmB;AAChC,QAAI,CAAC,OAAO,CAAC,IAAI,MAAM;AACrB,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,KAAK,SAAS,UAAU;AAC3B,aAAO;AAAA,IACT;AAEA,QAAI,IAAI,WAAW,OAAO,SAAS,QAAQ;AACzC,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,CAAC,SAAS,QAAQ,EAAE,SAAS,IAAI,QAAQ,GAAG;AAC/C,aAAO;AAAA,IACT;AAEA,QAAI,IAAI,aAAa,WAAW,OAAO,SAAS,aAAa,UAAU;AACrE,aAAO;AAAA,IACT;AAEA,QACE,IAAI,QACJ,IAAI,WAAW,IAAI,WAAW,OAAO,SAAS,WAAW,OAAO,SAAS,QACzE;AACA,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA;AAAA;AAAA;AAAA,EAKA,SAAS,KAAU;AACjB,QAAI,iBAAiB,eAAe,IAAI,IAAI,IAAI,GAAG;AACjD;AAAA,IACF;AAEA,QAAI,CAAC,KAAK,eAAe,GAAG,GAAG;AAC7B;AAAA,IACF;AAEA,UAAM,aAAa,SAAS,cAAc,MAAM;AAChD,eAAW,MAAM;AACjB,eAAW,OAAO,IAAI;AACtB,aAAS,KAAK,OAAO,UAAU;AAE/B,qBAAiB,eAAe,IAAI,IAAI,IAAI;AAE5C,SAAK,WAAW;AAAA,EAClB;AACF;",
   "names": []

package/{atoms/Prefetch → Prefetch}/PrefetchWhenOver.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../packages/ui/atoms/Prefetch/PrefetchWhenOver.ts"],
+  "sources": ["../../packages/ui/Prefetch/PrefetchWhenOver.ts"],
   "sourcesContent": ["import type { BaseProps, BaseConfig } from '@studiometa/js-toolkit';\nimport { AbstractPrefetch } from './AbstractPrefetch.js';\n\n/**\n * PrefetchWhenOver class.\n */\nexport class PrefetchWhenOver<T extends BaseProps = BaseProps> extends AbstractPrefetch<T> {\n  /**\n   * Config.\n   */\n  static config: BaseConfig = {\n    ...AbstractPrefetch.config,\n    name: 'PrefetchWhenOver',\n  };\n\n  /**\n   * Prefetch on mouseenter.\n   */\n  onMouseenter() {\n    this.prefetch(new URL(this.$el.href));\n  }\n}\n"],
   "mappings": "AACA,SAAS,wBAAwB;AAK1B,MAAM,yBAA0D,iBAAoB;AAAA;AAAA;AAAA;AAAA,EAIzF,OAAO,SAAqB;AAAA,IAC1B,GAAG,iBAAiB;AAAA,IACpB,MAAM;AAAA,EACR;AAAA;AAAA;AAAA;AAAA,EAKA,eAAe;AACb,SAAK,SAAS,IAAI,IAAI,KAAK,IAAI,IAAI,CAAC;AAAA,EACtC;AACF;",
   "names": []