@indielayer/ui 1.18.1 → 2.1.0

package/docs/pages/component/tooltip/usage.vue

@@ -1,12 +1,11 @@
 <template>
-  <x-tooltip>
-    <x-button>Hover me to see the tooltip</x-button>
-    <template #tooltip>
-      <div class="font-bold">Tooltip title</div>
-      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus corrupti maiores aut minima iusto nulla inventore ea illo commodi et.</div>
-    </template>
-  </x-tooltip>
+  <div class="flex flex-wrap items-center gap-4">
+    <x-tooltip tooltip="Save your changes">
+      <x-button icon="check" aria-label="Save" />
+    </x-tooltip>
 
-  <!-- tooltip with the info icon -->
-  <x-toggle-tip content="Lets go"/>
+    <x-tooltip tooltip="More options">
+      <x-button ghost icon="smile" aria-label="More options" />
+    </x-tooltip>
+  </div>
 </template>

package/docs/pages/component/upload/index.vue

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Upload'
-const description = 'Upload is a component that allows you to upload files.'
+const description = 'File picker with drag-and-drop for selecting one or more files to upload. Use Upload when forms need images, documents, or other file input with accept filters.'
 const components = [XUpload]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

package/docs/pages/component/upload/usage.vue

@@ -95,6 +95,7 @@ const action = 'https://run.mocky.io/v3/6904ae0b-3cfa-4ae1-bbf2-243a4dd32a3c'
             :with-credentials="false"
             :rules="[rules.isValidUpload]"
             placeholder="Upload game title cover image"
+            accept="image/*"
             max-file-size="2000000"
             label="Cover Image"
             tooltip="Title cover image should be 16:9 aspect ratio and max 2MB"

package/docs/pages/component/virtualGrid/index.vue

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'VirtualGrid'
-const description = 'VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.'
+const description = 'Renders only visible cells of a large grid for better scroll performance. Use VirtualGrid when a dense grid would be too heavy to mount all at once.'
 const components = [XVirtualGrid]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

package/docs/pages/component/virtualGrid/usage.vue

@@ -9,10 +9,13 @@ const gridColumnCount = 1000
     :column-count="gridColumnCount"
     :row-height="48"
     :column-width="100"
-    class="h-96 border border-gray-200 rounded-md bg-white w-full"
+    class="h-96 w-full rounded-md border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-950"
   >
     <template #cell="{ rowIndex, columnIndex, style }">
-      <div :style="style" class="h-12 flex items-center justify-center border border-gray-200">
+      <div
+        :style="style"
+        class="flex h-12 items-center justify-center border border-gray-200 text-gray-800 dark:border-gray-700 dark:text-gray-200"
+      >
         R{{ rowIndex }}, C{{ columnIndex }}
       </div>
     </template>

package/docs/pages/component/virtualList/dynamicHeight.vue

@@ -50,24 +50,24 @@ const rowHeight = useDynamicRowHeight({
   <x-virtual-list
     :row-count="items.length"
     :row-height="rowHeight"
-    style="height: 500px; border: 1px solid #ccc;"
+    class="h-[500px] rounded-md border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-950"
   >
     <template #row="{ index, style }">
       <div
         :style="style"
         :class="[
-          'flex items-start py-3 px-4 border-b border-gray-200 cursor-pointer transition-colors gap-2',
-          index % 2 === 0 ? 'bg-white' : 'bg-gray-50',
-          'hover:bg-gray-200',
-          isRowCollapsed(index) ? 'whitespace-nowrap overflow-hidden text-ellipsis' : ''
+          'flex cursor-pointer items-start gap-2 border-b border-gray-200 px-4 py-3 transition-colors dark:border-gray-700',
+          index % 2 === 0 ? 'bg-white dark:bg-gray-950' : 'bg-gray-50 dark:bg-gray-900',
+          'hover:bg-gray-100 dark:hover:bg-gray-800',
+          isRowCollapsed(index) ? 'overflow-hidden text-ellipsis whitespace-nowrap' : '',
         ]"
         @click="toggleRow(index)"
       >
-        <span class="flex-shrink-0 w-6 h-6 inline-flex items-center justify-center text-sm">
+        <span class="inline-flex h-6 w-6 shrink-0 items-center justify-center text-sm">
           {{ isRowCollapsed(index) ? '➕' : '➖' }}
         </span>
-        <span class="flex-1 leading-normal">
-          <strong class="text-gray-700 mr-2">{{ index }}:</strong>{{ getText(index) }}
+        <span class="flex-1 leading-normal text-gray-800 dark:text-gray-200">
+          <strong class="mr-2 text-gray-700 dark:text-gray-300">{{ index }}:</strong>{{ getText(index) }}
         </span>
       </div>
     </template>

package/docs/pages/component/virtualList/index.vue

@@ -6,16 +6,16 @@ import DynamicHeightDemoCode from './dynamicHeight.vue?raw'
 import DynamicHeightDemo from './dynamicHeight.vue'
 
 const title = 'VirtualList'
-const description = 'VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.'
+const description = 'Renders only visible rows of a long list for better scroll performance. Use VirtualList for feeds and catalogs with thousands of items.'
 const components = [XVirtualList]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Dynamic Height',
-  description: '',
+  description: 'Rows with variable heights while scrolling.',
   code: DynamicHeightDemoCode,
   component: DynamicHeightDemo,
 }]

package/docs/pages/component/virtualList/usage.vue

@@ -6,10 +6,13 @@ const listItems = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`)
   <x-virtual-list
     :row-count="listItems.length"
     :row-height="48"
-    class="h-96 border border-gray-200 rounded-md bg-white"
+    class="h-96 rounded-md border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-950"
   >
     <template #row="{ index, style }">
-      <div :style="style" class="h-12 flex items-center justify-center border-b border-gray-200">
+      <div
+        :style="style"
+        class="flex h-12 items-center justify-center border-b border-gray-200 text-gray-800 dark:border-gray-700 dark:text-gray-200"
+      >
         {{ listItems[index] }}
       </div>
     </template>

package/docs/pages/icons.vue

@@ -44,8 +44,8 @@ const iconExample2 = `<template>
 
 <template>
   <div class="docs-container">
-    <h2 class="text-4xl font-semibold">Icons</h2>
-    <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Building your own SVG icon library from multiple open source libraries</h1>
+    <h1 class="text-4xl font-semibold">Icons</h1>
+    <p class="text-lg my-2 text-gray-500 dark:text-gray-400">Building your own SVG icon library from multiple open source libraries</p>
     <x-divider class="mt-4 mb-8"/>
 
     <p class="text-xl mt-8 my-4">SVG Icon Libraries</p>

package/docs/pages/index.vue

@@ -8,6 +8,20 @@ useDocMeta({
   description: 'Tailwind CSS UI components for Vue.js 3 and Nuxt.js 3. Build and prototype fast web applications.',
   path: '/getting-started',
 })
+
+const tailwindSetupSnippet = `/* src/assets/tailwind.css */
+@import "tailwindcss";
+@import "@indielayer/ui/tailwind.css";
+
+@source "../../index.html";
+@source "../**/*.{vue,js,ts}";
+@source "../../node_modules/@indielayer/ui/{lib,src}/**/*";
+
+/* Optional: map semantic colors to Tailwind palettes */
+@theme {
+  --color-primary-500: var(--color-emerald-500);
+  --color-secondary-500: var(--color-slate-500);
+}`
 </script>
 
 <template>
@@ -54,40 +68,18 @@ useDocMeta({
         }]"
       />
 
-      <h3 class="text-2xl mt-8 mb-4">2. Setup TailwindCSS</h3>
-      <p>If you do not have Tailwind CSS 3 installed in your project, please see the <x-link href="https://tailwindcss.com/docs/guides/vite" external shadow color="primary">Tailwind 3 Vite install guide here</x-link> before proceeding.</p>
+      <h3 class="text-2xl mt-8 mb-4">2. Setup Tailwind CSS v4</h3>
+      <p>Indielayer UI requires <b>Tailwind CSS v4</b> (Safari 16.4+, Chrome 111+, Firefox 128+). See the <x-link href="https://tailwindcss.com/docs/installation/using-vite" external shadow color="primary">Tailwind v4 install guide</x-link> and install <code class="text-sm">tailwindcss</code> plus <code class="text-sm">@tailwindcss/postcss</code> (Vite and Nuxt).</p>
       <p class="my-4">
-        Add Indielayer Tailwind CSS preset <b>tailwind.preset.js</b> to your Tailwind CSS configuration file tailwind.config.js and <b>purge css configurations.</b>
+        Import Indielayer theme tokens from <b>@indielayer/ui/tailwind.css</b> in your app stylesheet and register source paths for class scanning:
       </p>
       <code-snippet
-        lang="js"
-        :code="`// tailwind.config.js
-const colors = require('tailwindcss/colors')
-const indielayer = require('@indielayer/ui/tailwind.preset')
-
-module.exports = {
-  darkMode: 'class',
-  presets: [indielayer()],
-  content: [
-    './index.html',
-    './**/*.vue',
-    './src/**/*.{vue,js,ts,jsx,tsx}',
-    'node_modules/@indielayer/ui/{lib,src}/**/*',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        primary: colors.emerald,
-        secondary: colors.slate,
-        success: colors.green,
-        warning: colors.yellow,
-        error: colors.red,
-      },
-    },
-  },
-  plugins: [],
-}`"
+        lang="css"
+        :code="tailwindSetupSnippet"
       />
+      <p class="my-4 text-sm text-gray-600 dark:text-gray-400">
+        Add <code>@tailwindcss/postcss</code> to your PostCSS config (Vite <code>css.postcss.plugins</code> or Nuxt <code>postcss.plugins</code>). See the <x-link href="https://tailwindcss.com/docs/upgrade-guide" external shadow color="primary">upgrade guide</x-link> when migrating from v3.
+      </p>
       <h3 class="text-2xl mt-8 mb-4">3. Load the UI in your project</h3>
       <h4 class="text-xl mt-8 mb-4">Load on a Vue 3 project</h4>
       <code-snippet
@@ -99,8 +91,15 @@ const app = createApp(App)
 
 app.use(UI, {
   theme: BaseTheme,
+  defaults: {
+    Alert: { outlined: true },
+  },
 })`"
       />
+      <p class="my-4 text-sm text-gray-600 dark:text-gray-400">
+        Use <code>defaults</code> to set app-wide prop defaults per component (e.g. all alerts outlined). Instance props still override when passed explicitly.
+        Variant and layout booleans on themed components use <code>optionalBooleanProp()</code> so omitted attributes stay unset; plain <code>Boolean</code> props default to <code>false</code> in Vue and will not receive app defaults.
+      </p>
       <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
       <multi-snippet
         class="my-4"
@@ -127,9 +126,7 @@ app.use(UI, {
   css: ['~/assets/tailwind.css'],
   postcss: {
     plugins: {
-      'tailwindcss/nesting': {},
-      tailwindcss: {},
-      autoprefixer: {},
+      '@tailwindcss/postcss': {},
     },
   },
 })`"

package/docs/router/index.ts

@@ -1,8 +1,7 @@
-import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+import type { RouteRecordRaw, RouterScrollBehavior } from 'vue-router'
 
 // layouts
 import DefaultLayout from '../layouts/default.vue'
-import SimpleLayout from '../layouts/simple.vue'
 
 // help
 import HomePage from '../pages/index.vue'
@@ -14,22 +13,22 @@ import ErrorPage from '../pages/error.vue'
 
 const pages: Record<string, any> = import.meta.glob('../pages/component/*/index.vue', { eager: true })
 
-const componentPages: RouteRecordRaw[] = []
+const componentPages: RouteRecordRaw[] = Object.keys(pages).flatMap((filePath) => {
+  const match = filePath.match(/\/pages\/component\/(.*)\/index\.vue$/)
 
-Object.keys(pages).forEach((path) => {
-  const match = path.match(/\/pages\/component\/(.*)\/index\.vue$/)
+  if (!match) return []
 
-  if (match) {
-    const name = match[1].toLowerCase()
+  const name = match[1]
 
-    componentPages.push({
-      path: name,
-      component: pages[path].default,
-    })
-  }
+  return [{
+    // Absolute child path: nests in DefaultLayout but keeps a root URL.
+    path: `/component/${name}`,
+    name: `component-${name}`,
+    component: pages[filePath].default,
+  }]
 })
 
-const routes: RouteRecordRaw[] = [{
+export const routes: RouteRecordRaw[] = [{
   path: '/',
   component: DefaultLayout,
   children: [{
@@ -51,11 +50,9 @@ const routes: RouteRecordRaw[] = [{
     path: 'colors',
     name: 'colors',
     component: ColorsPage,
-  }, {
-    path: 'component',
-    component: SimpleLayout,
-    children: componentPages,
-  }],
+  },
+  ...componentPages,
+  ],
 }, {
   path: '/play',
   component: PlayPage,
@@ -65,37 +62,35 @@ const routes: RouteRecordRaw[] = [{
   component: ErrorPage,
 }]
 
-const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
-  scrollBehavior(to, from, savedPosition) {
-    const main = document.getElementById('main')
+export const scrollBehavior: RouterScrollBehavior = (to, _from, savedPosition) => {
+  if (typeof document === 'undefined') return { top: 0 }
+
+  const main = document.getElementById('main')
 
-    if (to.hash) {
-      return new Promise((resolve) => {
-        setTimeout(() => {
-          const el = document.querySelector(to.hash)
+  if (to.hash) {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        const el = document.querySelector(to.hash)
 
-          if (el && main) {
-            const top = (el as HTMLElement).offsetTop - 80
+        if (el && main) {
+          const top = (el as HTMLElement).offsetTop - 80
 
-            main.scrollTo({ top, behavior: 'smooth' })
-          }
-          resolve({ el: to.hash, behavior: 'smooth', top: 80 })
-        }, 100)
-      })
-    }
+          main.scrollTo({ top, behavior: 'smooth' })
+        }
+        resolve({ el: to.hash, behavior: 'smooth', top: 80 })
+      }, 100)
+    })
+  }
 
-    if (savedPosition) {
-      main?.scrollTo(savedPosition)
+  if (savedPosition) {
+    main?.scrollTo(savedPosition)
 
-      return savedPosition
-    }
+    return savedPosition
+  }
 
-    main?.scrollTo(0, 0)
+  main?.scrollTo(0, 0)
 
-    return { top: 0 }
-  },
-})
+  return { top: 0 }
+}
 
-export default router
+export default routes

package/docs/search/components.json

@@ -1 +1 @@
-[{"name":"Accordion","description":"Accordion is a component that allows you to collapse and expand content.","url":"/component/accordion","category":"component"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert","category":"component"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar","category":"component"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge","category":"component"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs","category":"component"},{"name":"Button","description":"Buttons allow users to perform actions and make choices with a single click. They are commonly used for submitting forms, opening dialogs or menus, and executing commands. Buttons can be customized with different styles, sizes, and icons to fit various use cases.","url":"/component/button","category":"component"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card","category":"component"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel","category":"component"},{"name":"Checkbox","description":"Checkboxes enable users to select one or multiple options from a list. They are ideal for toggling settings or making selections where more than one choice is allowed. Each checkbox can be checked or unchecked independently.","url":"/component/checkbox","category":"component"},{"name":"Container","description":"Containers provide a flexible layout element for grouping and organizing content. They help structure pages by controlling width, alignment, and spacing, ensuring consistent presentation across different sections.","url":"/component/container","category":"component"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker","category":"component"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider","category":"component"},{"name":"Drawer","description":"Drawers slide in from the edge of the screen to present navigation, options, or additional content without disrupting the main view. They are ideal for menus, filters, or contextual panels.","url":"/component/drawer","category":"component"},{"name":"Form","description":"Forms provide a structured way to collect and validate user input, such as text, selections, and files. They support features like validation, grouping, and submission handling, making it easy to build interactive and accessible data entry interfaces.","url":"/component/form","category":"component"},{"name":"FormGroup","description":"Form groups organize related form elements together, providing structure and shared validation. They help group checkboxes, radio buttons, or inputs that belong to the same logical section.","url":"/component/formGroup","category":"component"},{"name":"Icon","description":"Icons visually represent actions, objects, or concepts, enhancing usability and recognition in interfaces. They can be used alone or alongside text for buttons, menus, and indicators.","url":"/component/icon","category":"component"},{"name":"Image","description":"Image is used to load an image file with a skeleton as placeholder and on load display the image.","url":"/component/image","category":"component"},{"name":"InfiniteLoader","description":"InfiniteLoader is a component that allows you to load data on demand as users scroll through a list.","url":"/component/infiniteLoader","category":"component"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input","category":"component"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link","category":"component"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader","category":"component"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu","category":"component"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal","category":"component"},{"name":"Notifications","description":"Notifications provide timely feedback or alerts to users, such as success messages, warnings, or errors. They help keep users informed about important events or actions.","url":"/component/notifications","category":"component"},{"name":"Pagination","description":"Pagination divides large sets of content into manageable pages, allowing users to navigate through items efficiently. It is commonly used in tables, lists, and search results to improve usability and performance.","url":"/component/pagination","category":"component"},{"name":"Popover","description":"Popovers display additional information or interactive content in a floating overlay, anchored to a trigger element. They are useful for tooltips, menus, or contextual actions without navigating away from the current view.","url":"/component/popover","category":"component"},{"name":"Progress","description":"Progress indicators visually communicate the completion status of a task or process, such as file uploads or data loading. They help users understand how much work remains.","url":"/component/progress","category":"component"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode","category":"component"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.","url":"/component/radio","category":"component"},{"name":"Scroll","description":"The Scroll component enhances scrolling experiences by adding visual cues, such as inner shadows, to indicate additional content. It is useful for horizontally or vertically scrolling lists and containers.","url":"/component/scroll","category":"component"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select","category":"component"},{"name":"Skeleton","description":"Skeletons provide placeholder elements that mimic the layout of content while data is loading. They improve perceived performance by giving users a visual cue that content is being fetched.","url":"/component/skeleton","category":"component"},{"name":"Slider","description":"Sliders allow users to select a numeric value or range by dragging a handle along a track. They are ideal for adjusting settings such as volume, brightness, or price filters.","url":"/component/slider","category":"component"},{"name":"Spacer","description":"Spacers create adjustable gaps between elements within flex layouts, helping to control spacing and alignment without using margin or padding directly.","url":"/component/spacer","category":"component"},{"name":"Spinner","description":"Spinners visually indicate that a background process or operation is ongoing, such as loading data or submitting a form. They help manage user expectations by signaling that the system is working.","url":"/component/spinner","category":"component"},{"name":"Stepper","description":"Stepper is a navigation component that guides users through the steps of a task.","url":"/component/stepper","category":"component"},{"name":"Table","description":"Tables are used to display data in a tabular format.","url":"/component/table","category":"component"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs","category":"component"},{"name":"Tag","description":"Tags are compact elements used to display brief information, such as categories, statuses, or labels. They help organize content and provide quick context or filtering options within lists and interfaces.","url":"/component/tag","category":"component"},{"name":"Textarea","description":"Textareas provide a multi-line input field for users to enter longer text, such as comments, descriptions, or messages. They support resizing and can be customized for different use cases.","url":"/component/textarea","category":"component"},{"name":"Toggle","description":"Toggles provide a simple switch interface for enabling or disabling a setting, or switching between two mutually exclusive states. They are ideal for binary options such as on/off, active/inactive, or show/hide.","url":"/component/toggle","category":"component"},{"name":"Tooltip","description":"Tooltips are used to display a message when hovering over an element.","url":"/component/tooltip","category":"component"},{"name":"Upload","description":"Upload is a component that allows you to upload files.","url":"/component/upload","category":"component"},{"name":"VirtualGrid","description":"VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.","url":"/component/virtualGrid","category":"component"},{"name":"VirtualList","description":"VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.","url":"/component/virtualList","category":"component"}]
+[{"name":"Accordion","description":"Collapsible panels for showing and hiding related content. Use x-accordion with x-accordion-item when space is limited and users need progressive disclosure.","url":"/component/accordion","category":"component"},{"name":"Alert","description":"Inline notices for system, feature, or page status—success, warning, error, or info. Use alerts when the message should stay visible until addressed.","url":"/component/alert","category":"component"},{"name":"Avatar","description":"Displays a user's photo, initials, or icon in a compact frame. Use avatars in lists, headers, and comments to identify people at a glance.","url":"/component/avatar","category":"component"},{"name":"Badge","description":"Small status indicators that overlay or sit beside another element—counts, labels, or presence dots. Use badges to draw attention without interrupting the layout.","url":"/component/badge","category":"component"},{"name":"Breadcrumbs","description":"Shows the current page's place in a navigational hierarchy. Use breadcrumbs for deep page trees so users can jump back to parent sections.","url":"/component/breadcrumbs","category":"component"},{"name":"Button","description":"Clickable controls for primary actions—submit, open dialogs, or run commands. Customize style, size, and icons; group related actions with x-button-group.","url":"/component/button","category":"component"},{"name":"Card","description":"A bordered content container for grouping related information, media, and actions. Use cards in grids and dashboards when each block should stand alone.","url":"/component/card","category":"component"},{"name":"Carousel","description":"A sliding viewport for cycling through images or content panels. Use carousels for galleries and featured items when horizontal space is limited.","url":"/component/carousel","category":"component"},{"name":"Checkbox","description":"Multi-select controls for choosing one or more options independently. Use checkboxes for settings and lists where more than one choice can be active.","url":"/component/checkbox","category":"component"},{"name":"Container","description":"Layout wrapper that constrains content width and alignment for consistent page structure. Use containers to center and pad main content across breakpoints.","url":"/component/container","category":"component"},{"name":"Datepicker","description":"Date and time picker styled as a wrapper around @vuepic/vue-datepicker. Use it for forms that need calendar or datetime selection with Indielayer look and feel.","url":"/component/datepicker","category":"component"},{"name":"Divider","description":"A horizontal or vertical rule that separates sections of content. Use dividers in lists, toolbars, and layouts to create clear visual breaks.","url":"/component/divider","category":"component"},{"name":"Drawer","description":"Panels that slide in from the screen edge for navigation, filters, or extra content. Use drawers when side context should overlay without leaving the page.","url":"/component/drawer","category":"component"},{"name":"Empty","description":"Empty states communicate when there is no content to show. Use them in tables, lists, and panels with a title, description, optional icon, and actions.","url":"/component/empty","category":"component"},{"name":"Form","description":"Structured form wrapper for collecting and validating user input. Use x-form to group fields, run validation, and handle submit in one place.","url":"/component/form","category":"component"},{"name":"FormGroup","description":"Groups related fields with a shared label and validation context. Use form groups for checkboxes, radios, or inputs that belong to one logical section.","url":"/component/formGroup","category":"component"},{"name":"Icon","description":"Icons visually represent actions and concepts. Register SVG paths in a global map, then reference them by name on XIcon.","url":"/component/icon","category":"component"},{"name":"Image","description":"Loads a remote image after preloading. Use a background on the wrapper for a visible placeholder until load completes.","url":"/component/image","category":"component"},{"name":"InfiniteLoader","description":"Loads more list items as the user scrolls near the end of a container. Use InfiniteLoader for feeds and catalogs that grow on demand.","url":"/component/infiniteLoader","category":"component"},{"name":"Input","description":"Single-line text field for entering and editing short values. Use x-input in forms for names, emails, search, and other one-line data.","url":"/component/input","category":"component"},{"name":"Input Group","description":"Input groups combine multiple inline fields (Input, Textarea, Select, Datepicker, Button) into one control with a shared label and footer.","url":"/component/inputGroup","category":"component"},{"name":"Link","description":"Styled anchor for navigating to another page or external URL. Use x-link when you need consistent link styling, external indicators, and accessibility.","url":"/component/link","category":"component"},{"name":"Loader","description":"Full-area loading overlay that blocks interaction while content or an action completes. Use Loader when the whole region should wait before continuing.","url":"/component/loader","category":"component"},{"name":"Menu","description":"Dropdown list of actionable items triggered from a button or other control. Use x-menu with x-menu-item for contextual actions and navigation.","url":"/component/menu","category":"component"},{"name":"Modal","description":"Dialog overlay that focuses attention on a task or message above the current page. Use modals for confirmations, forms, and details that need temporary focus.","url":"/component/modal","category":"component"},{"name":"Notifications","description":"Toast-style feedback for success, warning, or error after an action. Use notifications for transient messages that should not block the page.","url":"/component/notifications","category":"component"},{"name":"Pagination","description":"Controls for moving through large result sets page by page. Use pagination with tables, lists, and search results to keep each view manageable.","url":"/component/pagination","category":"component"},{"name":"Popover","description":"Floating panel anchored to a trigger for extra content or actions. Use popovers for menus and contextual UI without leaving the current view.","url":"/component/popover","category":"component"},{"name":"Progress","description":"Bar that shows how far a task or process has completed. Use progress for uploads, multi-step jobs, and determinate loading states.","url":"/component/progress","category":"component"},{"name":"QR Code","description":"Renders a QR code from a string or URL for scanning with mobile devices. Use it for share links, payments, and quick machine-readable payloads.","url":"/component/qrCode","category":"component"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use classic radios for standard options, or x-radio-button for a button-shaped variant. Place several x-radio-button options inside x-form-group for a joined segmented control.","url":"/component/radio","category":"component"},{"name":"Scroll","description":"Scroll container with optional edge shadows that hint at more content. Use Scroll for overflow lists and panels that scroll vertically or horizontally.","url":"/component/scroll","category":"component"},{"name":"Select","description":"Dropdown for choosing one or more options from a predefined list. Use Select for enums, filters, and form fields where free text is not needed.","url":"/component/select","category":"component"},{"name":"Skeleton","description":"Placeholder shapes that mirror content layout while data loads. Use skeletons to reduce layout shift and improve perceived loading performance.","url":"/component/skeleton","category":"component"},{"name":"Slider","description":"Track with a draggable handle for picking a numeric value or range. Use sliders for volume, brightness, price filters, and similar continuous settings.","url":"/component/slider","category":"component"},{"name":"Spacer","description":"Flex-friendly gap that expands or shrinks between siblings without extra margin or padding. Use spacers to push items apart in toolbars and rows.","url":"/component/spacer","category":"component"},{"name":"Spinner","description":"Animated indicator that a background process is still running. Use spinners for indeterminate loading when completion percentage is unknown.","url":"/component/spinner","category":"component"},{"name":"Stepper","description":"Multi-step wizard with declarative steps, named panel slots, programmatic next/prev navigation, validation hooks, and optional sidebar summaries.","url":"/component/stepper","category":"component"},{"name":"Table","description":"Tables display tabular data with single- or multi-column sorting, selection, expandable rows, and virtual lists.","url":"/component/table","category":"component"},{"name":"Tabs","description":"Tabbed navigation that switches between related views in the same region. Use x-tab-group with x-tab when content shares context but not space.","url":"/component/tabs","category":"component"},{"name":"Tag","description":"Compact labels for categories, statuses, or filters. Use tags in lists and chip groups when a short keyword should stand out.","url":"/component/tag","category":"component"},{"name":"Textarea","description":"Multi-line text field for longer content such as comments and descriptions. Use Textarea when a single-line input is not enough.","url":"/component/textarea","category":"component"},{"name":"Toggle","description":"Binary switch for on/off settings and mutually exclusive states. Use toggles when the choice should feel instant and reversible.","url":"/component/toggle","category":"component"},{"name":"Tooltip","description":"Tooltips display contextual help on hover. Use XToggleTip for a compact info-icon pattern beside labels.","url":"/component/tooltip","category":"component"},{"name":"Upload","description":"File picker with drag-and-drop for selecting one or more files to upload. Use Upload when forms need images, documents, or other file input with accept filters.","url":"/component/upload","category":"component"},{"name":"VirtualGrid","description":"Renders only visible cells of a large grid for better scroll performance. Use VirtualGrid when a dense grid would be too heavy to mount all at once.","url":"/component/virtualGrid","category":"component"},{"name":"VirtualList","description":"Renders only visible rows of a long list for better scroll performance. Use VirtualList for feeds and catalogs with thousands of items.","url":"/component/virtualList","category":"component"}]

package/docs/search/index.json

@@ -1 +1 @@
-[{"name":"Icons","description":"Custom icon set integration for Indielayer UI components.","url":"/icons","category":"guide"},{"name":"Colors","description":"Color palette, semantic tokens, and color props on components.","url":"/colors","category":"guide"},{"name":"Typography","description":"Type scale and typography utilities used across the library.","url":"/typography","category":"guide"},{"name":"Accordion","description":"Accordion is a component that allows you to collapse and expand content.","url":"/component/accordion","category":"component"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert","category":"component"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar","category":"component"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge","category":"component"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs","category":"component"},{"name":"Button","description":"Buttons allow users to perform actions and make choices with a single click. They are commonly used for submitting forms, opening dialogs or menus, and executing commands. Buttons can be customized with different styles, sizes, and icons to fit various use cases.","url":"/component/button","category":"component"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card","category":"component"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel","category":"component"},{"name":"Checkbox","description":"Checkboxes enable users to select one or multiple options from a list. They are ideal for toggling settings or making selections where more than one choice is allowed. Each checkbox can be checked or unchecked independently.","url":"/component/checkbox","category":"component"},{"name":"Container","description":"Containers provide a flexible layout element for grouping and organizing content. They help structure pages by controlling width, alignment, and spacing, ensuring consistent presentation across different sections.","url":"/component/container","category":"component"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker","category":"component"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider","category":"component"},{"name":"Drawer","description":"Drawers slide in from the edge of the screen to present navigation, options, or additional content without disrupting the main view. They are ideal for menus, filters, or contextual panels.","url":"/component/drawer","category":"component"},{"name":"Form","description":"Forms provide a structured way to collect and validate user input, such as text, selections, and files. They support features like validation, grouping, and submission handling, making it easy to build interactive and accessible data entry interfaces.","url":"/component/form","category":"component"},{"name":"FormGroup","description":"Form groups organize related form elements together, providing structure and shared validation. They help group checkboxes, radio buttons, or inputs that belong to the same logical section.","url":"/component/formGroup","category":"component"},{"name":"Icon","description":"Icons visually represent actions, objects, or concepts, enhancing usability and recognition in interfaces. They can be used alone or alongside text for buttons, menus, and indicators.","url":"/component/icon","category":"component"},{"name":"Image","description":"Image is used to load an image file with a skeleton as placeholder and on load display the image.","url":"/component/image","category":"component"},{"name":"InfiniteLoader","description":"InfiniteLoader is a component that allows you to load data on demand as users scroll through a list.","url":"/component/infiniteLoader","category":"component"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input","category":"component"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link","category":"component"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader","category":"component"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu","category":"component"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal","category":"component"},{"name":"Notifications","description":"Notifications provide timely feedback or alerts to users, such as success messages, warnings, or errors. They help keep users informed about important events or actions.","url":"/component/notifications","category":"component"},{"name":"Pagination","description":"Pagination divides large sets of content into manageable pages, allowing users to navigate through items efficiently. It is commonly used in tables, lists, and search results to improve usability and performance.","url":"/component/pagination","category":"component"},{"name":"Popover","description":"Popovers display additional information or interactive content in a floating overlay, anchored to a trigger element. They are useful for tooltips, menus, or contextual actions without navigating away from the current view.","url":"/component/popover","category":"component"},{"name":"Progress","description":"Progress indicators visually communicate the completion status of a task or process, such as file uploads or data loading. They help users understand how much work remains.","url":"/component/progress","category":"component"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode","category":"component"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.","url":"/component/radio","category":"component"},{"name":"Scroll","description":"The Scroll component enhances scrolling experiences by adding visual cues, such as inner shadows, to indicate additional content. It is useful for horizontally or vertically scrolling lists and containers.","url":"/component/scroll","category":"component"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select","category":"component"},{"name":"Skeleton","description":"Skeletons provide placeholder elements that mimic the layout of content while data is loading. They improve perceived performance by giving users a visual cue that content is being fetched.","url":"/component/skeleton","category":"component"},{"name":"Slider","description":"Sliders allow users to select a numeric value or range by dragging a handle along a track. They are ideal for adjusting settings such as volume, brightness, or price filters.","url":"/component/slider","category":"component"},{"name":"Spacer","description":"Spacers create adjustable gaps between elements within flex layouts, helping to control spacing and alignment without using margin or padding directly.","url":"/component/spacer","category":"component"},{"name":"Spinner","description":"Spinners visually indicate that a background process or operation is ongoing, such as loading data or submitting a form. They help manage user expectations by signaling that the system is working.","url":"/component/spinner","category":"component"},{"name":"Stepper","description":"Stepper is a navigation component that guides users through the steps of a task.","url":"/component/stepper","category":"component"},{"name":"Table","description":"Tables are used to display data in a tabular format.","url":"/component/table","category":"component"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs","category":"component"},{"name":"Tag","description":"Tags are compact elements used to display brief information, such as categories, statuses, or labels. They help organize content and provide quick context or filtering options within lists and interfaces.","url":"/component/tag","category":"component"},{"name":"Textarea","description":"Textareas provide a multi-line input field for users to enter longer text, such as comments, descriptions, or messages. They support resizing and can be customized for different use cases.","url":"/component/textarea","category":"component"},{"name":"Toggle","description":"Toggles provide a simple switch interface for enabling or disabling a setting, or switching between two mutually exclusive states. They are ideal for binary options such as on/off, active/inactive, or show/hide.","url":"/component/toggle","category":"component"},{"name":"Tooltip","description":"Tooltips are used to display a message when hovering over an element.","url":"/component/tooltip","category":"component"},{"name":"Upload","description":"Upload is a component that allows you to upload files.","url":"/component/upload","category":"component"},{"name":"VirtualGrid","description":"VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.","url":"/component/virtualGrid","category":"component"},{"name":"VirtualList","description":"VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.","url":"/component/virtualList","category":"component"}]
+[{"name":"Icons","description":"Custom icon set integration for Indielayer UI components.","url":"/icons","category":"guide"},{"name":"Colors","description":"Color palette, semantic tokens, and color props on components.","url":"/colors","category":"guide"},{"name":"Typography","description":"Type scale and typography utilities used across the library.","url":"/typography","category":"guide"},{"name":"Accordion","description":"Collapsible panels for showing and hiding related content. Use x-accordion with x-accordion-item when space is limited and users need progressive disclosure.","url":"/component/accordion","category":"component"},{"name":"Alert","description":"Inline notices for system, feature, or page status—success, warning, error, or info. Use alerts when the message should stay visible until addressed.","url":"/component/alert","category":"component"},{"name":"Avatar","description":"Displays a user's photo, initials, or icon in a compact frame. Use avatars in lists, headers, and comments to identify people at a glance.","url":"/component/avatar","category":"component"},{"name":"Badge","description":"Small status indicators that overlay or sit beside another element—counts, labels, or presence dots. Use badges to draw attention without interrupting the layout.","url":"/component/badge","category":"component"},{"name":"Breadcrumbs","description":"Shows the current page's place in a navigational hierarchy. Use breadcrumbs for deep page trees so users can jump back to parent sections.","url":"/component/breadcrumbs","category":"component"},{"name":"Button","description":"Clickable controls for primary actions—submit, open dialogs, or run commands. Customize style, size, and icons; group related actions with x-button-group.","url":"/component/button","category":"component"},{"name":"Card","description":"A bordered content container for grouping related information, media, and actions. Use cards in grids and dashboards when each block should stand alone.","url":"/component/card","category":"component"},{"name":"Carousel","description":"A sliding viewport for cycling through images or content panels. Use carousels for galleries and featured items when horizontal space is limited.","url":"/component/carousel","category":"component"},{"name":"Checkbox","description":"Multi-select controls for choosing one or more options independently. Use checkboxes for settings and lists where more than one choice can be active.","url":"/component/checkbox","category":"component"},{"name":"Container","description":"Layout wrapper that constrains content width and alignment for consistent page structure. Use containers to center and pad main content across breakpoints.","url":"/component/container","category":"component"},{"name":"Datepicker","description":"Date and time picker styled as a wrapper around @vuepic/vue-datepicker. Use it for forms that need calendar or datetime selection with Indielayer look and feel.","url":"/component/datepicker","category":"component"},{"name":"Divider","description":"A horizontal or vertical rule that separates sections of content. Use dividers in lists, toolbars, and layouts to create clear visual breaks.","url":"/component/divider","category":"component"},{"name":"Drawer","description":"Panels that slide in from the screen edge for navigation, filters, or extra content. Use drawers when side context should overlay without leaving the page.","url":"/component/drawer","category":"component"},{"name":"Empty","description":"Empty states communicate when there is no content to show. Use them in tables, lists, and panels with a title, description, optional icon, and actions.","url":"/component/empty","category":"component"},{"name":"Form","description":"Structured form wrapper for collecting and validating user input. Use x-form to group fields, run validation, and handle submit in one place.","url":"/component/form","category":"component"},{"name":"FormGroup","description":"Groups related fields with a shared label and validation context. Use form groups for checkboxes, radios, or inputs that belong to one logical section.","url":"/component/formGroup","category":"component"},{"name":"Icon","description":"Icons visually represent actions and concepts. Register SVG paths in a global map, then reference them by name on XIcon.","url":"/component/icon","category":"component"},{"name":"Image","description":"Loads a remote image after preloading. Use a background on the wrapper for a visible placeholder until load completes.","url":"/component/image","category":"component"},{"name":"InfiniteLoader","description":"Loads more list items as the user scrolls near the end of a container. Use InfiniteLoader for feeds and catalogs that grow on demand.","url":"/component/infiniteLoader","category":"component"},{"name":"Input","description":"Single-line text field for entering and editing short values. Use x-input in forms for names, emails, search, and other one-line data.","url":"/component/input","category":"component"},{"name":"Input Group","description":"Input groups combine multiple inline fields (Input, Textarea, Select, Datepicker, Button) into one control with a shared label and footer.","url":"/component/inputGroup","category":"component"},{"name":"Link","description":"Styled anchor for navigating to another page or external URL. Use x-link when you need consistent link styling, external indicators, and accessibility.","url":"/component/link","category":"component"},{"name":"Loader","description":"Full-area loading overlay that blocks interaction while content or an action completes. Use Loader when the whole region should wait before continuing.","url":"/component/loader","category":"component"},{"name":"Menu","description":"Dropdown list of actionable items triggered from a button or other control. Use x-menu with x-menu-item for contextual actions and navigation.","url":"/component/menu","category":"component"},{"name":"Modal","description":"Dialog overlay that focuses attention on a task or message above the current page. Use modals for confirmations, forms, and details that need temporary focus.","url":"/component/modal","category":"component"},{"name":"Notifications","description":"Toast-style feedback for success, warning, or error after an action. Use notifications for transient messages that should not block the page.","url":"/component/notifications","category":"component"},{"name":"Pagination","description":"Controls for moving through large result sets page by page. Use pagination with tables, lists, and search results to keep each view manageable.","url":"/component/pagination","category":"component"},{"name":"Popover","description":"Floating panel anchored to a trigger for extra content or actions. Use popovers for menus and contextual UI without leaving the current view.","url":"/component/popover","category":"component"},{"name":"Progress","description":"Bar that shows how far a task or process has completed. Use progress for uploads, multi-step jobs, and determinate loading states.","url":"/component/progress","category":"component"},{"name":"QR Code","description":"Renders a QR code from a string or URL for scanning with mobile devices. Use it for share links, payments, and quick machine-readable payloads.","url":"/component/qrCode","category":"component"},{"name":"Radio","description":"Radios allow the user to select one option from a set. Use classic radios for standard options, or x-radio-button for a button-shaped variant. Place several x-radio-button options inside x-form-group for a joined segmented control.","url":"/component/radio","category":"component"},{"name":"Scroll","description":"Scroll container with optional edge shadows that hint at more content. Use Scroll for overflow lists and panels that scroll vertically or horizontally.","url":"/component/scroll","category":"component"},{"name":"Select","description":"Dropdown for choosing one or more options from a predefined list. Use Select for enums, filters, and form fields where free text is not needed.","url":"/component/select","category":"component"},{"name":"Skeleton","description":"Placeholder shapes that mirror content layout while data loads. Use skeletons to reduce layout shift and improve perceived loading performance.","url":"/component/skeleton","category":"component"},{"name":"Slider","description":"Track with a draggable handle for picking a numeric value or range. Use sliders for volume, brightness, price filters, and similar continuous settings.","url":"/component/slider","category":"component"},{"name":"Spacer","description":"Flex-friendly gap that expands or shrinks between siblings without extra margin or padding. Use spacers to push items apart in toolbars and rows.","url":"/component/spacer","category":"component"},{"name":"Spinner","description":"Animated indicator that a background process is still running. Use spinners for indeterminate loading when completion percentage is unknown.","url":"/component/spinner","category":"component"},{"name":"Stepper","description":"Multi-step wizard with declarative steps, named panel slots, programmatic next/prev navigation, validation hooks, and optional sidebar summaries.","url":"/component/stepper","category":"component"},{"name":"Table","description":"Tables display tabular data with single- or multi-column sorting, selection, expandable rows, and virtual lists.","url":"/component/table","category":"component"},{"name":"Tabs","description":"Tabbed navigation that switches between related views in the same region. Use x-tab-group with x-tab when content shares context but not space.","url":"/component/tabs","category":"component"},{"name":"Tag","description":"Compact labels for categories, statuses, or filters. Use tags in lists and chip groups when a short keyword should stand out.","url":"/component/tag","category":"component"},{"name":"Textarea","description":"Multi-line text field for longer content such as comments and descriptions. Use Textarea when a single-line input is not enough.","url":"/component/textarea","category":"component"},{"name":"Toggle","description":"Binary switch for on/off settings and mutually exclusive states. Use toggles when the choice should feel instant and reversible.","url":"/component/toggle","category":"component"},{"name":"Tooltip","description":"Tooltips display contextual help on hover. Use XToggleTip for a compact info-icon pattern beside labels.","url":"/component/tooltip","category":"component"},{"name":"Upload","description":"File picker with drag-and-drop for selecting one or more files to upload. Use Upload when forms need images, documents, or other file input with accept filters.","url":"/component/upload","category":"component"},{"name":"VirtualGrid","description":"Renders only visible cells of a large grid for better scroll performance. Use VirtualGrid when a dense grid would be too heavy to mount all at once.","url":"/component/virtualGrid","category":"component"},{"name":"VirtualList","description":"Renders only visible rows of a long list for better scroll performance. Use VirtualList for feeds and catalogs with thousands of items.","url":"/component/virtualList","category":"component"}]

package/docs/utils/shikiHighlighter.ts

@@ -0,0 +1,22 @@
+import { createHighlighter, type Highlighter, type ThemeRegistrationRaw } from 'shiki'
+import indielayerTheme from '../components/common/Indielayer-theme.json'
+
+/** Theme id from {@link indielayerTheme} `name` field. */
+export const INDIELAYER_THEME = 'Indielayer' as const
+
+/** Languages used in docs code snippets. */
+export const DOCS_CODE_LANGS = ['js', 'ts', 'vue-html', 'bash', 'vue'] as const
+
+export type DocsCodeLang = typeof DOCS_CODE_LANGS[number]
+
+// VS Code theme JSON uses `tokenColors`; Shiki accepts it at runtime via normalization.
+const theme = indielayerTheme as unknown as ThemeRegistrationRaw
+
+/**
+ * Long-lived highlighter for docs code blocks.
+ * @see https://shiki.style/guide/install#highlighter-usage
+ */
+export const docsHighlighter: Promise<Highlighter> = createHighlighter({
+  langs: [...DOCS_CODE_LANGS],
+  themes: [theme],
+})

package/exports/nuxt.mjs

@@ -6,7 +6,7 @@ export default defineNuxtModule({
     name: '@indielayer/ui',
     configKey: 'indielayer',
     compatibility: {
-      nuxt: '^3.0.0',
+      nuxt: '>=3.0.0',
     },
   },
   defaults: {

package/exports/nuxt.plugin.js

@@ -1,6 +1,7 @@
 import { defineNuxtPlugin } from '#app'
 import { BaseTheme, injectIconsKey, injectOptionsKey, injectThemeKey, createUI } from '../src'
 
+// Configure via runtimeConfig.public.indielayerOptions (theme, icons, defaults, etc.)
 export default defineNuxtPlugin((nuxtApp) => {
   const UI = createUI({
     ...nuxtApp.$config.public?.indielayerOptions,