npm - @saasira/holi - Versions diffs - 0.1.5 → 0.1.6 - Mend

@saasira/holi 0.1.5 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -224,11 +224,22 @@ Rules:
 - Direct `region[name]` inside a block fills matching nested slots inside that block's assigned subtree.
 - Missing slots are empty by default.
 - Set `inherit-missing="true"` on `page` to keep fallback slot content.
+- Use `renderer="browser"` on source pages to show the built-in placeholder until runtime composition completes.
+- After browser or compiler rendering completes, both `renderer` and `rendered` should be removed from the final page node.
 - Use `layout-src` for an explicit layout file or `layouts-base` for a layout folder.
+- Page-level attributes `title`, `description`, `canonical`, and `lang` are applied to the real document metadata.
+- Page-level `theme` is applied to the real `<body>` element for theme scoping and switching.
 - Use `<layout-head data-layout-head="true">` for shared head assets in layouts.
 - Use `<tail data-layout-tail="true">` for deferred body-end assets in layouts.
 - Non-script nodes from `layout-head` go to the real HTML `<head>`.
 - Nodes from `tail` are appended near the end of `<body>`.
+- Built-in region `meta` always targets the real HTML `<head>`.
+- Built-in regions `styles` and `page-styles` always target the real HTML `<head>`, even when the layout does not declare those slots.
+- Built-in regions `scripts` and `page-scripts` always target the end of `<body>`, even when the layout does not declare those slots.
+- Use `styles` for external asset nodes such as `<link rel="stylesheet" href="...">`.
+- Use `scripts` for external asset nodes such as `<script src="..."></script>`.
+- Use `page-styles` for inline `<style>` tags.
+- Use `page-scripts` for inline `<script>` tags.
 ## Holi vs React / Angular / Vue
@@ -262,3 +273,36 @@ Practical summary:
 - Auto init can be disabled with `window.HoliAutoInit = false` before loading `dist/holi.js`.
 - Component templates are loaded from `dist/components.html` (with runtime fallback paths).
 - Layout templates are loaded from `dist/layouts.html` (with runtime fallback paths).
+## OfflineIndicator
+`OfflineIndicator` provides a template-driven connectivity banner with automatic polling and queue count display.
+Supported declaration styles:
+- `<offline></offline>`
+- `<section component="offline"></section>`
+- `<section role="offline"></section>`
+- `[data-offline]`
+Useful attributes:
+- `scope="page|block|inline"`
+- `position="top-left|top-right|bottom-left|bottom-right|top-center|bottom-center"`
+- `host="#selector"` for `scope="block"`
+- `ping-url="/api/ping"`
+- `heartbeat-ms="2500"`
+- `probe-timeout-ms="1800"`
+- `duration="1200"`
+- `max-attempts="4"`
+Instance/static helpers:
+- `el.offlineIndicator.retryConnection()`
+- `el.offlineIndicator.simulateOffline()`
+- `el.offlineIndicator.simulateOnline()`
+- `window.OfflineIndicator.queue(payload)`
+- `window.OfflineIndicator.clearQueue()`
+- `window.OfflineIndicator.create(options)`
+See [offline example](/D:/Work/Self/Holi/src/examples/pages/offline.html) for page-scoped, block-scoped, and queue-sync scenarios.

package/dist/components.html CHANGED Viewed

@@ -96,6 +96,15 @@
 </template>
+<!-- Template: themeswitcher.html src/templates/components/themeswitcher.html -->
+<template id="themeswitcher-template">
+    <section class="holi-themeswitcher">
+        <label data-role="theme-label" for="holi-theme-switcher-select">@{label}</label>
+        <select id="holi-theme-switcher-select" data-role="theme-select"></select>
+    </section>
+</template>
 <!-- Template: textarea.html src/templates/components/textarea.html -->
 <template id="textarea-field-template">
     <div class="holi-textarea" role="group">
@@ -231,6 +240,36 @@
 </template>
+<!-- Template: refresh.html src/templates/components/refresh.html -->
+<template id="refresh-template">
+    <section class="holi-refresh" data-state="idle" tabindex="0">
+        <div class="holi-refresh__handle" data-role="handle" aria-hidden="true">
+            <div class="holi-refresh__icon">
+                <span class="holi-refresh__icon-arrow"></span>
+                <span class="holi-refresh__icon-spinner"></span>
+            </div>
+            <div class="holi-refresh__label" data-role="label">Pull to refresh</div>
+            <div class="holi-refresh__progress">
+                <span class="holi-refresh__progress-bar" data-role="progress"></span>
+            </div>
+        </div>
+        <div class="holi-refresh__content" data-role="content"></div>
+    </section>
+</template>
+<!-- Template: rating.html src/templates/components/rating.html -->
+<template id="rating-template">
+    <div class="rating" data-role="rating-root" data-rating="0">
+        <i class="fa fa-star-o" data-value="1" aria-hidden="true"></i>
+        <i class="fa fa-star-o" data-value="2" aria-hidden="true"></i>
+        <i class="fa fa-star-o" data-value="3" aria-hidden="true"></i>
+        <i class="fa fa-star-o" data-value="4" aria-hidden="true"></i>
+        <i class="fa fa-star-o" data-value="5" aria-hidden="true"></i>
+    </div>
+</template>
 <!-- Template: radio.html src/templates/components/radio.html -->
 <template id="radio-group-template">
     <fieldset class="holi-radio-group">
@@ -254,6 +293,21 @@
 </template>
+<!-- Template: pwa.html src/templates/components/pwa.html -->
+<!-- Theme color meta (dynamic via JS) -->
+<meta name="theme-color" content="#2563eb">
+<!-- iOS Safari -->
+<link rel="apple-touch-icon" href="/icons/icon-192.png">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="default">
+<meta name="apple-mobile-web-app-title" content="HF Components">
+<!-- Microsoft/Edge -->
+<meta name="msapplication-TileImage" content="/icons/icon-192.png">
+<meta name="msapplication-TileColor" content="#2563eb">
 <!-- Template: progress.html src/templates/components/progress.html -->
 <template id="progress">
     <section class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
@@ -280,6 +334,24 @@
 </template>
+<!-- Template: offline.html src/templates/components/offline.html -->
+<template id="offline-template">
+    <section class="holi-offline-indicator" data-status="online" data-visible="false" hidden aria-live="polite" aria-atomic="true" role="status">
+        <div class="holi-offline-indicator__badge" aria-hidden="true">
+            <span class="holi-offline-indicator__dot"></span>
+        </div>
+        <div class="holi-offline-indicator__message">
+            <span class="holi-offline-indicator__status" data-role="status-text">Offline</span>
+            <span class="holi-offline-indicator__meta">
+                <span class="holi-offline-indicator__sync" data-role="sync-text">0 pending</span>
+                <span class="holi-offline-indicator__attempts" data-role="attempt-text">Retry 0/5</span>
+            </span>
+        </div>
+        <button type="button" class="holi-offline-indicator__retry" data-action="retry" aria-label="Retry connection">Retry</button>
+    </section>
+</template>
 <!-- Template: menubar.html src/templates/components/menubar.html -->
 <template id="menubar-template">
     <nav class="holi-menubar" data-mode="bar" aria-label="Site menu">
@@ -289,12 +361,28 @@
 </template>
+<!-- Template: localeswitcher.html src/templates/components/localeswitcher.html -->
+<template id="localeswitcher-template">
+    <section class="holi-localeswitcher">
+        <label data-role="locale-label" for="holi-locale-switcher-select">@{label}</label>
+        <select id="holi-locale-switcher-select" data-role="locale-select"></select>
+    </section>
+</template>
 <!-- Template: loader.html src/templates/components/loader.html -->
 <template id="loader-template">
     <section class="holi-loader" data-scope="inline" hidden>
         <div class="holi-loader-backdrop"></div>
         <div class="holi-loader-body" role="status" aria-live="polite" aria-atomic="true">
-            <span class="holi-loader-spinner" aria-hidden="true"></span>
+            <span class="holi-loader-spinner" data-role="loader-spinner" data-type="spinner" aria-hidden="true">
+                <span class="holi-loader-spinner-ring" aria-hidden="true"></span>
+                <span class="holi-loader-dots" aria-hidden="true">
+                    <span class="holi-loader-dot"></span>
+                    <span class="holi-loader-dot"></span>
+                    <span class="holi-loader-dot"></span>
+                </span>
+            </span>
             <span class="holi-loader-message" data-role="loader-message">Loading...</span>
         </div>
     </section>

package/dist/holi.css CHANGED Viewed

@@ -591,6 +591,21 @@
     font-size: 0.88rem;
 }
+.rating {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    line-height: 1;
+}
+.rating .fa {
+    color: #f59e0b;
+}
+.rating .fa-star-o {
+    color: #cbd5e1;
+}
 .holi.datagrid {
     border: 1px solid #d9dee8;
     border-radius: 8px;
@@ -1934,17 +1949,415 @@ body.holi-drawer-lock {
 .holi-loader-spinner {
     width: 14px;
     height: 14px;
+    display: inline-grid;
+    place-items: center;
+    flex: 0 0 auto;
+}
+.holi-loader-spinner-ring {
+    width: 100%;
+    height: 100%;
     border-radius: 50%;
     border: 2px solid #cbd5e1;
     border-top-color: #2563eb;
     animation: holi-loader-spin 0.8s linear infinite;
 }
+.holi-loader-dots {
+    display: none;
+    align-items: center;
+    gap: 3px;
+}
+.holi-loader-dot {
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: #2563eb;
+    animation: holi-loader-bounce 0.9s ease-in-out infinite;
+}
+.holi-loader-dot:nth-child(2) {
+    animation-delay: 0.15s;
+}
+.holi-loader-dot:nth-child(3) {
+    animation-delay: 0.3s;
+}
+.holi-loader[data-type="dots"] .holi-loader-spinner-ring {
+    display: none;
+}
+.holi-loader[data-type="dots"] .holi-loader-dots {
+    display: inline-flex;
+}
+.holi-loader[data-size="sm"] .holi-loader-body {
+    gap: 6px;
+    padding: 6px 10px;
+    font-size: 12px;
+}
+.holi-loader[data-size="sm"] .holi-loader-spinner {
+    width: 12px;
+    height: 12px;
+}
+.holi-loader[data-size="sm"] .holi-loader-spinner-ring {
+    border-width: 2px;
+}
+.holi-loader[data-size="sm"] .holi-loader-dot {
+    width: 3px;
+    height: 3px;
+}
+.holi-loader[data-size="lg"] .holi-loader-body {
+    gap: 10px;
+    padding: 10px 14px;
+    font-size: 14px;
+}
+.holi-loader[data-size="lg"] .holi-loader-spinner {
+    width: 18px;
+    height: 18px;
+}
+.holi-loader[data-size="lg"] .holi-loader-spinner-ring {
+    border-width: 3px;
+}
+.holi-loader[data-size="lg"] .holi-loader-dot {
+    width: 5px;
+    height: 5px;
+}
 @keyframes holi-loader-spin {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
 }
+@keyframes holi-loader-bounce {
+    0%, 80%, 100% {
+        transform: scale(0.7);
+        opacity: 0.45;
+    }
+    40% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+.holi-offline-indicator {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    z-index: 1200;
+    display: inline-flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 14px;
+    border: 1px solid #f59e0b;
+    border-radius: 16px;
+    background: rgba(15, 23, 42, 0.95);
+    color: #f8fafc;
+    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
+    backdrop-filter: blur(10px);
+}
+.holi-offline-indicator[data-scope="inline"] {
+    position: relative;
+    inset: auto;
+    width: 100%;
+    justify-content: space-between;
+}
+.holi-offline-indicator[data-scope="block"] {
+    position: absolute;
+}
+.holi-offline-indicator[data-scope="inline"][data-position],
+.holi-offline-indicator[data-scope="block"][data-position] {
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+}
+.holi-offline-indicator[data-position="top-right"] {
+    top: 16px;
+    right: 16px;
+}
+.holi-offline-indicator[data-position="top-left"] {
+    top: 16px;
+    left: 16px;
+}
+.holi-offline-indicator[data-position="bottom-right"] {
+    bottom: 16px;
+    right: 16px;
+}
+.holi-offline-indicator[data-position="bottom-left"] {
+    bottom: 16px;
+    left: 16px;
+}
+.holi-offline-indicator[data-position="top-center"] {
+    top: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.holi-offline-indicator[data-position="bottom-center"] {
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+}
+.holi-offline-indicator[hidden] {
+    display: none;
+}
+.holi-offline-indicator__badge {
+    width: 22px;
+    height: 22px;
+    display: inline-grid;
+    place-items: center;
+    border-radius: 999px;
+    background: rgba(248, 113, 113, 0.18);
+}
+.holi-offline-indicator__dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: #f97316;
+    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.16);
+}
+.holi-offline-indicator[data-status="online"] .holi-offline-indicator__badge {
+    background: rgba(16, 185, 129, 0.18);
+}
+.holi-offline-indicator[data-status="online"] .holi-offline-indicator__dot {
+    background: #10b981;
+    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
+}
+.holi-offline-indicator__message {
+    display: grid;
+    gap: 2px;
+}
+.holi-offline-indicator__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+.holi-offline-indicator__status {
+    font-weight: 700;
+    letter-spacing: 0.01em;
+}
+.holi-offline-indicator__sync {
+    color: #cbd5e1;
+    font-size: 12px;
+}
+.holi-offline-indicator__attempts {
+    color: #fdba74;
+    font-size: 12px;
+}
+.holi-offline-indicator__retry {
+    border: 0;
+    border-radius: 999px;
+    padding: 8px 12px;
+    background: #f8fafc;
+    color: #0f172a;
+    font-weight: 600;
+    cursor: pointer;
+}
+.holi-offline-indicator__retry:hover,
+.holi-offline-indicator__retry:focus-visible {
+    background: #e2e8f0;
+    outline: none;
+}
+.holi-offline-indicator__retry:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+body.app--offline {
+    outline: 4px solid rgba(249, 115, 22, 0.22);
+    outline-offset: -4px;
+}
+@media (max-width: 640px) {
+    .holi-offline-indicator[data-scope="page"] {
+        left: 12px;
+        right: 12px;
+        bottom: 12px;
+        justify-content: space-between;
+    }
+}
+.holi-refresh {
+    --refresh-pull-distance: 0px;
+    position: relative;
+    display: block;
+    min-height: 100px;
+    outline: none;
+}
+.holi-refresh__handle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: grid;
+    justify-items: center;
+    gap: 8px;
+    padding: 14px 16px 10px;
+    transform: translateY(calc(-100% + var(--refresh-pull-distance)));
+    transition: transform 180ms ease;
+    color: #475569;
+    pointer-events: none;
+}
+.holi-refresh[data-state="pulling"] .holi-refresh__handle,
+.holi-refresh[data-state="armed"] .holi-refresh__handle,
+.holi-refresh[data-state="refreshing"] .holi-refresh__handle,
+.holi-refresh[data-state="complete"] .holi-refresh__handle {
+    transition: transform 120ms ease;
+}
+.holi-refresh__icon {
+    width: 34px;
+    height: 34px;
+    display: grid;
+    place-items: center;
+    border-radius: 999px;
+    background: linear-gradient(180deg, #ffffff, #e2e8f0);
+    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
+}
+.holi-refresh__icon-arrow,
+.holi-refresh__icon-spinner {
+    grid-area: 1 / 1;
+}
+.holi-refresh__icon-arrow {
+    width: 12px;
+    height: 12px;
+    border-right: 2px solid #0f172a;
+    border-bottom: 2px solid #0f172a;
+    transform: rotate(45deg);
+    transition: transform 140ms ease, opacity 140ms ease;
+}
+.holi-refresh[data-state="armed"] .holi-refresh__icon-arrow {
+    transform: rotate(-135deg);
+}
+.holi-refresh__icon-spinner {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 2px solid rgba(37, 99, 235, 0.18);
+    border-top-color: #2563eb;
+    opacity: 0;
+}
+.holi-refresh[data-state="refreshing"] .holi-refresh__icon-arrow,
+.holi-refresh[data-state="complete"] .holi-refresh__icon-arrow {
+    opacity: 0;
+}
+.holi-refresh[data-state="refreshing"] .holi-refresh__icon-spinner {
+    opacity: 1;
+    animation: holi-refresh-spin 0.8s linear infinite;
+}
+.holi-refresh__label {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+}
+.holi-refresh__progress {
+    width: min(160px, 44vw);
+    height: 3px;
+    border-radius: 999px;
+    background: rgba(148, 163, 184, 0.26);
+    overflow: hidden;
+}
+.holi-refresh__progress-bar {
+    display: block;
+    width: 100%;
+    height: 100%;
+    transform-origin: left center;
+    transform: scaleX(var(--refresh-progress, 0));
+    background: linear-gradient(90deg, #0f766e, #2563eb);
+    transition: transform 120ms ease;
+}
+.holi-refresh__content {
+    position: relative;
+    min-height: inherit;
+    transition: transform 180ms ease;
+    transform: translateY(calc(var(--refresh-pull-distance) * 0.48));
+    will-change: transform;
+}
+.holi-refresh[data-state="refreshing"] .holi-refresh__content {
+    transform: translateY(34px);
+}
+.holi-refresh[data-state="complete"] .holi-refresh__icon {
+    background: linear-gradient(180deg, #ecfdf5, #d1fae5);
+}
+.holi-refresh[data-state="complete"] .holi-refresh__label {
+    color: #047857;
+}
+.holi-refresh[data-state="disabled"] {
+    opacity: 0.7;
+}
+@keyframes holi-refresh-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+.holi-localeswitcher {
+    display: inline-grid;
+    gap: 8px;
+    min-width: 180px;
+}
+.holi-localeswitcher label {
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+.holi-localeswitcher select {
+    min-width: 180px;
+    padding: 8px 10px;
+    border: 1px solid #cfc4b5;
+    border-radius: 8px;
+    background: #fffdfa;
+    color: inherit;
+}
 .holi-menubar {
     position: relative;
     --menubar-border: #d6dde8;
@@ -2146,6 +2559,62 @@ body.holi-drawer-lock {
     margin-top: 0;
 }
+page[renderer="browser"]:not([rendered]),
+page[renderer="browser"][rendered="pending"] {
+    display: block;
+    position: relative;
+    min-height: 70vh;
+    padding: 24px;
+    border: 1px solid #ddd6c8;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 241, 232, 0.92)),
+        linear-gradient(90deg, #efe6d8, #f7f1e8);
+    overflow: hidden;
+}
+page[renderer="browser"]:not([rendered]) > *,
+page[renderer="browser"][rendered="pending"] > * {
+    display: none !important;
+}
+page[renderer="browser"]:not([rendered])::before,
+page[renderer="browser"][rendered="pending"]::before {
+    content: "";
+    display: block;
+    width: min(420px, 82%);
+    height: 44px;
+    border-radius: 12px;
+    background: linear-gradient(90deg, #e8dccb, #f6efe5, #e8dccb);
+    background-size: 220% 100%;
+    animation: holi-page-placeholder 1.6s linear infinite;
+}
+page[renderer="browser"]:not([rendered])::after,
+page[renderer="browser"][rendered="pending"]::after {
+    content: "";
+    display: block;
+    margin-top: 20px;
+    width: 100%;
+    height: calc(70vh - 88px);
+    min-height: 260px;
+    border-radius: 18px;
+    background:
+        linear-gradient(180deg, rgba(214, 202, 187, 0.5), rgba(255, 255, 255, 0)),
+        linear-gradient(90deg, #eadfce 18%, #f8f2e9 44%, #eadfce 70%);
+    background-size: 240% 100%;
+    animation: holi-page-placeholder 1.9s linear infinite;
+}
+@keyframes holi-page-placeholder {
+    from {
+        background-position: 200% 0;
+    }
+    to {
+        background-position: -40% 0;
+    }
+}
 .holi-panel {
     --holi-panel-border: #dce3ea;
     --holi-panel-bg: #ffffff;
@@ -2653,6 +3122,26 @@ body.holi-drawer-lock {
     font-size: 0.92rem;
 }
+.holi-themeswitcher {
+    display: inline-grid;
+    gap: 8px;
+    min-width: 180px;
+}
+.holi-themeswitcher label {
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+.holi-themeswitcher select {
+    min-width: 180px;
+    padding: 8px 10px;
+    border: 1px solid #cfc4b5;
+    border-radius: 8px;
+    background: #fffdfa;
+    color: inherit;
+}
 .holi-tree {
     border: 1px solid #d6dde8;
     border-radius: 10px;