@warkypublic/svelix 0.1.44 → 0.1.47

package/dist/components/CardGrid/ImageCardStory.svelte

@@ -0,0 +1,308 @@
+<script lang="ts">import CardGrid from "./CardGrid.svelte";
+const columns = [
+	{
+		id: "id",
+		title: "ID",
+		disableSearch: true,
+		disableFilter: true
+	},
+	{
+		id: "title",
+		title: "Title"
+	},
+	{
+		id: "photographer",
+		title: "Photographer"
+	},
+	{
+		id: "category",
+		title: "Category"
+	},
+	{
+		id: "likes",
+		title: "Likes",
+		format: "number"
+	},
+	{
+		id: "views",
+		title: "Views",
+		format: "number"
+	}
+];
+const sortOptions = [
+	{
+		columnId: "title",
+		label: "Title"
+	},
+	{
+		columnId: "photographer",
+		label: "Photographer"
+	},
+	{
+		columnId: "likes",
+		label: "Likes"
+	}
+];
+const CATEGORIES = [
+	"Architecture",
+	"Nature",
+	"People",
+	"Travel",
+	"Abstract",
+	"Animals"
+];
+const PHOTOGRAPHERS = [
+	"Alice Monroe",
+	"Ben Carter",
+	"Cara Lee",
+	"Daniel Park",
+	"Emma Rios",
+	"Felix Braun"
+];
+const TITLES = [
+	"Golden Hour",
+	"Morning Mist",
+	"Urban Jungle",
+	"Still Waters",
+	"First Light",
+	"Hidden Path",
+	"City Pulse",
+	"Wild Plains",
+	"Quiet Corner",
+	"Storm Front",
+	"Desert Bloom",
+	"Arctic Echo",
+	"Neon Drift",
+	"Forest Floor",
+	"Tidal Wave"
+];
+const data = Array.from({ length: 60 }, (_, i) => ({
+	id: i + 1,
+	title: `${TITLES[i % TITLES.length]} ${Math.floor(i / TITLES.length) || ""}`.trim(),
+	photographer: PHOTOGRAPHERS[i % PHOTOGRAPHERS.length],
+	category: CATEGORIES[i % CATEGORIES.length],
+	likes: Math.floor(Math.random() * 4800 + 200),
+	views: Math.floor(Math.random() * 48e3 + 2e3),
+	imageUrl: `https://picsum.photos/seed/${i + 1}/400/260`
+}));
+</script>
+
+<!-- cardMaxFrontColumns=3 splits: front=[id,title,photographer], back=[category,likes,views] -->
+<CardGrid
+	{columns}
+	{sortOptions}
+	{data}
+	cardMinWidth={260}
+	cardMaxFrontColumns={3}
+	pageSize={20}
+	searchPlaceholder="Search photos…"
+>
+	{#snippet card(record, _i, selected, _focused)}
+		<article class="ic-card" class:ic-selected={selected}>
+			<div class="ic-image-wrap">
+				<img
+					src={record.imageUrl as string}
+					alt={record.title as string}
+					class="ic-image"
+					loading="lazy"
+				/>
+				<span class="ic-category">{record.category as string}</span>
+			</div>
+			<div class="ic-body">
+				<p class="ic-title">{record.title as string}</p>
+				<p class="ic-photographer">by {record.photographer as string}</p>
+			</div>
+		</article>
+	{/snippet}
+
+	{#snippet cardBack(record, _i, selected, _focused)}
+		<article class="ic-card ic-back" class:ic-selected={selected}>
+			<div class="ic-back-image-wrap">
+				<img
+					src={record.imageUrl as string}
+					alt={record.title as string}
+					class="ic-back-image"
+					loading="lazy"
+				/>
+				<div class="ic-back-overlay">
+					<p class="ic-back-title">{record.title as string}</p>
+					<p class="ic-back-photographer">by {record.photographer as string}</p>
+				</div>
+			</div>
+			<div class="ic-body ic-back-body">
+				<div class="ic-back-stat">
+					<svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+						<path d="M3 7h14M3 10h10M3 13h6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+					</svg>
+					<span class="ic-back-label">Category</span>
+					<span class="ic-back-value">{record.category as string}</span>
+				</div>
+				<div class="ic-back-stat">
+					<svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+						<path d="M10 4C5 4 1 10 1 10s4 6 9 6 9-6 9-6-4-6-9-6Z" stroke="currentColor" stroke-width="1.6"/>
+						<circle cx="10" cy="10" r="3" stroke="currentColor" stroke-width="1.6"/>
+					</svg>
+					<span class="ic-back-label">Views</span>
+					<span class="ic-back-value">{(record.views as number).toLocaleString()}</span>
+				</div>
+				<div class="ic-back-stat">
+					<svg width="14" height="14" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+						<path d="M10 17s-8-5-8-10a5 5 0 0 1 8-4 5 5 0 0 1 8 4c0 5-8 10-8 10Z" stroke="currentColor" stroke-width="1.6"/>
+					</svg>
+					<span class="ic-back-label">Likes</span>
+					<span class="ic-back-value">{(record.likes as number).toLocaleString()}</span>
+				</div>
+			</div>
+		</article>
+	{/snippet}
+</CardGrid>
+
+<style>
+	/* ── Shared ───────────────────────────────────────────────────────────── */
+
+	.ic-card {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		overflow: hidden;
+		border-radius: 10px;
+	}
+
+	.ic-body {
+		padding: 12px 14px 14px;
+		display: flex;
+		flex-direction: column;
+		gap: 3px;
+		flex: 1;
+	}
+
+	/* ── Front face ───────────────────────────────────────────────────────── */
+
+	.ic-image-wrap {
+		position: relative;
+		overflow: hidden;
+		aspect-ratio: 16 / 10;
+		background: var(--cg-border-subtle, #f4f6f9);
+		flex-shrink: 0;
+	}
+
+	.ic-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+		transition: transform 300ms ease;
+	}
+
+	.ic-card:hover .ic-image {
+		transform: scale(1.04);
+	}
+
+	.ic-category {
+		position: absolute;
+		top: 10px;
+		left: 10px;
+		background: rgba(0, 0, 0, 0.48);
+		color: #fff;
+		font-size: 0.7rem;
+		font-weight: 600;
+		letter-spacing: 0.04em;
+		text-transform: uppercase;
+		padding: 3px 8px;
+		border-radius: 999px;
+		backdrop-filter: blur(4px);
+	}
+
+	.ic-title {
+		font-size: 0.9rem;
+		font-weight: 600;
+		color: var(--cg-text, #0f172a);
+		margin: 0;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.ic-photographer {
+		font-size: 0.78rem;
+		color: var(--cg-text-muted, #64748b);
+		margin: 0;
+	}
+
+	.ic-selected .ic-image-wrap::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		box-shadow: inset 0 0 0 3px var(--cg-accent, #6366f1);
+	}
+
+	/* ── Back face ────────────────────────────────────────────────────────── */
+
+	.ic-back-image-wrap {
+		position: relative;
+		overflow: hidden;
+		aspect-ratio: 16 / 10;
+		flex-shrink: 0;
+	}
+
+	.ic-back-image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		display: block;
+		filter: brightness(0.45) saturate(0.7);
+	}
+
+	.ic-back-overlay {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		padding: 12px 14px;
+	}
+
+	.ic-back-title {
+		font-size: 0.95rem;
+		font-weight: 700;
+		color: #fff;
+		margin: 0;
+		line-height: 1.3;
+	}
+
+	.ic-back-photographer {
+		font-size: 0.75rem;
+		color: rgba(255,255,255,.75);
+		margin: 0;
+	}
+
+	.ic-back-body {
+		gap: 10px;
+		justify-content: center;
+	}
+
+	.ic-back-stat {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		color: var(--cg-text-muted, #64748b);
+	}
+
+	.ic-back-label {
+		font-size: 0.78rem;
+		flex: 1;
+	}
+
+	.ic-back-value {
+		font-size: 0.82rem;
+		font-weight: 600;
+		color: var(--cg-text, #0f172a);
+	}
+
+	.ic-selected .ic-back-image-wrap::after {
+		content: '';
+		position: absolute;
+		inset: 0;
+		box-shadow: inset 0 0 0 3px var(--cg-accent, #6366f1);
+	}
+</style>

package/dist/components/CardGrid/ImageCardStory.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ImageCardStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ImageCardStory = InstanceType<typeof ImageCardStory>;
+export default ImageCardStory;

package/dist/components/CardGrid/cardGrid.d.ts

@@ -0,0 +1,33 @@
+import type { GridColumnFormat } from '../Types/generic_grid.js';
+export type { GridColumnSortOrder, GridColumnFilters } from '../Types/generic_grid.js';
+export type { GridlerAdapterConfig, GridlerPageResult } from '../Gridler/types.js';
+export interface CardGridColumn {
+    id: string;
+    title: string;
+    /** Field path on the record; defaults to id. Supports dot notation. */
+    dataKey?: string;
+    format?: GridColumnFormat;
+    disableSort?: boolean;
+    disableFilter?: boolean;
+    disableSearch?: boolean;
+}
+export interface CardSortOption {
+    columnId: string;
+    label: string;
+}
+export interface CardGridContextMenuItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    icon?: string;
+    kind?: 'item' | 'separator';
+    onselect?: (rowData?: Record<string, unknown>) => void;
+}
+/** Add or remove an item from the selection by uniqueID match. */
+export declare function toggleItemInSelection(items: Record<string, unknown>[], item: Record<string, unknown>, uniqueID: string): Record<string, unknown>[];
+/** Return all items between anchor and target indices, inclusive. */
+export declare function rangeSelect(allItems: Record<string, unknown>[], anchorIndex: number, targetIndex: number): Record<string, unknown>[];
+/** Returns true if item is in selectedItems by uniqueID. */
+export declare function isItemSelected(selectedItems: Record<string, unknown>[], item: Record<string, unknown>, uniqueID: string): boolean;
+/** Compute how many cards fit in a row given container width, min card width, and gap. */
+export declare function computeColumnsInRow(containerWidth: number, cardMinWidth: number, gap: number): number;

package/dist/components/CardGrid/cardGrid.js

@@ -0,0 +1,21 @@
+/** Add or remove an item from the selection by uniqueID match. */
+export function toggleItemInSelection(items, item, uniqueID) {
+    const idx = items.findIndex((i) => i[uniqueID] === item[uniqueID]);
+    if (idx === -1)
+        return [...items, item];
+    return items.filter((_, i) => i !== idx);
+}
+/** Return all items between anchor and target indices, inclusive. */
+export function rangeSelect(allItems, anchorIndex, targetIndex) {
+    const start = Math.min(anchorIndex, targetIndex);
+    const end = Math.max(anchorIndex, targetIndex);
+    return allItems.slice(start, end + 1);
+}
+/** Returns true if item is in selectedItems by uniqueID. */
+export function isItemSelected(selectedItems, item, uniqueID) {
+    return selectedItems.some((s) => s[uniqueID] === item[uniqueID]);
+}
+/** Compute how many cards fit in a row given container width, min card width, and gap. */
+export function computeColumnsInRow(containerWidth, cardMinWidth, gap) {
+    return Math.max(1, Math.floor((containerWidth + gap) / (cardMinWidth + gap)));
+}

package/dist/components/CardGrid/index.d.ts

@@ -0,0 +1,4 @@
+export { default as CardGrid } from './CardGrid.svelte';
+export { default as DefaultCard } from './DefaultCard.svelte';
+export { default as CardGridFilterPanel } from './CardGridFilterPanel.svelte';
+export * from './cardGrid.js';

package/dist/components/CardGrid/index.js

@@ -0,0 +1,4 @@
+export { default as CardGrid } from './CardGrid.svelte';
+export { default as DefaultCard } from './DefaultCard.svelte';
+export { default as CardGridFilterPanel } from './CardGridFilterPanel.svelte';
+export * from './cardGrid.js';

package/dist/components/ContentEditor/CollaboraInsertTextDemo.svelte

@@ -1,13 +1,8 @@
-<script lang="ts">
-  import type { ContentEditorProps } from "./types.js";
-  import ContentEditor from "./ContentEditor.svelte";
-
-  let { value, filename, wopiUrl, discoverUrl, adminKey, userid, username }: ContentEditorProps =
-    $props();
-
-  let insertText = $state<((text: string) => void) | undefined>();
-  let insertHtml = $state<((html: string) => void) | undefined>();
-  let inputText = $state("Hello from Storybook!");
+<script lang="ts">import ContentEditor from "./ContentEditor.svelte";
+let { value, filename, wopiUrl, discoverUrl, adminKey, userid, username } = $props();
+let insertText = $state();
+let insertHtml = $state();
+let inputText = $state("Hello from Storybook!");
 </script>
 
 <div style="display:flex;flex-direction:column;height:100vh;">

package/dist/components/ContentEditor/ContentEditor.svelte

@@ -1,53 +1,27 @@
-<script lang="ts">
-  import type { ContentEditorProps } from "./types.js";
-  import { getEditorType } from "./utils.js";
-  import MonacoEditor from "./subcomponents/MonacoEditor.svelte";
-  import ImageViewer from "./subcomponents/ImageViewer.svelte";
-  import AudioPlayer from "./subcomponents/AudioPlayer.svelte";
-  import VideoPlayer from "./subcomponents/VideoPlayer.svelte";
-  import TextEditor from "./subcomponents/TextEditor.svelte";
-  import MarkdownViewer from "./subcomponents/MarkdownViewer.svelte";
-  import PdfViewer from "./subcomponents/PdfViewer.svelte";
-  import EmailViewer from "./subcomponents/EmailViewer.svelte";
-  import ZipViewer from "./subcomponents/ZipViewer.svelte";
-  import CollaboraEditor from "./subcomponents/CollaboraEditor.svelte";
-  import Office365Editor from "./subcomponents/Office365Editor.svelte";
-  import UnknownFile from "./subcomponents/UnknownFile.svelte";
-
-  let {
-    value,
-    filename,
-    contentType,
-    mode = "value",
-    hideHeader = false,
-    theme,
-    colorScheme = "auto",
-    readonly = false,
-    onChange,
-    onSave,
-    onUpload,
-    insertText = $bindable(),
-    insertHtml = $bindable(),
-    wopiUrl,
-    discoverUrl,
-    adminKey,
-    userid,
-    username,
-    viewtype,
-    officeSuite = "collabora",
-    officeOnlineUrl,
-  }: ContentEditorProps = $props();
-
-  const editorType = $derived(getEditorType({ filename, contentType }));
-  const forcedColorScheme = $derived(colorScheme === "auto" ? undefined : colorScheme);
-
-  $effect(() => {
-    if (mode === "filepointer") {
-      console.warn(
-        '[ContentEditor] mode="filepointer" is not yet implemented; falling back to value mode.',
-      );
-    }
-  });
+<script lang="ts">import { getEditorType } from "./utils.js";
+import MonacoEditor from "./subcomponents/MonacoEditor.svelte";
+import ImageViewer from "./subcomponents/ImageViewer.svelte";
+import AudioPlayer from "./subcomponents/AudioPlayer.svelte";
+import VideoPlayer from "./subcomponents/VideoPlayer.svelte";
+import TextEditor from "./subcomponents/TextEditor.svelte";
+import MarkdownViewer from "./subcomponents/MarkdownViewer.svelte";
+import PdfViewer from "./subcomponents/PdfViewer.svelte";
+import EmailViewer from "./subcomponents/EmailViewer.svelte";
+import ZipViewer from "./subcomponents/ZipViewer.svelte";
+import CollaboraEditor from "./subcomponents/CollaboraEditor.svelte";
+import Office365Editor from "./subcomponents/Office365Editor.svelte";
+import UnknownFile from "./subcomponents/UnknownFile.svelte";
+let { value, filename, contentType, mode = "value", hideHeader = false, theme, colorScheme = "auto", readonly = false, onChange, onSave, onUpload, insertText = $bindable(), insertHtml = $bindable(), wopiUrl, discoverUrl, adminKey, userid, username, viewtype, officeSuite = "collabora", officeOnlineUrl } = $props();
+const editorType = $derived(getEditorType({
+	filename,
+	contentType
+}));
+const forcedColorScheme = $derived(colorScheme === "auto" ? undefined : colorScheme);
+$effect(() => {
+	if (mode === "filepointer") {
+		console.warn("[ContentEditor] mode=\"filepointer\" is not yet implemented; falling back to value mode.");
+	}
+});
 </script>
 
 <div

package/dist/components/ContentEditor/subcomponents/AudioPlayer.svelte

@@ -1,20 +1,20 @@
-<script lang="ts">
-  import type { AudioPlayerProps } from '../types.js';
-  import IconAlertCircle from '../../Icons/IconAlertCircle.svelte';
-  let { value, filename }: AudioPlayerProps = $props();
-
-  let src = $state('');
-  let srcType = $state<string | undefined>(undefined);
-  let err = $state<string | null>(null);
-
-  $effect(() => {
-    if (!value) { src = ''; srcType = undefined; return; }
-    err = null;
-    const url = URL.createObjectURL(value);
-    src = url;
-    srcType = value.type || undefined;
-    return () => URL.revokeObjectURL(url);
-  });
+<script lang="ts">import IconAlertCircle from "../../Icons/IconAlertCircle.svelte";
+let { value, filename } = $props();
+let src = $state("");
+let srcType = $state(undefined);
+let err = $state(null);
+$effect(() => {
+	if (!value) {
+		src = "";
+		srcType = undefined;
+		return;
+	}
+	err = null;
+	const url = URL.createObjectURL(value);
+	src = url;
+	srcType = value.type || undefined;
+	return () => URL.revokeObjectURL(url);
+});
 </script>
 
 <div class="flex h-full w-full flex-col items-center justify-center gap-4 p-6">