@humandialog/forms.svelte 1.7.27 → 1.8.0

package/operations.svelte

@@ -1,9 +1,12 @@
 <script>import { showFloatingToolbar, showMenu, showGridMenu } from "./components/menu.js";
 import { contextToolbarOperations, pageToolbarOperations, contextItemsStore } from "./stores.js";
+import Ricon from "./components/r.icon.svelte";
 import { FaEllipsisV } from "svelte-icons/fa";
+import { i18n } from "./i18n.js";
+import { pushChanges, hasModifications, unsavedModificationsTicket } from "./updates.js";
 export let mobile = false;
 $:
-  update($pageToolbarOperations, $contextToolbarOperations);
+  update($pageToolbarOperations, $contextToolbarOperations, $unsavedModificationsTicket);
 let operations = [];
 let leftOperations = [];
 let rightOperations = [];
@@ -45,6 +48,15 @@ function update(...args) {
     rightOperations = COperations.toReversed();
     rightOperations = [...rightOperations, ...DOperations.toReversed()];
   } else if (opVer == 2) {
+    const saveOperation = {
+      caption: i18n({ en: "Save", es: "Guardar", pl: "Zapisz" }),
+      hideToolbarCaption: true,
+      mricon: "save",
+      action: (f) => pushChanges(),
+      //fab: 'T02',
+      tbr: operationsRoot.tbr,
+      disabledFunc: () => !hasModifications()
+    };
     if (operationsRoot && operationsRoot.tbr) {
       let allFlatOperations = [];
       operationsRoot.operations.forEach(
@@ -56,26 +68,33 @@ function update(...args) {
           ...g.operations
         ]
       );
+      allFlatOperations.push({ separator: true });
+      allFlatOperations.push(saveOperation);
       const allOperationsMenu = {
         caption: operationsRoot.caption ?? "",
         icon: operationsRoot.icon ?? FaEllipsisV,
+        mricon: operationsRoot.icon ?? "ellipsis-vertical",
         menu: allFlatOperations,
         tbr: operationsRoot.tbr,
         preAction: operationsRoot.preAction ?? void 0,
         disabled: operationsRoot.disabled
       };
+      const toolbarSave = { ...saveOperation };
+      if (toolbarSave.hideToolbarCaption)
+        toolbarSave.caption = "";
+      const systemOperations = [allOperationsMenu, toolbarSave];
       switch (operationsRoot.tbr) {
         case "A":
-          AOperations.push(allOperationsMenu);
+          AOperations.push(...systemOperations);
           break;
         case "B":
-          BOperations.push(allOperationsMenu);
+          BOperations.push(...systemOperations);
           break;
         case "C":
-          COperations.push(allOperationsMenu);
+          COperations.push(...systemOperations);
           break;
         case "D":
-          DOperations.push(allOperationsMenu);
+          DOperations.push(...systemOperations);
           break;
       }
     }
@@ -211,8 +230,10 @@ function operationTooltip(operation) {
 </script>
 
 {#if hasOperations}
-<section class="flex flex-row no-print h-10 bg-stone-50 dark:bg-stone-950 overflow-x-hidden overflow-y-clip py-0 text-xs whitespace-nowrap">
-    <div    class="flex flex-row"
+<section class="operations-0 flex flex-row no-print h-full
+
+                overflow-x-hidden overflow-y-clip py-0 text-xs whitespace-nowrap">
+    <div    class="operations-a flex flex-row"
             class:flex-row-reverse={mobile}>
 
         {#each leftOperations as operation}
@@ -221,12 +242,13 @@ function operationTooltip(operation) {
                 {@const isDisabled=isOperationDisabled(operation)}
                 {#if operation.toolbox}
                     {#each operation.toolbox as operation}
-                        {@const textColor= isDisabled ? 'text-stone-600 dark:text-stone-500' : 'text-stone-800 dark:text-stone-300 dark:hover:text-white '}
+                        {@const textColor= isDisabled ? 'text-stone-600 dark:text-stone-800' : 'text-stone-800 dark:text-stone-300 dark:hover:text-white '}
                         <button type="button"
-                                class="py-2.5 px-1
+                                class="operation-1 px-1
+                                text-orange-500
                                 text-xs font-thin
                                 {textColor}
-                                hover:bg-stone-700 active:bg-stone-300 border-stone-200
+                                hover:bg-stone-700 active:bg-stone-200 border-stone-200
                                 dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600
                                 focus:outline-none
                                 inline-flex items-center"
@@ -235,8 +257,10 @@ function operationTooltip(operation) {
                                 title={operationTooltip(operation)}
                                 on:mousedown={(e) => mousedown(e, operation)}
                                 on:click={(e) => {on_click(e, operation, isDisabled)}}>
-                            {#if operation.icon}
-                                <div class="w-4 h-4 mr-1"><svelte:component this={operation.icon}/></div>
+                            {#if operation.mricon}
+                                <div class="py-1 mr-1 w-4"><Ricon icon = {operation.mricon} s/></div>
+                            {:else if operation.icon}
+                                <div class="w-4 h-4 mr-1 text-orange-500"><svelte:component this={operation.icon}/></div>
                             {/if}
                             {#if operation.caption}
                                 <span class="ml-1">{operation.caption}</span>
@@ -249,13 +273,14 @@ function operationTooltip(operation) {
 
                     {@const enabledDarkColors ='dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600'}
                     {@const disabledDarkColors ='dark:text-stone-500 dark:border-stone-600'}
-                    
+
                     {@const disabledColors =`${disabledLightColors} ${disabledDarkColors}`}
                     {@const enabledColors =`${enabledLightColors} ${enabledDarkColors}`}
                     {@const colors = isDisabled ? disabledColors : enabledColors}
 
                     <button type="button"
-                            class="py-2.5 px-2
+                            class="operation-2 px-2
+
                             text-xs font-thin
                             focus:outline-none
                             inline-flex items-center
@@ -266,8 +291,10 @@ function operationTooltip(operation) {
                             title={operationTooltip(operation)}
                             on:mousedown={(e) => mousedown(e, operation)}
                             on:click={(e) => {on_click(e, operation, isDisabled)}}>
-                        {#if operation.icon}
-                            <div class="w-4 h-4 mr-1"><svelte:component this={operation.icon}/></div>
+                        {#if operation.mricon}
+                            <div class="py-1 mr-1 w-4"><Ricon icon = {operation.mricon} s/></div>
+                        {:else if operation.icon}
+                            <div class="w-4 h-4 mr-1 text-orange-500"><svelte:component this={operation.icon}/></div>
                         {/if}
                         {#if operation.caption}
                             <span class="ml-1">{operation.caption}</span>
@@ -287,12 +314,12 @@ function operationTooltip(operation) {
             {@const isActive=isOperationActivated(operation)}
             {@const isDisabled=isOperationDisabled(operation)}
 
-            {@const enabledLightColors ='text-stone-600 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200'}
-            {@const disabledLightColors ='text-stone-400 border-stone-200'}
+            {@const enabledLightColors ='text-stone-800 hover:text-stone-800 hover:bg-stone-200 active:bg-stone-200 border-stone-200'}
+            {@const disabledLightColors ='text-stone-800 border-stone-200'}
 
             {@const enabledDarkColors ='dark:text-stone-300 dark:hover:text-white dark:hover:bg-stone-800 dark:active:bg-stone-600 dark:border-stone-600'}
             {@const disabledDarkColors ='dark:text-stone-500 dark:border-stone-600'}
-            
+
             {@const disabledColors =`${disabledLightColors} ${disabledDarkColors}`}
             {@const enabledColors =`${enabledLightColors} ${enabledDarkColors}`}
             {@const colors = isDisabled ? disabledColors : enabledColors}
@@ -309,9 +336,11 @@ function operationTooltip(operation) {
                         title={operationTooltip(operation)}
                         on:mousedown={(e) => mousedown(e, operation)}
                         on:click={(e) => {on_click(e, operation, isDisabled)}}>
-                    {#if operation.icon}
-                        <div class="w-4 h-4 mr-1"><svelte:component this={operation.icon}/></div>
-                    {/if}
+                        {#if operation.mricon}
+                            <div class="py-1 mr-1 w-4"><Ricon icon = {operation.mricon} s/></div>
+                        {:else if operation.icon}
+                            <div class="w-4 h-4 mr-1 text-orange-500"><svelte:component this={operation.icon}/></div>
+                        {/if}
                     {#if operation.caption}
                         <span class="ml-1">{operation.caption}</span>
                     {/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@humandialog/forms.svelte",
-  "version": "1.7.27",
+  "version": "1.8.0",
   "description": "Basic Svelte UI components for Object Reef applications",
   "devDependencies": {
     "@playwright/test": "^1.28.1",
@@ -79,6 +79,7 @@
     "./components/combo/combo.source.svelte": "./components/combo/combo.source.svelte",
     "./components/combo/combo.svelte": "./components/combo/combo.svelte",
     "./components/combo/combo": "./components/combo/combo.js",
+    "./components/contextmenu-25.svelte": "./components/contextmenu-25.svelte",
     "./components/contextmenu.svelte": "./components/contextmenu.svelte",
     "./components/date.svelte": "./components/date.svelte",
     "./components/date_utils": "./components/date_utils.js",
@@ -98,8 +99,10 @@
     "./components/document/internal/suggestion": "./components/document/internal/suggestion.js",
     "./components/document/rich.edit.svelte": "./components/document/rich.edit.svelte",
     "./components/edit.field.svelte": "./components/edit.field.svelte",
+    "./components/Fab.25.svelte": "./components/Fab.25.svelte",
     "./components/Fab.svelte": "./components/Fab.svelte",
     "./components/file.loader.svelte": "./components/file.loader.svelte",
+    "./components/Floating_container.25.svelte": "./components/Floating_container.25.svelte",
     "./components/Floating_container.svelte": "./components/Floating_container.svelte",
     "./components/Grid.menu.svelte": "./components/Grid.menu.svelte",
     "./components/icon.ex.svelte": "./components/icon.ex.svelte",
@@ -122,10 +125,13 @@
     "./components/kanban/kanban.tags.svelte": "./components/kanban/kanban.tags.svelte",
     "./components/kanban/kanban.title.svelte": "./components/kanban/kanban.title.svelte",
     "./components/kanban/Kanban": "./components/kanban/Kanban.js",
+    "./components/kanban copy.zip": "./components/kanban copy.zip",
+    "./components/list/internal/list.element copy.svelte": "./components/list/internal/list.element copy.svelte",
     "./components/list/internal/list.element.props.svelte": "./components/list/internal/list.element.props.svelte",
     "./components/list/internal/list.element.summary.svelte": "./components/list/internal/list.element.summary.svelte",
     "./components/list/internal/list.element.svelte": "./components/list/internal/list.element.svelte",
     "./components/list/internal/list.inserter.svelte": "./components/list/internal/list.inserter.svelte",
+    "./components/list/internal/note.txt": "./components/list/internal/note.txt",
     "./components/list/list.combo.svelte": "./components/list/list.combo.svelte",
     "./components/list/list.date.svelte": "./components/list/list.date.svelte",
     "./components/list/list.inserter.svelte": "./components/list/list.inserter.svelte",
@@ -139,6 +145,11 @@
     "./components/paginator.svelte": "./components/paginator.svelte",
     "./components/prose.editable.p.svelte": "./components/prose.editable.p.svelte",
     "./components/prose.editable.span.svelte": "./components/prose.editable.span.svelte",
+    "./components/r.edit.svelte": "./components/r.edit.svelte",
+    "./components/r.editable.svelte": "./components/r.editable.svelte",
+    "./components/r.figcaption.svelte": "./components/r.figcaption.svelte",
+    "./components/r.figure.svelte": "./components/r.figure.svelte",
+    "./components/r.icon.svelte": "./components/r.icon.svelte",
     "./components/radio.svelte": "./components/radio.svelte",
     "./components/react-aria/chain": "./components/react-aria/chain.js",
     "./components/react-aria/getScrollParent": "./components/react-aria/getScrollParent.js",
@@ -146,6 +157,78 @@
     "./components/react-aria/keybaord": "./components/react-aria/keybaord.js",
     "./components/react-aria/platform": "./components/react-aria/platform.js",
     "./components/react-aria/preventScroll": "./components/react-aria/preventScroll.js",
+    "./components/ricons/arrow-up.svelte": "./components/ricons/arrow-up.svelte",
+    "./components/ricons/barcode.svelte": "./components/ricons/barcode.svelte",
+    "./components/ricons/bold.svelte": "./components/ricons/bold.svelte",
+    "./components/ricons/calendar.svelte": "./components/ricons/calendar.svelte",
+    "./components/ricons/calendars.svelte": "./components/ricons/calendars.svelte",
+    "./components/ricons/cat.svelte": "./components/ricons/cat.svelte",
+    "./components/ricons/check-check.svelte": "./components/ricons/check-check.svelte",
+    "./components/ricons/check.svelte": "./components/ricons/check.svelte",
+    "./components/ricons/chess-rook.svelte": "./components/ricons/chess-rook.svelte",
+    "./components/ricons/chevron-down.svelte": "./components/ricons/chevron-down.svelte",
+    "./components/ricons/chevron-left.svelte": "./components/ricons/chevron-left.svelte",
+    "./components/ricons/chevron-right.svelte": "./components/ricons/chevron-right.svelte",
+    "./components/ricons/chevron-up.svelte": "./components/ricons/chevron-up.svelte",
+    "./components/ricons/chevrons-down.svelte": "./components/ricons/chevrons-down.svelte",
+    "./components/ricons/chevrons-left-right.svelte": "./components/ricons/chevrons-left-right.svelte",
+    "./components/ricons/chevrons-left.svelte": "./components/ricons/chevrons-left.svelte",
+    "./components/ricons/chevrons-right.svelte": "./components/ricons/chevrons-right.svelte",
+    "./components/ricons/chevrons-up-down.svelte": "./components/ricons/chevrons-up-down.svelte",
+    "./components/ricons/chevrons-up.svelte": "./components/ricons/chevrons-up.svelte",
+    "./components/ricons/circle-check.svelte": "./components/ricons/circle-check.svelte",
+    "./components/ricons/circle-dashed.svelte": "./components/ricons/circle-dashed.svelte",
+    "./components/ricons/circle-dot-dashed.svelte": "./components/ricons/circle-dot-dashed.svelte",
+    "./components/ricons/circle.svelte": "./components/ricons/circle.svelte",
+    "./components/ricons/clipboard-list.svelte": "./components/ricons/clipboard-list.svelte",
+    "./components/ricons/clipboard-minus.svelte": "./components/ricons/clipboard-minus.svelte",
+    "./components/ricons/clipboard-pen-line.svelte": "./components/ricons/clipboard-pen-line.svelte",
+    "./components/ricons/code-xml.svelte": "./components/ricons/code-xml.svelte",
+    "./components/ricons/download.svelte": "./components/ricons/download.svelte",
+    "./components/ricons/ellipsis-vertical.svelte": "./components/ricons/ellipsis-vertical.svelte",
+    "./components/ricons/file-archive.svelte": "./components/ricons/file-archive.svelte",
+    "./components/ricons/file-text.svelte": "./components/ricons/file-text.svelte",
+    "./components/ricons/folder.svelte": "./components/ricons/folder.svelte",
+    "./components/ricons/heading-1.svelte": "./components/ricons/heading-1.svelte",
+    "./components/ricons/heading-2.svelte": "./components/ricons/heading-2.svelte",
+    "./components/ricons/heading-3.svelte": "./components/ricons/heading-3.svelte",
+    "./components/ricons/heading-4.svelte": "./components/ricons/heading-4.svelte",
+    "./components/ricons/heading-5.svelte": "./components/ricons/heading-5.svelte",
+    "./components/ricons/image.svelte": "./components/ricons/image.svelte",
+    "./components/ricons/italic.svelte": "./components/ricons/italic.svelte",
+    "./components/ricons/languages.svelte": "./components/ricons/languages.svelte",
+    "./components/ricons/list-checks.svelte": "./components/ricons/list-checks.svelte",
+    "./components/ricons/list-minus.svelte": "./components/ricons/list-minus.svelte",
+    "./components/ricons/list-ordered.svelte": "./components/ricons/list-ordered.svelte",
+    "./components/ricons/list-plus.svelte": "./components/ricons/list-plus.svelte",
+    "./components/ricons/list.svelte": "./components/ricons/list.svelte",
+    "./components/ricons/loader-circle.svelte": "./components/ricons/loader-circle.svelte",
+    "./components/ricons/log-in.svelte": "./components/ricons/log-in.svelte",
+    "./components/ricons/log-out.svelte": "./components/ricons/log-out.svelte",
+    "./components/ricons/message-square.svelte": "./components/ricons/message-square.svelte",
+    "./components/ricons/messages-square.svelte": "./components/ricons/messages-square.svelte",
+    "./components/ricons/minus.svelte": "./components/ricons/minus.svelte",
+    "./components/ricons/notebook-tabs.svelte": "./components/ricons/notebook-tabs.svelte",
+    "./components/ricons/notebook.svelte": "./components/ricons/notebook.svelte",
+    "./components/ricons/package.svelte": "./components/ricons/package.svelte",
+    "./components/ricons/paperclip.svelte": "./components/ricons/paperclip.svelte",
+    "./components/ricons/pencil.svelte": "./components/ricons/pencil.svelte",
+    "./components/ricons/pilcrow.svelte": "./components/ricons/pilcrow.svelte",
+    "./components/ricons/save.svelte": "./components/ricons/save.svelte",
+    "./components/ricons/square-check-big.svelte": "./components/ricons/square-check-big.svelte",
+    "./components/ricons/square-pen.svelte": "./components/ricons/square-pen.svelte",
+    "./components/ricons/square.svelte": "./components/ricons/square.svelte",
+    "./components/ricons/strikethrough.svelte": "./components/ricons/strikethrough.svelte",
+    "./components/ricons/sun-moon.svelte": "./components/ricons/sun-moon.svelte",
+    "./components/ricons/table.svelte": "./components/ricons/table.svelte",
+    "./components/ricons/tag.svelte": "./components/ricons/tag.svelte",
+    "./components/ricons/text-quote.svelte": "./components/ricons/text-quote.svelte",
+    "./components/ricons/turtle.svelte": "./components/ricons/turtle.svelte",
+    "./components/ricons/underline.svelte": "./components/ricons/underline.svelte",
+    "./components/ricons/upload.svelte": "./components/ricons/upload.svelte",
+    "./components/ricons/user.svelte": "./components/ricons/user.svelte",
+    "./components/ricons/users.svelte": "./components/ricons/users.svelte",
+    "./components/ricons/x.svelte": "./components/ricons/x.svelte",
     "./components/sidebar/sidebar.brand.svelte": "./components/sidebar/sidebar.brand.svelte",
     "./components/sidebar/sidebar.group.svelte": "./components/sidebar/sidebar.group.svelte",
     "./components/sidebar/sidebar.item.svelte": "./components/sidebar/sidebar.item.svelte",
@@ -178,8 +261,13 @@
     "./operations.svelte": "./operations.svelte",
     "./page.row.svelte": "./page.row.svelte",
     "./page.svelte": "./page.svelte",
+    "./paper.header.svelte": "./paper.header.svelte",
+    "./paper.nav.svelte": "./paper.nav.svelte",
     "./paper.svelte": "./paper.svelte",
+    "./paper.table.svelte": "./paper.table.svelte",
+    "./paper.top.margin.svelte": "./paper.top.margin.svelte",
     "./stores": "./stores.js",
+    "./tenant.create.svelte": "./tenant.create.svelte",
     "./tenant.members.invite.svelte": "./tenant.members.invite.svelte",
     "./tenant.members.svelte": "./tenant.members.svelte",
     "./tile.svelte": "./tile.svelte",

package/page.row.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  PageEvents */
 /** @typedef {typeof __propDef.slots}  PageSlots */
 export default class Page extends SvelteComponentTyped<{
-    c?: string | undefined;
     cl?: string | undefined;
+    c?: string | undefined;
     w?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -17,8 +17,8 @@ export type PageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        c?: string | undefined;
         cl?: string | undefined;
+        c?: string | undefined;
         w?: string | undefined;
     };
     events: {

package/page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { setContext, getContext, onMount } from 'svelte';
+	import { setContext, getContext, onMount, onDestroy } from 'svelte';
 	import {
 		contextItemsStore,
 		data_tick_store,
@@ -10,6 +10,9 @@
 		page_title
 	} from './stores.js';
 
+	import {pushChanges} from './updates.js'
+
+
 	//import {chnages} from './utils.js'
 
 	export let context = 'data';
@@ -18,7 +21,7 @@
 	export let focused_only = false;
 	export let inContext = '';
 	export let cl =
-		'w-full flex flex-col bg-white dark:bg-stone-900 overflow-x-hidden py-1 px-1 border-0'; // border-green-500
+		'w-full overflow-x-hidden py-0 sm:px-3 border-0'; // border-green-500
 	export let c = '';
 
 	export let toolbarOperations = undefined;
@@ -29,11 +32,11 @@
 	switch (c) {
 		case 'main':
 			cl =
-				'w-full h-full flex flex-col dark:bg-stone-800  overflow-y-hidden  overflow-x-hidden py-1 px-1 border-0';
+				'w-full h-full flex flex-col dark:bg-stone-800  overflow-y-hidden  overflow-x-hidden py-0 px-0 border-0';
 			break;
 		case 'main-d':
 			cl =
-				'bg-stone-800 w-full h-full flex flex-col dark:bg-stone-800  overflow-y-hidden  overflow-x-hidden py-1 px-1 border-0';
+				'bg-stone-800 w-full h-full flex flex-col dark:bg-stone-800  overflow-y-hidden  overflow-x-hidden py-0 px-0 border-0';
 			break;
 		default:
 		//NOP
@@ -42,9 +45,15 @@
 	if($$props.class)
 		cl += ' ' + $$props.class
 
+	onDestroy(() => {
+		console.log('#jcache the component is being destroyed');
+		pushChanges();
+	});
+
+
 	onMount(() => {
 		if (toolbarOperations != undefined)
-		{ 
+		{
 			if(Array.isArray(toolbarOperations))
 				$pageToolbarOperations = [...toolbarOperations];
 			else
@@ -63,6 +72,7 @@
 		};
 	});
 
+
 	setContext('rIs-page-component', true);
 	setContext('ctx', context);
 
@@ -113,7 +123,7 @@
 			heightClass = '';
 	}
 
-	function clear_selection(e) 
+	function clear_selection(e)
 	{
 		if (!clearsContext) return;
 
@@ -130,7 +140,7 @@
 	}
 </script>
 
-<div class="bg-stone-100 dark:bg-stone-800 {visibilty} {cl} {heightClass}" on:click={clear_selection}>
+<div class="page  bgx-blue-500 {visibilty} {cl} {heightClass}" on:click={clear_selection}>
 	{#if visibilty == ''}
 		<slot />
 	{/if}

package/page.svelte.d.ts

@@ -3,16 +3,16 @@
 /** @typedef {typeof __propDef.slots}  PageSlots */
 export default class Page extends SvelteComponentTyped<{
     [x: string]: any;
-    title?: string | undefined;
-    self?: null | undefined;
     context?: string | undefined;
+    self?: null | undefined;
     typename?: string | undefined;
-    c?: string | undefined;
-    clearsContext?: string | undefined;
-    cl?: string | undefined;
     focused_only?: boolean | undefined;
     inContext?: string | undefined;
+    cl?: string | undefined;
+    c?: string | undefined;
     toolbarOperations?: any;
+    clearsContext?: string | undefined;
+    title?: string | undefined;
     paper?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -27,16 +27,16 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        title?: string | undefined;
-        self?: null | undefined;
         context?: string | undefined;
+        self?: null | undefined;
         typename?: string | undefined;
-        c?: string | undefined;
-        clearsContext?: string | undefined;
-        cl?: string | undefined;
         focused_only?: boolean | undefined;
         inContext?: string | undefined;
+        cl?: string | undefined;
+        c?: string | undefined;
         toolbarOperations?: any;
+        clearsContext?: string | undefined;
+        title?: string | undefined;
         paper?: boolean | undefined;
     };
     events: {

package/paper.header.svelte

@@ -0,0 +1,4 @@
+
+<section class="paper-header w-full  mt-0 mb-4 sm:mt-8 sm:mb-8 ">
+    <slot/>
+</section>

package/paper.header.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  PaperProps */
+/** @typedef {typeof __propDef.events}  PaperEvents */
+/** @typedef {typeof __propDef.slots}  PaperSlots */
+export default class Paper extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PaperProps = typeof __propDef.props;
+export type PaperEvents = typeof __propDef.events;
+export type PaperSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/paper.nav.svelte

@@ -0,0 +1,8 @@
+<script>
+    let additionalClass = $$props.class ?? ''
+</script>
+
+<section class="">
+
+    <slot/>
+</section>

package/paper.nav.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  PaperProps */
+/** @typedef {typeof __propDef.events}  PaperEvents */
+/** @typedef {typeof __propDef.slots}  PaperSlots */
+export default class Paper extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PaperProps = typeof __propDef.props;
+export type PaperEvents = typeof __propDef.events;
+export type PaperSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/paper.svelte

@@ -1,11 +1,27 @@
 <script>
+    export let margins = "md"
     let additionalClass = $$props.class ?? ''
 </script>
 
-<section class="w-full flex flex-col items-center
-                    sm:bg-white sm:dark:bg-stone-800/40 sm:shadow-slate-700/10 sm:dark:shadow-black/10 
-                    sm:mt-6 sm:px-6 sm:py-12 sm:shadow-xl md:mx-auto sm:max-w-3xl sm:min-h-[32rem] sm:rounded
-                    sm:ring-1 sm:ring-stone-900/5 sm:dark:ring-stone-950/20
-                    {additionalClass}">
+<div class="    paper w-full
+                prose prose-base prose-zinc dark:prose-invert prose-a:no-underline
+
+                max-w-3xl
+                sm:min-h-[32rem]
+
+                mx-0 mb-64 px-3 pt-2 pb-10
+                sm:mt-4 sm:px-10
+
+                md:px-16 md:mx-auto
+
+                sm:rounded
+
+                bg-white dark:bg-stone-900
+
+                sm:shadow-xl sm:shadow-slate-700/10
+                sm:dark:shadow-black/80
+
+                sm:outline sm:outline-1 sm:outline-stone-500
+                ">
     <slot/>
-</section>
+</div>

package/paper.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  PaperSlots */
 export default class Paper extends SvelteComponentTyped<{
     [x: string]: any;
+    margins?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -16,6 +17,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
+        margins?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/paper.table.svelte

@@ -0,0 +1,27 @@
+<script>
+    let additionalClass = $$props.class ?? ''
+</script>
+
+<section class="    paper
+                    prose prose-base prose-zinc dark:prose-invert prose-a:no-underline
+                    max-w-none sm:min-h-[32rem]
+
+                    m-0 mb-64 px-2 pt-2 pb-0
+
+                    sm:mt-4 sm:px-4
+                    md:px-10 md:mx-2
+
+                    sm:rounded
+
+                sm:rounded
+
+                bg-white dark:bg-stone-900
+
+                sm:shadow-xl sm:shadow-slate-700/10
+                sm:dark:shadow-black/80
+
+                sm:outline sm:outline-1 sm:outline-stone-500">
+
+
+    <slot/>
+</section>

package/paper.table.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  PaperProps */
+/** @typedef {typeof __propDef.events}  PaperEvents */
+/** @typedef {typeof __propDef.slots}  PaperSlots */
+export default class Paper extends SvelteComponentTyped<{
+    [x: string]: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type PaperProps = typeof __propDef.props;
+export type PaperEvents = typeof __propDef.events;
+export type PaperSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/paper.top.margin.svelte

@@ -0,0 +1,5 @@
+
+<div class="paper-top-top-margin w-full  mt-10">
+
+    <slot/>
+</div>