@svadmin/lite 0.26.0 → 0.27.0

package/dist/components/LiteUnsavedChangesGuard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    hasChanges?: boolean;
+    message?: string;
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    hasChanges = false,
+    message = 'You have unsaved changes that may be lost.',
+    class: className = '',
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-unsaved-guard {className}"
+  data-svadmin-component="LiteUnsavedChangesGuard"
+  data-dirty={hasChanges ? 'true' : 'false'}
+>
+  {#if hasChanges}
+    <aside class="lite-unsaved-banner" role="status">
+      <span class="lite-unsaved-icon">⚠️</span>
+      <span class="lite-unsaved-text">{message}</span>
+    </aside>
+  {/if}
+
+  <div class="lite-unsaved-content">
+    {#if children}{@render children()}{/if}
+  </div>
+</div>
+
+<style>
+  .lite-unsaved-guard { display: block; }
+  .lite-unsaved-banner {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    background: #fff7e8;
+    border: 1px solid #ffd591;
+    border-radius: 6px;
+    margin-bottom: 12px;
+    font-size: 13px;
+    color: #d46b08;
+  }
+  .lite-unsaved-banner > * + * { margin-left: 8px; }
+  .lite-unsaved-icon { font-size: 14px; }
+  .lite-unsaved-text { font-weight: 500; }
+  .lite-unsaved-content { position: relative; }
+</style>

package/dist/components/LiteUnsavedChangesGuard.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    hasChanges?: boolean;
+    message?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteUnsavedChangesGuard: import("svelte").Component<Props, {}, "">;
+type LiteUnsavedChangesGuard = ReturnType<typeof LiteUnsavedChangesGuard>;
+export default LiteUnsavedChangesGuard;

package/dist/components/LiteWatermarkContainer.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    content?: string | string[];
+    class?: string;
+    children?: Snippet;
+  }
+
+  let {
+    content = 'SVAdmin Lite',
+    class: className = '',
+    children,
+  }: Props = $props();
+
+  const watermarkText = $derived(
+    Array.isArray(content) ? content.join(' ') : String(content)
+  );
+
+  const encodedSvg = $derived.by(() => {
+    const escaped = watermarkText
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;');
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120" viewBox="0 0 220 120"><text x="20" y="60" fill="rgba(0,0,0,0.07)" font-family="sans-serif" font-size="12" transform="rotate(-18 110 60)">${escaped}</text></svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+  });
+</script>
+
+<div
+  class="lite-watermark-container {className}"
+  data-svadmin-component="LiteWatermarkContainer"
+  style="--lite-watermark-pattern: url('{encodedSvg}');"
+>
+  <div class="lite-watermark-overlay" aria-hidden="true" style="background-image: url('{encodedSvg}');"></div>
+  <div class="lite-watermark-content">
+    {#if children}{@render children()}{/if}
+  </div>
+</div>
+
+<style>
+  .lite-watermark-container {
+    position: relative;
+    overflow: hidden;
+  }
+  .lite-watermark-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 9;
+    background-repeat: repeat;
+  }
+  .lite-watermark-content {
+    position: relative;
+    z-index: 1;
+  }
+</style>

package/dist/components/LiteWatermarkContainer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    content?: string | string[];
+    class?: string;
+    children?: Snippet;
+}
+declare const LiteWatermarkContainer: import("svelte").Component<Props, {}, "">;
+type LiteWatermarkContainer = ReturnType<typeof LiteWatermarkContainer>;
+export default LiteWatermarkContainer;

package/dist/components/LiteWorkflowStepper.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  export interface LiteWorkflowNode {
+    id: string;
+    label: string;
+    status: 'completed' | 'running' | 'failed' | 'pending';
+    durationText?: string;
+  }
+
+  interface Props {
+    nodes: LiteWorkflowNode[];
+    title?: string;
+    class?: string;
+  }
+
+  let {
+    nodes = [],
+    title = 'Workflow Execution',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<div
+  class="lite-workflow-stepper {className}"
+  data-svadmin-component="LiteWorkflowStepper"
+>
+  <h4 class="lite-workflow-title">{title}</h4>
+  <ol class="lite-workflow-list">
+    {#each nodes as node (node.id)}
+      <li class="lite-workflow-node lite-status-{node.status}">
+        <span class="lite-node-icon">
+          {#if node.status === 'completed'}✓{:else if node.status === 'running'}⏳{:else if node.status === 'failed'}✕{:else}○{/if}
+        </span>
+        <span class="lite-node-label">{node.label}</span>
+        {#if node.durationText}
+          <span class="lite-node-duration">{node.durationText}</span>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</div>
+
+<style>
+  .lite-workflow-stepper { border: 1px solid #e5e6eb; border-radius: 8px; background: #ffffff; padding: 16px; }
+  .lite-workflow-title { font-size: 14px; font-weight: 600; margin: 0 0 12px 0; color: #1d2129; }
+  .lite-workflow-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+  .lite-workflow-list > * + * { margin-top: 8px; }
+  .lite-workflow-node { display: flex; align-items: center; padding: 8px 12px; border-radius: 6px; border: 1px solid #f2f3f5; font-size: 12px; }
+  .lite-workflow-node > * + * { margin-left: 10px; }
+  .lite-node-icon { font-weight: 700; width: 18px; text-align: center; }
+  .lite-status-completed { background: #e8ffea; color: #00b42a; border-color: #aff0b5; }
+  .lite-status-running { background: #e8f3ff; color: #165dff; border-color: #b3d6ff; }
+  .lite-status-failed { background: #ffece8; color: #f53f3f; border-color: #fbbbb0; }
+  .lite-status-pending { background: #f7f8fa; color: #86909c; }
+  .lite-node-label { font-weight: 500; flex: 1; }
+  .lite-node-duration { font-family: monospace; font-size: 11px; color: #86909c; }
+</style>

package/dist/components/LiteWorkflowStepper.svelte.d.ts

@@ -0,0 +1,14 @@
+export interface LiteWorkflowNode {
+    id: string;
+    label: string;
+    status: 'completed' | 'running' | 'failed' | 'pending';
+    durationText?: string;
+}
+interface Props {
+    nodes: LiteWorkflowNode[];
+    title?: string;
+    class?: string;
+}
+declare const LiteWorkflowStepper: import("svelte").Component<Props, {}, "">;
+type LiteWorkflowStepper = ReturnType<typeof LiteWorkflowStepper>;
+export default LiteWorkflowStepper;

package/dist/index.d.ts

@@ -125,6 +125,23 @@ export type { LiteVirtualTreeNode } from './components/LiteVirtualTreeSelect.sve
 export type { LiteConflictField } from './components/LiteConcurrentConflictModal.svelte';
 export type { LiteTaskStatus, LiteBackgroundTask } from './components/LiteTaskCenter.svelte';
 export type { LiteDeleteImpact } from './components/LiteSafeDeleteConfirm.svelte';
+export { default as LiteKpiCard } from './components/LiteKpiCard.svelte';
+export { default as LiteJsonViewer } from './components/LiteJsonViewer.svelte';
+export { default as LiteResultPage } from './components/LiteResultPage.svelte';
+export { default as LiteWatermarkContainer } from './components/LiteWatermarkContainer.svelte';
+export { default as LiteContextMenu } from './components/LiteContextMenu.svelte';
+export { default as LiteUnsavedChangesGuard } from './components/LiteUnsavedChangesGuard.svelte';
+export { default as LiteAnnouncementBanner } from './components/LiteAnnouncementBanner.svelte';
+export { default as LiteTextDiffViewer } from './components/LiteTextDiffViewer.svelte';
+export { default as LiteAsyncExportModal } from './components/LiteAsyncExportModal.svelte';
+export type { LiteContextMenuItem } from './components/LiteContextMenu.svelte';
+export { default as LiteStepWizard } from './components/LiteStepWizard.svelte';
+export { default as LiteWorkflowStepper } from './components/LiteWorkflowStepper.svelte';
+export { default as LiteDualApprovalGate } from './components/LiteDualApprovalGate.svelte';
+export { default as LiteKeyboardShortcutsModal } from './components/LiteKeyboardShortcutsModal.svelte';
+export type { LiteStepItem } from './components/LiteStepWizard.svelte';
+export type { LiteWorkflowNode } from './components/LiteWorkflowStepper.svelte';
+export type { LiteShortcutItem } from './components/LiteKeyboardShortcutsModal.svelte';
 export { configureMarkdownRenderer, escapeHtml, renderInlineMarkdown, renderMarkdown, renderRichContent, sanitizeRichTextHtml, } from './rich-content';
 export type { MarkdownRenderOptions } from './rich-content';
 export * from './components/compatibility/index';

package/dist/index.js

@@ -125,6 +125,20 @@ export { default as LiteConcurrentConflictModal } from './components/LiteConcurr
 export { default as LiteTaskCenter } from './components/LiteTaskCenter.svelte';
 export { default as LiteMicroAppFrame } from './components/LiteMicroAppFrame.svelte';
 export { default as LiteSafeDeleteConfirm } from './components/LiteSafeDeleteConfirm.svelte';
+// Enterprise suites SSR parity fallbacks
+export { default as LiteKpiCard } from './components/LiteKpiCard.svelte';
+export { default as LiteJsonViewer } from './components/LiteJsonViewer.svelte';
+export { default as LiteResultPage } from './components/LiteResultPage.svelte';
+export { default as LiteWatermarkContainer } from './components/LiteWatermarkContainer.svelte';
+export { default as LiteContextMenu } from './components/LiteContextMenu.svelte';
+export { default as LiteUnsavedChangesGuard } from './components/LiteUnsavedChangesGuard.svelte';
+export { default as LiteAnnouncementBanner } from './components/LiteAnnouncementBanner.svelte';
+export { default as LiteTextDiffViewer } from './components/LiteTextDiffViewer.svelte';
+export { default as LiteAsyncExportModal } from './components/LiteAsyncExportModal.svelte';
+export { default as LiteStepWizard } from './components/LiteStepWizard.svelte';
+export { default as LiteWorkflowStepper } from './components/LiteWorkflowStepper.svelte';
+export { default as LiteDualApprovalGate } from './components/LiteDualApprovalGate.svelte';
+export { default as LiteKeyboardShortcutsModal } from './components/LiteKeyboardShortcutsModal.svelte';
 // Rich content rendering (SSR-safe Markdown + rich HTML allowlist)
 export { configureMarkdownRenderer, escapeHtml, renderInlineMarkdown, renderMarkdown, renderRichContent, sanitizeRichTextHtml, } from './rich-content';
 // Compatibility fallbacks for browser-only and third-party UI capabilities.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.26.0",
+  "version": "0.27.0",
   "description": "SSR-first lightweight admin UI for @svadmin with optional progressive enhancement",
   "type": "module",
   "sideEffects": [