@svadmin/lite 0.3.7 → 0.3.10

package/dist/components/pages/LiteRegisterPage.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+
+  interface Props {
+    title?: string;
+    description?: string;
+    action?: string;
+    loginUrl?: string;
+    errors?: string[];
+  }
+
+  let {
+    title = 'Register',
+    description = 'Create a new account',
+    action = '?/register',
+    loginUrl = '/lite/login',
+    errors = [],
+  }: Props = $props();
+</script>
+
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+  <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
+    <div style="text-align: center; margin-bottom: 24px;">
+      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+    </div>
+
+    <!-- We use native form action -->
+    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="lite-form-group">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" class="lite-input" required />
+      </div>
+
+      <div class="lite-form-group">
+        <label for="password">Password</label>
+        <input type="password" id="password" name="password" class="lite-input" required minlength="6" />
+      </div>
+
+      <div class="lite-form-group">
+        <label for="confirmPassword">Confirm Password</label>
+        <input type="password" id="confirmPassword" name="confirmPassword" class="lite-input" required minlength="6" />
+      </div>
+
+      {#if errors.length > 0}
+        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+          <ul style="margin: 0; padding-left: 20px;">
+            {#each errors as err, _i (_i)}
+              <li>{err}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      <button type="submit" class="lite-btn lite-btn-primary" style="width: 100%; justify-content: center; padding: 10px;">
+        Register
+      </button>
+
+      <div style="text-align: center; font-size: 13px; color: #64748b; margin-top: 8px;">
+        Already have an account? <a href={loginUrl} style="color: #2563eb; text-decoration: none;">Login</a>
+      </div>
+    </form>
+  </div>
+</div>

package/dist/components/pages/LiteRegisterPage.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    title?: string;
+    description?: string;
+    action?: string;
+    loginUrl?: string;
+    errors?: string[];
+}
+declare const LiteRegisterPage: import("svelte").Component<Props, {}, "">;
+type LiteRegisterPage = ReturnType<typeof LiteRegisterPage>;
+export default LiteRegisterPage;

package/dist/components/pages/LiteShowPage.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { ResourceDefinition } from '@svadmin/core';
+  import { t } from '@svadmin/core/i18n';
+  import LiteShowField from '../LiteShowField.svelte';
+  import LiteListButton from '../buttons/LiteListButton.svelte';
+  import LiteEditButton from '../buttons/LiteEditButton.svelte';
+  import LiteDeleteButton from '../buttons/LiteDeleteButton.svelte';
+
+  interface Props {
+    resource: ResourceDefinition;
+    record: Record<string, unknown>;
+    basePath?: string;
+    canEdit?: boolean;
+    canDelete?: boolean;
+  }
+
+  let {
+    resource,
+    record,
+    basePath = '/lite',
+    canEdit = true,
+    canDelete = true,
+  }: Props = $props();
+
+  let pk = $derived(resource.primaryKey ?? 'id');
+  let idStr = $derived(String(record[pk]));
+  
+  const showFields = $derived(
+    resource.fields.filter(f => f.showInShow !== false)
+  );
+</script>
+
+<div class="lite-page">
+  <div class="lite-page-header">
+    <h1 class="lite-page-title">{t('common.show') || 'Show'} {resource.label || resource.name} #{idStr}</h1>
+    <div class="lite-page-actions">
+      {#if canEdit}
+        <LiteEditButton resource={resource.name} recordItemId={idStr} {basePath} />
+      {/if}
+      <LiteListButton resource={resource.name} {basePath} />
+      {#if canDelete}
+        <LiteDeleteButton resource={resource.name} recordItemId={idStr} redirectUrl={`${basePath}/${resource.name}`} {basePath} />
+      {/if}
+    </div>
+  </div>
+
+  <div class="lite-card" style="padding: 24px;">
+    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;">
+      {#each showFields as field, _i (_i)}
+        <div>
+          <div style="display: block; font-size: 13px; font-weight: 500; color: #64748b; margin-bottom: 8px;">
+            {field.label}
+          </div>
+          <div style="color: #0f172a; font-size: 14px;">
+            <LiteShowField {field} value={record[field.key]} />
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>

package/dist/components/pages/LiteShowPage.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ResourceDefinition } from '@svadmin/core';
+interface Props {
+    resource: ResourceDefinition;
+    record: Record<string, unknown>;
+    basePath?: string;
+    canEdit?: boolean;
+    canDelete?: boolean;
+}
+declare const LiteShowPage: import("svelte").Component<Props, {}, "">;
+type LiteShowPage = ReturnType<typeof LiteShowPage>;
+export default LiteShowPage;

package/dist/components/pages/LiteUpdatePasswordPage.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  interface Props {
+    title?: string;
+    description?: string;
+    action?: string;
+    errors?: string[];
+  }
+
+  let {
+    title = 'Update Password',
+    description = 'Enter your new password below.',
+    action = '?/update_password',
+    errors = [],
+  }: Props = $props();
+</script>
+
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+  <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
+    <div style="text-align: center; margin-bottom: 24px;">
+      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+    </div>
+
+    <!-- Native form action -->
+    <form method="POST" {action} style="display: flex; flex-direction: column; gap: 16px;">
+      <div class="lite-form-group">
+        <label for="password">New Password</label>
+        <input type="password" id="password" name="password" class="lite-input" required minlength="6" />
+      </div>
+
+      <div class="lite-form-group">
+        <label for="confirmPassword">Confirm New Password</label>
+        <input type="password" id="confirmPassword" name="confirmPassword" class="lite-input" required minlength="6" />
+      </div>
+
+      {#if errors.length > 0}
+        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+          <ul style="margin: 0; padding-left: 20px;">
+            {#each errors as err, _i (_i)}
+              <li>{err}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      <button type="submit" class="lite-btn lite-btn-primary" style="width: 100%; justify-content: center; padding: 10px;">
+        Update Password
+      </button>
+    </form>
+  </div>
+</div>

package/dist/components/pages/LiteUpdatePasswordPage.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    title?: string;
+    description?: string;
+    action?: string;
+    errors?: string[];
+}
+declare const LiteUpdatePasswordPage: import("svelte").Component<Props, {}, "">;
+type LiteUpdatePasswordPage = ReturnType<typeof LiteUpdatePasswordPage>;
+export default LiteUpdatePasswordPage;

package/dist/components/pages/index.js

@@ -0,0 +1,8 @@
+export { default as LiteListPage } from './LiteListPage.svelte';
+export { default as LiteCreatePage } from './LiteCreatePage.svelte';
+export { default as LiteEditPage } from './LiteEditPage.svelte';
+export { default as LiteShowPage } from './LiteShowPage.svelte';
+export { default as LiteRegisterPage } from './LiteRegisterPage.svelte';
+export { default as LiteForgotPasswordPage } from './LiteForgotPasswordPage.svelte';
+export { default as LiteUpdatePasswordPage } from './LiteUpdatePasswordPage.svelte';
+export { default as LiteProfilePage } from './LiteProfilePage.svelte';

package/dist/components/widgets/LiteAnomalyBadge.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  /**
+   * SSR AnomalyBadge — Rendered as a static colored badge.
+   * The SPA version has tooltips (requires JS). In lite mode,
+   * we use a title attribute for the tooltip fallback.
+   */
+  interface Props {
+    value: number;
+    baseline: number;
+    threshold?: number;
+    formatter?: (val: number) => string;
+    lowerIsBetter?: boolean;
+  }
+
+  let {
+    value,
+    baseline,
+    threshold = 0.2,
+    formatter = (v: number) => v.toString(),
+    lowerIsBetter = false,
+  }: Props = $props();
+
+  const diff = $derived(baseline === 0 ? 0 : (value - baseline) / Math.abs(baseline));
+  const isAnomaly = $derived(Math.abs(diff) >= threshold);
+  const isGood = $derived(!isAnomaly ? null : (lowerIsBetter ? diff < 0 : diff > 0));
+  const percentLabel = $derived(`${Math.abs(diff * 100).toFixed(1)}%`);
+  const arrow = $derived(diff > 0 ? '↑' : '↓');
+</script>
+
+{#if !isAnomaly}
+  <span style="font-size: 14px; color: #64748b;">{formatter(value)}</span>
+{:else}
+  <span
+    title="Baseline: {formatter(baseline)} ({diff > 0 ? '+' : '-'}{percentLabel})"
+    class="lite-badge"
+    style="background: {isGood ? '#ecfdf5' : '#fef2f2'}; color: {isGood ? '#065f46' : '#991b1b'}; border: 1px solid {isGood ? '#a7f3d0' : '#fecaca'};"
+  >
+    {arrow} {formatter(value)}
+  </span>
+{/if}

package/dist/components/widgets/LiteAnomalyBadge.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * SSR AnomalyBadge — Rendered as a static colored badge.
+ * The SPA version has tooltips (requires JS). In lite mode,
+ * we use a title attribute for the tooltip fallback.
+ */
+interface Props {
+    value: number;
+    baseline: number;
+    threshold?: number;
+    formatter?: (val: number) => string;
+    lowerIsBetter?: boolean;
+}
+declare const LiteAnomalyBadge: import("svelte").Component<Props, {}, "">;
+type LiteAnomalyBadge = ReturnType<typeof LiteAnomalyBadge>;
+export default LiteAnomalyBadge;

package/dist/components/widgets/LiteBarChart.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  /**
+   * SSR BarChart — Rendered as a pure CSS horizontal bar chart.
+   * No charting library needed. Data is rendered server-side as
+   * colored div bars with percentage widths.
+   */
+  interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    title?: string;
+  }
+
+  let { data, title }: Props = $props();
+
+  const maxValue = $derived(Math.max(...data.map(d => d.value), 1));
+</script>
+
+<div class="lite-card" style="margin-bottom: 16px;">
+  {#if title}
+    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
+      {title}
+    </div>
+  {/if}
+  <div style="padding: 16px; display: flex; flex-direction: column; gap: 12px;">
+    {#each data as point, _i (_i)}
+      <div>
+        <div style="display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px;">
+          <span style="color: #334155;">{point.label}</span>
+          <span style="color: #64748b; font-weight: 500;">{point.value}</span>
+        </div>
+        <div style="height: 20px; background: #f1f5f9; border-radius: 4px; overflow: hidden;">
+          <div style="height: 100%; width: {(point.value / maxValue) * 100}%; background: {point.color ?? '#6366f1'}; border-radius: 4px; transition: width 0.3s;"></div>
+        </div>
+      </div>
+    {/each}
+    {#if data.length === 0}
+      <p style="color: #94a3b8; font-style: italic; text-align: center;">No data</p>
+    {/if}
+  </div>
+</div>

package/dist/components/widgets/LiteBarChart.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SSR BarChart — Rendered as a pure CSS horizontal bar chart.
+ * No charting library needed. Data is rendered server-side as
+ * colored div bars with percentage widths.
+ */
+interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface Props {
+    data: DataPoint[];
+    title?: string;
+}
+declare const LiteBarChart: import("svelte").Component<Props, {}, "">;
+type LiteBarChart = ReturnType<typeof LiteBarChart>;
+export default LiteBarChart;

package/dist/components/widgets/LiteInsightCard.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { toSafeText } from '../../security.js';
+
+  /**
+   * SSR InsightCard — Degraded to static pre-rendered content.
+   * The SPA version streams AI-generated insights via ChatProvider.
+   * In lite mode, insights must be pre-computed on the server and
+   * passed as a static string. No AI streaming is available.
+   */
+  interface Props {
+    title?: string;
+    content?: string;
+  }
+
+  let { title = 'Insights', content = '' }: Props = $props();
+  const displayContent = $derived(toSafeText(content));
+</script>
+
+<div class="lite-card" style="margin-bottom: 16px;">
+  <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a; display: flex; align-items: center; gap: 8px;">
+    <span style="color: #f59e0b;">✦</span>
+    {title}
+  </div>
+  <div style="padding: 16px; font-size: 14px; color: #334155; line-height: 1.6;">
+    {#if displayContent}
+      <p style="white-space: pre-wrap; margin: 0;">{displayContent}</p>
+    {:else}
+      <p style="color: #94a3b8; font-style: italic;">No insights available. AI analysis requires JavaScript.</p>
+    {/if}
+  </div>
+</div>

package/dist/components/widgets/LiteInsightCard.svelte.d.ts

@@ -0,0 +1,13 @@
+/**
+ * SSR InsightCard — Degraded to static pre-rendered content.
+ * The SPA version streams AI-generated insights via ChatProvider.
+ * In lite mode, insights must be pre-computed on the server and
+ * passed as a static string. No AI streaming is available.
+ */
+interface Props {
+    title?: string;
+    content?: string;
+}
+declare const LiteInsightCard: import("svelte").Component<Props, {}, "">;
+type LiteInsightCard = ReturnType<typeof LiteInsightCard>;
+export default LiteInsightCard;

package/dist/components/widgets/LiteLineChart.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  /**
+   * SSR LineChart — Degraded to an HTML data table.
+   * Drawing SVG/Canvas line charts inline is possible but complex.
+   * For maximum compatibility (IE11), we render data as a simple table.
+   */
+  interface DataPoint {
+    label: string;
+    value: number;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    title?: string;
+    valueLabel?: string;
+  }
+
+  let { data, title, valueLabel = 'Value' }: Props = $props();
+</script>
+
+<div class="lite-card" style="margin-bottom: 16px;">
+  {#if title}
+    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
+      {title}
+    </div>
+  {/if}
+  <table style="width: 100%; border-collapse: collapse;">
+    <thead>
+      <tr>
+        <th style="text-align: left; padding: 10px 16px; font-size: 12px; color: #64748b; border-bottom: 1px solid #e2e8f0;">Label</th>
+        <th style="text-align: right; padding: 10px 16px; font-size: 12px; color: #64748b; border-bottom: 1px solid #e2e8f0;">{valueLabel}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {#each data as point, i (i)}
+        <tr style="background: {i % 2 === 0 ? '#ffffff' : '#f8fafc'};">
+          <td style="padding: 8px 16px; font-size: 13px; color: #334155;">{point.label}</td>
+          <td style="padding: 8px 16px; font-size: 13px; color: #0f172a; text-align: right; font-weight: 500;">{point.value}</td>
+        </tr>
+      {/each}
+      {#if data.length === 0}
+        <tr>
+          <td colspan="2" style="padding: 16px; text-align: center; color: #94a3b8; font-style: italic;">No data</td>
+        </tr>
+      {/if}
+    </tbody>
+  </table>
+</div>

package/dist/components/widgets/LiteLineChart.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SSR LineChart — Degraded to an HTML data table.
+ * Drawing SVG/Canvas line charts inline is possible but complex.
+ * For maximum compatibility (IE11), we render data as a simple table.
+ */
+interface DataPoint {
+    label: string;
+    value: number;
+}
+interface Props {
+    data: DataPoint[];
+    title?: string;
+    valueLabel?: string;
+}
+declare const LiteLineChart: import("svelte").Component<Props, {}, "">;
+type LiteLineChart = ReturnType<typeof LiteLineChart>;
+export default LiteLineChart;

package/dist/components/widgets/LitePieChart.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  /**
+   * SSR PieChart — Degraded to a list with colored dots.
+   * Drawing SVG pie charts inline is technically possible but IE11
+   * doesn't support CSS conic-gradient. We fall back to a plain list.
+   */
+  interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+  }
+
+  interface Props {
+    data: DataPoint[];
+    title?: string;
+  }
+
+  let { data, title }: Props = $props();
+
+  const total = $derived(data.reduce((sum, d) => sum + d.value, 0));
+  const defaultColors = ['#6366f1', '#f59e0b', '#10b981', '#ef4444', '#8b5cf6', '#06b6d4', '#f97316', '#ec4899'];
+</script>
+
+<div class="lite-card" style="margin-bottom: 16px;">
+  {#if title}
+    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
+      {title}
+    </div>
+  {/if}
+  <div style="padding: 16px; display: flex; flex-direction: column; gap: 10px;">
+    {#each data as point, i (i)}
+      {@const pct = total > 0 ? ((point.value / total) * 100).toFixed(1) : '0.0'}
+      <div style="display: flex; align-items: center; gap: 10px; font-size: 13px;">
+        <span style="width: 12px; height: 12px; border-radius: 50%; background: {point.color ?? defaultColors[i % defaultColors.length]}; flex-shrink: 0;"></span>
+        <span style="flex: 1; color: #334155;">{point.label}</span>
+        <span style="color: #64748b; font-weight: 500;">{point.value}</span>
+        <span style="color: #94a3b8; font-size: 12px; min-width: 48px; text-align: right;">{pct}%</span>
+      </div>
+    {/each}
+    {#if data.length === 0}
+      <p style="color: #94a3b8; font-style: italic; text-align: center;">No data</p>
+    {/if}
+  </div>
+</div>

package/dist/components/widgets/LitePieChart.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SSR PieChart — Degraded to a list with colored dots.
+ * Drawing SVG pie charts inline is technically possible but IE11
+ * doesn't support CSS conic-gradient. We fall back to a plain list.
+ */
+interface DataPoint {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface Props {
+    data: DataPoint[];
+    title?: string;
+}
+declare const LitePieChart: import("svelte").Component<Props, {}, "">;
+type LitePieChart = ReturnType<typeof LitePieChart>;
+export default LitePieChart;

package/dist/components/widgets/index.js

@@ -0,0 +1,5 @@
+export { default as LiteInsightCard } from './LiteInsightCard.svelte';
+export { default as LiteAnomalyBadge } from './LiteAnomalyBadge.svelte';
+export { default as LiteBarChart } from './LiteBarChart.svelte';
+export { default as LiteLineChart } from './LiteLineChart.svelte';
+export { default as LitePieChart } from './LitePieChart.svelte';

package/dist/enhance.js

@@ -0,0 +1,112 @@
+/**
+ * @svadmin/lite — Optional Progressive Enhancement
+ *
+ * This script is optional and uses ES5 syntax for broad compatibility.
+ * If included, it adds minor UX improvements. If not, everything still works.
+ *
+ * Include in your app.html:
+ *   <script src="/enhance.js"></script>
+ */
+(function() {
+  'use strict';
+
+  function closestByAttribute(element, attribute) {
+    var current = element;
+    while (current && current.nodeType === 1) {
+      if (current.hasAttribute(attribute)) return current;
+      current = current.parentElement;
+    }
+    return null;
+  }
+
+  function bindArrayRemoveButtons(fieldset) {
+    var buttons = fieldset.querySelectorAll('[data-lite-array-remove]');
+    for (var i = 0; i < buttons.length; i++) {
+      var button = buttons[i];
+      button.removeAttribute('hidden');
+      if (button.getAttribute('data-lite-array-bound') === 'true') continue;
+      button.setAttribute('data-lite-array-bound', 'true');
+      button.addEventListener('click', function() {
+        var item = closestByAttribute(this, 'data-lite-array-item');
+        if (item && item.parentNode) item.parentNode.removeChild(item);
+      });
+    }
+  }
+
+  function enhanceArrayField(fieldset) {
+    var addButton = fieldset.querySelector('[data-lite-array-add]');
+    var template = fieldset.querySelector('template[data-lite-array-template]');
+    bindArrayRemoveButtons(fieldset);
+    if (!addButton || !template) return;
+
+    addButton.removeAttribute('hidden');
+    addButton.addEventListener('click', function() {
+      var nextIndex = Number(fieldset.getAttribute('data-next-index') || '0');
+      var holder = document.createElement('div');
+      holder.innerHTML = template.innerHTML.replace(/__INDEX__/g, String(nextIndex));
+      var item = holder.firstElementChild;
+      if (!item || !addButton.parentNode) return;
+      addButton.parentNode.insertBefore(item, addButton);
+      fieldset.setAttribute('data-next-index', String(nextIndex + 1));
+      bindArrayRemoveButtons(fieldset);
+      var firstInput = item.querySelector('input:not([type="hidden"]), textarea, select');
+      if (firstInput) firstInput.focus();
+    });
+  }
+
+  function init() {
+    document.documentElement.className += ' lite-js';
+
+  // 1. Delete confirmation — close <details> when clicking outside
+  document.addEventListener('click', function(e) {
+    var details = document.querySelectorAll('details.lite-confirm-details');
+    for (var i = 0; i < details.length; i++) {
+      if (!details[i].contains(e.target)) {
+        details[i].removeAttribute('open');
+      }
+    }
+  });
+
+  // 2. Highlight current table row on hover (for older browsers without :hover)
+  var rows = document.querySelectorAll('.lite-table tbody tr');
+  for (var j = 0; j < rows.length; j++) {
+    rows[j].addEventListener('mouseenter', function() {
+      this.style.backgroundColor = '#f8fafc';
+    });
+    rows[j].addEventListener('mouseleave', function() {
+      this.style.backgroundColor = '';
+    });
+  }
+
+  // 3. Auto-focus first input on form pages
+  var firstInput = document.querySelector('.lite-form-group input, .lite-form-group textarea');
+  if (firstInput && firstInput.offsetParent !== null) {
+    firstInput.focus();
+  }
+
+  // 4. Confirm before leaving dirty forms
+  var form = document.querySelector('form.lite-card');
+  if (form) {
+    var dirty = false;
+    form.addEventListener('change', function() { dirty = true; });
+    window.addEventListener('beforeunload', function(e) {
+      if (dirty) {
+        e.returnValue = 'You have unsaved changes.';
+        return e.returnValue;
+      }
+    });
+    form.addEventListener('submit', function() { dirty = false; });
+  }
+
+  // 5. Dynamic array rows. The initial row and no-JS removal submitters
+  // remain fully server-submittable when this optional script is absent.
+  var arrays = document.querySelectorAll('[data-lite-array]');
+  for (var k = 0; k < arrays.length; k++) enhanceArrayField(arrays[k]);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();