@embedpdf/svelte 0.0.0-stage → 3.0.0-next.15

package/dist/redaction/readers.js

@@ -0,0 +1,38 @@
+import { RedactionToken, redactionState } from '@embedpdf/plugin-redaction';
+import { shallowArray, useCapability, useCapabilityEvent, useOptionalSelector, } from '../runtime/readers.svelte.js';
+import { settingsReader, stateReader } from '../runtime/state.svelte.js';
+import { valueOf } from '../runtime/values.svelte.js';
+/**
+ * The redaction API (marking, the pending marks, applying them) of the nearest
+ * `<DocumentScope>`'s document, else the active one. Outside a ready document every method throws
+ * `not-ready`.
+ */
+export function useRedaction() {
+    return useCapability(RedactionToken);
+}
+/** Subscribe to one redaction event while the component lives: `useRedactionEvent((redaction) => redaction.onApplied, handler)`. */
+export function useRedactionEvent(select, handler) {
+    useCapabilityEvent(RedactionToken, select, handler);
+}
+/**
+ * The redaction state: how many marks wait, whether marks are being applied, and the last apply's
+ * result (the page's State table, declared once in `redactionState`), as a reactive object
+ * (`state.pendingCount`). With a selector, the value it picks as `{ current }`. Empty without a
+ * document.
+ *
+ * Typed through the declaration, so the published types name it from `@embedpdf/plugin-redaction`, a
+ * dependency of this package, and not from the engine package `lastResult`'s type comes from, which
+ * isn't one.
+ */
+export const useRedactionState = stateReader(redactionState);
+/** The redaction settings (`overlay`), with or without a document. */
+export const useRedactionSettings = settingsReader(RedactionToken);
+const NO_MARKS = Object.freeze([]);
+/**
+ * The marks waiting to be applied, in page order, or one page's (its ref or its index; a function
+ * to follow a prop), as `{ current }`. The plugin's lists keep their identity until the marks
+ * change, so a list redraws only then. Empty without a document.
+ */
+export function usePendingRedactions(filter) {
+    return useOptionalSelector(RedactionToken, (redaction) => redaction.listPending(valueOf(filter)), NO_MARKS, shallowArray);
+}

package/dist/redaction.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @embedpdf/svelte/redaction — marking content and removing it for good.
+ *
+ * Marking rides the annotation plugin (the composed `redact` tool draws on its
+ * `<AnnotationLayer>`); these readers surface the workflow around it:
+ *
+ *   const redaction = useRedaction();
+ *   const state = useRedactionState(); // state.pendingCount, state.applying
+ *   await redaction.applyAll(); // irreversible: confirm first
+ */
+export * from '@embedpdf/plugin-redaction';
+export { usePendingRedactions, useRedaction, useRedactionEvent, useRedactionSettings, useRedactionState, } from './redaction/readers.js';

package/dist/redaction.js

@@ -0,0 +1,13 @@
+/**
+ * @embedpdf/svelte/redaction — marking content and removing it for good.
+ *
+ * Marking rides the annotation plugin (the composed `redact` tool draws on its
+ * `<AnnotationLayer>`); these readers surface the workflow around it:
+ *
+ *   const redaction = useRedaction();
+ *   const state = useRedactionState(); // state.pendingCount, state.applying
+ *   await redaction.applyAll(); // irreversible: confirm first
+ */
+// Registration travels with the UI.
+export * from '@embedpdf/plugin-redaction';
+export { usePendingRedactions, useRedaction, useRedactionEvent, useRedactionSettings, useRedactionState, } from './redaction/readers.js';

package/dist/render/RenderLayer.svelte

@@ -0,0 +1,116 @@
+<!--
+  The page raster, as two planes:
+
+  - the base plane: one whole-page image at the plugin's resolved render points (the exact
+    settled demand capped at the pixel budget on a local engine, the advertised ladder on a
+    cloud deployment). Always there; the instant backdrop.
+  - the tile plane: the plugin's paint plan above it, which engages only when the view wants
+    more pixels than the base may spend. A thumbnail-sized demand engages nothing.
+
+  The layer only paints: every decision (which pixels, when, what to keep) is the render
+  plugin's. Anything mid-gesture is scaled by CSS until the plugin hands down new pixels.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { RenderToken } from '@embedpdf/plugin-render/contract/host';
+  import { partsDrawnTwice, pictureLayerOptionsOf } from '@embedpdf/web';
+  import { devWarn } from '../runtime/dev.js';
+  import { usePage } from '../runtime/page.js';
+  import { usePaintedParts } from '../runtime/page-layers.svelte.js';
+  import { useOptionalCapability, useOptionalSelector } from '../runtime/readers.svelte.js';
+  import type { RenderLayerProps } from './props.js';
+  import TilePlane from './TilePlane.svelte';
+
+  let { annotations, formFields, tiles = true }: RenderLayerProps = $props();
+
+  const page = usePage();
+  // The layer is a host of the render plugin: it paints conformed sources and drives a view's
+  // tile demand. The host lens is the same runtime token, typed wider.
+  const render = useOptionalCapability(RenderToken);
+  // The same object until a setting it reads changes.
+  const settings = useOptionalSelector(
+    RenderToken,
+    (renderer) => renderer.getPaintSettings(),
+    null,
+  );
+
+  const painted = usePaintedParts(() => page.ref);
+  const may = useOptionalSelector(RenderToken, (renderer) => renderer.getLayerRights(), null);
+  const parts = $derived({ annotations, formFields });
+  /** The parts the picture draws; `null` until the page's layers have said what they paint. */
+  const layers = $derived(
+    painted.current && may.current
+      ? pictureLayerOptionsOf(painted.current, parts, may.current)
+      : null,
+  );
+  $effect(() => {
+    if (painted.current && partsDrawnTwice(painted.current, parts).length > 0) {
+      devWarn(
+        'render-layer-draws-what-a-layer-paints',
+        '<RenderLayer annotations> or <RenderLayer formFields> draws what an <AnnotationLayer> ' +
+          'or a <FormLayer> on the page paints too, so it shows twice. Leave the prop out: the ' +
+          'picture leaves out what a layer paints.',
+      );
+    }
+  });
+
+  // The raster's identity: its conformed width, the parts it draws and the epoch. Under a
+  // ladder it moves only at rung crossings; on a local engine it follows the demand up to the
+  // budget, so the deep-zoom backdrop never fetches again.
+  const sourceKey = useOptionalSelector(
+    RenderToken,
+    (renderer) =>
+      layers
+        ? renderer.getSourceKey(page.ref, { scale: page.transform.renderScale, ...layers })
+        : null,
+    null,
+  );
+
+  let image: HTMLImageElement | undefined;
+
+  $effect(() => {
+    const renderer = render.current;
+    const key = sourceKey.current;
+    const ref = page.ref;
+    const drawn = layers;
+    if (!renderer || key === null || !drawn) return;
+    const controller = new AbortController();
+    let revoke: (() => void) | undefined;
+    // Any scale that maps to this key gives this key's request: the plugin conforms it.
+    const options = untrack(() => ({
+      scale: page.transform.renderScale,
+      ...drawn,
+      view: page.view,
+    }));
+    void (async () => {
+      try {
+        const raster = await renderer.renderSource(ref, { ...options, signal: controller.signal });
+        const objectUrl = await raster.objectUrl().abortWith(controller.signal);
+        if (controller.signal.aborted) {
+          objectUrl.revoke();
+          return;
+        }
+        revoke = objectUrl.revoke;
+        // The source is set on a stable element: the browser keeps the old picture until the new
+        // one decodes, and never asks for the old URL again, so revoking it on cleanup is safe.
+        if (image) image.src = objectUrl.url;
+      } catch {
+        // Cancelled (the camera moved, the layer unmounted) or the render failed.
+      }
+    })();
+    return () => {
+      controller.abort();
+      revoke?.();
+    };
+  });
+</script>
+
+<img
+  bind:this={image}
+  alt=""
+  draggable="false"
+  style="position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none"
+/>
+{#if tiles && settings.current?.tiles && layers}
+  <TilePlane {layers} />
+{/if}

package/dist/render/RenderLayer.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { RenderLayerProps } from './props.js';
+declare const RenderLayer: import("svelte").Component<RenderLayerProps, {}, "">;
+type RenderLayer = ReturnType<typeof RenderLayer>;
+export default RenderLayer;

package/dist/render/TileImage.svelte

@@ -0,0 +1,65 @@
+<!--
+  One tile: its place, and the shared browser binding (`bindPaintedImage`), which hides the
+  image until it's complete, reports it painted after its first chance to show, and reports the
+  inverse when it leaves the DOM.
+-->
+<script lang="ts" module>
+  let warnedTileSize = false;
+</script>
+
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import type { TilePaintSource } from '@embedpdf/plugin-render/contract/host';
+  import { bindPaintedImage } from '@embedpdf/web';
+
+  let {
+    source,
+    viewScale,
+    onPainted,
+    onUnpainted,
+  }: {
+    source: TilePaintSource;
+    /** View pixels per page point: tiles are placed in view pixels. */
+    viewScale: number;
+    onPainted: () => void;
+    onUnpainted: () => void;
+  } = $props();
+
+  let image: HTMLImageElement | undefined;
+
+  // Bound per bitmap: the handle is the tile's identity. A new plan hands the same tile a new
+  // `source` object; only a new handle binds again (a new URL, hidden until it has loaded).
+  const handle = $derived(source.handle);
+  $effect(() => {
+    const picture = handle;
+    if (!image) return;
+    return untrack(() => bindPaintedImage(image!, picture, { onPainted, onUnpainted }));
+  });
+
+  /** A raster whose size disagrees with its box would be stretched into place: say so once. */
+  function checkSize(event: Event) {
+    const naturalWidth = (event.currentTarget as HTMLImageElement).naturalWidth;
+    if (naturalWidth <= 0 || warnedTileSize) return;
+    const expected = Math.round(source.rect.width * source.scale);
+    if (Math.abs(naturalWidth - expected) > 1) {
+      warnedTileSize = true;
+      console.warn(
+        `[render] tile bitmap ${naturalWidth}px wide does not match its rect ` +
+          `(expected ~${expected}px) — stale raster identity? key=${source.key}`,
+      );
+    }
+  }
+</script>
+
+<img
+  bind:this={image}
+  alt=""
+  draggable="false"
+  onload={checkSize}
+  style:position="absolute"
+  style:left="{source.rect.x * viewScale}px"
+  style:top="{source.rect.y * viewScale}px"
+  style:width="{source.rect.width * viewScale}px"
+  style:height="{source.rect.height * viewScale}px"
+  style:z-index={source.z}
+/>

package/dist/render/TileImage.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { TilePaintSource } from '@embedpdf/plugin-render/contract/host';
+type $$ComponentProps = {
+    source: TilePaintSource;
+    /** View pixels per page point: tiles are placed in view pixels. */
+    viewScale: number;
+    onPainted: () => void;
+    onUnpainted: () => void;
+};
+declare const TileImage: import("svelte").Component<$$ComponentProps, {}, "">;
+type TileImage = ReturnType<typeof TileImage>;
+export default TileImage;

package/dist/render/TilePlane.svelte

@@ -0,0 +1,88 @@
+<!--
+  The sharp plane above the base: the render plugin's paint plan for this view and page, as
+  keyed images. Each tile reports itself painted after its first chance to show (and the inverse
+  when it leaves), so older, coarser tiles are released only once their replacement shows.
+
+  Tiles are placed in view pixels, never in page points under a scaled container: browsers round
+  layout lengths to 1/64 of a CSS pixel before transforms apply, and under a large zoom transform
+  that rounding becomes visible seams. In view pixels it stays 1/64 of a pixel at every zoom.
+-->
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import {
+    RenderToken,
+    type PageLayerOptions,
+    type ViewDemand,
+  } from '@embedpdf/plugin-render/contract/host';
+  import { usePage } from '../runtime/page.js';
+  import { useKernelValue, useOptionalCapability } from '../runtime/readers.svelte.js';
+  import TileImage from './TileImage.svelte';
+
+  let { layers }: { layers: PageLayerOptions } = $props();
+
+  const page = usePage();
+  const render = useOptionalCapability(RenderToken);
+
+  // Which page and which view this plane plans for. The page context is a new value whenever the
+  // camera changes it; these change only when the page or the view does (a `<PageView>` can be
+  // given another page), so the handle and the page's claim on it follow ownership, never the
+  // camera.
+  const pageRef = $derived(page.ref);
+  const viewId = $derived(page.view);
+
+  // This view's tile surface: planning state is per view and page, so a thumbnail rail's demand
+  // can't disturb the main view's tiles. Reference-counted: one `dispose` per `createViewDemand`.
+  let view = $state.raw<ViewDemand | null>(null);
+  $effect(() => {
+    const renderer = render.current;
+    const id = viewId;
+    if (!renderer) return;
+    const created = untrack(() => renderer.createViewDemand(id));
+    view = created;
+    return () => created.dispose();
+  });
+
+  // Demand in, plan out: setting the demand is the one call that schedules fetches and plans
+  // again. Before the DOM updates, and again on every camera frame (the page's view demand reads
+  // the frame), so a move plans before the browser paints.
+  $effect.pre(() => {
+    const surface = view;
+    if (!surface) return;
+    const demand = page.getViewDemand?.() ?? { desiredDeviceWidth: page.transform.deviceWidth };
+    const ref = pageRef;
+    const drawn = layers;
+    untrack(() => surface.setDemand(ref, demand, drawn));
+  });
+
+  // The same object until the demand, an epoch or an arriving tile changes it.
+  const plan = useKernelValue(() => view?.getPlan(pageRef) ?? null);
+
+  // Leaving the page (another page, or the plane unmounts) stops its in-flight fetches; the bytes
+  // already here stay cached.
+  $effect(() => {
+    const surface = view;
+    const ref = pageRef;
+    if (!surface) return;
+    return () => surface.release(ref);
+  });
+</script>
+
+{#if plan.current && plan.current.paint.length > 0}
+  <!-- A stacking context of its own: tiles carry z-index ranks (coarse under fine) while two
+       generations mix, mid-zoom, and without it those ranks would paint above the annotations,
+       the page chrome and the menus. -->
+  <div
+    style="position: absolute; left: 0; top: 0; pointer-events: none; isolation: isolate"
+    style:width="{page.transform.contentWidth}px"
+    style:height="{page.transform.contentHeight}px"
+  >
+    {#each plan.current.paint as source (source.key)}
+      <TileImage
+        {source}
+        viewScale={page.transform.viewScale}
+        onPainted={() => view?.markPainted(pageRef, source.key)}
+        onUnpainted={() => view?.markUnpainted(pageRef, source.key)}
+      />
+    {/each}
+  </div>
+{/if}

package/dist/render/TilePlane.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type PageLayerOptions } from '@embedpdf/plugin-render/contract/host';
+type $$ComponentProps = {
+    layers: PageLayerOptions;
+};
+declare const TilePlane: import("svelte").Component<$$ComponentProps, {}, "">;
+type TilePlane = ReturnType<typeof TilePlane>;
+export default TilePlane;

package/dist/render/props.d.ts

@@ -0,0 +1,16 @@
+/** The props of `<RenderLayer>`. */
+export interface RenderLayerProps {
+    /**
+     * Draw the annotations into the page's picture (`true`) or leave them out (`false`). Left
+     * unset, the picture leaves them to an `<AnnotationLayer>` on the page, and otherwise draws them
+     * when the user may read them.
+     */
+    annotations?: boolean;
+    /** The same for the form fields, which a `<FormLayer>` paints. */
+    formFields?: boolean;
+    /**
+     * Mount the tile plane (default true). Whether it spends anything is the render plugin's
+     * arithmetic: leave it on, and pass false only for a view that must never tile.
+     */
+    tiles?: boolean;
+}

package/dist/render/props.js

@@ -0,0 +1 @@
+export {};

package/dist/render/readers.svelte.d.ts

@@ -0,0 +1,9 @@
+/** The render plugin's readers: its API, its settings and its events. */
+import type { EventHook } from '@embedpdf/core';
+import type { RenderCapability } from '@embedpdf/plugin-render';
+/** The render API (`renderPage`, `renderThumbnail`, invalidation, settings), for app code. */
+export declare function useRender(): RenderCapability;
+/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document. */
+export declare const useRenderSettings: import("../index.js").SettingsReader<import("@embedpdf/plugin-render").RenderSettings & object>;
+/** Subscribe to one render event while the component lives: `useRenderEvent((render) => render.onInvalidated, handler)`. */
+export declare function useRenderEvent<T>(select: (render: RenderCapability) => EventHook<T>, handler: (event: T) => void): void;

package/dist/render/readers.svelte.js

@@ -0,0 +1,13 @@
+import { RenderToken } from '@embedpdf/plugin-render';
+import { useCapability, useCapabilityEvent } from '../runtime/readers.svelte.js';
+import { settingsReader } from '../runtime/state.svelte.js';
+/** The render API (`renderPage`, `renderThumbnail`, invalidation, settings), for app code. */
+export function useRender() {
+    return useCapability(RenderToken);
+}
+/** The render settings (`fullPage`, `tiles`, `format`, …), with or without a document. */
+export const useRenderSettings = settingsReader(RenderToken);
+/** Subscribe to one render event while the component lives: `useRenderEvent((render) => render.onInvalidated, handler)`. */
+export function useRenderEvent(select, handler) {
+    useCapabilityEvent(RenderToken, select, handler);
+}

package/dist/render.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @embedpdf/svelte/render — the page raster.
+ *
+ * `<RenderLayer>` draws a page's picture inside a `<Stage>` page or a `<PageView>`; the readers
+ * are the render plugin's API, settings and events, for thumbnails and previews of your own.
+ */
+export * from '@embedpdf/plugin-render';
+export { default as RenderLayer } from './render/RenderLayer.svelte';
+export type { RenderLayerProps } from './render/props.js';
+export { useRender, useRenderEvent, useRenderSettings } from './render/readers.svelte.js';

package/dist/render.js

@@ -0,0 +1,10 @@
+/**
+ * @embedpdf/svelte/render — the page raster.
+ *
+ * `<RenderLayer>` draws a page's picture inside a `<Stage>` page or a `<PageView>`; the readers
+ * are the render plugin's API, settings and events, for thumbnails and previews of your own.
+ */
+// Registration travels with the UI.
+export * from '@embedpdf/plugin-render';
+export { default as RenderLayer } from './render/RenderLayer.svelte';
+export { useRender, useRenderEvent, useRenderSettings } from './render/readers.svelte.js';

package/dist/runtime/DocumentGate.svelte

@@ -0,0 +1,26 @@
+<!--
+  Renders its content only while this subtree has a ready document: the structural way to say
+  "this UI is defined over a document". Workspace UI (toolbars, commands, translations) lives
+  outside the gate; document UI (the Stage, panels, page chrome) inside it. A document that waits
+  for its password, or failed, shows `locked` or `error` with it, or else `fallback`.
+  `<DocumentScope>` picks which document; this decides whether there is one.
+-->
+<script lang="ts">
+  import type { FailedDocumentInfo, LockedDocumentInfo } from '@embedpdf/core';
+  import { useDocument } from './documents.svelte.js';
+  import type { DocumentGateProps } from './props.js';
+
+  let { fallback, locked, error, children }: DocumentGateProps = $props();
+
+  const document = useDocument((info) => info);
+</script>
+
+{#if document.current.status === 'ready'}
+  {@render children?.()}
+{:else if document.current.status === 'locked' && locked}
+  {@render locked(document.current as LockedDocumentInfo)}
+{:else if document.current.status === 'error' && error}
+  {@render error(document.current as FailedDocumentInfo)}
+{:else}
+  {@render fallback?.()}
+{/if}

package/dist/runtime/DocumentGate.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DocumentGateProps } from './props.js';
+declare const DocumentGate: import("svelte").Component<DocumentGateProps, {}, "">;
+type DocumentGate = ReturnType<typeof DocumentGate>;
+export default DocumentGate;

package/dist/runtime/DocumentScope.svelte

@@ -0,0 +1,14 @@
+<!--
+  Binds everything inside to one document, for panes and side-by-side comparison: the readers and
+  `use<Plugin>()` handles inside talk to `id`, not the active document.
+-->
+<script lang="ts">
+  import { setDocumentScope } from './binding.svelte.js';
+  import type { DocumentScopeProps } from './props.js';
+
+  let { id, children }: DocumentScopeProps = $props();
+
+  setDocumentScope(() => id);
+</script>
+
+{@render children?.()}

package/dist/runtime/DocumentScope.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { DocumentScopeProps } from './props.js';
+declare const DocumentScope: import("svelte").Component<DocumentScopeProps, {}, "">;
+type DocumentScope = ReturnType<typeof DocumentScope>;
+export default DocumentScope;

package/dist/runtime/KernelProvider.svelte

@@ -0,0 +1,33 @@
+<!--
+  Gives everything inside a kernel someone else created and owns, so every reader in it works
+  against that kernel: the full viewer's wrapper puts the components it shows in the viewer inside
+  one. It never starts or destroys the kernel; `<Viewer>` is the component that owns one.
+
+  The kernel is read once, like `<Viewer>`'s engine: to give a subtree another kernel, mount a new
+  provider (`{#key kernel}`).
+-->
+<script lang="ts">
+  import { onDestroy, untrack } from 'svelte';
+  import { KernelBinding, setKernelHolder } from './binding.svelte.js';
+  import { devWarn } from './dev.js';
+  import type { KernelProviderProps } from './props.js';
+
+  let { kernel, children }: KernelProviderProps = $props();
+
+  const binding = new KernelBinding(untrack(() => kernel));
+  setKernelHolder({ binding });
+  // The provider stops following the kernel; the kernel keeps running for its owner.
+  onDestroy(() => binding.dispose());
+
+  $effect(() => {
+    if (kernel !== binding.kernel) {
+      devWarn(
+        'kernel-provider-kernel',
+        '<KernelProvider> reads kernel once; a new value is ignored. To give the subtree another ' +
+          'kernel, mount a new <KernelProvider>, for example inside a {#key kernel} block.',
+      );
+    }
+  });
+</script>
+
+{@render children?.()}

package/dist/runtime/KernelProvider.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { KernelProviderProps } from './props.js';
+declare const KernelProvider: import("svelte").Component<KernelProviderProps, {}, "">;
+type KernelProvider = ReturnType<typeof KernelProvider>;
+export default KernelProvider;

package/dist/runtime/SvgShapes.svelte

@@ -0,0 +1,30 @@
+<!--
+  Scene shapes as SVG elements: `@embedpdf/web`'s element descriptions (`svgShapesOf`), one
+  element each, a clipping `svg` with its children, and the faces their text draws in mounted
+  while they show. The annotation and form layers draw their scenes through it, inside an `<svg>`.
+-->
+<svelte:options namespace="svg" />
+
+<script lang="ts">
+  import { createFontMounts, type SvgShape } from '@embedpdf/web';
+  import SvgShapes from './SvgShapes.svelte';
+
+  let { shapes }: { shapes: readonly SvgShape[] } = $props();
+
+  // The faces of this level's text: a clipping `svg` mounts its own children's.
+  const mounts = createFontMounts();
+  $effect(() => () => mounts.release());
+  $effect(() => {
+    mounts.mount(shapes.flatMap((shape) => (shape.program ? [shape.program] : [])));
+  });
+</script>
+
+{#each shapes as shape, index (index)}
+  <svelte:element this={shape.tag} {...shape.attributes} style:mix-blend-mode={shape.blend}>
+    {#if shape.children}
+      <SvgShapes shapes={shape.children} />
+    {:else if shape.text !== undefined}
+      {shape.text}
+    {/if}
+  </svelte:element>
+{/each}

package/dist/runtime/SvgShapes.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type SvgShape } from '@embedpdf/web';
+import SvgShapes from './SvgShapes.svelte';
+type $$ComponentProps = {
+    shapes: readonly SvgShape[];
+};
+declare const SvgShapes: import("svelte").Component<$$ComponentProps, {}, "">;
+type SvgShapes = ReturnType<typeof SvgShapes>;
+export default SvgShapes;