@symbiote-native/svelte 0.3.0 → 2.0.0

package/build/components/View.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { IViewProps } from './view-props';
-export type { IViewProps };
-declare const View: import("svelte").Component<IViewProps, {}, "">;
-type View = ReturnType<typeof View>;
-export default View;

package/build/components/activity-indicator/activity-indicator-platform.android.d.ts

@@ -1,3 +0,0 @@
-import type { IActivityIndicatorPlatform } from '@symbiote-native/components';
-export type { IActivityIndicatorPlatform };
-export declare const PLATFORM: IActivityIndicatorPlatform;

package/build/components/activity-indicator/activity-indicator-platform.android.js

@@ -1,5 +0,0 @@
-export const PLATFORM = {
-    // RN: `color = Platform.OS === 'ios' ? GRAY : null`. Android lets the theme color it.
-    defaultColor: null,
-    nativeExtras: { styleAttr: 'Normal', indeterminate: true },
-};

package/build/components/activity-indicator/activity-indicator-platform.d.ts

@@ -1 +0,0 @@
-export * from './activity-indicator-platform.ios';

package/build/components/activity-indicator/activity-indicator-platform.ios.d.ts

@@ -1,3 +0,0 @@
-import type { IActivityIndicatorPlatform } from '@symbiote-native/components';
-export type { IActivityIndicatorPlatform };
-export declare const PLATFORM: IActivityIndicatorPlatform;

package/build/components/activity-indicator/activity-indicator-platform.ios.js

@@ -1,6 +0,0 @@
-// RN's iOS default spinner color (Libraries/.../ActivityIndicator.js GRAY).
-const IOS_DEFAULT_COLOR = '#999999';
-export const PLATFORM = {
-    defaultColor: IOS_DEFAULT_COLOR,
-    nativeExtras: {},
-};

package/build/components/activity-indicator/activity-indicator-platform.js

@@ -1,5 +0,0 @@
-// Base / default: re-exports the iOS build. Metro overrides this with
-// activity-indicator-platform.ios.ts / .android.ts on a real host; under tsc/vitest the host
-// config resolves here. Filename is the selector, no Platform.OS read — same convention as
-// switch/switch-platform.ts.
-export * from './activity-indicator-platform.ios.js';

package/build/components/activity-indicator/index.svelte

@@ -1,63 +0,0 @@
-<script lang="ts" module>
-  // ActivityIndicator: render-only (no state). Calls the shared renderActivityIndicator()
-  // straight from core/components — the size translation, platform default-color fold, and
-  // native-extras all live there, once, for every adapter. The root stays a literal template
-  // tag (`bind:this` needs a known tag), but its child (the spinner) is materialized and kept
-  // in sync via the generic descriptorToSvelte bridge (createDescriptorChildrenSync) instead of
-  // a hand-written child tag — see svelte-adapter-dom-shim skill §19 for why this is safe and
-  // cheap (create once, update by position, never recreate).
-  import type { IActivityIndicatorProps } from './activity-indicator-props';
-
-  export type { IActivityIndicatorProps };
-</script>
-
-<script lang="ts">
-  import {
-    renderActivityIndicator,
-    resolveAccessibilityProps,
-  } from '@symbiote-native/components';
-  import { PLATFORM } from './activity-indicator-platform';
-  import { createDescriptorChildrenSync } from '../../descriptor-to-svelte';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    animating = true,
-    color,
-    hidesWhenStopped = true,
-    size = 'small',
-    style,
-    class: className,
-    ...passthrough
-  }: IActivityIndicatorProps = $props();
-
-  const descriptor = $derived(
-    renderActivityIndicator(
-      {
-        animating,
-        hidesWhenStopped,
-        size,
-        color,
-        style,
-        passthrough: {
-          ...resolveAccessibilityProps(passthrough),
-          class: className,
-        },
-      },
-      PLATFORM,
-    ),
-  );
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const syncChildren = createDescriptorChildrenSync();
-
-  $effect(() => {
-    syncChildren(hostShim, descriptor.children);
-  });
-  // See View.svelte's note on `{@attach}`.
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, passthrough);
-  });
-</script>
-
-<symbiote-view p={descriptor.props} bind:this={hostShim} />

package/build/components/activity-indicator/index.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { IActivityIndicatorProps } from './activity-indicator-props';
-export type { IActivityIndicatorProps };
-declare const Index: import("svelte").Component<IActivityIndicatorProps, {}, "">;
-type Index = ReturnType<typeof Index>;
-export default Index;

package/build/components/button.svelte

@@ -1,76 +0,0 @@
-<script lang="ts" module>
-  // Button: the minimal cross-platform button, rendered in RN's iOS shape (Button.js): a
-  // TouchableOpacity wrapping a Text. The base text style, the role constant, and the color fold
-  // (caller color tints the label; disabled greys it) are shared in
-  // @symbiote-native/components/view/render-button — this component only composes its
-  // TouchableOpacity + a raw `symbiote-text` host and forwards the native-only props, the Svelte
-  // twin of React's/Vue's Button.
-  import type { IButtonProps } from './button-props';
-
-  export type { IButtonProps };
-</script>
-
-<script lang="ts">
-  import {
-    BUTTON_ACCESSIBILITY_ROLE,
-    resolveButtonTextStyle,
-  } from '@symbiote-native/components';
-  import TouchableOpacity from './touchable-opacity/index.svelte';
-
-  let {
-    title,
-    onPress,
-    color,
-    disabled,
-    touchSoundDisabled,
-    testID,
-    hasTVPreferredFocus,
-    nextFocusDown,
-    nextFocusForward,
-    nextFocusLeft,
-    nextFocusRight,
-    nextFocusUp,
-    class: className,
-    ...accessibilityRest
-  }: IButtonProps = $props();
-
-  const textStyle = $derived(resolveButtonTextStyle(color, disabled));
-
-  // The native-only props TouchableOpacity does not type but forwards to Fabric (testID +
-  // TV-focus). Carried as a plain record (the pass-through idiom Image/React's Button use) so
-  // excess-property typing does not reject the native-only keys. TV-focus is inert on a phone.
-  const nativeForward = $derived.by(() => {
-    const forward: Record<string, unknown> = { testID };
-    if (hasTVPreferredFocus !== undefined)
-      forward.hasTVPreferredFocus = hasTVPreferredFocus;
-    if (nextFocusDown !== undefined) forward.nextFocusDown = nextFocusDown;
-    if (nextFocusForward !== undefined)
-      forward.nextFocusForward = nextFocusForward;
-    if (nextFocusLeft !== undefined) forward.nextFocusLeft = nextFocusLeft;
-    if (nextFocusRight !== undefined) forward.nextFocusRight = nextFocusRight;
-    if (nextFocusUp !== undefined) forward.nextFocusUp = nextFocusUp;
-    return forward;
-  });
-</script>
-
-<!--
-  RN's Button sets role=button, is accessible, and propagates the disabled accessibility state.
-  The caller's accessibility props pass through via {...accessibilityRest}, but Button's fixed
-  role/accessible/disabled-state win, applied after the spread. touchSoundDisabled maps to the
-  pressable's android_disableSound.
--->
-<TouchableOpacity
-  {...accessibilityRest}
-  {...nativeForward}
-  {onPress}
-  {disabled}
-  class={className}
-  android_disableSound={touchSoundDisabled}
-  accessibilityRole={BUTTON_ACCESSIBILITY_ROLE}
-  accessible={true}
-  accessibilityState={{ disabled }}
->
-  {#snippet children()}
-    <symbiote-text p={{ style: textStyle }}>{title}</symbiote-text>
-  {/snippet}
-</TouchableOpacity>

package/build/components/button.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { IButtonProps } from './button-props';
-export type { IButtonProps };
-declare const Button: import("svelte").Component<IButtonProps, {}, "">;
-type Button = ReturnType<typeof Button>;
-export default Button;

package/build/components/image/image-logic.d.ts

@@ -1,2 +0,0 @@
-import type { IImageViewProps } from '@symbiote-native/components';
-export declare function buildImageBag(view: IImageViewProps): Record<string, unknown>;

package/build/components/image/image-logic.js

@@ -1,135 +0,0 @@
-// Svelte-side duplicate of core/components/src/view/render-image/index.ts's private prop-mapping
-// helpers (normalizeSource / headersFromAliases / expandSrcSet / readStyleString / readSourceUri /
-// resolveSourceArray). None of them are exported — not even from that file — so per the
-// svelte-adapter-dom-shim skill's §15 ("skip consuming a render-*.ts function's Descriptor output
-// programmatically; hand-author the equivalent markup, reusing only EXPORTED pure helpers"), this
-// module reproduces the mapping directly rather than calling renderImage() and reading its
-// returned Descriptor's `.props`.
-//
-// GENUINE GAP (see the Svelte-components work report): these helpers should be exported from
-// core/components/src/view/render-image/index.ts so no adapter needs this duplication. Until
-// then, this file is kept byte-for-byte equivalent to that source and reuses every primitive that
-// IS already exported (resolveImageSource, flattenStyle, dlog) — only the mid-level composition
-// is duplicated.
-import { dlog, flattenStyle, resolveImageSource, } from '@symbiote-native/engine';
-function normalizeSource(source) {
-    const resolved = resolveImageSource(source);
-    const sources = Array.isArray(resolved) ? resolved : [resolved];
-    dlog(`Image source resolved to ${JSON.stringify(sources)}`);
-    return sources;
-}
-function headersFromAliases(view) {
-    const headers = {};
-    if (view.crossOrigin === 'use-credentials') {
-        headers['Access-Control-Allow-Credentials'] = 'true';
-    }
-    if (view.referrerPolicy !== undefined) {
-        headers['Referrer-Policy'] = view.referrerPolicy;
-    }
-    return headers;
-}
-function expandSrcSet(srcSet, view, headers) {
-    const sources = [];
-    let useSrcForDefaultScale = true;
-    for (const entry of srcSet.split(', ')) {
-        const [uri, xScale = '1x'] = entry.split(' ');
-        if (!xScale.endsWith('x')) {
-            dlog(`Image srcSet: unsupported scale token "${xScale}", skipping`);
-            continue;
-        }
-        const scale = parseInt(xScale.slice(0, -1), 10);
-        if (Number.isNaN(scale))
-            continue;
-        if (scale === 1)
-            useSrcForDefaultScale = false;
-        sources.push({
-            uri,
-            scale,
-            width: view.width,
-            height: view.height,
-            ...{ headers },
-        });
-    }
-    if (useSrcForDefaultScale && view.src !== undefined) {
-        sources.push({
-            uri: view.src,
-            scale: 1,
-            width: view.width,
-            height: view.height,
-            ...{ headers },
-        });
-    }
-    if (sources.length === 0)
-        dlog('Image srcSet: produced no valid sources');
-    return sources;
-}
-function resolveSourceArray(view) {
-    const headers = headersFromAliases(view);
-    if (view.srcSet !== undefined) {
-        return expandSrcSet(view.srcSet, view, headers);
-    }
-    if (view.src !== undefined) {
-        return [
-            { uri: view.src, width: view.width, height: view.height, ...{ headers } },
-        ];
-    }
-    if (view.source === undefined) {
-        dlog('Image: no source / src / srcSet provided');
-        return [];
-    }
-    const sources = normalizeSource(view.source);
-    if (Object.keys(headers).length > 0 && sources.length === 1) {
-        const [only] = sources;
-        if (typeof only === 'object' &&
-            only !== null &&
-            typeof Reflect.get(only, 'uri') === 'string') {
-            return [{ ...only, headers }];
-        }
-    }
-    return sources;
-}
-function readStyleString(style, key) {
-    if (style === undefined)
-        return undefined;
-    const flat = flattenStyle(style);
-    const value = Object.hasOwn(flat, key) ? flat[key] : undefined;
-    return typeof value === 'string' ? value : undefined;
-}
-function readSourceUri(source) {
-    const [resolved] = normalizeSource(source);
-    if (typeof resolved === 'object' && resolved !== null) {
-        const uri = Reflect.get(resolved, 'uri');
-        if (typeof uri === 'string')
-            return uri;
-    }
-    return undefined;
-}
-// Builds the exact prop bag renderImage's `mapped` produces, minus the final `el()` wrap — the
-// caller hands the result straight to `<symbiote-image p={bag}>`.
-export function buildImageBag(view) {
-    // `width` / `height` aliases fold into style; explicit style keys win.
-    const foldedStyle = view.width === undefined && view.height === undefined
-        ? view.style
-        : [{ width: view.width, height: view.height }, view.style];
-    const mapped = {
-        ...view.passthrough,
-        style: foldedStyle,
-        source: resolveSourceArray(view),
-        resizeMode: view.resizeMode ?? readStyleString(view.style, 'resizeMode'),
-        tintColor: view.tintColor ?? readStyleString(view.style, 'tintColor'),
-    };
-    // `alt` is the accessibility text: it sets accessibilityLabel and marks the image accessible.
-    // An explicit accessibilityLabel (already folded into passthrough) still wins.
-    if (view.alt !== undefined) {
-        if (mapped.accessibilityLabel === undefined)
-            mapped.accessibilityLabel = view.alt;
-        mapped.accessible = true;
-    }
-    if (view.defaultSource !== undefined)
-        mapped.defaultSource = normalizeSource(view.defaultSource);
-    if (view.loadingIndicatorSource !== undefined) {
-        mapped.loadingIndicatorSrc = readSourceUri(view.loadingIndicatorSource);
-    }
-    dlog('Image -> RCTImageView');
-    return mapped;
-}

package/build/components/image/index.d.ts

@@ -1,3 +0,0 @@
-export type { IImageProps } from './image-props';
-export type { IImageStatics } from '@symbiote-native/components';
-export declare const Image: import("svelte").Component<import("./image-props").IImageProps, {}, ""> & import("@symbiote-native/engine").IImageStatics;

package/build/components/image/index.js

@@ -1,10 +0,0 @@
-// Image statics (getSize / prefetch / queryCache / abortPrefetch / resolveAssetSource) attach onto
-// the component value, mirroring RN's `Image.getSize` static surface — shared verbatim via
-// @symbiote-native/engine's imageStatics, the same source React's and Vue's Image use. A `.svelte`
-// file's own module type resolves through svelte's ambient `declare module '*.svelte'` fallback (a
-// bare value export, not props-parameterized — see view-props.ts's header comment for the general
-// reason), so the statics are attached here in a plain sibling `.ts` file rather than inside
-// `index.svelte` itself.
-import ImageComponent from './index.svelte';
-import { imageStatics } from '@symbiote-native/components';
-export const Image = Object.assign(ImageComponent, imageStatics);

package/build/components/image/index.svelte

@@ -1,66 +0,0 @@
-<script lang="ts" module>
-  // Image: render-only (no state). Source resolution / width-height fold / resizeMode & tintColor
-  // style-read / alt->accessibility fold mirror core/components/src/view/render-image/index.ts's
-  // renderImage() exactly, via image-logic.ts's buildImageBag (see that file's header for why the
-  // logic is duplicated rather than the Descriptor consumed). renderImage always produces a
-  // SINGLE symbiote-image node, so the markup here is just that one host tag.
-  //
-  // Statics (getSize/prefetch/queryCache/…) are attached in the sibling `index.ts`, not here — a
-  // `.svelte` file's default export resolves through svelte's ambient module fallback (a bare
-  // value, not something `Object.assign` can usefully augment from inside the component itself).
-  import type { IImageProps } from './image-props';
-
-  export type { IImageProps };
-</script>
-
-<script lang="ts">
-  import { resolveAccessibilityProps } from '@symbiote-native/components';
-  import { buildImageBag } from './image-logic';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    source,
-    defaultSource,
-    loadingIndicatorSource,
-    style,
-    resizeMode,
-    tintColor,
-    src,
-    srcSet,
-    alt,
-    width,
-    height,
-    crossOrigin,
-    referrerPolicy,
-    ...passthrough
-  }: IImageProps = $props();
-
-  const bag = $derived(
-    buildImageBag({
-      source,
-      defaultSource,
-      loadingIndicatorSource,
-      style,
-      resizeMode,
-      tintColor,
-      src,
-      srcSet,
-      alt,
-      width,
-      height,
-      crossOrigin,
-      referrerPolicy,
-      passthrough: resolveAccessibilityProps(passthrough),
-    }),
-  );
-
-  // See View.svelte's note on `{@attach}`.
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, passthrough);
-  });
-</script>
-
-<symbiote-image p={bag} bind:this={hostShim} />

package/build/components/image/index.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { IImageProps } from './image-props';
-export type { IImageProps };
-declare const Index: import("svelte").Component<IImageProps, {}, "">;
-type Index = ReturnType<typeof Index>;
-export default Index;

package/build/components/image-background/index.svelte

@@ -1,87 +0,0 @@
-<script lang="ts" module>
-  // ImageBackground: render-only composition (absolute-fill Image behind, children on top).
-  // Calls renderImageBackground() straight from core/components for the absolute-fill
-  // positioning + wrapper-dimension proxy onto the inner Image — both tags stay literal (the
-  // wrapper hosts `{@render children?.()}` as a live sibling after the image, which the
-  // generic descriptorToSvelte bridge can't safely own: appending the image inside an $effect
-  // would race Svelte's own placement of the live children and could reorder them — see
-  // svelte-adapter-dom-shim skill §19), so `.props`/`.children[0].props` are destructured onto
-  // the two known host tags, same pattern as Modal/index.svelte.
-  import type { IImageBackgroundProps } from './image-background-props';
-
-  export type { IImageBackgroundProps };
-</script>
-
-<script lang="ts">
-  import {
-    renderImageBackground,
-    resolveAccessibilityProps,
-  } from '@symbiote-native/components';
-  import { resolveClassName } from '@symbiote-native/engine';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    children,
-    style,
-    imageStyle,
-    class: className,
-    source,
-    defaultSource,
-    loadingIndicatorSource,
-    resizeMode,
-    tintColor,
-    src,
-    srcSet,
-    alt,
-    width,
-    height,
-    crossOrigin,
-    referrerPolicy,
-    ...passthrough
-  }: IImageBackgroundProps = $props();
-
-  const resolvedImageStyle = $derived(
-    typeof imageStyle === 'string' ? resolveClassName(imageStyle) : imageStyle,
-  );
-
-  const descriptor = $derived(
-    renderImageBackground({
-      style,
-      imageStyle: resolvedImageStyle,
-      image: {
-        source,
-        defaultSource,
-        loadingIndicatorSource,
-        resizeMode,
-        tintColor,
-        src,
-        srcSet,
-        alt,
-        width,
-        height,
-        crossOrigin,
-        referrerPolicy,
-        passthrough: resolveAccessibilityProps(passthrough),
-      },
-    }),
-  );
-  const imageBag = $derived.by(() => {
-    const child = descriptor.children[0];
-    return typeof child === 'string' ? {} : child.props;
-  });
-  const wrapperBag = $derived({ ...descriptor.props, class: className });
-
-  // See View.svelte's note on `{@attach}` — the attachment binds to the OUTER wrapper, the node
-  // this component's own `class`/`style` land on and the one a caller means by "this component".
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, passthrough);
-  });
-</script>
-
-<symbiote-view p={wrapperBag} bind:this={hostShim}>
-  <symbiote-image p={imageBag} />
-  {@render children?.()}
-</symbiote-view>

package/build/components/image-background/index.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { IImageBackgroundProps } from './image-background-props';
-export type { IImageBackgroundProps };
-declare const Index: import("svelte").Component<IImageBackgroundProps, {}, "">;
-type Index = ReturnType<typeof Index>;
-export default Index;

package/build/components/input-accessory-view/index.svelte

@@ -1,51 +0,0 @@
-<script lang="ts" module>
-  // InputAccessoryView: render-only host assembly (iOS). Calls the shared
-  // core/components/src/view/render-input-accessory-view.ts's renderInputAccessoryView()
-  // directly (nativeID/backgroundColor/style -> the host node, everything else passthrough) —
-  // the same calling convention as keyboard-avoiding-view/index.svelte's shared-render-fn call,
-  // rather than hand-duplicating its prop-assembly logic (per the svelte-adapter-dom-shim
-  // skill's §15/§19 correction: a fixed-shape Descriptor still has to be CALLED, not
-  // re-derived). The root tag stays literal below since renderInputAccessoryView always paints
-  // the same 'symbiote-input-accessory-view' host — no dynamic <svelte:element> needed. The
-  // host has no structural children of its own; the user's children nest directly under it.
-  import type { IInputAccessoryViewProps } from './input-accessory-view-props';
-
-  export type { IInputAccessoryViewProps };
-</script>
-
-<script lang="ts">
-  import {
-    renderInputAccessoryView,
-    resolveAccessibilityProps,
-  } from '@symbiote-native/components';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    nativeID,
-    backgroundColor,
-    style,
-    children,
-    ...passthrough
-  }: IInputAccessoryViewProps = $props();
-
-  const descriptor = $derived(
-    renderInputAccessoryView({
-      nativeID,
-      backgroundColor,
-      style,
-      passthrough: resolveAccessibilityProps(passthrough),
-    }),
-  );
-
-  // See View.svelte's note on `{@attach}`.
-  let hostShim = $state.raw<ShimElement | null>(null);
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, passthrough);
-  });
-</script>
-
-<symbiote-input-accessory-view p={descriptor.props} bind:this={hostShim}>
-  {@render children?.()}
-</symbiote-input-accessory-view>

package/build/components/input-accessory-view/index.svelte.d.ts

@@ -1,5 +0,0 @@
-import type { IInputAccessoryViewProps } from './input-accessory-view-props';
-export type { IInputAccessoryViewProps };
-declare const Index: import("svelte").Component<IInputAccessoryViewProps, {}, "">;
-type Index = ReturnType<typeof Index>;
-export default Index;