@x33025/sveltely 0.1.17 → 0.1.19

package/dist/style.css

@@ -13,11 +13,12 @@
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-zinc-50: oklch(98.5% 0 0);
     --color-zinc-100: oklch(96.7% 0.001 286.375);
     --color-zinc-200: oklch(92% 0.004 286.32);
     --color-zinc-300: oklch(87.1% 0.006 286.286);
+    --color-zinc-400: oklch(70.5% 0.015 286.067);
     --color-zinc-500: oklch(55.2% 0.016 285.938);
-    --color-zinc-700: oklch(37% 0.013 285.805);
     --color-zinc-900: oklch(21% 0.006 285.885);
     --color-zinc-950: oklch(14.1% 0.005 285.823);
     --color-black: #000;
@@ -30,19 +31,11 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
-    --text-2xl: 1.5rem;
-    --text-2xl--line-height: calc(2 / 1.5);
     --text-3xl: 1.875rem;
     --text-3xl--line-height: calc(2.25 / 1.875);
-    --text-4xl: 2.25rem;
-    --text-4xl--line-height: calc(2.5 / 2.25);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --tracking-tight: -0.025em;
-    --tracking-wide: 0.025em;
-    --leading-tight: 1.25;
     --radius-md: 0.375rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -276,6 +269,12 @@
   .table {
     display: table;
   }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-row {
+    display: table-row;
+  }
   .aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -290,9 +289,6 @@
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
   .h-36 {
     height: calc(var(--spacing) * 36);
   }
@@ -356,9 +352,6 @@
   .animate-spin {
     animation: var(--animate-spin);
   }
-  .cursor-pointer {
-    cursor: pointer;
-  }
   .touch-none {
     touch-action: none;
   }
@@ -417,13 +410,6 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -496,18 +482,12 @@
   .bg-zinc-200 {
     background-color: var(--color-zinc-200);
   }
-  .bg-zinc-950 {
-    background-color: var(--color-zinc-950);
-  }
   .object-contain {
     object-fit: contain;
   }
   .object-cover {
     object-fit: cover;
   }
-  .p-1 {
-    padding: calc(var(--spacing) * 1);
-  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -517,15 +497,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
-  .px-4 {
-    padding-inline: calc(var(--spacing) * 4);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
-  .py-4 {
-    padding-block: calc(var(--spacing) * 4);
-  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -538,62 +512,29 @@
   .text-left {
     text-align: left;
   }
-  .font-mono {
-    font-family: var(--font-mono);
-  }
-  .text-2xl {
-    font-size: var(--text-2xl);
-    line-height: var(--tw-leading, var(--text-2xl--line-height));
-  }
   .text-3xl {
     font-size: var(--text-3xl);
     line-height: var(--tw-leading, var(--text-3xl--line-height));
   }
-  .text-4xl {
-    font-size: var(--text-4xl);
-    line-height: var(--tw-leading, var(--text-4xl--line-height));
-  }
   .text-sm {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
-  .text-xl {
-    font-size: var(--text-xl);
-    line-height: var(--tw-leading, var(--text-xl--line-height));
-  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .text-\[15px\] {
-    font-size: 15px;
-  }
-  .text-\[16px\] {
-    font-size: 16px;
-  }
   .text-\[17px\] {
     font-size: 17px;
   }
-  .leading-6 {
-    --tw-leading: calc(var(--spacing) * 6);
-    line-height: calc(var(--spacing) * 6);
-  }
   .leading-7 {
     --tw-leading: calc(var(--spacing) * 7);
     line-height: calc(var(--spacing) * 7);
   }
-  .leading-8 {
-    --tw-leading: calc(var(--spacing) * 8);
-    line-height: calc(var(--spacing) * 8);
-  }
   .leading-none {
     --tw-leading: 1;
     line-height: 1;
   }
-  .leading-tight {
-    --tw-leading: var(--leading-tight);
-    line-height: var(--leading-tight);
-  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
@@ -602,30 +543,18 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-\[-0\.03em\] {
-    --tw-tracking: -0.03em;
-    letter-spacing: -0.03em;
-  }
-  .tracking-\[-0\.025em\] {
-    --tw-tracking: -0.025em;
-    letter-spacing: -0.025em;
-  }
   .tracking-tight {
     --tw-tracking: var(--tracking-tight);
     letter-spacing: var(--tracking-tight);
   }
-  .tracking-wide {
-    --tw-tracking: var(--tracking-wide);
-    letter-spacing: var(--tracking-wide);
-  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-\[var\(--sveltely-primary-color\)\] {
-    color: var(--sveltely-primary-color);
+  .text-\[var\(--sveltely-text-primary-color\)\] {
+    color: var(--sveltely-text-primary-color);
   }
-  .text-\[var\(--sveltely-secondary-color\)\] {
-    color: var(--sveltely-secondary-color);
+  .text-\[var\(--sveltely-text-secondary-color\)\] {
+    color: var(--sveltely-text-secondary-color);
   }
   .text-gray-700 {
     color: var(--color-gray-700);
@@ -633,22 +562,19 @@
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-zinc-100 {
-    color: var(--color-zinc-100);
-  }
-  .text-zinc-700 {
-    color: var(--color-zinc-700);
-  }
   .text-zinc-950 {
     color: var(--color-zinc-950);
   }
-  .uppercase {
-    text-transform: uppercase;
-  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -701,6 +627,15 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -823,9 +758,9 @@
       background-color: var(--color-zinc-200);
     }
   }
-  .disabled\:text-\[var\(--sveltely-secondary-color\)\] {
+  .disabled\:text-\[var\(--sveltely-text-secondary-color\)\] {
     &:disabled {
-      color: var(--sveltely-secondary-color);
+      color: var(--sveltely-text-secondary-color);
     }
   }
   .disabled\:opacity-50 {
@@ -853,23 +788,13 @@
     --sveltely-padding-x: 0.75rem;
     --sveltely-padding-y: 0.75rem;
     --sveltely-gap: 0.5rem;
-    --sveltely-primary-color: var(--color-zinc-900);
-    --sveltely-secondary-color: var(--color-zinc-500);
-    --sveltely-active-color: var(--color-zinc-900);
-    --sveltely-inactive-color: var(--color-zinc-100);
+    --sveltely-text-primary-color: var(--color-zinc-900);
+    --sveltely-text-secondary-color: var(--color-zinc-500);
+    --sveltely-text-tertiary-color: var(--color-zinc-400);
     --sveltely-background-color: white;
-    --sveltely-hover-color: var(--sveltely-active-color);
-    @supports (color: color-mix(in lab, red, red)) {
-      --sveltely-hover-color: color-mix(in oklab, var(--sveltely-active-color) 5%, transparent);
-    }
-    --sveltely-inactive-hover-color: var(--sveltely-inactive-color);
-    @supports (color: color-mix(in lab, red, red)) {
-      --sveltely-inactive-hover-color: color-mix(in oklab, var(--sveltely-inactive-color) 88%, white);
-    }
-    --sveltely-active-hover-color: var(--sveltely-active-color);
-    @supports (color: color-mix(in lab, red, red)) {
-      --sveltely-active-hover-color: color-mix(in oklab, var(--sveltely-active-color) 88%, white);
-    }
+    --sveltely-control-active-color: var(--color-zinc-900);
+    --sveltely-control-inactive-color: var(--color-zinc-100);
+    --sveltely-control-background-color: var(--color-zinc-50);
     --sveltely-shadow: 0 16px 40px rgb(0 0 0 / 0.12), 0 4px 14px rgb(0 0 0 / 0.08);
     --sveltely-border-radius-nested: clamp(
 			0px,
@@ -883,7 +808,7 @@
     height: 100%;
     overflow: hidden;
     background: var(--sveltely-background-color);
-    color: var(--sveltely-primary-color);
+    color: var(--sveltely-text-primary-color);
     -webkit-user-select: none;
     user-select: none;
   }
@@ -895,9 +820,6 @@
     appearance: none;
     background-clip: padding-box;
   }
-  button {
-    cursor: pointer;
-  }
   button:disabled {
     cursor: not-allowed;
   }
@@ -1099,6 +1021,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-ease {
   syntax: "*";
   inherits: false;
@@ -1149,6 +1075,7 @@
       --tw-backdrop-opacity: initial;
       --tw-backdrop-saturate: initial;
       --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
       --tw-ease: initial;
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.17",
+	"version": "0.1.19",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/components/Library/ArticleEditor/ArticleBlockCode.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { BlockDraft } from './types.js';
-type $$ComponentProps = {
-    block: BlockDraft;
-    onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
-};
-declare const ArticleBlockCode: import("svelte").Component<$$ComponentProps, {}, "">;
-type ArticleBlockCode = ReturnType<typeof ArticleBlockCode>;
-export default ArticleBlockCode;

package/dist/components/Library/ArticleEditor/ArticleBlockFAQ.svelte.d.ts

@@ -1,8 +0,0 @@
-import type { BlockDraft } from './types.js';
-type $$ComponentProps = {
-    block: BlockDraft;
-    onUpdateItem: (blockID: string, index: number, field: 'question' | 'answer', value: string) => void;
-};
-declare const ArticleBlockFAQ: import("svelte").Component<$$ComponentProps, {}, "">;
-type ArticleBlockFAQ = ReturnType<typeof ArticleBlockFAQ>;
-export default ArticleBlockFAQ;

package/dist/components/Library/ArticleEditor/ArticleBlockFallback.svelte

@@ -1,79 +0,0 @@
-<script lang="ts">
-	import TextEditor from '../TextEditor';
-	import type { BlockDraft } from './types.js';
-
-	let {
-		block,
-		onUpdate,
-		onCreateParagraphAfter,
-		onMergeBlockWithPrevious,
-		onConvertToList,
-		onRemoveBlock,
-		shouldFocus,
-		focusPosition,
-		onFocused
-	} = $props<{
-		block: BlockDraft;
-		onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
-		onCreateParagraphAfter?: (id: string, text?: string, currentText?: string | null) => void;
-		onMergeBlockWithPrevious?: (id: string) => void;
-		onConvertToList?: (id: string, kind: 'bullet_list' | 'numbered_list') => void;
-		onRemoveBlock?: (id: string) => void;
-		shouldFocus?: boolean;
-		focusPosition?: number | null;
-		onFocused?: () => void;
-	}>();
-</script>
-
-<TextEditor
-	autosize
-	rows={1}
-	value={block.text ?? ''}
-	onInput={(event) =>
-		onUpdate(block.id, {
-			text: (event.currentTarget as HTMLTextAreaElement).value
-		})}
-	onKeyDown={(event) => {
-		const value = (event.currentTarget as HTMLTextAreaElement).value.trim();
-		if (event.key === ' ' && value === '-') {
-			event.preventDefault();
-			onConvertToList?.(block.id, 'bullet_list');
-			return;
-		}
-		if (event.key === ' ' && /^\d+\.$/.test(value)) {
-			event.preventDefault();
-			onConvertToList?.(block.id, 'numbered_list');
-			return;
-		}
-		if (event.key === 'Enter' && !event.shiftKey) {
-			event.preventDefault();
-			const textarea = event.currentTarget as HTMLTextAreaElement;
-			const text = textarea.value;
-			const before = text.slice(0, textarea.selectionStart);
-			const after = text.slice(textarea.selectionEnd);
-			if (!text.trim()) {
-				onRemoveBlock?.(block.id);
-				return;
-			}
-			onCreateParagraphAfter?.(block.id, after, before);
-		}
-		if (
-			event.key === 'Backspace' &&
-			!event.shiftKey &&
-			!event.metaKey &&
-			!event.ctrlKey &&
-			!event.altKey
-		) {
-			const textarea = event.currentTarget as HTMLTextAreaElement;
-			if (textarea.selectionStart === 0 && textarea.selectionEnd === 0) {
-				event.preventDefault();
-				onMergeBlockWithPrevious?.(block.id);
-			}
-		}
-	}}
-	{shouldFocus}
-	{focusPosition}
-	{onFocused}
-	className="text-[16px] leading-7 text-zinc-700 placeholder:text-zinc-300"
-	placeholder="Block content"
-/>

package/dist/components/Library/ArticleEditor/ArticleBlockImage.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import ArticleImagePreview from './ArticleImagePreview.svelte';
-	import TextEditor from '../TextEditor';
-	import type { BlockDraft } from './types.js';
-
-	let { block, titleFallback, onUpdate } = $props<{
-		block: BlockDraft;
-		titleFallback: string;
-		onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
-	}>();
-</script>
-
-<div class="article-block-image">
-	<ArticleImagePreview src={block.imageURL} alt={block.imageAlt ?? titleFallback} />
-	<div>
-		<TextEditor
-			autosize
-			rows={1}
-			className="article-block-image-description"
-			value={block.imageAlt ?? ''}
-			onInput={(event) =>
-				onUpdate(block.id, {
-					imageAlt: (event.currentTarget as HTMLTextAreaElement).value
-				})}
-			placeholder="Alt text"
-		/>
-	</div>
-</div>
-
-<style>
-	.article-block-image {
-		display: grid;
-		gap: 1rem;
-	}
-
-	:global(.article-block-image-description) {
-		border: 0;
-		background: transparent;
-		padding: 0;
-		color: #3f3f46;
-		font-size: 0.875rem;
-		line-height: 1.5rem;
-	}
-
-	:global(.article-block-image-description::placeholder) {
-		color: #d4d4d8;
-	}
-</style>

package/dist/components/Library/ArticleEditor/ArticleBlockImage.svelte.d.ts

@@ -1,9 +0,0 @@
-import type { BlockDraft } from './types.js';
-type $$ComponentProps = {
-    block: BlockDraft;
-    titleFallback: string;
-    onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
-};
-declare const ArticleBlockImage: import("svelte").Component<$$ComponentProps, {}, "">;
-type ArticleBlockImage = ReturnType<typeof ArticleBlockImage>;
-export default ArticleBlockImage;

package/dist/components/Library/ArticleEditor/ArticleBlockParagraph.svelte.d.ts

@@ -1,15 +0,0 @@
-import type { BlockDraft } from './types.js';
-type $$ComponentProps = {
-    block: BlockDraft;
-    onUpdate: (id: string, patch: Partial<BlockDraft>) => void;
-    onCreateParagraphAfter?: (id: string, text?: string, currentText?: string | null) => void;
-    onMergeBlockWithPrevious?: (id: string) => void;
-    onConvertToList?: (id: string, kind: 'bullet_list' | 'numbered_list') => void;
-    onRemoveBlock?: (id: string) => void;
-    shouldFocus?: boolean;
-    focusPosition?: number | null;
-    onFocused?: () => void;
-};
-declare const ArticleBlockParagraph: import("svelte").Component<$$ComponentProps, {}, "">;
-type ArticleBlockParagraph = ReturnType<typeof ArticleBlockParagraph>;
-export default ArticleBlockParagraph;

package/dist/components/Library/ArticleEditor/ArticleImagePreview.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-	import { ImageIcon } from '@lucide/svelte';
-
-	let {
-		src,
-		alt,
-		aspectRatio = '4 / 3'
-	} = $props<{
-		src?: string | null;
-		alt: string;
-		aspectRatio?: string;
-	}>();
-
-	let imageLoaded = $state(false);
-	let imageFailed = $state(false);
-
-	$effect(() => {
-		src;
-		imageLoaded = false;
-		imageFailed = false;
-	});
-</script>
-
-<div class="article-image-preview" style={`aspect-ratio: ${aspectRatio};`}>
-	{#if src && !imageFailed}
-		<img
-			{src}
-			{alt}
-			class="article-image-preview-media"
-			class:article-image-preview-media-loaded={imageLoaded}
-			onload={() => (imageLoaded = true)}
-			onerror={() => (imageFailed = true)}
-		/>
-	{/if}
-	{#if !src || !imageLoaded || imageFailed}
-		<div class="article-image-preview-placeholder" aria-hidden="true">
-			<ImageIcon size={32} strokeWidth={1.75} />
-		</div>
-	{/if}
-</div>
-
-<style>
-	.article-image-preview {
-		position: relative;
-		display: grid;
-		place-items: center;
-		overflow: hidden;
-		background: #f4f4f5;
-	}
-
-	.article-image-preview-media {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		opacity: 0;
-		transition: opacity 120ms ease;
-	}
-
-	.article-image-preview-media-loaded {
-		opacity: 1;
-	}
-
-	.article-image-preview-placeholder {
-		position: absolute;
-		inset: 0;
-		display: grid;
-		place-items: center;
-		color: #a1a1aa;
-	}
-</style>

package/dist/components/Library/ArticleEditor/ArticleImagePreview.svelte.d.ts

@@ -1,8 +0,0 @@
-type $$ComponentProps = {
-    src?: string | null;
-    alt: string;
-    aspectRatio?: string;
-};
-declare const ArticleImagePreview: import("svelte").Component<$$ComponentProps, {}, "">;
-type ArticleImagePreview = ReturnType<typeof ArticleImagePreview>;
-export default ArticleImagePreview;