@walkthru-earth/objex 1.3.1 → 1.5.0

package/dist/components/layout/StatusBar.svelte

@@ -4,13 +4,13 @@ import FileTextIcon from '@lucide/svelte/icons/file-text';
 import FolderIcon from '@lucide/svelte/icons/folder';
 import GlobeIcon from '@lucide/svelte/icons/globe';
 import InfoIcon from '@lucide/svelte/icons/info';
+import { formatFileSize } from '@walkthru-earth/objex-utils';
 import { Separator } from '../ui/separator/index.js';
 import { getFileTypeInfo } from '../../file-icons/index.js';
 import { t } from '../../i18n/index.svelte.js';
 import { browser } from '../../stores/browser.svelte.js';
 import { files } from '../../stores/files.svelte.js';
 import { tabs } from '../../stores/tabs.svelte.js';
-import { formatFileSize } from '../../utils/format.js';
 import SafeLockToggle from './SafeLockToggle.svelte';
 
 let isBrowsingRemote = $derived(browser.activeConnection !== null);
@@ -32,29 +32,32 @@ let activeFileInfo = $derived(activeTab ? getFileTypeInfo(activeTab.extension) :
 			{browser.activeConnection.name}
 		</span>
 		{#if displayPath}
-			<span class="text-muted-foreground/50">/</span>
-			<span class="max-w-[200px] truncate" title={displayPath}>{displayPath}</span>
+			<span class="hidden text-muted-foreground/50 sm:inline">/</span>
+			<span class="hidden max-w-[200px] truncate sm:inline" title={displayPath}>{displayPath}</span>
 		{/if}
 		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
 	{:else if displayPath}
-		<FolderIcon class="size-3 shrink-0" />
-		<span class="max-w-[300px] truncate" title={displayPath}>{displayPath}</span>
-		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
+		<FolderIcon class="hidden size-3 shrink-0 sm:block" />
+		<span class="hidden max-w-[300px] truncate sm:inline" title={displayPath}>{displayPath}</span>
+		<Separator orientation="vertical" class="mx-1.5 hidden h-3.5 sm:block" />
 	{/if}
 
-	<!-- Entry count -->
+	<!-- Entry count — hidden on mobile -->
 	{#if displayCount > 0}
-		<FileTextIcon class="size-3 shrink-0" />
-		<span>{displayCount} {displayCount === 1 ? t('statusBar.item') : t('statusBar.items')}</span>
-		<Separator orientation="vertical" class="mx-1.5 h-3.5" />
+		<FileTextIcon class="hidden size-3 shrink-0 sm:block" />
+		<span class="hidden sm:inline"
+			>{displayCount}
+			{displayCount === 1 ? t('statusBar.item') : t('statusBar.items')}</span
+		>
+		<Separator orientation="vertical" class="mx-1.5 hidden h-3.5 sm:block" />
 	{/if}
 
-	<!-- Active file info -->
+	<!-- Active file info: type label hidden on mobile, size kept -->
 	{#if activeTab && activeFileInfo}
-		<InfoIcon class="size-3 shrink-0" />
-		<span>{activeFileInfo.label}</span>
+		<InfoIcon class="hidden size-3 shrink-0 sm:block" />
+		<span class="hidden sm:inline">{activeFileInfo.label}</span>
 		{#if activeTab.size}
-			<span class="text-muted-foreground/50">·</span>
+			<span class="hidden text-muted-foreground/50 sm:inline">·</span>
 			<span>{formatFileSize(activeTab.size)}</span>
 		{/if}
 		<Separator orientation="vertical" class="mx-1.5 h-3.5" />

package/dist/components/layout/TabBar.svelte

@@ -2,14 +2,14 @@
 import DatabaseIcon from '@lucide/svelte/icons/database';
 import FileTextIcon from '@lucide/svelte/icons/file-text';
 import XIcon from '@lucide/svelte/icons/x';
+import { copyToClipboard } from '@walkthru-earth/objex-utils';
 import type { Snippet } from 'svelte';
 import { Button } from '../ui/button/index.js';
 import * as ContextMenu from '../ui/context-menu/index.js';
 import { ScrollArea } from '../ui/scroll-area/index.js';
 import { t } from '../../i18n/index.svelte.js';
 import { tabs } from '../../stores/tabs.svelte.js';
-import { copyToClipboard } from '../../utils/clipboard.js';
-import { buildHttpsUrl, buildStorageUrl } from '../../utils/url.js';
+import { buildHttpsUrl, buildStorageUrl } from '../../utils/signed-url.js';
 
 let { leading }: { leading?: Snippet } = $props();
 
@@ -60,8 +60,8 @@ async function handleCopy(type: 'https' | 's3', tab: (typeof tabs.items)[0]) {
 								<Button
 									variant="ghost"
 									size="icon-sm"
-									class="ms-1 size-5 opacity-0 transition-opacity group-hover:opacity-100
-										{isActive ? 'opacity-60' : ''}"
+									class="ms-1 size-5 opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100
+										{isActive ? 'sm:opacity-60' : ''}"
 									onclick={(e: MouseEvent) => handleClose(e, tab.id)}
 									aria-label={t('tabBar.closeTab', { name: tab.name })}
 								>

package/dist/components/ui/context-menu/context-menu-radio-group.svelte.d.ts

@@ -1,4 +1,4 @@
 import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
-declare const ContextMenuRadioGroup: import("svelte").Component<ContextMenuPrimitive.RadioGroupProps, {}, "value" | "ref">;
+declare const ContextMenuRadioGroup: import("svelte").Component<ContextMenuPrimitive.RadioGroupProps, {}, "ref" | "value">;
 type ContextMenuRadioGroup = ReturnType<typeof ContextMenuRadioGroup>;
 export default ContextMenuRadioGroup;

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte.d.ts

@@ -1,4 +1,4 @@
 import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-declare const DropdownMenuCheckboxGroup: import("svelte").Component<DropdownMenuPrimitive.CheckboxGroupProps, {}, "value" | "ref">;
+declare const DropdownMenuCheckboxGroup: import("svelte").Component<DropdownMenuPrimitive.CheckboxGroupProps, {}, "ref" | "value">;
 type DropdownMenuCheckboxGroup = ReturnType<typeof DropdownMenuCheckboxGroup>;
 export default DropdownMenuCheckboxGroup;

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte.d.ts

@@ -1,4 +1,4 @@
 import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-declare const DropdownMenuRadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "value" | "ref">;
+declare const DropdownMenuRadioGroup: import("svelte").Component<DropdownMenuPrimitive.RadioGroupProps, {}, "ref" | "value">;
 type DropdownMenuRadioGroup = ReturnType<typeof DropdownMenuRadioGroup>;
 export default DropdownMenuRadioGroup;

package/dist/components/ui/input/input.svelte.d.ts

@@ -8,6 +8,6 @@ type Props = WithElementRef<Omit<HTMLInputAttributes, 'type'> & ({
     type?: InputType;
     files?: undefined;
 })>;
-declare const Input: import("svelte").Component<Props, {}, "value" | "ref" | "files">;
+declare const Input: import("svelte").Component<Props, {}, "ref" | "value" | "files">;
 type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/components/ui/resizable/index.d.ts

@@ -1,4 +1,4 @@
 import { Pane } from 'paneforge';
 import Handle from './resizable-handle.svelte';
 import PaneGroup from './resizable-pane-group.svelte';
-export { PaneGroup, Pane, Handle, PaneGroup as ResizablePaneGroup, Pane as ResizablePane, Handle as ResizableHandle };
+export { Handle, Handle as ResizableHandle, Pane as ResizablePane, PaneGroup, PaneGroup as ResizablePaneGroup };

package/dist/components/ui/resizable/index.js

@@ -1,6 +1,6 @@
 import { Pane } from 'paneforge';
 import Handle from './resizable-handle.svelte';
 import PaneGroup from './resizable-pane-group.svelte';
-export { PaneGroup, Pane, Handle, 
+export { Handle, Handle as ResizableHandle, Pane as ResizablePane, PaneGroup, 
 //
-PaneGroup as ResizablePaneGroup, Pane as ResizablePane, Handle as ResizableHandle };
+PaneGroup as ResizablePaneGroup };

package/dist/components/ui/slider/index.d.ts

@@ -0,0 +1,3 @@
+import RangeSlider from './range-slider.svelte';
+import Root from './slider.svelte';
+export { RangeSlider, Root, Root as Slider };

package/dist/components/ui/slider/index.js

@@ -0,0 +1,5 @@
+import RangeSlider from './range-slider.svelte';
+import Root from './slider.svelte';
+export { RangeSlider, Root, 
+//
+Root as Slider };

package/dist/components/ui/slider/range-slider.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+import { cn } from '../../../utils.js';
+import Slider from './slider.svelte';
+
+/**
+ * Dual-thumb numeric range slider with optional histogram bars rendered
+ * behind the track and a min/max label row beneath. Composes the shadcn
+ * `Slider` primitive (bits-ui) so pointer, keyboard, RTL, and a11y
+ * behavior come from the primitive instead of being reimplemented.
+ *
+ * Used by:
+ *   - StacDatetimeBar / StacFilterPanel (datetime + numeric facets, with histogram)
+ *   - CogControls (rescale min/max, no histogram, paired number inputs)
+ */
+let {
+	value = $bindable<[number, number]>([0, 1]),
+	min,
+	max,
+	step = 1,
+	histogram,
+	formatLabel,
+	loLabel,
+	hiLabel,
+	class: className,
+	disabled = false,
+	onValueChange,
+	onValueCommit
+}: {
+	value?: [number, number];
+	min: number;
+	max: number;
+	step?: number;
+	/** Optional bin counts to draw behind the track. */
+	histogram?: readonly number[] | null;
+	/** Formatter for the default min/max label row. Omit to hide labels. */
+	formatLabel?: (n: number) => string;
+	/** Override the lower label (takes precedence over `formatLabel(value[0])`). */
+	loLabel?: string;
+	/** Override the upper label (takes precedence over `formatLabel(value[1])`). */
+	hiLabel?: string;
+	class?: string;
+	disabled?: boolean;
+	onValueChange?: (next: [number, number]) => void;
+	onValueCommit?: (next: [number, number]) => void;
+} = $props();
+
+const histMax = $derived(histogram?.length ? Math.max(1, ...histogram) : 1);
+const showLabels = $derived(Boolean(formatLabel) || loLabel != null || hiLabel != null);
+
+function emitChange(next: number[]): void {
+	if (next.length >= 2) onValueChange?.([next[0], next[1]]);
+}
+
+function emitCommit(next: number[]): void {
+	if (next.length >= 2) onValueCommit?.([next[0], next[1]]);
+}
+</script>
+
+<div class={cn('flex flex-col gap-1.5', className)}>
+	<div class="relative px-2">
+		{#if histogram && histogram.length > 0}
+			<div
+				class="pointer-events-none absolute inset-x-2 top-0 flex h-6 items-end gap-px"
+				aria-hidden="true"
+			>
+				{#each histogram as count, i (i)}
+					<div
+						class="bg-muted-foreground/30 flex-1 rounded-sm"
+						style="height: {Math.max(2, (count / histMax) * 100)}%"
+					></div>
+				{/each}
+			</div>
+		{/if}
+		<Slider
+			type="multiple"
+			bind:value={value as never}
+			{min}
+			{max}
+			{step}
+			{disabled}
+			onValueChange={emitChange}
+			onValueCommit={emitCommit}
+			class={cn(histogram && histogram.length > 0 && 'mt-7')}
+		/>
+	</div>
+	{#if showLabels}
+		<div
+			class="text-muted-foreground flex items-center justify-between px-2 text-[10px] tabular-nums"
+		>
+			<span>{loLabel ?? (formatLabel ? formatLabel(value[0]) : '')}</span>
+			<span>{hiLabel ?? (formatLabel ? formatLabel(value[1]) : '')}</span>
+		</div>
+	{/if}
+</div>

package/dist/components/ui/slider/range-slider.svelte.d.ts

@@ -0,0 +1,21 @@
+type $$ComponentProps = {
+    value?: [number, number];
+    min: number;
+    max: number;
+    step?: number;
+    /** Optional bin counts to draw behind the track. */
+    histogram?: readonly number[] | null;
+    /** Formatter for the default min/max label row. Omit to hide labels. */
+    formatLabel?: (n: number) => string;
+    /** Override the lower label (takes precedence over `formatLabel(value[0])`). */
+    loLabel?: string;
+    /** Override the upper label (takes precedence over `formatLabel(value[1])`). */
+    hiLabel?: string;
+    class?: string;
+    disabled?: boolean;
+    onValueChange?: (next: [number, number]) => void;
+    onValueCommit?: (next: [number, number]) => void;
+};
+declare const RangeSlider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RangeSlider = ReturnType<typeof RangeSlider>;
+export default RangeSlider;

package/dist/components/ui/slider/slider.svelte

@@ -0,0 +1,83 @@
+<script lang="ts" module>
+import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+
+export type SliderProps = WithoutChildrenOrChild<SliderPrimitive.RootProps> & {
+	class?: string;
+};
+</script>
+
+<script lang="ts">
+import { cn } from '../../../utils.js';
+
+let {
+	ref = $bindable(null),
+	value = $bindable(),
+	class: className,
+	type,
+	...restProps
+}: SliderProps = $props();
+</script>
+
+{#if type === 'single'}
+	<SliderPrimitive.Root
+		bind:ref
+		bind:value={value as never}
+		type="single"
+		data-slot="slider"
+		class={cn(
+			'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50',
+			className
+		)}
+		{...(restProps as Record<string, unknown>)}
+	>
+		{#snippet children({ thumbs })}
+			<span
+				data-slot="slider-track"
+				class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+			>
+				<SliderPrimitive.Range
+					data-slot="slider-range"
+					class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+				/>
+			</span>
+			{#each thumbs as index (index)}
+				<SliderPrimitive.Thumb
+					{index}
+					data-slot="slider-thumb"
+					class="border-primary bg-background ring-ring/50 block size-4 shrink-0 cursor-pointer rounded-full border-2 shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+				/>
+			{/each}
+		{/snippet}
+	</SliderPrimitive.Root>
+{:else}
+	<SliderPrimitive.Root
+		bind:ref
+		bind:value={value as never}
+		type="multiple"
+		data-slot="slider"
+		class={cn(
+			'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50',
+			className
+		)}
+		{...(restProps as Record<string, unknown>)}
+	>
+		{#snippet children({ thumbs })}
+			<span
+				data-slot="slider-track"
+				class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+			>
+				<SliderPrimitive.Range
+					data-slot="slider-range"
+					class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+				/>
+			</span>
+			{#each thumbs as index (index)}
+				<SliderPrimitive.Thumb
+					{index}
+					data-slot="slider-thumb"
+					class="border-primary bg-background ring-ring/50 block size-4 shrink-0 cursor-pointer rounded-full border-2 shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+				/>
+			{/each}
+		{/snippet}
+	</SliderPrimitive.Root>
+{/if}

package/dist/components/ui/slider/slider.svelte.d.ts

@@ -0,0 +1,7 @@
+import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+export type SliderProps = WithoutChildrenOrChild<SliderPrimitive.RootProps> & {
+    class?: string;
+};
+declare const Slider: import("svelte").Component<SliderProps, {}, "ref" | "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;