@ui-sdk/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/use-primitive.js

@@ -0,0 +1,462 @@
+// src/use-primitive.ts
+import {
+  attrs as partAttrs,
+  createListSnapshots,
+  directNames,
+  handlers as partHandlers,
+  keep,
+  partState,
+  present as isPresent,
+  ref,
+  renderVersion,
+  sameSlotState,
+  selectedKeys,
+  subscribe,
+  takeOwnId,
+  unwatched,
+  yieldToAuthor
+} from "@ui-sdk/core/renderer";
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  h,
+  inject,
+  normalizeClass,
+  normalizeStyle,
+  onMounted,
+  onScopeDispose,
+  onUnmounted,
+  provide,
+  shallowRef,
+  toRaw,
+  useAttrs,
+  useId,
+  useSlots,
+  watchEffect
+} from "vue";
+import { slotContent } from "./children.js";
+import { useBindings } from "./lifecycle.js";
+var optionalBoolean = { type: Boolean, default: void 0 };
+var orModel = (value, model) => value === void 0 ? model : value;
+var combined = /* @__PURE__ */ new WeakMap();
+function bothRefs(a, b) {
+  if (!a || !b) {
+    return a ?? b;
+  }
+  let inner = combined.get(a);
+  if (!inner) {
+    combined.set(a, inner = /* @__PURE__ */ new WeakMap());
+  }
+  let ref2 = inner.get(b);
+  if (!ref2) {
+    ref2 = (el) => {
+      a(el);
+      b(el);
+    };
+    inner.set(b, ref2);
+  }
+  return ref2;
+}
+var styles = /* @__PURE__ */ new Map();
+function styleObject(css) {
+  let style = styles.get(css);
+  if (style) {
+    return style;
+  }
+  style = {};
+  for (const declaration of css.split(";")) {
+    const index = declaration.indexOf(":");
+    if (index !== -1) {
+      style[declaration.slice(0, index).trim()] = declaration.slice(index + 1).trim();
+    }
+  }
+  if (styles.size >= 500) {
+    styles.clear();
+  }
+  styles.set(css, style);
+  return style;
+}
+var listenerProps = /* @__PURE__ */ new Map();
+function listenerProp(type) {
+  let prop = listenerProps.get(type);
+  if (!prop) {
+    listenerProps.set(
+      type,
+      prop = `on${type[0].toUpperCase()}${type.slice(1)}`
+    );
+  }
+  return prop;
+}
+function mergeAttrs(result, attrs) {
+  const own = yieldToAuthor(attrs, (name) => result[name] != null);
+  for (const key in own) {
+    const value = own[key];
+    if (value === void 0 || key === "id" && result.id != null) {
+      continue;
+    }
+    if (key === "style") {
+      result.style = result.style ? normalizeStyle([result.style, styleObject(value)]) : styleObject(value);
+    } else {
+      result[key] = key === "class" && result.class ? normalizeClass([result.class, value]) : value;
+    }
+  }
+  return result;
+}
+var scopes = /* @__PURE__ */ new WeakMap();
+function scopeKey(primitive) {
+  let key = scopes.get(primitive);
+  if (!key) {
+    scopes.set(primitive, key = Symbol(primitive.name));
+  }
+  return key;
+}
+var pascal = (name) => name.replace(/(^|-)(\w)/g, (_, _dash, char) => char.toUpperCase());
+function useScope(primitive) {
+  return inject(scopeKey(primitive), null);
+}
+function useHandle(primitive) {
+  const scope = useScope(primitive);
+  if (!scope) {
+    const name = pascal(primitive.name);
+    throw new Error(`${name} parts must be used inside <${name}>.`);
+  }
+  return scope.handle;
+}
+function provideHandle(handle) {
+  provide(scopeKey(handle.primitive), {
+    handle,
+    around: {}
+  });
+}
+function provideProps(primitive, slot, props) {
+  const scope = useScope(primitive);
+  if (scope) {
+    provide(scopeKey(primitive), {
+      ...scope,
+      around: { ...scope.around, [slot]: props }
+    });
+  }
+}
+var memo = (compute) => {
+  const value = computed(compute);
+  return () => value.value;
+};
+function usePrimitive(primitive, options) {
+  const id = `ui-sdk-${useId()}`;
+  const snapshot = createListSnapshots(primitive, memo);
+  const instance = unwatched(
+    () => primitive(snapshot({ ...options(), id }))
+  );
+  onMounted(() => keep(instance));
+  const version = shallowRef(renderVersion(instance));
+  onScopeDispose(
+    instance.subscribe(() => version.value = renderVersion(instance))
+  );
+  onScopeDispose(() => instance.destroy());
+  watchEffect(() => instance.setOptions(snapshot({ ...options(), id })));
+  const partRef = useBindings();
+  const watchPart = createPartWatcher(instance);
+  watchers.set(instance, watchPart);
+  const track = (part) => {
+    const owner = getCurrentInstance();
+    if (owner) {
+      return watchPart(owner, part);
+    }
+    version.value;
+  };
+  const value = {
+    primitive,
+    instance,
+    // Read when used, since reading it wakes an asleep instance.
+    get api() {
+      return instance.api;
+    },
+    // Reading it inside a render tracks every change that affects rendering.
+    get state() {
+      version.value;
+      return instance.get();
+    },
+    // Reading it inside a render tracks this part's presence.
+    present(name, props) {
+      const part = instance.part(name, props);
+      const present = isPresent(part);
+      const watched = track(part);
+      if (watched) {
+        watched.present = present;
+      }
+      return present;
+    },
+    // Attributes, listeners and a ref for a slot's element. Vue binds HTML
+    // attributes as-is. User listeners run first and can preventDefault().
+    // Reading it inside a render tracks the part's attributes.
+    slot(name, props, user = {}) {
+      const part = instance.part(name, props);
+      takeOwnId(part, user.id);
+      const attrs = partAttrs(part);
+      const watched = track(part);
+      if (watched) {
+        watched.attrs = attrs;
+      }
+      const result = {};
+      for (const key in user) {
+        if (key !== "ref") {
+          result[key] = user[key];
+        }
+      }
+      mergeAttrs(result, attrs);
+      const handlers = partHandlers(part);
+      for (const type in handlers) {
+        const prop = listenerProp(type);
+        const handler = handlers[type];
+        const userHandler = result[prop];
+        result[prop] = userHandler ? (event) => {
+          for (const fn of [userHandler].flat()) {
+            fn?.(event);
+          }
+          handler(event);
+        } : handler;
+      }
+      result.ref = bothRefs(
+        user.ref,
+        partRef(ref(part, { by: "framework", attaches: "all" }), name)
+      );
+      return result;
+    }
+  };
+  provideHandle(value);
+  return value;
+}
+var watchers = /* @__PURE__ */ new WeakMap();
+function createPartWatcher(instance) {
+  const owners = /* @__PURE__ */ new WeakMap();
+  function check(part, watch, liveOnly) {
+    watch.onChange?.();
+    const moved = () => watch.present !== void 0 && isPresent(part, watch.props) !== watch.present;
+    if (liveOnly) {
+      if (moved()) {
+        watch.tick.value++;
+      }
+      return;
+    }
+    const version = renderVersion(instance);
+    if (version === watch.version) {
+      return;
+    }
+    watch.version = version;
+    if (moved() || watch.attrs && !sameAttrs(
+      partAttrs(part, watch.props),
+      watch.attrs,
+      directNames(part)
+    )) {
+      watch.tick.value++;
+    }
+  }
+  return (owner, part) => {
+    let watched = owners.get(owner);
+    if (!watched) {
+      const own = watched = /* @__PURE__ */ new Map();
+      owners.set(owner, own);
+      onUnmounted(() => own.forEach((watch2) => watch2.unsubscribe?.()), owner);
+    }
+    let watch = watched.get(part);
+    if (!watch) {
+      watched.set(
+        part,
+        watch = { tick: shallowRef(0), props: part.props, version: 0 }
+      );
+    }
+    watch.props = part.props;
+    watch.version = renderVersion(instance);
+    const subscription = selectedKeys(part);
+    if (watch.subscription !== subscription) {
+      const current = watch;
+      current.unsubscribe?.();
+      current.subscription = subscription;
+      current.unsubscribe = subscribe(
+        part,
+        (liveOnly) => check(part, current, liveOnly)
+      );
+    }
+    watch.tick.value;
+    return watch;
+  };
+}
+function sameAttrs(a, b, skip = []) {
+  const keys = Object.keys(a);
+  return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key] || skip.includes(key));
+}
+function copyProps(props) {
+  const copy = {};
+  for (const key in toRaw(props)) {
+    copy[key] = props[key];
+  }
+  return copy;
+}
+function trackedState(instance, name, props) {
+  const tick = shallowRef(0);
+  let last;
+  let unsubscribe;
+  const read = /* @__PURE__ */ new Set();
+  const current = () => partState(instance.part(name, props()));
+  const changed = (next) => {
+    for (const key of read) {
+      if (!sameSlotState(next[key], last[key])) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const listener = () => {
+    const next = current();
+    if (!changed(next)) {
+      return;
+    }
+    last = next;
+    read.clear();
+    tick.value++;
+  };
+  const component = getCurrentInstance();
+  const shared = component && watchers.get(instance);
+  let watch;
+  let subscribed;
+  let selected;
+  const watchPart = (part) => {
+    const values = selectedKeys(part);
+    if (part === subscribed && values === selected) {
+      return;
+    }
+    subscribed = part;
+    selected = values;
+    if (shared) {
+      if (watch) {
+        watch.onChange = void 0;
+      }
+      watch = shared(component, part);
+      watch.onChange = listener;
+      return;
+    }
+    unsubscribe?.();
+    unsubscribe = subscribe(part, listener);
+  };
+  onScopeDispose(() => unsubscribe?.());
+  return new Proxy({}, {
+    get(_, key) {
+      tick.value;
+      const part = instance.part(name, props());
+      last = partState(part);
+      if (typeof key === "string") {
+        read.add(key);
+      }
+      watchPart(part);
+      return last[key];
+    }
+  });
+}
+var SlotHost = defineComponent({
+  name: "SlotHost",
+  props: {
+    slot: {
+      type: Function,
+      required: true
+    },
+    state: { type: Object, required: true },
+    fallback: Function
+  },
+  setup: (props) => () => slotContent(props.slot, { state: props.state }) ?? props.fallback?.()
+});
+var fallbacks = /* @__PURE__ */ new WeakMap();
+function fallbackOf(slots, fallback) {
+  let entry = fallbacks.get(slots);
+  if (!entry) {
+    const latest = shallowRef(fallback);
+    fallbacks.set(slots, entry = { latest, fallback: () => latest.value() });
+  }
+  entry.latest.value = fallback;
+  return entry.fallback;
+}
+function defaultSlot(slots, state, fallback) {
+  if (!slots.default) {
+    return fallback?.();
+  }
+  return h(SlotHost, {
+    slot: slots.default,
+    state,
+    fallback: fallback && fallbackOf(slots, fallback)
+  });
+}
+var contents = /* @__PURE__ */ new WeakMap();
+function contentOf(slots, own) {
+  let content = contents.get(slots);
+  if (!content) {
+    const latest = shallowRef(own);
+    contents.set(
+      slots,
+      content = { own: latest, component: () => latest.value() }
+    );
+  }
+  content.own.value = own;
+  return content.component;
+}
+function renderElement(props, slots, state, element) {
+  const { tag, children, hidden } = element;
+  const own = children ? () => children(state) : () => slots.default?.({ state });
+  if (slots.render) {
+    const rendered = slots.render({
+      props,
+      state,
+      children: contentOf(slots, own)
+    });
+    if (hidden) {
+      return [...rendered, hidden()];
+    }
+    return rendered.length === 1 ? rendered[0] : rendered;
+  }
+  const content = hidden ? () => [own(), hidden()] : own;
+  return h(tag, props, content());
+}
+function usePart(handle, slot, slotProps = () => ({}), props, element = "div") {
+  const component = getCurrentInstance();
+  if (!component) {
+    throw new Error(`The ${slot} part must call usePart in its setup.`);
+  }
+  const owner = typeof handle === "function" ? useScope(handle)?.handle : handle;
+  if (!owner) {
+    throw new Error(
+      `The ${slot} part must be used inside its primitive's root.`
+    );
+  }
+  const attrs = useAttrs();
+  const slots = useSlots();
+  const user = props ?? (() => attrs);
+  const options = typeof element === "string" ? { tag: element } : element;
+  const state = trackedState(owner.instance, slot, slotProps);
+  const render = () => {
+    const current = slotProps();
+    if (!owner.present(slot, current)) {
+      return null;
+    }
+    const merged = owner.slot(slot, current, user());
+    return renderElement(
+      options.extend ? options.extend(merged) : merged,
+      slots,
+      state,
+      options
+    );
+  };
+  return Object.assign(render, { state });
+}
+export {
+  copyProps,
+  defaultSlot,
+  optionalBoolean,
+  orModel,
+  pascal,
+  provideHandle,
+  provideProps,
+  renderElement,
+  useHandle,
+  usePart,
+  usePrimitive,
+  useScope
+};

package/dist/waterfall.d.ts

@@ -0,0 +1,201 @@
+import { type ListHighlightDetails, type NumberFormat, type WaterfallBarLabelDetails, type WaterfallController, type WaterfallData, type WaterfallDataItem, type WaterfallExpandedChangeReason, type WaterfallValueChangeReason } from "@ui-sdk/core/waterfall";
+import type { ChangeDetails } from "@ui-sdk/core";
+import { type PropType } from "vue";
+import { type PartSlots } from "./use-primitive.js";
+type Value = string | null;
+/**
+ * A trace's spans on a shared time axis, as a tree of rows you expand and
+ * collapse, with one tab stop. Without content, it renders a row for every span.
+ * @experimental
+ */
+declare const Waterfall: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<WaterfallData>;
+        required: true;
+    };
+    range: PropType<[number, number]>;
+    value: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    expanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultExpanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    format: PropType<NumberFormat>;
+    locale: StringConstructor;
+    getBarLabel: PropType<(item: WaterfallDataItem, details: WaterfallBarLabelDetails) => string>;
+    controller: PropType<WaterfallController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/waterfall").WaterfallState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:value": (_value: Value) => true;
+    "update:modelValue": (_value: Value) => true;
+    valueChange: (_value: Value, _details: ChangeDetails<WaterfallValueChangeReason>) => true;
+    "update:expanded": (_expanded: string[]) => true;
+    expandedChange: (_expanded: string[], _details: ChangeDetails<WaterfallExpandedChangeReason>) => true;
+    highlight: (_value: string, _details: ListHighlightDetails) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    items: {
+        type: PropType<WaterfallData>;
+        required: true;
+    };
+    range: PropType<[number, number]>;
+    value: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    modelValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<Value>;
+        default: undefined;
+    };
+    expanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    defaultExpanded: {
+        type: PropType<string[]>;
+        default: undefined;
+    };
+    format: PropType<NumberFormat>;
+    locale: StringConstructor;
+    getBarLabel: PropType<(item: WaterfallDataItem, details: WaterfallBarLabelDetails) => string>;
+    controller: PropType<WaterfallController>;
+    debug: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((_value: Value) => any) | undefined;
+    "onUpdate:value"?: ((_value: Value) => any) | undefined;
+    onValueChange?: ((_value: Value, _details: ChangeDetails<WaterfallValueChangeReason>) => any) | undefined;
+    onHighlight?: ((_value: string, _details: ListHighlightDetails) => any) | undefined;
+    "onUpdate:expanded"?: ((_expanded: string[]) => any) | undefined;
+    onExpandedChange?: ((_expanded: string[], _details: ChangeDetails<WaterfallExpandedChangeReason>) => any) | undefined;
+}>, {
+    value: Value;
+    debug: boolean;
+    defaultValue: Value;
+    expanded: string[];
+    defaultExpanded: string[];
+    modelValue: Value;
+}, PartSlots<import("@ui-sdk/core/waterfall").WaterfallPrimitive, "root">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * The row of column headers, above the rows.
+ * @experimental
+ */
+declare const WaterfallHeaderRow: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "div">;
+/**
+ * A column's header, like "Name" or "Timeline".
+ * @experimental
+ */
+declare const WaterfallColumnHeader: Pick<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<{}>>, "div">;
+/**
+ * One time on the axis, placed by `--waterfall-tick`. Without content, it shows the time.
+ * @experimental
+ */
+declare const WaterfallTick: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    time: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/waterfall").WaterfallTimeState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    time: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/waterfall").WaterfallPrimitive, "tick">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "span">;
+/**
+ * The ruler of round times above the bars, hidden from screen readers. Without content, it renders its ticks.
+ * @experimental
+ */
+declare const WaterfallAxis: import("./create-parts.js").ElementPart<import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    maxTicks: NumberConstructor;
+}>, (() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null) & {
+    state: NoInfer<import("@ui-sdk/core/waterfall").WaterfallAxisState>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    maxTicks: NumberConstructor;
+}>> & Readonly<{}>, {}, PartSlots<import("@ui-sdk/core/waterfall").WaterfallPrimitive, "axis">, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, "div">;
+/**
+ * A moment across every row, like DOMContentLoaded, placed by `--waterfall-mark`.
+ * @experimental
+ */
+declare const WaterfallMark: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/waterfall").WaterfallTimeProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallTimeState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/waterfall").WaterfallTimeProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallTimeState>>>, "span">;
+/**
+ * One span's row. Its `--waterfall-start` and `--waterfall-size` place the span's bar.
+ * @experimental
+ */
+declare const WaterfallRow: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowProps> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, "div">;
+/**
+ * The cell that names the span. Put the indicator and the span's label in it.
+ * @experimental
+ */
+declare const WaterfallRowHeader: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, "div">;
+/**
+ * The arrow that expands and collapses a span with children.
+ * @experimental
+ */
+declare const WaterfallIndicator: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, "span">;
+/**
+ * A cell of your own, like a status or a size.
+ * @experimental
+ */
+declare const WaterfallCell: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, "div">;
+/**
+ * The cell on the time axis, which screen readers hear as the span's start and duration.
+ * @experimental
+ */
+declare const WaterfallBar: Pick<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, never> & import("./create-parts.js").ElementConstructor<import("vue").DefineSetupFnComponent<Omit<NoInfer<{
+    value?: string;
+}> & import("@ui-sdk/core/renderer").BaseSlotProps, never>, {} & {}, import("./use-primitive.js").StateSlots<NoInfer<import("@ui-sdk/core/waterfall").WaterfallRowState>>>, "div">;
+export { createWaterfallController, visibleWaterfallRows, } from "@ui-sdk/core/waterfall";
+export { Waterfall, WaterfallAxis, WaterfallBar, WaterfallCell, WaterfallColumnHeader, WaterfallHeaderRow, WaterfallIndicator, WaterfallMark, WaterfallRow, WaterfallRowHeader, WaterfallTick, };
+export type { ListHighlightDetails, NumberFormat, WaterfallApi, WaterfallAxisProps, WaterfallAxisState, WaterfallBarLabelDetails, WaterfallChangeOptions, WaterfallController, WaterfallData, WaterfallDataItem, WaterfallDataRow, WaterfallExpandedChangeReason, WaterfallOptions, WaterfallPrimitive, WaterfallRowPartProps, WaterfallRowProps, WaterfallRowState, WaterfallState, WaterfallTickData, WaterfallTimeProps, WaterfallTimeState, WaterfallValueChangeReason, } from "@ui-sdk/core/waterfall";