@calmlens/sdk 0.16.3 → 0.17.1

package/esm/svelte/CalmLensUploader.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import {
+    createUploadController,
+    describeUploader,
+    describeUploadItem,
+    resolveMessages,
+    type UploaderProps,
+  } from "../ui.js";
+  import Icon from "./Icon.svelte";
+
+  let {
+    disabled = false,
+    capture,
+    messages: overrides,
+    controller: external,
+    ...options
+  }: UploaderProps = $props();
+
+  // The latest options, without restarting uploads when the parent re-renders.
+  const own = createUploadController(options);
+  $effect.pre(() => {
+    if (!external) own.setOptions({ ...options });
+  });
+  onMount(() => () => own.clear());
+
+  const queue = $derived(external ?? own);
+  const messages = $derived(resolveMessages(overrides));
+  const view = $derived(describeUploader($queue, queue.options, messages));
+  let dragging = $state(false);
+  let input: HTMLInputElement | undefined = $state();
+
+  const openPicker = () => {
+    if (!disabled) input?.click();
+  };
+  const onDragOver = (event: DragEvent) => {
+    event.preventDefault();
+    if (!disabled) dragging = true;
+  };
+</script>
+
+<div class="calmlens-uploader">
+  {#if view.showDropzone}
+    <!-- Keyboard users open the picker with the button; the zone adds drop and click targets. -->
+    <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+    <!-- biome-ignore lint/a11y/noStaticElementInteractions: the button inside is the accessible control -->
+    <div
+      class="calmlens-dropzone"
+      data-dragging={dragging || undefined}
+      data-disabled={disabled || undefined}
+      onclick={openPicker}
+      ondragover={onDragOver}
+      ondragenter={onDragOver}
+      ondragleave={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) dragging = false;
+      }}
+      ondrop={(event) => {
+        event.preventDefault();
+        dragging = false;
+        if (!disabled && event.dataTransfer) queue.addFiles(event.dataTransfer.files);
+      }}
+      onpaste={(event) => {
+        const files = event.clipboardData?.files;
+        if (!disabled && files?.length) queue.addFiles(files);
+      }}
+    >
+      <span class="calmlens-dropzone__icon"><Icon name="upload" /></span>
+      <div class="calmlens-dropzone__text">
+        <p class="calmlens-dropzone__title">
+          {dragging ? messages.dropzoneTitleDragging : messages.dropzoneTitle}
+        </p>
+        {#if view.hint}<p class="calmlens-dropzone__hint">{view.hint}</p>{/if}
+      </div>
+      <button
+        type="button"
+        class="calmlens-button"
+        data-variant="outline"
+        {disabled}
+        onclick={(event) => {
+          event.stopPropagation();
+          openPicker();
+        }}
+      >
+        {view.chooseLabel}
+      </button>
+    </div>
+  {/if}
+  <input
+    bind:this={input}
+    type="file"
+    hidden
+    accept={queue.options.accept}
+    multiple={queue.options.multiple}
+    {capture}
+    {disabled}
+    onchange={(event) => {
+      if (event.currentTarget.files) queue.addFiles(event.currentTarget.files);
+      event.currentTarget.value = "";
+    }}
+  />
+  {#if $queue.items.length > 0}
+    <ul class="calmlens-uploads">
+      {#each $queue.items as item (item.key)}
+        {@const itemView = describeUploadItem(item, messages)}
+        <li class="calmlens-upload" data-stage={item.stage} data-outcome={itemView.outcome}>
+          {#if item.previewUrl}
+            <img class="calmlens-upload__thumb" src={item.previewUrl} alt="" />
+          {:else}
+            <span class="calmlens-upload__thumb" data-kind="file" aria-hidden="true"
+              >{@html itemView.fileIcon}</span
+            >
+          {/if}
+          <div class="calmlens-upload__body">
+            <span class="calmlens-upload__name">{item.file.name}</span>
+            <span class="calmlens-upload__size">{itemView.size}</span>
+            {#if itemView.busy}
+              <div
+                class="calmlens-progress"
+                role="progressbar"
+                aria-label={itemView.message}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                aria-valuenow={itemView.progressPercent}
+              >
+                <div
+                  class="calmlens-progress__bar"
+                  style:width={itemView.progressPercent === undefined
+                    ? undefined
+                    : `${itemView.progressPercent}%`}
+                ></div>
+              </div>
+            {/if}
+            {#if itemView.message}
+              <p class="calmlens-upload__message" role="status">{itemView.message}</p>
+            {/if}
+          </div>
+          <div class="calmlens-upload__actions">
+            {#if !view.showDropzone}
+              <button
+                type="button"
+                class="calmlens-button"
+                data-variant="outline"
+                data-size="small"
+                {disabled}
+                onclick={openPicker}
+              >
+                {messages.chooseAnother}
+              </button>
+            {/if}
+            {#if itemView.canRetry}
+              <button
+                type="button"
+                class="calmlens-icon-button"
+                aria-label={messages.retry}
+                title={messages.retry}
+                onclick={() => queue.retry(item.key)}
+              >
+                <Icon name="retry" />
+              </button>
+            {/if}
+            <button
+              type="button"
+              class="calmlens-icon-button"
+              aria-label={itemView.removeLabel}
+              title={itemView.removeLabel}
+              onclick={() => queue.remove(item.key)}
+            >
+              <Icon name="remove" />
+            </button>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>

package/esm/svelte/Icon.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ICON_ATTRIBUTES, ICONS, type IconName } from "../ui.js";
+
+  let { name }: { name: IconName } = $props();
+</script>
+
+<svg {...ICON_ATTRIBUTES}><path d={ICONS[name]} /></svg>

package/esm/svelte/index.d.ts

@@ -0,0 +1,37 @@
+import type { Component } from "svelte";
+import type {
+  CalmLensUpload as CoreCalmLensUpload,
+  UploadControllerOptions as CoreUploadControllerOptions,
+  UploaderProps as CoreUploaderProps,
+  UploadItem as CoreUploadItem,
+  UploadSnapshot as CoreUploadSnapshot,
+  MediaProps,
+  UploadController,
+  UploadFile,
+} from "../ui.js";
+
+// The browser's files are `File`s, so the upload types default to `File` here.
+export type UploadItem<F extends UploadFile = File> = CoreUploadItem<F>;
+export type CalmLensUpload<F extends UploadFile = File> = CoreCalmLensUpload<F>;
+export type UploadSnapshot<F extends UploadFile = File> = CoreUploadSnapshot<F>;
+export type UploadControllerOptions<F extends UploadFile = File> = CoreUploadControllerOptions<F>;
+export type UploaderProps<F extends UploadFile = File> = CoreUploaderProps<F>;
+/** Creates an upload queue for the components, such as one a form starts on submit. */
+export declare const createUploadController: <F extends UploadFile = File>(
+  options: UploadControllerOptions<F>,
+) => UploadController<F>;
+
+/**
+ * A drop zone and file list that uploads through an upload preset, shows each file's progress
+ * and moderation decision, and reports finished uploads to `onUploaded`.
+ */
+export declare const CalmLensUploader: Component<UploaderProps>;
+
+/**
+ * Shows an asset from the CalmLens CDN with responsive widths and a blurred placeholder while
+ * it loads. Age-restricted assets stay behind the placeholder and a reveal button until
+ * `ageConfirmed` is set; blocked and purged assets show an unavailable notice.
+ */
+export declare const CalmLensMedia: Component<MediaProps>;
+
+export * from "../ui.js";

package/esm/svelte/index.js

@@ -0,0 +1,6 @@
+// Svelte 5 components for uploads and media. The upload controller is a Svelte store, so
+// `createUploadController(...)` and `$controller.items` build your own upload UI.
+
+export * from "../ui.js";
+export { default as CalmLensMedia } from "./CalmLensMedia.svelte";
+export { default as CalmLensUploader } from "./CalmLensUploader.svelte";

package/esm/test-inputs.d.ts

@@ -1,2 +1,2 @@
-import { a as detectTestImage, c as getImageTestCategories, d as paintTestImage, i as TestImageKeyCell, l as getTestImageKeyCells, n as TEST_IMAGE_PALETTES, o as detectTestTrigger, r as TEST_INPUT_KEY_PATTERN, s as generateTestTextCode, t as ClassificationTestSignal, u as getTestImageKeyColors } from "./TestTriggers-CRKtulyp-vrzEq2wm.js";
-export { type ClassificationTestSignal, TEST_IMAGE_PALETTES, TEST_INPUT_KEY_PATTERN, type TestImageKeyCell, detectTestImage, detectTestTrigger, generateTestTextCode, getImageTestCategories, getTestImageKeyCells, getTestImageKeyColors, paintTestImage };
+import { a as detectTestImage, c as getImageTestCategories, i as TestInput, l as paintTestImage, n as TEST_INPUT_KEY_PATTERN, o as detectTestTrigger, r as TEST_INPUT_PRESETS, s as generateTestTextCode, t as ClassificationTestSignal, u as testInputForSignal } from "./TestTriggers-By07LR31-CmK0yTyR.js";
+export { type ClassificationTestSignal, TEST_INPUT_KEY_PATTERN, TEST_INPUT_PRESETS, type TestInput, detectTestImage, detectTestTrigger, generateTestTextCode, getImageTestCategories, paintTestImage, testInputForSignal };

package/esm/test-inputs.js

@@ -1,256 +1 @@
-//#region src/contract/TestTriggers-7yylawYV.js
-const TEST_IMAGE_PALETTES = {
-	sexual: [
-		[
-			255,
-			20,
-			147,
-			255
-		],
-		[
-			255,
-			105,
-			180,
-			255
-		],
-		[
-			199,
-			21,
-			133,
-			255
-		],
-		[
-			255,
-			69,
-			0,
-			255
-		]
-	],
-	violence: [
-		[
-			139,
-			0,
-			0,
-			255
-		],
-		[
-			220,
-			20,
-			60,
-			255
-		],
-		[
-			178,
-			34,
-			34,
-			255
-		],
-		[
-			255,
-			0,
-			0,
-			255
-		]
-	],
-	harassment: [
-		[
-			180,
-			83,
-			9,
-			255
-		],
-		[
-			217,
-			119,
-			6,
-			255
-		],
-		[
-			245,
-			158,
-			11,
-			255
-		],
-		[
-			251,
-			191,
-			36,
-			255
-		]
-	],
-	hate: [
-		[
-			30,
-			64,
-			175,
-			255
-		],
-		[
-			37,
-			99,
-			235,
-			255
-		],
-		[
-			59,
-			130,
-			246,
-			255
-		],
-		[
-			96,
-			165,
-			250,
-			255
-		]
-	],
-	"criminal-activity": [
-		[
-			6,
-			95,
-			70,
-			255
-		],
-		[
-			5,
-			150,
-			105,
-			255
-		],
-		[
-			16,
-			185,
-			129,
-			255
-		],
-		[
-			52,
-			211,
-			153,
-			255
-		]
-	],
-	"self-harm": [
-		[
-			75,
-			0,
-			130,
-			255
-		],
-		[
-			138,
-			43,
-			226,
-			255
-		],
-		[
-			72,
-			61,
-			139,
-			255
-		],
-		[
-			147,
-			112,
-			219,
-			255
-		]
-	]
-};
-/** A project's test input key: eight hexadecimal characters only its members can see. */
-const TEST_INPUT_KEY_PATTERN = /^[a-f0-9]{8}$/;
-const TEXT_CODE_SIGNALS = [
-	"harassment",
-	"hate",
-	"criminal-activity",
-	"sexual.involving-minors"
-];
-/**
-* The text code that CalmLens classifies as `category` for the project with this test input key.
-* @returns The code, or an empty string for a category without a text code
-*/
-const generateTestTextCode = (category, testInputKey) => TEXT_CODE_SIGNALS.includes(category) ? `<!calmlens-test ${testInputKey} ${category}>` : "";
-const TEST_TRIGGER_PATTERN = /<!calmlens-test\s+([a-f0-9]{8})\s+(harassment|hate|criminal-activity|sexual\.involving-minors)\s*>/gi;
-/**
-* The test signals in `text` whose codes carry the project's test input key. Codes with another
-* key are ignored, so a code can only be used by the project it belongs to.
-*/
-const detectTestTrigger = (text, testInputKey) => {
-	const signals = [];
-	for (const [, key, signal] of text.matchAll(TEST_TRIGGER_PATTERN)) {
-		if (key.toLowerCase() !== testInputKey.toLowerCase()) continue;
-		const testSignal = signal.toLowerCase();
-		if (!signals.includes(testSignal)) signals.push(testSignal);
-	}
-	return {
-		isTestTrigger: signals.length > 0,
-		signals
-	};
-};
-/** Sixteen cells encode two bits each using the category's four existing colours. */
-const getTestImageKeyCells = (width, height) => {
-	return Array.from({ length: 16 }, (_, index) => {
-		const column = index % 4;
-		const row = Math.floor(index / 4);
-		const x = Math.floor(column * width / 4);
-		const y = Math.floor(row * height / 4);
-		return {
-			x,
-			y,
-			width: Math.floor((column + 1) * width / 4) - x,
-			height: Math.floor((row + 1) * height / 4) - y
-		};
-	});
-};
-const getTestImageKeyColors = (signal, testInputKey) => {
-	const colors = TEST_IMAGE_PALETTES[signal];
-	if (!colors || !TEST_INPUT_KEY_PATTERN.test(testInputKey)) throw new Error("Invalid image test signal or key");
-	return [...testInputKey].flatMap((character) => {
-		const value = Number.parseInt(character, 16);
-		return [colors[value >> 2], colors[value & 3]];
-	});
-};
-/**
-* Gets all test trigger categories that support images
-*/
-const getImageTestCategories = () => {
-	return Object.keys(TEST_IMAGE_PALETTES);
-};
-/** Paint a full-image 4×4 grid as RGBA pixels; callers choose their image encoder. */
-const paintTestImage = (signal, testInputKey, width = 512, height = width) => {
-	if (!Number.isSafeInteger(width) || !Number.isSafeInteger(height) || width < 24 || height < 24) throw new RangeError("Test image dimensions must be integers of at least 24 pixels");
-	const colors = getTestImageKeyColors(signal, testInputKey);
-	const rgba = new Uint8Array(width * height * 4);
-	getTestImageKeyCells(width, height).forEach((cell, index) => {
-		for (let y = cell.y; y < cell.y + cell.height; y++) for (let x = cell.x; x < cell.x + cell.width; x++) rgba.set(colors[index], (y * width + x) * 4);
-	});
-	return rgba;
-};
-/** Decode the project key from pixels, tolerating resizing and lossy compression. */
-const detectTestImage = (image, testInputKey) => {
-	const { width, height, rgba } = image;
-	if (!Number.isSafeInteger(width) || !Number.isSafeInteger(height) || width < 24 || height < 24 || rgba.length !== width * height * 4 || !TEST_INPUT_KEY_PATTERN.test(testInputKey)) return void 0;
-	const cells = getTestImageKeyCells(width, height);
-	for (const category of getImageTestCategories()) {
-		const colors = getTestImageKeyColors(category, testInputKey);
-		if (cells.every((cell, index) => {
-			const sample = [
-				0,
-				0,
-				0
-			];
-			let count = 0;
-			for (let y = cell.y + Math.ceil(cell.height / 4); y < cell.y + cell.height * 3 / 4; y++) for (let x = cell.x + Math.ceil(cell.width / 4); x < cell.x + cell.width * 3 / 4; x++) {
-				const offset = (y * width + x) * 4;
-				if (rgba[offset + 3] < 250) return false;
-				for (let c = 0; c < 3; c++) sample[c] += rgba[offset + c];
-				count++;
-			}
-			const distances = TEST_IMAGE_PALETTES[category].map((color) => sample.reduce((sum, value, c) => sum + (value / count - color[c]) ** 2, 0));
-			const nearest = distances.indexOf(Math.min(...distances));
-			return distances[nearest] <= 900 && TEST_IMAGE_PALETTES[category][nearest] === colors[index];
-		})) return category;
-	}
-};
-//#endregion
-export { TEST_IMAGE_PALETTES, TEST_INPUT_KEY_PATTERN, detectTestImage, detectTestTrigger, generateTestTextCode, getImageTestCategories, getTestImageKeyCells, getTestImageKeyColors, paintTestImage };
+export { t as TEST_INPUT_KEY_PATTERN, n as TEST_INPUT_PRESETS, r as detectTestImage, i as detectTestTrigger, a as generateTestTextCode, o as getImageTestCategories, c as paintTestImage, l as testInputForSignal } from "./TestTriggers-DcArt0Nu-s0AQZuWE.js";