@fuzdev/fuz_ui 0.200.0 → 0.202.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fuzdev/fuz_ui",
-  "version": "0.200.0",
+  "version": "0.202.0",
   "description": "Svelte UI library",
   "tagline": "friendly user zystem",
   "glyph": "🧶",
@@ -99,7 +99,7 @@
     "eslint": "^9.39.4",
     "eslint-plugin-svelte": "^3.19.0",
     "esm-env": "^1.2.2",
-    "jsdom": "^27.2.0",
+    "jsdom": "^29.1.1",
     "magic-string": "^0.30.21",
     "prettier": "^3.7.4",
     "prettier-plugin-svelte": "^3.5.1",

package/src/lib/dialog.ts

@@ -1,35 +1,38 @@
-import type {ComponentProps, Component} from 'svelte';
+import {create_context} from './context_helpers.js';
 
-import type Dialog from './Dialog.svelte';
+export type DialogAlign = 'center' | 'top';
+export const dialog_aligns: Array<DialogAlign> = ['center', 'top'];
 
 /**
- * This helper function is needed to construct `DialogParams` with type safety.
- * It uses TypeScript's inferred generics for functions,
- * which do not work for plain objects as of v5.0.4.
- * * `ContextmenuParams` uses a similar strategy.
+ * Set by `Dialog`, read by `DialogContent`. Lets the content surface close the
+ * dialog without the consumer threading `close` through the `children` snippet.
  */
-export const to_dialog_params = <T extends Component<any>>(
-	Component: T,
-	props: ComponentProps<T>,
-	dialog_props?: Partial<ComponentProps<typeof Dialog>>,
-): DialogParams<T> => ({
-	Component,
-	props,
-	dialog_props,
-});
+export interface DialogContext {
+	/**
+	 * Closes the dialog. When passed an event it's swallowed (default-prevented
+	 * and propagation-stopped) before closing.
+	 */
+	close: (e?: Event) => void;
+	/**
+	 * Registers a content-surface element so a press inside it isn't treated as an
+	 * outside-dismiss. The surface is known by node identity, independent of any
+	 * class. Use as an attachment on the surface: `{@attach register_surface}`.
+	 * Returns a cleanup that unregisters on unmount.
+	 */
+	register_surface: (element: Element) => () => void;
+}
+
+export const dialog_context = create_context<DialogContext>();
 
 /**
- * This pattern is based on:
- * https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/main/src/01-props/09-svelte-component/Component.svelte
- * The main limitation is that the generic cannot be inferred automatically,
- * so we use `to_dialog_params` to construct instances in most cases.
- * Definining `DialogParams` with no concrete `T` lacks typechecking for `props`.
+ * The `attrs` a custom `DialogContent` `close_button` snippet receives.
+ * Spread onto a `<button>` to inherit the corner-anchored close button.
  */
-export interface DialogParams<T extends Component<any> = Component<any>> {
-	Component: T;
-	props: ComponentProps<T>;
-	dialog_props?: Partial<ComponentProps<typeof Dialog>> | undefined;
+export interface DialogCloseButtonAttrs {
+	type: 'button';
+	class: string;
+	style: string;
+	onclick: DialogContext['close'];
+	title: string;
+	'aria-label': string;
 }
-
-export type DialogLayout = 'centered' | 'page';
-export const dialog_layouts: Array<DialogLayout> = ['centered', 'page'];