@rdlabo/capacitor-native-ui 0.0.0-stage → 2.0.0-1

package/package.json

@@ -1,6 +1,91 @@
 {
+  "version": "2.0.0-1",
+  "author": "Masahiko Sakakibara <sakakibara@rdlabo.jp>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rdlabo-dev/ionic-theme-ios27.git",
+    "directory": "packages/capacitor-native-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/rdlabo-dev/ionic-theme-ios27/issues"
+  },
+  "type": "module",
   "name": "@rdlabo/capacitor-native-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "description": "Web-owned native UI projection for Capacitor",
+  "keywords": [
+    "capacitor",
+    "plugin",
+    "native",
+    "ios",
+    "android"
+  ],
+  "main": "./dist/native/index.js",
+  "module": "./dist/native/index.js",
+  "types": "./dist/native/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/native/index.d.ts",
+      "import": "./dist/native/index.js"
+    },
+    "./vertical-bars": {
+      "types": "./dist/vertical-bars.d.ts",
+      "import": "./dist/vertical-bars.js"
+    },
+    "./integration": {
+      "types": "./dist/native-integration/index.d.ts",
+      "import": "./dist/native-integration/index.js"
+    },
+    "./package.json": "./package.json",
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.js"
+    }
+  },
+  "files": [
+    "android/src/main/",
+    "android/build.gradle",
+    "android/proguard-rules.pro",
+    "dist/",
+    "src/",
+    "ios/Sources",
+    "ios/Tests",
+    "Package.swift",
+    "RdlaboCapacitorNativeUi.podspec",
+    "LICENSE",
+    "README.md",
+    "docs"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run docgen && tsc --noEmit && rdlabo-build-theme",
+    "clean": "rm -rf dist",
+    "docgen": "docgen --project tsconfig.docgen.json --api NativeUIHandle --output-readme docs/native-ui.md && docgen --project tsconfig.docgen.json --api VerticalControlAreaHandle --output-readme docs/vertical-bars.md",
+    "prepublishOnly": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@capacitor/core": ">=8.0.0 <9",
+    "@ionic/core": ">=8.8.1 <10"
+  },
+  "capacitor": {
+    "ios": {
+      "src": "ios"
+    },
+    "android": {
+      "src": "android"
+    }
+  },
+  "peerDependenciesMeta": {
+    "@ionic/core": {
+      "optional": true
+    },
+    "@capacitor/core": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@rdlabo/ionic-theme-utils": "0.1.4"
+  }
+}

package/src/core.ts

@@ -0,0 +1,14 @@
+/** Standard native UI and app-local SwiftUI and Compose extensions. No Ionic runtime import. */
+export { enableNativeUI } from './native/startup';
+export { defineNativeUI } from './native/extensions';
+export type { NativeUIExtension, NativeUIValue, NativeUIReadContext, NativeUIImageReference } from './native/extensions';
+export type {
+  NativeUIOptions,
+  NativeUIVerticalBarsOptions,
+  NativeUIControls,
+  ControlProjection,
+  IonicProjectionOptions,
+  NativeUIHandle,
+  NativeUIStatus,
+  NativeUISuspension,
+} from './native/definitions';

package/src/native/activation.ts

@@ -0,0 +1,385 @@
+import { controlDefault } from './shared/control-options';
+import { toolbarOptions } from './shared/toolbar-options';
+import { createDiagnostics } from './shared/diagnostics';
+import { createHTMLWebProjection } from './html';
+import { validateExtensions, type NativeUIExtension } from './extensions';
+import { Capacitor, registerPlugin } from '@capacitor/core';
+import { nativeWebViewMetrics } from '../native-integration';
+import type { NativeUIRuntimeHandle, NativeUIRuntimeOptions, NativeUIPlugin, VerticalBarEdge, WebViewMetrics } from './definitions';
+import { createRuntime } from './runtime';
+import { bounded, boundedListener } from './shared/bridge';
+interface OverlayController {
+  suspend(): Promise<() => void>;
+  destroy(): Promise<void>;
+}
+type OverlayFactory = (
+  doc: Document,
+  plugin: NativeUIPlugin,
+  options: NativeUIRuntimeOptions,
+  retain: (deferActivation?: (id: string) => boolean) => () => void,
+  nativeRail: () => boolean,
+) => Promise<OverlayController>;
+import { createVerticalBarsWebProjection } from './vertical-bars-web';
+import { prehideVerticalBarsToolbarSources } from './prehide';
+import { observeVerticalBarsModals } from './shared/modal';
+export { defineNativeUI } from './extensions';
+export type { NativeUIExtension, NativeUIValue } from './extensions';
+export type {
+  NativeUIComponent,
+  NativeUIControls,
+  NativeUIRuntimeHandle,
+  NativeUIRuntimeOptions,
+  NativeUIStatus,
+  NativeUISuspension,
+  VerticalBarEdge,
+  WebViewMetrics,
+} from './definitions';
+
+const plugin = registerPlugin<NativeUIPlugin>('NativeUI');
+export const NativeUI = plugin;
+let active: Promise<NativeUIRuntimeHandle> | undefined;
+let activeFailed = false;
+let activeRoot: HTMLElement | undefined;
+let activeRailHost: HTMLElement | undefined;
+let activeConfiguration: string | undefined;
+let activeExtensions: readonly NativeUIExtension[] = [];
+let stopping: Promise<void> | undefined;
+
+// Every stop entry point releases the activation immediately but reserves the
+// shared native/DOM resources until its teardown has settled.
+const stopActivation = (owner: Promise<NativeUIRuntimeHandle>, destruction: Promise<void>) => {
+  if (active !== owner) return;
+  active = undefined;
+  activeFailed = false;
+  activeConfiguration = undefined;
+  activeRoot = undefined;
+  activeRailHost = undefined;
+  activeExtensions = [];
+  stopping = destruction;
+  const release = () => {
+    if (stopping === destruction) stopping = undefined;
+  };
+  void destruction.then(release, release);
+};
+const web = (reason: string): NativeUIRuntimeHandle => ({
+  markForCheck: () => {},
+  getStatus: () => ({ state: 'web', projected: 0, updates: 0, reason }),
+  suspend: async () => ({ resume: async () => {} }),
+  destroy: async () => {},
+});
+
+const combine = (native: NativeUIRuntimeHandle, fallback: NativeUIRuntimeHandle): NativeUIRuntimeHandle => ({
+  markForCheck() {
+    native.markForCheck();
+    fallback.markForCheck();
+  },
+  getStatus() {
+    const nativeStatus = native.getStatus();
+    const fallbackStatus = fallback.getStatus();
+    return {
+      ...nativeStatus,
+      state:
+        nativeStatus.state === 'stopped' && fallbackStatus.state === 'stopped' ? 'stopped' : nativeStatus.projected > 0 ? 'native' : 'web',
+      projected: nativeStatus.projected + fallbackStatus.projected,
+      updates: nativeStatus.updates + fallbackStatus.updates,
+    };
+  },
+  async suspend() {
+    const [nativeLease, fallbackLease] = await Promise.all([native.suspend(), fallback.suspend()]);
+    return { resume: async () => void (await Promise.all([nativeLease.resume(), fallbackLease.resume()])) };
+  },
+  async destroy() {
+    await Promise.all([native.destroy(), fallback.destroy()]);
+  },
+});
+
+/** Wraps a runtime handle with the shared enable-lifecycle: reason, suspend hooks and idempotent destroy. */
+const manage = (
+  handle: NativeUIRuntimeHandle,
+  lifecycle: {
+    reason?: string;
+    suspend?: () => (() => void) | undefined | Promise<(() => void) | undefined>;
+    /** Registers teardown before it starts so direct destroy and disable share the same queue. */
+    stopping?: (destruction: Promise<void>) => void;
+    destroy?: () => void | Promise<void>;
+  } = {},
+): NativeUIRuntimeHandle => {
+  let destruction: Promise<void> | undefined;
+  return {
+    markForCheck: () => {
+      if (!destruction) handle.markForCheck();
+    },
+    getStatus: () => (lifecycle.reason ? { ...handle.getStatus(), reason: lifecycle.reason } : handle.getStatus()),
+    async suspend() {
+      const lease = await handle.suspend();
+      const resume = await lifecycle.suspend?.();
+      return {
+        async resume() {
+          await lease.resume();
+          resume?.();
+        },
+      };
+    },
+    destroy() {
+      if (!destruction) {
+        destruction = Promise.resolve().then(async () => {
+          try {
+            await handle.destroy();
+          } finally {
+            await lifecycle.destroy?.();
+          }
+        });
+        lifecycle.stopping?.(destruction);
+      }
+      return destruction;
+    },
+  };
+};
+
+/** Reads the current native WebView geometry and applies it to page transitions. */
+export const configureNativeTransition = async (): Promise<WebViewMetrics> => {
+  const metrics =
+    typeof document !== 'undefined' && Capacitor.getPlatform() === 'ios' && Capacitor.isPluginAvailable('NativeUI')
+      ? await bounded(plugin.getWebViewMetrics())
+      : { radius: 0 };
+  nativeWebViewMetrics.radius = metrics.radius;
+  return metrics;
+};
+
+/** Resolves a logical vertical-bar edge to the physical side for the given direction. */
+const physicalVerticalBarEdge = (edge: Exclude<VerticalBarEdge, null>, rtl: boolean): 'left' | 'right' =>
+  (edge === 'leading') !== rtl ? 'left' : 'right';
+
+const elementRtl = (element: Element): boolean => element.closest('[dir]')?.getAttribute('dir') === 'rtl';
+
+const webProjection = (doc: Document, options: NativeUIRuntimeOptions, enabled: () => boolean = () => true) => {
+  const ionic = () => createVerticalBarsWebProjection(doc, options, () => options.verticalBars?.enabled !== false && enabled());
+  if (options.source === 'html') return createHTMLWebProjection(doc, options);
+  if (options.source === 'auto') return combine(ionic(), createHTMLWebProjection(doc, options));
+  return ionic();
+};
+
+/** Call once at application startup. Ionic markup remains the source of truth. */
+export const enableNativeUI = (options: NativeUIRuntimeOptions = {}, overlayFactory?: OverlayFactory): Promise<NativeUIRuntimeHandle> => {
+  if (typeof document === 'undefined') return Promise.resolve(web('Requires a document'));
+  const extensions = [...(options.extensions ?? [])];
+  const nativeState: NonNullable<NativeUIRuntimeOptions['nativeState']> = (options.nativeState = {});
+  try {
+    validateExtensions(extensions, document);
+  } catch (error) {
+    return Promise.reject(error);
+  }
+  const configuration = JSON.stringify([
+    options.source ?? 'ionic',
+    options.debug === true,
+    options.ionic?.auto !== false,
+    options.verticalBars?.enabled !== false,
+    options.verticalBars?.placement?.edge,
+    options.rail?.edge,
+    toolbarOptions(options, false),
+    toolbarOptions(options, true),
+    options.ionic?.verticalBars?.buttonProjection ?? 'system',
+    // Local source overrides can use this even when the startup projection is system.
+    options.ionic?.verticalBars?.buttonDefaultFill ?? 'glass',
+    ...(['tabs', 'segment', 'fab'] as const).flatMap((kind) => [controlDefault(options, kind, false), controlDefault(options, kind, true)]),
+    options.ionic?.verticalBars?.popover === true,
+  ]);
+  if (active && activeFailed) {
+    const previous = active;
+    stopActivation(
+      previous,
+      previous.then((handle) => handle.destroy()),
+    );
+  }
+  if (
+    active &&
+    (activeConfiguration !== configuration ||
+      activeRoot !== options.root ||
+      activeRailHost !== options.rail?.host ||
+      extensions.length !== activeExtensions.length ||
+      extensions.some((extension, index) => extension !== activeExtensions[index]))
+  )
+    return Promise.reject(
+      new Error('Native UI is already running with different controls or extensions; destroy it before changing configuration.'),
+    );
+  if (active) return active;
+  activeConfiguration = configuration;
+  activeRoot = options.root;
+  activeRailHost = options.rail?.host;
+  activeExtensions = extensions;
+  const previousStop = stopping;
+  let start: Promise<NativeUIRuntimeHandle>;
+  const stop = (destruction: Promise<void>) => stopActivation(start, destruction);
+  let releaseNative = async () => {};
+  let retired = false;
+  const pagehide = () => runtimeStopped('pagehide');
+  const runtimeStopped = (cause: 'failure' | 'pagehide') => {
+    if (cause === 'failure') {
+      // Keep the Web rail usable, but replace this degraded activation on the next enable.
+      if (active === start) activeFailed = true;
+      void start
+        .then(async () => {
+          if (!retired) document.defaultView?.addEventListener('pagehide', pagehide, { once: true });
+          await releaseNative();
+        })
+        .catch(() => {});
+      return;
+    }
+    const destruction = start.then((handle) => handle.destroy());
+    stop(destruction);
+    void destruction.catch(() => {});
+  };
+  return (start = active =
+    (async () => {
+      // Native controls and DOM ownership are shared. A replacement activation
+      // must wait until the old handle has finished clearing both surfaces.
+      if (previousStop) await previousStop.catch(() => {});
+      const platform = Capacitor.getPlatform();
+      const diagnose = createDiagnostics(options.debug);
+      const stopModals = options.source === 'html' ? () => {} : observeVerticalBarsModals(document);
+      const prehide =
+        platform !== 'android' && options.source !== 'html' && options.ionic?.auto !== false
+          ? prehideVerticalBarsToolbarSources(document, () => options.verticalBars?.enabled !== false, options.root, options)
+          : undefined;
+      const fallback = (reason: string) => {
+        diagnose(`web-fallback: ${reason}`);
+        return manage(webProjection(document, options), {
+          reason,
+          suspend: () => prehide?.suspend(),
+          destroy: () => {
+            retired = true;
+            document.defaultView?.removeEventListener('pagehide', pagehide);
+            prehide?.stop();
+            stopModals();
+          },
+          stopping: stop,
+        });
+      };
+      if (platform !== 'ios' && platform !== 'android') return fallback('Requires Capacitor iOS or Android');
+      if (!Capacitor.isPluginAvailable('NativeUI')) return fallback('Native UI plugin is not registered');
+      let runtime: NativeUIRuntimeHandle | undefined;
+      let overlays: OverlayController | undefined;
+      let metricsListener: Awaited<ReturnType<typeof plugin.addListener>> | undefined;
+      let nativeRelease: Promise<void> | undefined;
+      releaseNative = () =>
+        (nativeRelease ??= (async () => {
+          try {
+            await overlays?.destroy();
+          } finally {
+            if (metricsListener) await bounded(metricsListener.remove()).catch(() => {});
+          }
+        })());
+      const cleanup = async () => {
+        retired = true;
+        try {
+          await releaseNative();
+        } finally {
+          document.defaultView?.removeEventListener('pagehide', pagehide);
+          prehide?.stop();
+          stopModals();
+        }
+      };
+      try {
+        const ordinaryControls = (['button', 'backButton', 'tabs', 'segment', 'fab'] as const).some((kind) =>
+          controlDefault(options, kind, false),
+        );
+        const capabilities = await bounded(plugin.configure({ suppressScrollEdgeEffect: ordinaryControls }));
+        if (!capabilities.supported) return fallback('Native UI is unavailable on this device');
+        const unavailableExtensions = new Map<string, string>();
+        for (const extension of extensions) {
+          if (platform === 'android' && extension.placement === 'tab-accessory')
+            unavailableExtensions.set(extension.name, 'unsupported-placement: tab-accessory requires a supported iOS tab host.');
+          else if (!capabilities.extensions?.includes(extension.name))
+            unavailableExtensions.set(
+              extension.name,
+              'unregistered-extension: register this name in the native app before enabling the shell, then rebuild.',
+            );
+        }
+        if (platform === 'android') {
+          runtime = await createRuntime(
+            document,
+            plugin,
+            {
+              ...options,
+              source: 'extensions',
+              extensions,
+              unavailableExtensions,
+            },
+            () => false,
+            runtimeStopped,
+          );
+          runtime = combine(runtime, webProjection(document, options));
+          metricsListener = await boundedListener(
+            plugin.addListener('webViewMetricsChange', () => {
+              document.defaultView?.dispatchEvent(new Event('nativeUIRefresh'));
+            }),
+          );
+          return manage(runtime, {
+            stopping: stop,
+            destroy: cleanup,
+          });
+        }
+        let deviceEdge: VerticalBarEdge = null;
+        const ionicRoot = () => {
+          if (options.source === 'html') return null;
+          const root = options.root ?? document.body;
+          return root.closest<HTMLElement>('ion-app') ?? root.querySelector<HTMLElement>('ion-app');
+        };
+        const updateNativeEdge = () => {
+          const requested = options.verticalBars?.placement?.edge;
+          const root = ionicRoot() ?? options.root ?? document.body;
+          nativeState.edge =
+            deviceEdge && (!requested || requested === deviceEdge) ? physicalVerticalBarEdge(deviceEdge, elementRtl(root)) : undefined;
+        };
+        // Ionic layout is read-only input; device metrics determine native availability.
+        const nativeVerticalBars = () => {
+          updateNativeEdge();
+          if (options.verticalBars?.enabled === false) return false;
+          const app = ionicRoot();
+          if (!app?.classList.contains('ios-theme-vertical-bars')) return !!nativeState.edge;
+          const physicalEdge = app.classList.contains('ios-theme-vertical-bars-left') ? 'left' : 'right';
+          return physicalEdge === nativeState.edge;
+        };
+        const applyMetrics = (metrics: WebViewMetrics) => {
+          if (ordinaryControls) nativeWebViewMetrics.radius = metrics.radius;
+          deviceEdge = metrics.verticalBarEdge ?? null;
+          updateNativeEdge();
+          document.defaultView?.dispatchEvent(new Event('nativeUIRefresh'));
+        };
+        metricsListener = await boundedListener(plugin.addListener('webViewMetricsChange', applyMetrics));
+        await bounded(Promise.resolve().then(() => plugin.getWebViewMetrics()))
+          .then(applyMetrics)
+          .catch(() => undefined);
+        const native = await createRuntime(
+          document,
+          plugin,
+          { ...options, extensions, unavailableExtensions },
+          nativeVerticalBars,
+          runtimeStopped,
+        );
+        runtime = combine(
+          native,
+          webProjection(document, options, () => !nativeVerticalBars() || native.getStatus().projected === 0),
+        );
+        if (options.ionic?.verticalBars?.popover === true && overlayFactory)
+          overlays = await overlayFactory(document, plugin, options, native.retain, nativeVerticalBars);
+        return manage(runtime, {
+          suspend: async () => {
+            const restorePrehide = prehide?.suspend();
+            const resumeOverlays = await overlays?.suspend();
+            return () => {
+              restorePrehide?.();
+              resumeOverlays?.();
+            };
+          },
+          stopping: stop,
+          destroy: cleanup,
+        });
+      } catch (error) {
+        await overlays?.destroy().catch(() => {});
+        await runtime?.destroy().catch(() => {});
+        if (metricsListener) await bounded(metricsListener.remove()).catch(() => {});
+        return fallback(error instanceof Error ? error.message : String(error));
+      }
+    })());
+};

package/src/native/components/index.ts

@@ -0,0 +1,45 @@
+import type { VerticalControlAreaOptions } from '../definitions';
+import * as button from './ion-button';
+import * as buttons from './ion-buttons';
+import * as backButton from './ion-back-button';
+import * as menuButton from './ion-menu-button';
+import * as tabBar from './ion-tab-bar';
+import * as segment from './ion-segment';
+import * as fab from './ion-fab';
+import { isVerticalBarsSource, visible, withoutPrehide } from '../shared/dom';
+import type { Candidate, Identify } from '../shared/candidate';
+
+// Static composition only. Each component declares its own tag, discovery and reader.
+export const components = [button, buttons, backButton, menuButton, tabBar, segment, fab] as const;
+export type NativeUIComponent = (typeof components)[number]['tag'];
+export const selector = components
+  .map((component) => ('selector' in component ? component.selector : component.tag))
+  .filter(Boolean)
+  .join(', ');
+export const shadowSelector = [
+  'ion-icon',
+  ...components.flatMap((component) => ('shadowSelector' in component ? [component.shadowSelector] : [])),
+].join(', ');
+export const motionSelector = [
+  '.ion-page',
+  'ion-header',
+  'ion-footer',
+  'ion-toolbar',
+  ...components.filter((component) => 'tracksMotion' in component && component.tracksMotion).map((component) => component.tag),
+].join(', ');
+
+export const isVerticalBarsCandidate = isVerticalBarsSource;
+
+export const readCandidate = (element: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {
+  const verticalBars = isVerticalBarsCandidate(element);
+  if (
+    (!element.classList.contains('ios') && !verticalBars) ||
+    !visible(element, verticalBars) ||
+    element.closest('ion-popover') ||
+    (element.closest('ion-modal') && !verticalBars)
+  )
+    return;
+  if (element.contains(element.ownerDocument.activeElement)) return;
+  // Read icon and control geometry before restoring prehide, which can collapse the toolbar.
+  return withoutPrehide(element, () => components.find((component) => component.tag === element.localName)?.read(element, id, options));
+};

package/src/native/components/ion-back-button.ts

@@ -0,0 +1,22 @@
+import type { VerticalControlAreaOptions } from '../definitions';
+import { horizontalSelected, inVerticalToolbarLayout } from '../shared/toolbar-options';
+import { createCandidate, appendItem } from '../shared/candidate';
+import type { Candidate, Identify } from '../shared/candidate';
+import { inFixedToolbar, isVerticalBarsSource } from '../shared/dom';
+
+export const tag = 'ion-back-button';
+
+export const read = (element: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {
+  const button = element as HTMLIonBackButtonElement;
+  if (
+    (inVerticalToolbarLayout(element) ? !isVerticalBarsSource(element) : !horizontalSelected(element, options)) ||
+    !button.shadowRoot ||
+    button.icon !== undefined ||
+    button.color !== undefined ||
+    (!isVerticalBarsSource(element) && !inFixedToolbar(element))
+  )
+    return;
+  const candidate = createCandidate(element, tag, id);
+  const label = button.shadowRoot.querySelector('[part="text"]')?.textContent?.trim() ?? '';
+  return appendItem(candidate, element, id, button.shadowRoot, label) ? candidate : undefined;
+};

package/src/native/components/ion-button.ts

@@ -0,0 +1,25 @@
+import { horizontalSelected, horizontalToolbarGroup, inVerticalToolbarLayout } from '../shared/toolbar-options';
+import type { VerticalControlAreaOptions } from '../definitions';
+import { createCandidate, appendItem } from '../shared/candidate';
+import type { Candidate, Identify } from '../shared/candidate';
+import { inFixedToolbar, isVerticalBarsToolbarAction, isVerticalBarsToolbarGroup } from '../shared/dom';
+
+export const tag = 'ion-button';
+
+export const read = (element: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {
+  const button = element as HTMLIonButtonElement;
+  const verticalBars = inVerticalToolbarLayout(element);
+  if (verticalBars && element.parentElement && isVerticalBarsToolbarGroup(element.parentElement)) return;
+  const fill = button.fill ?? 'default';
+  const group = element.parentElement?.matches('ion-buttons') ? element.parentElement : undefined;
+  if (!verticalBars && (!horizontalSelected(element, options) || (group && horizontalToolbarGroup(group, options)))) return;
+  if (
+    !inFixedToolbar(element) ||
+    (verticalBars && !isVerticalBarsToolbarAction(element)) ||
+    (!verticalBars && fill !== 'default' && !(group && fill === 'clear')) ||
+    (!verticalBars && button.classList.contains('ion-color'))
+  )
+    return;
+  const candidate = createCandidate(element, tag, id, options);
+  return appendItem(candidate, element, id) ? candidate : undefined;
+};

package/src/native/components/ion-buttons.ts

@@ -0,0 +1,37 @@
+import { horizontalToolbarGroup, inVerticalToolbarLayout } from '../shared/toolbar-options';
+import type { VerticalControlAreaOptions } from '../definitions';
+import { createCandidate, appendItem } from '../shared/candidate';
+import type { Candidate, Identify } from '../shared/candidate';
+import { childElements, verticalBarsToolbarActions, inFixedToolbar, isVerticalBarsToolbarGroup } from '../shared/dom';
+import * as menuButton from './ion-menu-button';
+
+export const tag = 'ion-buttons';
+export const tracksMotion = true;
+
+export const read = (element: HTMLElement, id: Identify, options: VerticalControlAreaOptions = {}): Candidate | undefined => {
+  if (!inFixedToolbar(element)) return;
+  let children = childElements(element);
+  const verticalBars = inVerticalToolbarLayout(element);
+  if (verticalBars ? !isVerticalBarsToolbarGroup(element) : !horizontalToolbarGroup(element, options)) return;
+  if (children.length === 1) return menuButton.read(element, id, options);
+  if (verticalBars) children = verticalBarsToolbarActions(element);
+  if (
+    !children.length ||
+    children.some(
+      (child) =>
+        !child.matches(`${menuButton.tag}${verticalBars ? '' : '.ios'}`) &&
+        (!child.matches(`ion-button${verticalBars ? '' : '.ios.button-clear'}`) ||
+          (!verticalBars && (child as HTMLIonButtonElement).fill !== 'clear')),
+    )
+  )
+    return;
+  const candidate = createCandidate(element, tag, id, options);
+  if (verticalBars && children.length !== childElements(element).length) candidate.sources = children;
+  for (const child of children) {
+    const supported = child.matches(menuButton.tag)
+      ? menuButton.append(candidate, child as HTMLIonMenuButtonElement, id)
+      : appendItem(candidate, child, id);
+    if (!supported) return;
+  }
+  return candidate;
+};