@sitecore-feaas/clientside 0.1.53 → 0.1.55

package/src/components/FEAASBase.tsx

@@ -27,15 +27,18 @@ export interface ReactPayload {
  * Initialization lifecycle:
  *
  * - `set(props)`
- * - `load() => payload`
- * - `onLoad?(payload)`
- * - `update()`
- * - `render(payload, props)`
- * - `whenRendered`
- * - - / If needs to reload, e.g. bypass cache /
- * - - `onLoad(newPayload) `
- * - - `whenRendered`
- * - `whenLoaded`
+ * - `scheduleRender()` - any attribute change causes render to schedule to next frame
+ * - `whenRendered.restart()` - rendering promise is reset and will resolve after render
+ * - `advance()` - called on next frame
+ * - `if (isReadyToLoad()) => boolean` - check if component has all necessary properties to load
+ * - `load() => payload` => component is loaded
+ * - `onLoad?(payload)` => invoke loaded callback
+ * - `advance()` => going further in state machine
+ * - `flush()` => flushes all react changes if needed
+ * - `update()` => component-specific method (or react) to render changes to dom
+ * - `render(payload, props)` => render means react
+ * - `whenRendered.resolve()` - rendering promise is resolved after rendering
+ * - `whenLoaded.resolved()` - resolved after loading and rendering
  */
 export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   static observedAttributes: string[]
@@ -89,7 +92,6 @@ export class FEAASBase<Props = any, Payload = any> extends WebComponent {
   disconnectedCallback() {
     this.unmount()
   }
-
   /**
    * Web components are initialized depth-first, making child elements render before its parents. This could here
    * attempts to avoid this and inverts the initialization logic, so that children are initialized in the context of its

package/src/components/FEAASComponent.tsx

@@ -3,7 +3,7 @@ import { renderDOMContent, renderDOMElement } from '../dom/rendering.js'
 import { loadStylesheetAllowStale } from '../headless.js'
 import { FEAASBase } from './FEAASBase.js'
 
-export function FEAASComponentsProps(element: FEAASBase = this) {
+export function FEAASComponentsProps(element: FEAASBase) {
   let data: any
   const src = element.getAttribute('src')
   if (src) {

package/src/components/FEAASLoader.tsx

@@ -1,6 +1,6 @@
 import { FEAASBase } from './FEAASBase.js'
 
-export function FEAASLoaderProps(element: HTMLElement = this) {
+export function FEAASLoaderProps(element: HTMLElement) {
   return {
     opacity: element?.getAttribute('opacity') ? parseFloat(element?.getAttribute('opacity')) : 1,
     hidden: element?.getAttribute('hidden') != null

package/src/components/FEAASStylesheet.tsx

@@ -2,7 +2,7 @@ import { DEFAULT_CDN_URL, FEAASCDNStylesheetParams, parseStylesheetSource } from
 import { loadStylesheet } from '../dom/stylesheet.js'
 import { FEAASBase } from './FEAASBase.js'
 
-export function FEAASStylesheetProps(element: FEAASBase = this) {
+export function FEAASStylesheetProps(element: FEAASBase) {
   const src = element.getAttribute('src')
   if (src) {
     var { cdn, library, revision } = parseStylesheetSource(src)

package/src/dom/data.ts

@@ -2,14 +2,6 @@ import { JSONPath } from 'jsonpath-plus'
 
 export type Datascopes = Record<string, any> | any[]
 
-export function cleanCollectionBit(path: string) {
-  return path.replace(/(\[[^\]\[]+\]|\.\*)$/g, '')
-}
-
-export function normalizeCollectionScope(path: string) {
-  return cleanCollectionBit(path) + '.*'
-}
-
 export function queryScopes(scopes: any, datapath: string, singleValue = false, json: any = scopes) {
   var path = datapath
   /* find closest parent scope */

package/src/dom/html.ts

@@ -62,6 +62,11 @@ class HTMLNode {
   get tagName() {
     return this.nodeName?.toUpperCase()
   }
+
+  get localName() {
+    return this.nodeName?.toLowerCase()
+  }
+
   get innerHTML() {
     return serializeHTML(this.childNodes)
   }
@@ -71,6 +76,9 @@ class HTMLNode {
   get outerHTML() {
     return serializeHTML([this])
   }
+  get children() {
+    return this.childNodes.filter((c) => c.nodeType == 1)
+  }
 
   closest(selector: string): HTMLNode | null {
     let currentNode: HTMLNode | undefined = this

package/src/dom/rendering.ts

@@ -1,7 +1,8 @@
 import { FEAASCDNComponentProps } from '../cdn.js'
-import { Datascopes, normalizeCollectionScope, queryScopes, serializeCH1RichText } from './data.js'
+import { Datascopes, queryScopes, serializeCH1RichText } from './data.js'
 import { parseHTML } from './html.js'
 import { loadScript } from './scripts.js'
+import { normalizeCollectionScope } from '../utils/datapath.js'
 
 export interface FEAASCustomizations {
   processTemplate?: (element: HTMLElement, template: string, data: any) => string
@@ -81,11 +82,13 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
   }
   var prop = attribute.replace('data-path-', '')
   if (attribute == 'data-path-src') {
-    target = element.tagName == 'IMG' ? element : <HTMLElement>element.querySelector('img, video')
+    const picture = Array.from(element.children).find((n) => n.localName == 'picture') || element
+    target = element.localName == 'img' ? element : <HTMLElement>picture.querySelector('img, video')
   } else if (attribute == 'data-path-href') {
     target = element.querySelector('a') || element.closest('a')
   } else if (attribute == 'data-path-alt') {
-    target = element.querySelector('img, picture')
+    const picture = Array.from(element.children).find((n) => n.localName == 'picture') || element
+    target = picture.querySelector('img, picture')
   } else if (attribute == 'data-path-hidden') {
     value = !value ? true : null
   } else if (attribute == 'data-path' || attribute == 'data-embed-html' || attribute == 'html') {
@@ -117,7 +120,9 @@ export function setDOMAttribute(element: HTMLElement, attribute: string, value:
   }
   if (!target) return
 
-  var placeholder = String(element.getAttribute('data-path-placeholder') || target[prop as keyof HTMLElement])
+  var placeholder = String(
+    (element.getAttribute('data-path-placeholder') || target[prop as keyof HTMLElement]) ?? target.getAttribute(prop)
+  )
 
   if (value != null) {
     if (prop == 'innerHTML') {

package/src/dom/thumbnail.ts

@@ -0,0 +1,293 @@
+import type { SDK, Style, VersionModel, ComponentModel } from '@sitecore-feaas/sdk'
+import { fetchAndRevalidate } from '../fetch.js'
+import { renderComponent } from './component.js'
+
+export type Callback = (image: HTMLImageElement, isCached: boolean) => void
+
+export const convertBase64toBlob = (base64: string) => fetch(base64).then((res) => res.blob())
+
+/** Parse fetch response as blob and turn it into HTMLImageElement off thread */
+export const responseToImage = (response: Response): Promise<HTMLImageElement> =>
+  response.blob().then((blob) => {
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      img.onerror = reject
+      img.onload = () => {
+        resolve(img)
+      }
+      img.src = URL.createObjectURL(blob)
+    })
+  })
+
+/**
+ * Retrieves the version of a given component that best fits a specific display width.
+ *
+ * The function ensures that the version data for the component is available and selects the one that is most suitable
+ * for a display width of 800 pixels.
+ *
+ * @param {ComponentModel} component - The component for which the version needs to be obtained.
+ * @returns {Promise<VersionModel>} - A promise that resolves to the most suitable version for a display width of 800
+ *   pixels.
+ */
+export async function getVersionForThumbnail(component: ComponentModel): Promise<VersionModel> {
+  if (!component.versions.length) await component.versions.fetch()
+  return component.getVersionForWidth(800)
+}
+
+/**
+ * Ensures an up-to-date thumbnail for a specific component and version.
+ *
+ * This operation initiates thumbnail load and, if that fails or if file is out of date, a new thumbnail is generated.
+ * It can work with a callback, which is designed to potentially fire twice for enhancing user experience. This dual
+ * firing allows for an immediate display of a possibly stale cached image while downloading or generating new version
+ * in the background.
+ *
+ * 1. The first call can happen with the stale cached or outdated image.
+ * 2. The second call occurs with the up-to-date loaded or freshly generated generated image.
+ *
+ * @param {ComponentModel} component - Relevant component.
+ * @param {VersionModel} [version] - Relevant version (optional, falls back to responsive).
+ * @param {Callback} [callback] - Callback to handle the loaded or generated image (optional).
+ * @returns {Promise<HTMLImageElement | null>} - The final thumbnail image (either loaded or freshly generated).
+ */
+export async function get(component: ComponentModel, version?: VersionModel, callback?: Callback) {
+  try {
+    if (!component.isNew) {
+      return await load(component, version, callback)
+    }
+  } catch (e) {
+    component.sdk.log(
+      `FEAAS: Thumbnail ${component.id}, version: ${
+        version?.id || 'responsive'
+      }, status: generating ${status}, reason: ${e}`
+    )
+  }
+  // generate the image
+  const img = await generate(component, version)
+  callback?.(img, false)
+
+  // upload base64 image as blob off-thread
+  if (img && !component.isNew) {
+    convertBase64toBlob(img.src).then((blob) => upload(component, version, blob))
+  }
+  return img
+}
+
+/**
+ * Retrieves the thumbnail image for a given component/version combination, with a responsive default if version is not
+ * provided.
+ *
+ * The resulting HTML <img> element will have `width`, `height`, and `src` properties ready for use. Although it can
+ * operate as a regular promise that resolves when the thumbnail is loaded, it also supports a callback for an enhanced
+ * user experience. This callback may be invoked twice, depending on the state of the cache:
+ *
+ * 1. The first call occurs if the image was previously cached by the browser, but the cache is stale.
+ * 2. The second call happens when the image is updated from a fresh download. By this design, the user gets to see a
+ *    cached image immediately while the updated image is being downloaded in the background.
+ *
+ * If the version of a component is known to be newer than remote file, the function will throw `InvalidResponse` error.
+ * As a way to handle that error, the `generate` function may be used to produce new thumbnail (@see render).
+ *
+ * @param {ComponentModel} component - The component to load a thumbnail for.
+ * @param {VersionModel} [version] - The version of the component to load a thumbnail for. If not provided, a version
+ *   suitable for a responsive component is selected.
+ * @param {Callback} [callback] - A callback to handle the loaded image. This callback may be invoked twice for the
+ *   reasons described above.
+ * @returns {Promise<HTMLImageElement>} - The thumbnail image for the component/version combination.
+ */
+export async function load(
+  component: ComponentModel,
+  version?: VersionModel,
+  callback?: Callback
+): Promise<HTMLImageElement> {
+  const url = version ? version.getThumbnailURL() : component.getThumbnailURL()
+  const stylesheet = component.library.stylesheet
+  const lastModifiedDate = new Date(Math.max(Number(component.modifiedAt), Number(stylesheet.modifiedAt)))
+  component.sdk.log(`FEAAS: Thumbnail ${component.id}/${version?.id || 'responsive'}, loading`)
+  // Otherwise use a logic that will invoke callback for cached request and then try to revalidate it
+  var img: HTMLImageElement
+  await fetchAndRevalidate(
+    url,
+    {},
+    (response, isCached) => {
+      // <2 second difference is not considered outdated
+      // If thumbnail is detected as outdated it will throw error and promise will be rejected
+      const isUpToDate =
+        Math.abs(Number(new Date(response.headers.get('x-ms-meta-componentRenderedAt'))) - Number(lastModifiedDate)) <
+        2000
+
+      if (isCached && !isUpToDate) {
+        responseToImage(response).then((image) => {
+          img = image
+          callback(image, isCached)
+        })
+      }
+      return isUpToDate
+    },
+    (response, state, isCached) => {
+      component.sdk.log(`FEAAS: Thumbnail ${component.id}/${version?.id || 'responsive'}, status: ${state}`)
+      responseToImage(response).then((image) => {
+        img = image
+        callback(image, isCached)
+      })
+    },
+    null
+  )
+  return img
+}
+
+/**
+ * Creates a thumbnail image for a given component and version.
+ *
+ * First, it determines the appropriate version to use. If not provided, it attempts to fetch one suitable for
+ * thumbnail. It then leverages `render` to generate an image with provided parameters and finally, if the component
+ * isn't new, uploads the generated as a Blob onto cdn for future retrieval.
+ *
+ * @param {ComponentModel} component - Component instance.
+ * @param {VersionModel} [version] - Version instance.
+ * @returns {Promise<HTMLImageElement | null>} Thumbnail image or null if generation isn't possible.
+ */
+export async function generate(component: ComponentModel, version?: VersionModel) {
+  const sourceVersion = version || (component.isNew ? null : await getVersionForThumbnail(component))
+  if (!sourceVersion || sourceVersion.isViewEmpty()) {
+    return null
+  }
+  const { stylesheet, datasources } = component.library
+  const img = await render(
+    sourceVersion.classList,
+    stylesheet.getBreakpointForWidth(800, sourceVersion.getBreakpoints()),
+    sourceVersion.view,
+    datasources.reduce((object, datasource) => {
+      return Object.assign(object, { [datasource.id]: datasource.sample })
+    }, {}),
+    stylesheet.css,
+    component.sdk
+  )
+
+  return img
+}
+
+/**
+ * Transforms a specific component version into an image.
+ *
+ * Generates an isolated environment (iframe) to render the component with supplied parameters. 'html2canvas.js' is then
+ * injected into the iframe to capture the rendered component as an image. The image is created respecting the provided
+ * design breakpoint, ensuring an accurate visual representation.
+ *
+ * @param {string[]} classList - Array of class names applied to the rendered component.
+ * @param {Style.Rule<'breakpoint'>} breakpoint - Breakpoint style rule that dictates the viewport dimensions for
+ *   rendering.
+ * @param {string} template - String template of the component to render.
+ * @param {any} data - Data object to be used when rendering the component.
+ * @param {string} cssText - CSS rules to be applied during component rendering.
+ * @param {EnvironmentVariables} env - Environment variables used to set frontend and backend endpoint URLs.
+ * @returns {Promise<BasicImage>} - Promise that resolves to an object containing the src, width, and height of the
+ *   created image.
+ */
+function render(
+  classList: string[],
+  breakpoint: Style.Rule<'breakpoint'>,
+  template: string,
+  data: any,
+  cssText: string,
+  sdk: SDK
+) {
+  const iframe = document.createElement('iframe')
+  iframe.style.position = 'absolute'
+  iframe.style.top = '-2000px'
+  iframe.style.left = '-2000px'
+  iframe.style.width = breakpoint.props.minWidth + 'px'
+  iframe.style.height = '720px'
+  iframe.style.zIndex = '100011'
+  document.body.appendChild(iframe)
+
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const script = document.createElement('script')
+    script.onerror = reject
+    script.src = sdk.frontend + '/assets/html2canvas.js'
+    script.onload = () => {
+      ;(iframe.contentWindow.document.fonts?.ready || Promise.resolve()).then(function () {
+        return (
+          iframe.contentWindow
+            //@ts-ignore
+            .html2canvas(root, {
+              // 1.1 scale is to remove shadows that are drawn incorrectly
+              scale: Math.max(1.1, 1000 / Math.min(1401, Math.max(320, breakpoint.props.minWidth))),
+              width: Math.min(1401, Math.max(320, breakpoint.props.minWidth)),
+              height: Math.max(1, Math.min(2000, root.offsetHeight)),
+              windowWidth: breakpoint.props.minWidth + 'px',
+              windowHeight: 1000,
+              proxy: sdk.backend + '/proxy/media',
+              backgroundColor: '#ffffff'
+            })
+            .then((canvas: HTMLCanvasElement) => {
+              const src = canvas.toDataURL('image/jpeg', 0.6)
+              iframe.parentElement.removeChild(iframe)
+              const img = new Image()
+              img.onload = () => {
+                resolve(img)
+              }
+              img.onerror = reject
+              img.src = src
+            })
+        )
+      })
+    }
+    iframe.contentWindow.document.head.appendChild(script)
+    const stylesheet = iframe.contentWindow.document.createElement('style')
+    stylesheet.textContent = `
+      ${cssText}
+      body, html { padding: 0; margin: 0; overflow: hidden }
+    `
+
+    iframe.contentWindow.document.head.appendChild(stylesheet)
+    const root = renderComponent({ template, data })
+    root.classList.add(...classList, '-feaas--preview', '-emulate--' + breakpoint.details.slug)
+    iframe.contentWindow.document.body.appendChild(root)
+  })
+}
+
+/**
+ * Uploads a thumbnail Blob to a CDN, enabling it for future retrieval.
+ *
+ * It constructs a URL based on component and version information, if available. The thumbnail's blob is uploaded with
+ * several metadata points, including identifiers and timestamps. Upon successful upload, it sends a no-cache fetch
+ * request to the constructed URL to bust the cache.
+ *
+ * @param {ComponentModel} component - Component instance.
+ * @param {VersionModel} version - Version instance.
+ * @param {Blob} blob - Blob instance to upload.
+ * @returns {Promise<string>} URL of the uploaded Blob.
+ */
+export async function upload(component: ComponentModel, version: VersionModel, blob: Blob): Promise<string> {
+  const url = version ? version.getThumbnailURL() : component.getThumbnailURL()
+  const lastModifiedDate = new Date(
+    Math.max(Number(component.modifiedAt), Number(component.library.stylesheet.modifiedAt))
+  )
+
+  try {
+    await component.sdk.uploadBlob('thumbnails', url.split(/\/thumbnails\//)[1], blob, {
+      headers: {
+        'x-ms-blob-content-type': 'image/jpg',
+        'x-ms-blob-cache-control': 'public,max-age=31536000,immutable',
+        'x-ms-meta-versionId': version ? version.id : null,
+        'x-ms-meta-versionRevision': version ? version.revision.toString() : null,
+        'x-ms-meta-componentId': component.id,
+        'x-ms-meta-componentRenderedAt': lastModifiedDate.toUTCString(),
+        'x-ms-meta-componentModifiedAt': component.modifiedAt.toUTCString(),
+        'x-ms-meta-componentCreatedAt': component.createdAt.toUTCString(),
+        'x-ms-meta-modifiedAt': component.modifiedAt.toUTCString()
+      }
+    })
+    // bust thumbnail cache for the future, off-thread
+    fetch(url, {
+      cache: 'no-cache'
+    }).then(() => {
+      component.sdk.log('FEAAS: Thumbnail uploaded', url)
+    })
+  } catch (e) {
+    component.sdk.log('FEAAS: Thumbnail failed to upload', url, e)
+  }
+
+  return url
+}

package/src/fetch.ts

@@ -13,12 +13,12 @@ import { ControlledPromise } from './utils/promise.js'
  * errors will not be caught. Function throws when unable to fetch valid response.
  */
 const phases = ['initial', 'check', 'updated'] as const
-export type ValidatableRequestPhase = typeof phases[number]
+export type ValidatableRequestPhase = (typeof phases)[number]
 export type FetchCache = Record<string, FetchCacheRequest>
 export interface ValidatableRequest {
   url: Parameters<typeof fetch>[0]
   options?: Parameters<typeof fetch>[1]
-  validator?: (resposne: Response) => boolean
+  validator?: (resposne: Response, isCached: boolean) => boolean
   callback?: (response: Response, status: ValidatableRequestPhase, isCached: boolean) => any
   isCached?: boolean
   response?: Response
@@ -66,6 +66,8 @@ export function getFetchCache(url: Parameters<typeof fetch>[0], dontCreate = fal
   return cache
 }
 
+export class InvalidResponse extends Error {}
+
 export async function fetchWithCacheAwareness(
   { url, options, validator, callback, cache }: ValidatableRequest,
   phase: ValidatableRequestPhase = 'initial'
@@ -88,11 +90,11 @@ export async function fetchWithCacheAwareness(
     }
   }
   if (!response.ok) throw new Error('Fetch failed')
-  if (validator?.(response) === false) throw new Error('Response is not valid')
   // see if response was pulled from cache
   const isCached =
     new Date(response.headers.get('date')) < date ||
     (promise && phase == 'initial' && (cachedRequest.phase == 'updated' || cachedRequest.phase == 'check'))
+  if (validator?.(response, isCached) === false) throw new InvalidResponse('Response is not valid')
   await callback?.(response, phase, isCached)
   return {
     url,

package/src/headless.ts

@@ -17,6 +17,8 @@ export * from './components/FEAASElement.js'
 export * from './components/FEAASComponent.js'
 export * from './components/FEAASLoader.js'
 export * from './components/FEAASStylesheet.js'
+export * from './utils/datapath.js'
+export * as Thumbnail from './dom/thumbnail.js'
 
 declare global {
   interface Window {

package/src/ui/FEAASContext.tsx

@@ -1,8 +1,9 @@
 import type * as FEAASContextImports from '@sitecore-feaas/frontend/context'
 import type { AuthModel } from '@sitecore-feaas/sdk'
 import { FEAASBase, OptionalExcept } from '../components/FEAASBase.js'
+import { ControlledPromise } from '../utils/promise.js'
 
-export function FEAASContextProps(element: HTMLElement = this) {
+export function FEAASContextProps(element: HTMLElement) {
   return {
     library: element?.getAttribute('library') as string,
     src: element?.getAttribute('src') ?? '/context.js',
@@ -66,11 +67,16 @@ export class FEAASContext extends FEAASBase<FEAASContextProps, typeof FEAASConte
     super.connectedCallback()
   }
 
-  onStatusChange = (status: string) => {
+  sdk: FEAASContextImports.SDK
+  onStatusChange: FEAASContextImports.SDKStatusCallback = (status, sdk) => {
     if (status == 'ready') {
-      this.dispatchEvent(new Event('feaasReady', { bubbles: true, composed: true }))
+      this.whenSDKReady.resolve(sdk)
+      this.dispatchEvent(new CustomEvent('feaasReady', { bubbles: true, composed: true, detail: sdk }))
     }
   }
+  whenSDKReady = ControlledPromise<FEAASContextImports.SDK>((sdk) => {
+    this.sdk = sdk
+  })
 
   render(
     { children, library }: React.PropsWithChildren<FEAASContextProps>,

package/src/ui/FEAASEditor.tsx

@@ -38,7 +38,7 @@ export function getFramePosition(element: HTMLElement) {
     { left: 0, top: 0 }
   )
 }
-export function FEAASEditorProps(element: FEAASBase = this) {
+export function FEAASEditorProps(element: FEAASBase) {
   return {
     context: HTMLElement,
     frontend: element?.getContextAttribute('frontend'),
@@ -447,6 +447,7 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
       Chrome,
       ReactDOM,
       useSDK,
+      useLibrary,
       useSlots,
       useModelObserver,
       ConfirmationContext,
@@ -455,12 +456,11 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
   ) {
     if (!this.payload) return
     const { React } = this.payload
-    const { sdk } = useSDK()
+    const sdk = useSDK()
+    const library = useLibrary()
     const [component, setComponent] = useState<FEAASEditorImports.SDK.ComponentModel>()
     const { setConfirm } = useContext(ConfirmationContext)
-
     const usedId = instanceId || versionId
-    const library = sdk.library
 
     if (component) this.component = component
 
@@ -600,7 +600,7 @@ export class FEAASEditor extends FEAASBase<FEAASEditorProps, typeof FEAASEditorI
               <Editor
                 datasources={sdk.datasources}
                 sdk={sdk}
-                library={sdk.library}
+                library={library}
                 component={component}
                 versions={versions}
                 context={{

package/src/ui/FEAASExternal.tsx

@@ -20,8 +20,6 @@ const convertSchemaPropertiesToKebabCase = (schema: any) => {
   return { ...schema, properties: kebabSchemaProperties, required: kebabRequiredProperties }
 }
 
-// TODO: parse object, number, array, boolean etc props
-
 export const parseProps = (propName: string, propValue: string, properties: any) => {
   switch (properties?.[propName]?.type) {
     case 'string':
@@ -41,14 +39,14 @@ export const parseProps = (propName: string, propValue: string, properties: any)
   }
 }
 
-export function FEAASExternalProps(element: FEAASBase = this) {
+export function FEAASExternalProps(element: FEAASBase) {
   const attributes = element.getAttributeNames()
   const id = element.getAttribute('data-external-id')
   const schema: any = FEAASExternal.registered[id]?.schema
   const props = attributes.reduce((prev, curr) => {
     if (!curr.startsWith('data-attribute') && !['class', 'id', 'contenteditable'].includes(curr)) {
       const value = element.getAttribute(curr)
-      return { ...prev, [reverseKebabCase(curr)]: parseProps(curr, value, schema?.properties) }
+      return { ...prev, [reverseKebabCase(curr)]: parseProps(reverseKebabCase(curr), value, schema?.properties) }
     } else {
       return prev
     }
@@ -77,8 +75,10 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
     return FEAASExternalProps(this)
   }
 
-  static registerComponent(component: React.FC, schema: any = {}, id?: string) {
-    FEAASExternal.registered[id || component.name] = { component, schema }
+  static registerComponent(component: React.FC, schema: any = {}) {
+    const id = schema.name || component.name
+    const enrichedSchema = { ...schema, title: id, type: 'object' }
+    FEAASExternal.registered[id] = { component, schema: enrichedSchema }
   }
 
   static setRegistrationCallback() {
@@ -86,10 +86,10 @@ export default class FEAASExternal extends FEAASBase<FEAASExternalProps, ReactMo
     if (!FEAASExternal.registrationCallback && typeof window !== 'undefined') {
       FEAASExternal.registrationCallback = setTimeout(() => {
         // create components array from object
-        const components = Object.keys(FEAASExternal.registered).map((name) => ({
-          ...FEAASExternal.registered[name],
-          name,
-          schema: convertSchemaPropertiesToKebabCase(FEAASExternal.registered[name].schema)
+        const components = Object.keys(FEAASExternal.registered).map((id) => ({
+          ...FEAASExternal.registered[id],
+          name: id,
+          schema: convertSchemaPropertiesToKebabCase(FEAASExternal.registered[id].schema)
           //component: FEAASExternal.registered[name].component.toString()
         }))
 

package/src/ui/FEAASPicker.tsx

@@ -1,7 +1,7 @@
 import type * as FEAASPickerImports from '@sitecore-feaas/frontend/picker'
 import { FEAASBase } from '../components/FEAASBase.js'
 
-export function FEAASPickerProps(element: FEAASBase<any, any> = this) {
+export function FEAASPickerProps(element: FEAASBase<any, any>) {
   return {
     part: element?.getAttribute('part') || 'picker',
     slot: element?.getAttribute('part') || 'picker',
@@ -35,13 +35,20 @@ export class FEAASPicker extends FEAASBase<FEAASPickerProps, typeof FEAASPickerI
 
   render(
     { placeholder, context, mode, children, variant }: React.PropsWithChildren<FEAASPickerProps>,
-    { Picker, React, ReactDOM }: typeof FEAASPickerImports
+    { Picker, React, useLibrary }: typeof FEAASPickerImports
   ) {
+    const collections = useLibrary('collections')
+    const rules = useLibrary('stylesheet.styles')
     return (
       <Picker
+        rules={rules}
+        collections={collections}
+        themeContext={context}
         placeholder={placeholder}
         mode={mode || undefined}
-        onClose={this.props.onClose}
+        onModeChange={(mode) => {
+          if (!mode) this.props.onClose(mode)
+        }}
         onContextAttributeSet={this.props.onContextAttributeSet}
         context={context}
         variant={variant}

package/src/utils/datapath.ts

@@ -0,0 +1,31 @@
+export const parseLimit = (qualifier: string) => {
+  const limit = parseInt(qualifier?.match(/\[0:(\d+)\]/)?.[1], 10)
+  if (!isNaN(limit) && limit > 0) return String(limit)
+  return null
+}
+
+export const parseRange = (qualifier: string) => {
+  const bits = qualifier
+    ?.match(/\[([^\]]+)\]/)?.[1]
+    .split(/\s*,\s*/g)
+    .filter(Boolean)
+    .map((bit) => {
+      // individual indexes
+      if (bit.match(/^-?\d+$/)) return bit
+      // ranges
+      const range = bit.match(/^(\d+):(\d+)$/)
+      return range && parseInt(range[1], 10) < parseInt(range[2], 10) ? range[1] + '-' + range[2] : null
+    })
+  if (!bits?.every(Boolean)) return null
+  return bits.join(',')
+}
+
+export const getQualifier = (jsonpath: string) => jsonpath?.match(/(\.\*|\[[^\]]+\])$/)?.[0]
+
+export function cleanCollectionBit(path: string) {
+  return path.replace(/(\[[^\]\[]+\]|\.\*)$/g, '')
+}
+
+export function normalizeCollectionScope(path: string) {
+  return cleanCollectionBit(path) + '.*'
+}