@rosettadash/svelte 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rosettadash/svelte",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "RosettaDash Svelte 5 runtime — same import paths as @rosettadash/web-components. Storybook: github.com/KevinEverywhere/rosettadash (port 6010).",
   "author": "Kevin Ready <kevin@planetkevin.com>",
   "type": "module",
@@ -15,6 +15,12 @@
       "import": "./src/index.js",
       "default": "./src/index.js"
     },
+    "./domain/i18n/app-language-select": {
+      "types": "./src/domain/i18n/app-language-select/types.d.ts",
+      "svelte": "./src/domain/i18n/app-language-select/AppLanguageSelect.svelte",
+      "import": "./src/domain/i18n/app-language-select/AppLanguageSelect.svelte",
+      "default": "./src/domain/i18n/app-language-select/AppLanguageSelect.svelte"
+    },
     "./domain/person-invite": {
       "types": "./src/domain/person-invite/types.d.ts",
       "svelte": "./src/domain/person-invite/PersonInvite.svelte",
@@ -201,6 +207,12 @@
       "import": "./src/visual/display/3d-scene/ThreeScenePointCloud.svelte",
       "default": "./src/visual/display/3d-scene/ThreeScenePointCloud.svelte"
     },
+    "./visual/display/geo-map": {
+      "types": "./src/visual/display/geo-map/types.d.ts",
+      "svelte": "./src/visual/display/geo-map/GeoMap.svelte",
+      "import": "./src/visual/display/geo-map/GeoMap.svelte",
+      "default": "./src/visual/display/geo-map/GeoMap.svelte"
+    },
     "./visual/input/checkbox": {
       "types": "./src/visual/input/checkbox/types.d.ts",
       "svelte": "./src/visual/input/checkbox/CheckboxInput.svelte",
@@ -267,6 +279,12 @@
       "import": "./src/visual/media/video-source/VideoSource.svelte",
       "default": "./src/visual/media/video-source/VideoSource.svelte"
     },
+    "./visual/media/youtube-embed": {
+      "types": "./src/visual/media/youtube-embed/types.d.ts",
+      "svelte": "./src/visual/media/youtube-embed/YoutubeEmbed.svelte",
+      "import": "./src/visual/media/youtube-embed/YoutubeEmbed.svelte",
+      "default": "./src/visual/media/youtube-embed/YoutubeEmbed.svelte"
+    },
     "./visual/news/article-detail": {
       "types": "./src/visual/news/article-detail/types.d.ts",
       "svelte": "./src/visual/news/article-detail/NewsArticleDetail.svelte",

package/src/domain/i18n/app-language-select/AppLanguageSelect.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import {
+		DB_APP_LANGUAGE_SELECT_TAG,
+		registerRdAppLanguageSelect,
+	} from '@rosettadash/web-components/domain/i18n/app-language-select';
+	import {
+		attachHostEvents,
+		setHostAttribute,
+		setHostProperty,
+	} from '../../../lib/custom-element-host';
+	import type { AppLanguageSelectProps } from './types';
+
+	let {
+		locales,
+		value,
+		defaultLocale,
+		label,
+		placeholder,
+		className,
+		onLocaleChange,
+	}: AppLanguageSelectProps = $props();
+
+	let host: HTMLElement;
+	let detachEvents = () => {};
+
+	onMount(() => {
+		registerRdAppLanguageSelect();
+		detachEvents = attachHostEvents(host, {
+			'locale-change': (detail) =>
+				onLocaleChange?.(detail as { locale: string }),
+		});
+		return () => detachEvents();
+	});
+
+	$effect(() => {
+		if (!host) {
+			return;
+		}
+		setHostProperty(host, 'locales', locales);
+		setHostAttribute(host, 'value', value);
+		setHostAttribute(host, 'default-locale', defaultLocale);
+		setHostAttribute(host, 'label', label);
+		setHostAttribute(host, 'placeholder', placeholder);
+	});
+</script>
+
+<svelte:element this={DB_APP_LANGUAGE_SELECT_TAG} bind:this={host} class={className} />

package/src/domain/i18n/app-language-select/index.d.ts

@@ -0,0 +1,2 @@
+export type { AppLanguageSelectProps, AppLocaleOption } from './types';
+/** Component entry is `AppLanguageSelect.svelte` (see package exports). */

package/src/domain/i18n/app-language-select/index.js

@@ -0,0 +1,3 @@
+export {};
+/** Component entry is `AppLanguageSelect.svelte` (see package exports). */
+//# sourceMappingURL=index.js.map

package/src/domain/i18n/app-language-select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/svelte/src/domain/i18n/app-language-select/index.ts"],"names":[],"mappings":";AACA,2EAA2E"}

package/src/domain/i18n/app-language-select/types.d.ts

@@ -0,0 +1,16 @@
+export interface AppLocaleOption {
+    code: string;
+    label: string;
+    nativeLabel?: string;
+}
+export interface AppLanguageSelectProps {
+    locales?: AppLocaleOption[];
+    value?: string;
+    defaultLocale?: string;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    onLocaleChange?: (detail: {
+        locale: string;
+    }) => void;
+}

package/src/domain/i18n/app-language-select/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/src/domain/i18n/app-language-select/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../packages/svelte/src/domain/i18n/app-language-select/types.ts"],"names":[],"mappings":""}

package/src/index.d.ts

@@ -1,3 +1,4 @@
+export type { AppLocaleOption, AppLanguageSelectProps } from './domain/i18n/app-language-select/types';
 export type { PersonInviteProps } from './domain/person-invite/types';
 export type { RoleAssignProps } from './domain/role-assign/types';
 export type { RoleGateProps } from './domain/role-gate/types';
@@ -29,6 +30,7 @@ export type { ThreeGeoGlobeProps } from './visual/display/3d-geo-globe/types';
 export type { ThreeGltfModelProps } from './visual/display/3d-gltf-model/types';
 export type { ThreeScatterPlotProps } from './visual/display/3d-scatter/types';
 export type { ThreeScenePointCloudProps } from './visual/display/3d-scene/types';
+export type { GeoMapProps } from './visual/display/geo-map/types';
 export type { CheckboxInputProps } from './visual/input/checkbox/types';
 export type { DateRangeFilterProps } from './visual/input/date-range/types';
 export type { NumberInputProps } from './visual/input/number/types';
@@ -40,6 +42,7 @@ export type { LinkListItem, LinkListProps } from './visual/link-list/types';
 export type { EquirectPreviewMode, EquirectViewportProps } from './visual/media/equirect-viewport/types';
 export type { LiveCaptureProps } from './visual/media/live-capture/types';
 export type { VideoFileDetail, VideoSourceProps } from './visual/media/video-source/types';
+export type { YoutubeEmbedProps } from './visual/media/youtube-embed/types';
 export type { NewsArticleDetailProps } from './visual/news/article-detail/types';
 export type { NewsLanguageSelectProps } from './visual/news/language-select/types';
 export type { NewsRegionSelectProps } from './visual/news/region-select/types';

package/src/visual/display/geo-map/GeoMap.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import {
+		DB_GEO_MAP_TAG,
+		registerRdGeoMap,
+	} from '@rosettadash/web-components/visual/display/geo-map';
+	import {
+		attachHostEvents,
+		setHostAttribute,
+		setHostProperty,
+	} from '../../../lib/custom-element-host';
+	import type { GeoMapProps } from './types';
+
+	let {
+		provider,
+		tileUrl,
+		apiKey,
+		center,
+		zoom,
+		markers,
+		selectedId,
+		className,
+		onMarkerSelect,
+	}: GeoMapProps = $props();
+
+	let host: HTMLElement;
+	let detachEvents = () => {};
+
+	onMount(() => {
+		registerRdGeoMap();
+		detachEvents = attachHostEvents(host, {
+			'marker-select': (detail) =>
+				onMarkerSelect?.(detail as { id: string; lat: number; lng: number }),
+		});
+		return () => detachEvents();
+	});
+
+	$effect(() => {
+		if (!host) {
+			return;
+		}
+		setHostAttribute(host, 'provider', provider);
+		setHostAttribute(host, 'tile-url', tileUrl);
+		setHostAttribute(host, 'api-key', apiKey);
+		setHostAttribute(host, 'center', center);
+		setHostAttribute(host, 'zoom', zoom);
+		setHostProperty(host, 'markers', markers);
+		setHostAttribute(host, 'selected-id', selectedId);
+	});
+</script>
+
+<svelte:element this={DB_GEO_MAP_TAG} bind:this={host} class={className} />

package/src/visual/display/geo-map/index.d.ts

@@ -0,0 +1,2 @@
+export type { GeoMapProps, GeoMapMarker, GeoMapProvider } from './types';
+/** Component entry is `GeoMap.svelte` (see package exports). */

package/src/visual/display/geo-map/index.js

@@ -0,0 +1,3 @@
+export {};
+/** Component entry is `GeoMap.svelte` (see package exports). */
+//# sourceMappingURL=index.js.map

package/src/visual/display/geo-map/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/svelte/src/visual/display/geo-map/index.ts"],"names":[],"mappings":";AACA,gEAAgE"}

package/src/visual/display/geo-map/types.d.ts

@@ -0,0 +1,18 @@
+import type { GeoMapMarker, GeoMapProvider } from '@rosettadash/web-components/visual/display/geo-map';
+export type { GeoMapMarker, GeoMapProvider };
+export interface GeoMapProps {
+    provider?: GeoMapProvider;
+    tileUrl?: string;
+    apiKey?: string;
+    center?: string;
+    zoom?: number;
+    markers?: GeoMapMarker[];
+    selectedId?: string;
+    className?: string;
+    onMarkerSelect?: (detail: {
+        id: string;
+        lat: number;
+        lng: number;
+    }) => void;
+}
+export { default as GeoMap } from './GeoMap.svelte';

package/src/visual/display/geo-map/types.js

@@ -0,0 +1,2 @@
+export { default as GeoMap } from './GeoMap.svelte';
+//# sourceMappingURL=types.js.map

package/src/visual/display/geo-map/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../packages/svelte/src/visual/display/geo-map/types.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC"}

package/src/visual/media/youtube-embed/YoutubeEmbed.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import {
+		DB_YOUTUBE_EMBED_TAG,
+		registerRdYoutubeEmbed,
+	} from '@rosettadash/web-components/visual/media/youtube-embed';
+	import { setHostAttribute } from '../../../lib/custom-element-host';
+	import type { YoutubeEmbedProps } from './types';
+
+	let {
+		videoId,
+		url,
+		start,
+		autoplay,
+		mute,
+		controls,
+		title,
+		className,
+	}: YoutubeEmbedProps = $props();
+
+	let host: HTMLElement;
+
+	onMount(() => {
+		registerRdYoutubeEmbed();
+	});
+
+	$effect(() => {
+		if (!host) {
+			return;
+		}
+		setHostAttribute(host, 'video-id', videoId);
+		setHostAttribute(host, 'url', url);
+		setHostAttribute(host, 'start', start);
+		setHostAttribute(host, 'autoplay', autoplay);
+		setHostAttribute(host, 'mute', mute);
+		if (controls === false) {
+			host.setAttribute('controls', 'false');
+		} else {
+			host.removeAttribute('controls');
+		}
+		setHostAttribute(host, 'embed-title', title);
+	});
+</script>
+
+<svelte:element this={DB_YOUTUBE_EMBED_TAG} bind:this={host} class={className} />

package/src/visual/media/youtube-embed/index.d.ts

@@ -0,0 +1,2 @@
+export type { YoutubeEmbedProps } from './types';
+/** Component entry is `YoutubeEmbed.svelte` (see package exports). */

package/src/visual/media/youtube-embed/index.js

@@ -0,0 +1,3 @@
+export {};
+/** Component entry is `YoutubeEmbed.svelte` (see package exports). */
+//# sourceMappingURL=index.js.map

package/src/visual/media/youtube-embed/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/svelte/src/visual/media/youtube-embed/index.ts"],"names":[],"mappings":";AACA,sEAAsE"}

package/src/visual/media/youtube-embed/types.d.ts

@@ -0,0 +1,10 @@
+export interface YoutubeEmbedProps {
+    videoId?: string;
+    url?: string;
+    start?: number;
+    autoplay?: boolean;
+    mute?: boolean;
+    controls?: boolean;
+    title?: string;
+    className?: string;
+}

package/src/visual/media/youtube-embed/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/src/visual/media/youtube-embed/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../packages/svelte/src/visual/media/youtube-embed/types.ts"],"names":[],"mappings":""}

package/src/visual/wasm/media/WasmMedia.svelte

@@ -26,11 +26,14 @@
 		yaw,
 		pitch,
 		horizontalFov,
+		reverse,
 		inputFile,
 		cropRegion,
+		recordRange,
 		className,
 		onProgress,
 		onExtractComplete,
+		onExtractError,
 		onMetadata,
 	}: WasmMediaProps = $props();
 
@@ -48,6 +51,7 @@
 						metadata: Record<string, string | number | boolean | null | undefined>;
 					},
 				),
+			'extract-error': (detail) => onExtractError?.(detail as { message: string }),
 			metadata: (detail) =>
 				onMetadata?.(
 					detail as Record<string, string | number | boolean | null | undefined>,
@@ -74,8 +78,10 @@
 		setHostAttribute(host, 'yaw', yaw);
 		setHostAttribute(host, 'pitch', pitch);
 		setHostAttribute(host, 'horizontal-fov', horizontalFov);
+		setHostAttribute(host, 'reverse', reverse);
 		setHostProperty(host, 'inputFile', inputFile);
 		setHostProperty(host, 'cropRegion', cropRegion);
+		setHostProperty(host, 'recordRange', recordRange);
 	});
 </script>
 

package/src/visual/wasm/media/types.d.ts

@@ -1,3 +1,4 @@
+import type { AuthoringRecordRange } from '@rosettadash/core';
 export interface WasmMediaProps {
     label?: string;
     operation?: string;
@@ -13,8 +14,10 @@ export interface WasmMediaProps {
     yaw?: number;
     pitch?: number;
     horizontalFov?: number;
+    reverse?: boolean;
     inputFile?: File | Blob | null;
     cropRegion?: Record<string, string | number | boolean | null | undefined> | null;
+    recordRange?: AuthoringRecordRange | null;
     className?: string;
     onProgress?: (detail: {
         progress: number;
@@ -23,5 +26,8 @@ export interface WasmMediaProps {
         blob: Blob;
         metadata: Record<string, string | number | boolean | null | undefined>;
     }) => void;
+    onExtractError?: (detail: {
+        message: string;
+    }) => void;
     onMetadata?: (detail: Record<string, string | number | boolean | null | undefined>) => void;
 }