@rosettadash/svelte 0.1.1 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rosettadash/svelte",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "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",
@@ -135,6 +141,12 @@
       "import": "./src/layout/modal/ModalLayout.svelte",
       "default": "./src/layout/modal/ModalLayout.svelte"
     },
+    "./layout/scroll-region": {
+      "types": "./src/layout/scroll-region/types.d.ts",
+      "svelte": "./src/layout/scroll-region/ScrollRegion.svelte",
+      "import": "./src/layout/scroll-region/ScrollRegion.svelte",
+      "default": "./src/layout/scroll-region/ScrollRegion.svelte"
+    },
     "./layout/tabs": {
       "types": "./src/layout/tabs/types.d.ts",
       "svelte": "./src/layout/tabs/TabsLayout.svelte",
@@ -201,6 +213,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 +285,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",
@@ -370,7 +394,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@rosettadash/web-components": "0.1.1",
+    "@rosettadash/web-components": "0.1.3",
     "tslib": "^2.3.0"
   },
   "peerDependencies": {

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';
@@ -18,6 +19,7 @@ export type { CollapsibleProps } from './layout/collapsible/types';
 export type { FlexLayoutProps } from './layout/flex/types';
 export type { GridLayoutProps } from './layout/grid/types';
 export type { ModalLayoutProps } from './layout/modal/types';
+export type { ScrollRegionProps } from './layout/scroll-region/types';
 export type { TabsLayoutProps } from './layout/tabs/types';
 export type { TimerProps } from './logic/timer/types';
 export type { BarChartProps } from './visual/chart/bar/types';
@@ -29,6 +31,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 +43,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/layout/scroll-region/ScrollRegion.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ScrollRegionProps } from './types';
+
+	type Props = ScrollRegionProps & { children?: Snippet };
+
+	let {
+		className,
+		title,
+		maxHeight,
+		overlayScrollbar,
+		children,
+	}: Props = $props();
+	const rootClass = $derived(['rd-scroll-region', className].filter(Boolean).join(' '));
+</script>
+
+<section
+	class={[rootClass, overlayScrollbar === false ? '' : 'rd-scroll-region--overlay-scrollbar'].filter(Boolean).join(' ')}
+	data-testid="rd-scroll-region"
+	aria-label={title ?? 'Scrollable content'}
+	style={maxHeight ? `max-height: ${maxHeight}` : undefined}
+>
+	{#if title}<header class="rd-scroll-region__header">{title}</header>{/if}
+	<div class="rd-scroll-region__body">{@render children?.()}</div>
+</section>

package/src/layout/scroll-region/index.d.ts

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

package/src/layout/scroll-region/index.js

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

package/src/layout/scroll-region/index.js.map

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

package/src/layout/scroll-region/types.d.ts

@@ -0,0 +1,6 @@
+export interface ScrollRegionProps {
+    title?: string;
+    maxHeight?: string;
+    overlayScrollbar?: boolean;
+    className?: string;
+}

package/src/layout/scroll-region/types.js

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

package/src/layout/scroll-region/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../packages/svelte/src/layout/scroll-region/types.ts"],"names":[],"mappings":""}

package/src/visual/chart/bar/BarChart.svelte

@@ -1,22 +1,84 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { BarChartProps } from './types';
+	import type { BarChartBar, BarChartProps } from './types';
 
 	type Props = BarChartProps & { children?: Snippet };
 
+	const FALLBACK_BARS: BarChartBar[] = [
+		{ label: 'A', value: 40 },
+		{ label: 'B', value: 65 },
+		{ label: 'C', value: 55 },
+		{ label: 'D', value: 80 },
+		{ label: 'E', value: 48 },
+	];
+
 	let {
 		className,
 		title,
+		bars,
+		yAxisLabel,
+		valueFormat,
 		children,
 	}: Props = $props();
-	const barHeights = [40, 65, 55, 80, 48];
+
+	function defaultFormat(value: number): string {
+		if (value >= 1_000_000) {
+			return `${(value / 1_000_000).toFixed(1)}M`;
+		}
+		if (value >= 1_000) {
+			return `${(value / 1_000).toFixed(0)}K`;
+		}
+		return String(Math.round(value));
+	}
+
 	const rootClass = $derived(['rd-chart-bar', className].filter(Boolean).join(' '));
+	const series = $derived(bars?.length ? bars : FALLBACK_BARS);
+	const format = $derived(valueFormat ?? defaultFormat);
+	const maxValue = $derived(Math.max(...series.map((bar) => bar.value), 1));
+	const ticks = $derived.by(() => {
+		const max = maxValue;
+		if (max <= 0) {
+			return [0];
+		}
+		const count = 4;
+		const step = max / (count - 1);
+		return Array.from({ length: count }, (_, index) => step * index);
+	});
 </script>
 
-<section class={rootClass} data-testid="rd-chart-bar">
+<section class={rootClass} data-testid="rd-chart-bar" role="img" aria-label={title ?? 'Bar chart'}>
 	<header class="rd-chart-bar__header"><span>{title ?? 'Bar chart'}</span></header>
-	<div class="rd-chart-bar__bars" aria-hidden="true">
-		{#each barHeights as h, i (i)}<div class="rd-chart-bar__bar-wrap"><div class="rd-chart-bar__bar" style:height="{h}%"></div></div>{/each}
+	<div class="rd-chart-bar__body">
+		<div class="rd-chart-bar__y-axis" aria-hidden="true">
+			<div class="rd-chart-bar__y-ticks">
+				{#each [...ticks].reverse() as tick (tick)}
+					<span class="rd-chart-bar__y-tick">{format(tick)}</span>
+				{/each}
+			</div>
+			{#if yAxisLabel}<span class="rd-chart-bar__y-label">{yAxisLabel}</span>{/if}
+		</div>
+		<div class="rd-chart-bar__plot">
+			<div class="rd-chart-bar__grid-lines" aria-hidden="true">
+				{#each ticks as tick (tick)}
+					<span class="rd-chart-bar__grid-line" style:bottom={`${(tick / maxValue) * 100}%`}></span>
+				{/each}
+			</div>
+			<div class="rd-chart-bar__bars">
+				{#each series as bar (bar.label)}
+					<div class="rd-chart-bar__bar-group">
+						<div class="rd-chart-bar__bar-wrap">
+							<div
+								class="rd-chart-bar__bar"
+								style:height={`${(bar.value / maxValue) * 100}%`}
+								title={`${bar.label}: ${format(bar.value)}`}
+							></div>
+						</div>
+						<span class="rd-chart-bar__x-label">{bar.label}</span>
+						<span class="rd-chart-bar__value">{format(bar.value)}</span>
+					</div>
+				{/each}
+			</div>
+		</div>
 	</div>
 	{@render children?.()}
 </section>

package/src/visual/chart/bar/index.d.ts

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

package/src/visual/chart/bar/types.d.ts

@@ -1,4 +1,11 @@
+export interface BarChartBar {
+    label: string;
+    value: number;
+}
 export interface BarChartProps {
     title?: string;
+    bars?: BarChartBar[];
+    yAxisLabel?: string;
+    valueFormat?: (value: number) => string;
     className?: string;
 }

package/src/visual/chart/line/LineChart.svelte

@@ -1,21 +1,107 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import type { LineChartProps } from './types';
+	import type { LineChartPoint, LineChartProps } from './types';
 
 	type Props = LineChartProps & { children?: Snippet };
 
+	const FALLBACK_POINTS: LineChartPoint[] = [
+		{ x: '2019', y: 42 },
+		{ x: '2020', y: 18 },
+		{ x: '2021', y: 12 },
+		{ x: '2022', y: 19 },
+		{ x: '2023', y: 31 },
+		{ x: '2024', y: 36 },
+	];
+
+	const CHART_WIDTH = 320;
+	const CHART_HEIGHT = 200;
+	const PAD_LEFT = 58;
+	const PAD_RIGHT = 12;
+	const PAD_TOP = 16;
+	const PAD_BOTTOM = 36;
+	const Y_TICK_X = PAD_LEFT - 6;
+
 	let {
 		className,
 		title,
+		points,
+		xAxisLabel,
+		yAxisLabel,
+		valueFormat,
 		children,
 	}: Props = $props();
+
+	function defaultFormat(value: number): string {
+		if (value >= 1_000_000) {
+			return `${(value / 1_000_000).toFixed(1)}M`;
+		}
+		if (value >= 1_000) {
+			return `${(value / 1_000).toFixed(0)}K`;
+		}
+		return String(Math.round(value));
+	}
+
 	const rootClass = $derived(['rd-chart-line', className].filter(Boolean).join(' '));
+	const series = $derived(points?.length ? points : FALLBACK_POINTS);
+	const format = $derived(valueFormat ?? defaultFormat);
+	const values = $derived(series.map((point) => point.y));
+	const minY = $derived(Math.min(...values) >= 0 ? 0 : Math.min(...values));
+	const maxY = $derived(Math.max(...values));
+	const rangeY = $derived(maxY - minY || 1);
+	const ticks = $derived.by(() => {
+		if (minY === maxY) {
+			return [minY];
+		}
+		const count = 4;
+		const step = (maxY - minY) / (count - 1);
+		return Array.from({ length: count }, (_, index) => minY + step * index);
+	});
+	const plotH = CHART_HEIGHT - PAD_TOP - PAD_BOTTOM;
+	const coords = $derived.by(() => {
+		const plotW = CHART_WIDTH - PAD_LEFT - PAD_RIGHT;
+		const lastIndex = Math.max(series.length - 1, 1);
+		return series.map((point, index) => {
+			const x = PAD_LEFT + (index / lastIndex) * plotW;
+			const y = PAD_TOP + plotH - ((point.y - minY) / rangeY) * plotH;
+			return { x, y, label: String(point.x) };
+		});
+	});
+	const polyline = $derived(coords.map(({ x, y }) => `${x},${y}`).join(' '));
 </script>
 
-<section class={rootClass} data-testid="rd-chart-line">
+<section class={rootClass} data-testid="rd-chart-line" role="img" aria-label={title ?? 'Line chart'}>
 	<header class="rd-chart-line__header"><span>{title ?? 'Line chart'}</span></header>
-	<svg viewBox="0 0 240 96" class="rd-chart-line__svg" aria-hidden="true">
-		<polyline class="rd-chart-line__line" points="0,80 40,60 80,65 120,40 160,45 200,20 240,30" />
-	</svg>
+	<div class="rd-chart-line__body">
+		<svg viewBox="0 0 {CHART_WIDTH} {CHART_HEIGHT}" class="rd-chart-line__svg" aria-hidden="true">
+			{#each ticks as tick (tick)}
+				{@const y = PAD_TOP + plotH - ((tick - minY) / rangeY) * plotH}
+				<g class="rd-chart-line__tick">
+					<line x1={PAD_LEFT} y1={y} x2={CHART_WIDTH - PAD_RIGHT} y2={y} class="rd-chart-line__grid" />
+					<text x={Y_TICK_X} y={y + 4} class="rd-chart-line__tick-label">{format(tick)}</text>
+				</g>
+			{/each}
+			<polyline class="rd-chart-line__line" points={polyline} />
+			{#each coords as point (point.label)}
+				<g class="rd-chart-line__point">
+					<circle cx={point.x} cy={point.y} r="3.5" class="rd-chart-line__dot" />
+					<text x={point.x} y={CHART_HEIGHT - 10} class="rd-chart-line__x-label">{point.label}</text>
+				</g>
+			{/each}
+			{#if yAxisLabel}
+				<text
+					x="12"
+					y={PAD_TOP + plotH / 2}
+					class="rd-chart-line__axis-label rd-chart-line__axis-label--y">{yAxisLabel}</text
+				>
+			{/if}
+			{#if xAxisLabel}
+				<text
+					x={PAD_LEFT + (CHART_WIDTH - PAD_LEFT - PAD_RIGHT) / 2}
+					y={CHART_HEIGHT - 2}
+					class="rd-chart-line__axis-label rd-chart-line__axis-label--x">{xAxisLabel}</text
+				>
+			{/if}
+		</svg>
+	</div>
 	{@render children?.()}
 </section>

package/src/visual/chart/line/index.d.ts

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

package/src/visual/chart/line/types.d.ts

@@ -1,4 +1,12 @@
+export interface LineChartPoint {
+    x: string | number;
+    y: number;
+}
 export interface LineChartProps {
     title?: string;
+    points?: LineChartPoint[];
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    valueFormat?: (value: number) => string;
     className?: string;
 }

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/input/date-range/DateRangeFilter.svelte

@@ -10,17 +10,34 @@
 		startDate,
 		endDate,
 		presetLabel,
+		granularity,
+		onChange,
 		children,
 	}: Props = $props();
 	const rootClass = $derived(['rd-input-date-range', className].filter(Boolean).join(' '));
+	const inputType = $derived(granularity === 'month' ? 'month' : 'date');
 </script>
 
 <section class={rootClass} data-testid="rd-input-date-range">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
 	<div class="rd-date-range__controls">
-		<input type="date" class="rd-input" value={startDate ?? ''} />
+		<input
+			type={inputType}
+			class="rd-input"
+			value={startDate ?? ''}
+			aria-label={`${label ?? 'Date range'} start`}
+			onchange={(event) =>
+				onChange?.({ startDate: event.currentTarget.value, endDate: endDate ?? '' })}
+		/>
 		<span class="rd-date-range__sep">to</span>
-		<input type="date" class="rd-input" value={endDate ?? ''} />
+		<input
+			type={inputType}
+			class="rd-input"
+			value={endDate ?? ''}
+			aria-label={`${label ?? 'Date range'} end`}
+			onchange={(event) =>
+				onChange?.({ startDate: startDate ?? '', endDate: event.currentTarget.value })}
+		/>
 	</div>
 	{#if presetLabel}<span class="rd-date-range__preset">{presetLabel}</span>{/if}
 	{@render children?.()}

package/src/visual/input/date-range/types.d.ts

@@ -3,6 +3,7 @@ export interface DateRangeFilterProps {
     startDate?: string;
     endDate?: string;
     presetLabel?: string;
+    granularity?: 'date' | 'month';
     onChange?: (range: {
         startDate: string;
         endDate: string;

package/src/visual/input/select/SelectInput.svelte

@@ -9,17 +9,27 @@
 		label,
 		placeholder,
 		options,
-		value,
+		value = $bindable(''),
+		onChange,
 		children,
 	}: Props = $props();
 	const rootClass = $derived(['rd-input-select', className].filter(Boolean).join(' '));
+
+	function handleChange(event: Event) {
+		const target = event.currentTarget;
+		if (!(target instanceof HTMLSelectElement)) {
+			return;
+		}
+		value = target.value;
+		onChange?.(target.value);
+	}
 </script>
 
 <section class={rootClass} data-testid="rd-input-select">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
-	<select class="rd-select" value={value ?? ''}>
-		<option value="">{placeholder ?? 'Select…'}</option>
-		{#each options ?? [] as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+	<select class="rd-select" onchange={handleChange}>
+		<option value="" selected={!(value ?? '')}>{placeholder ?? 'Select…'}</option>
+		{#each options ?? [] as o (o.value)}<option value={o.value} selected={o.value === (value ?? '')}>{o.label}</option>{/each}
 	</select>
 	{@render children?.()}
 </section>

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/news/language-select/NewsLanguageSelect.svelte

@@ -17,9 +17,9 @@
 
 <section class={rootClass} data-testid="rd-news-language-select">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
-	<select class="rd-select" value={value ?? ''}>
-		<option value="">{placeholder ?? 'Select…'}</option>
-		{#each options ?? [] as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+	<select class="rd-select">
+		<option value="" selected={!(value ?? '')}>{placeholder ?? 'Select…'}</option>
+		{#each options ?? [] as o (o.value)}<option value={o.value} selected={o.value === (value ?? '')}>{o.label}</option>{/each}
 	</select>
 	{@render children?.()}
 </section>

package/src/visual/news/region-select/NewsRegionSelect.svelte

@@ -17,9 +17,9 @@
 
 <section class={rootClass} data-testid="rd-news-region-select">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
-	<select class="rd-select" value={value ?? ''}>
-		<option value="">{placeholder ?? 'Select…'}</option>
-		{#each options ?? [] as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+	<select class="rd-select">
+		<option value="" selected={!(value ?? '')}>{placeholder ?? 'Select…'}</option>
+		{#each options ?? [] as o (o.value)}<option value={o.value} selected={o.value === (value ?? '')}>{o.label}</option>{/each}
 	</select>
 	{@render children?.()}
 </section>

package/src/visual/news/type-select/NewsTypeSelect.svelte

@@ -17,9 +17,9 @@
 
 <section class={rootClass} data-testid="rd-news-type-select">
 	{#if label}<span class="rd-field__label">{label}</span>{/if}
-	<select class="rd-select" value={value ?? ''}>
-		<option value="">{placeholder ?? 'Select…'}</option>
-		{#each options ?? [] as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+	<select class="rd-select">
+		<option value="" selected={!(value ?? '')}>{placeholder ?? 'Select…'}</option>
+		{#each options ?? [] as o (o.value)}<option value={o.value} selected={o.value === (value ?? '')}>{o.label}</option>{/each}
 	</select>
 	{@render children?.()}
 </section>

package/src/visual/table/DataTable.svelte

@@ -8,20 +8,33 @@
 		className,
 		title,
 		rows,
+		selectedRowId,
+		onRowSelect,
 		children,
 	}: Props = $props();
 	const rootClass = $derived(['rd-table', className].filter(Boolean).join(' '));
+	const selectable = $derived(Boolean(onRowSelect));
 </script>
 
 <section class={rootClass} data-testid="rd-table">
 	<header class="rd-table__header"><span>{title ?? 'Data table'}</span></header>
-	<table class="rd-table__table">
-		<thead><tr><th>Name</th><th>Status</th><th>Amount</th><th>Date</th></tr></thead>
-		<tbody>
-			{#each rows ?? [] as row (row.id)}
-			<tr><td>{row.name}</td><td>{row.status}</td><td>{row.amount}</td><td>{row.date}</td></tr>
-			{/each}
-		</tbody>
-	</table>
+	<div class="rd-table__scroll">
+		<table class="rd-table__table">
+			<thead><tr><th>Name</th><th>Status</th><th>Amount</th><th>Date</th></tr></thead>
+			<tbody>
+				{#each rows ?? [] as row (row.id)}
+				<tr
+					class="rd-table__row"
+					class:rd-table__row--selected={row.id === selectedRowId}
+					class:rd-table__row--interactive={selectable}
+					aria-selected={row.id === selectedRowId ? 'true' : undefined}
+					onclick={selectable ? () => onRowSelect?.(row.id) : undefined}
+				>
+					<td>{row.name}</td><td>{row.status}</td><td>{row.amount}</td><td>{row.date}</td>
+				</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
 	{@render children?.()}
 </section>

package/src/visual/table/types.d.ts

@@ -2,12 +2,14 @@ export interface DataTableRow {
     id: string;
     name?: string;
     status?: string;
-    amount?: number;
+    amount?: string | number;
     date?: string;
     [key: string]: string | number | undefined;
 }
 export interface DataTableProps {
     title?: string;
     rows?: DataTableRow[];
+    selectedRowId?: string;
+    onRowSelect?: (rowId: string) => void;
     className?: string;
 }

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;
 }