@nebularstreams/statify 3.0.6 → 3.0.8

package/skill/statify-site/references/skins.md

@@ -0,0 +1,150 @@
+# Skin variables
+
+Statify's shared `website.css` defines a variable-driven light/dark skin. Override these variables in the template-local stylesheet, normally `assets/res/custom.css`; do not edit the compiled application stylesheet.
+
+Use `:root` for a value shared by both modes. Use `.skinroot.light` or `.skinroot.dark` when a token needs different contrast in each mode. Keep overrides limited to variables the design actually needs.
+
+## Core surface and text tokens
+
+| Variable | Role |
+| --- | --- |
+| `--window-background` | Main application background |
+| `--window-background-0` | Lowest dark-skin surface step |
+| `--window-background-1` | First raised dark-skin surface step |
+| `--window-background-2` | Second raised dark-skin surface step |
+| `--window-background-3` | Third raised dark-skin surface step |
+| `--window-background-hi` | Highlighted or raised surface |
+| `--window-background-lo` | Recessed light-skin surface |
+| `--primary-color` | Primary chrome or strong surface color |
+| `--black` | Stable black token |
+| `--text` | Main text color |
+| `--text-lo` | Secondary or subdued text |
+| `--border-color` | Borders and separators |
+| `--placeholder` | Placeholder or empty-state surface |
+| `--inputs` | Input background |
+| `--shadow-color` | Shadow color |
+
+The numbered `--window-background-*` variables are present in the dark source skin, while `--window-background-lo` is present in the light source skin. A custom stylesheet may define the complete set in both modes when its components need them.
+
+## Accent and foreground tokens
+
+The templates define the main branding accents locally:
+
+| Variable | Role |
+| --- | --- |
+| `--accent` | Primary brand/action color |
+| `--accent-tx` | Translucent or softer accent used by decorative treatments |
+
+The shared skin provides related foreground and state tokens:
+
+| Variable | Role |
+| --- | --- |
+| `--accent-light` | Pale accent surface, especially in light mode |
+| `--accent-alt` | Alternate accent |
+| `--text-over-accent` | Text placed over the main accent |
+| `--text-over-accent-hover` | Hover text over the main accent |
+| `--text-over-primary` | Text placed over the primary surface |
+| `--text-over-primary-hover` | Hover text over the primary surface |
+
+Check text-over-color pairs together. A visually attractive accent is not usable if `--text-over-accent` lacks contrast.
+
+## Status and overlay tokens
+
+| Variable | Role |
+| --- | --- |
+| `--back-success` | Success-message background |
+| `--back-warning` | Warning-message background |
+| `--back-error` | Error-message background |
+| `--bg-ok` | Strong success indicator |
+| `--bg-warning` | Strong warning indicator |
+| `--bg-error` | Strong error indicator |
+| `--alpha-band` | Translucent band or overlay |
+| `--alpha-gradient` | Overlay/gradient endpoint |
+| `--green` | Generic green utility color |
+| `--orange` | Generic orange utility color |
+| `--red` | Generic red utility color |
+
+`--bg-ok`, `--bg-warning`, and `--bg-error` are declared by the light skin; define dark equivalents only if components using them need different dark-mode values. Preserve recognizable success, warning, and error meaning.
+
+## Section backgrounds
+
+The `.back-zero`, `.back-one`, `.back-two`, and `.back-three` helpers consume matching variables:
+
+| Variable | Default intent |
+| --- | --- |
+| `--back-zero` | Base section background |
+| `--back-one` | First contrasting section background |
+| `--back-two` | Second contrasting section background |
+| `--back-three` | Third contrasting section background |
+
+The default dark skin derives these from the window surfaces with 45-degree gradients. They may also be solid colors. Some templates define additional local levels such as `--back-four` and `--back-five`; these are template extensions, not base skin variables.
+
+Example paired palette:
+
+```css
+.skinroot.light {
+    --back-zero: #ffffff;
+    --back-one: #f6f2ff;
+    --back-two: #e8dcff;
+    --back-three: #cab0ff;
+}
+
+.skinroot.dark {
+    --back-zero: #111111;
+    --back-one: #211934;
+    --back-two: #32234f;
+    --back-three: #49316f;
+}
+```
+
+Only define levels used by the page. Check the main and subdued text colors against every chosen level.
+
+## Responsive font variables
+
+The application provides root font sizes by breakpoint:
+
+| Variable | Source default |
+| --- | --- |
+| `--font-xs` | `16px` |
+| `--font-sm` | `16px` |
+| `--font-md` | `18px` |
+| `--font-lg` | `18px` |
+| `--font-xl` | `18px` |
+| `--font-fullhd` | `20px` |
+
+Override these only when the site needs a different global type scale. Preserve readable mobile sizes and test long headings, navigation labels, tables, and code blocks after changing them.
+
+## Control-size variables
+
+| Variable | Source default | Role |
+| --- | --- | --- |
+| `--unitsize` | `3rem` | Standard control and navigation unit |
+| `--unitsize-small` | `2.54rem` | Compact control unit |
+
+These are structural variables rather than branding colors. Change them cautiously because many controls, icons, and navigation elements share them.
+
+## Practical starter override
+
+For most sites, begin with the accents and leave the structural defaults alone:
+
+```css
+:root {
+    --accent: #ff8800;
+    --accent-tx: rgba(255, 136, 0, 0.5);
+}
+
+.skinroot.light {
+    --accent: #b74d00;
+    --accent-light: #fff1e6;
+    --text-over-accent: #ffffff;
+    --text-over-accent-hover: #ffffff;
+}
+
+.skinroot.dark {
+    --accent: #ff9d3d;
+    --text-over-accent: #111111;
+    --text-over-accent-hover: #000000;
+}
+```
+
+Preview the generated site in both skins at narrow and wide widths. Verify ordinary text, muted text, links, buttons, inputs, borders, cards, status colors, and every section-background level used by the page.

package/src.website/css/css-core/ui.navibar.css

@@ -1,7 +1,101 @@
+
+nav a {
+    color: inherit !important;
+    text-decoration: none
+}
+
+nav a:hover {
+    text-decoration: underline
+}
+
 nav.titlebar {
-    line-height: var(--unitsize);
+    z-index: 1000;
+    align-items: center;
+    white-space: nowrap;
+    font-variant: all-small-caps
+}
+
+nav.titlebar>* {
+    margin: 0 .5rem;
+    text-overflow: ellipsis;
+    overflow: hidden
+}
+
+nav.titlebar .square {
+    flex-shrink: 0;
+    display: inline-block;
+    margin: 0;
+    padding: 0 1rem;
+    border-left: solid 1px var(--border-color);
+    height: var(--unitsize);
+    line-height: var(--unitsize)
+}
+
+nav.titlebar .inter,nav.titlebar .mute {
+    flex-shrink: 0
+}
+
+nav.titlebar>.inter:after {
+    content: "\f0da";
+    font-family: "Font Awesome 5 Free";
+    padding-left: 1rem
+}
+
+nav.titlebar>.sep {
+    padding: 0;
+    color: var(--text-lo)
+}
+
+.naviholder i {
+    line-height: inherit
+}
+
+nav.autohide {
+    transition: opacity .5s linear
+}
+
+.scrolltop nav.autohide {
+    opacity: 0
+}
+
+nav .transbutton {
+    background: transparent;
+    border: 0;
+    color: var(--text);
+    cursor: pointer;
+    margin: 0;
+    border-left: solid 1px var(--border-color)
+}
+
+nav.tab-menu.flexrow {
+
+    right: 0;
+    left: 0;
+    padding-left: 0.5rem;
+    box-shadow: 0 0 2px var(--shadow-color);
+}
+
+nav input {
+    border: 0;
+    border-radius: 2rem;
+    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
 }
 
+nav.tab-menu > .tab-menu-item.selected-tab-item {
+    color: var(--accent);
+    border-radius: 10rem;
+    display: inline-block;
+}
+
+nav.subbar {
+    z-index: 100;
+    line-height: 2rem;
+    border-top: dashed 1px var(--border-color);
+    font-variant: all-small-caps;
+    height: 2rem;
+}
+
+
 nav.tab-menu.flexrow {
 
     right: 0;

package/src.website/css/css-core/ui.qrcode.css

@@ -0,0 +1,20 @@
+figure.qrcode {
+    width: 30%;
+    background-color: rgba(0, 0, 0, 0.4);
+    padding: .5rem;
+    border-radius: .5rem;
+    position: relative;
+    max-width: 200px;
+}
+
+figure.qrcode:before {
+    content: "read in your mobile";
+    font-size: .5rem;
+    position: absolute;
+    color: white;
+    top: -0.8rem;
+    width: 100%;
+    left: 0;
+    text-align: center;
+    text-shadow: 1px 1px black;
+}

package/src.website/src/app/app.style.mjs

@@ -24,6 +24,8 @@ import "../../css/css-core/root.css";
 import "../../css/css-core/root.fullheight.css";
 import "../../css/css-core/ui.dialog.round.css";
 import "../../css/css-core/ui.notifications.css";
+import "../../css/css-core/ui.navibar.css";
+import "../../css/css-core/ui.qrcode.css";
 
 import "../../css/css-featurelist/feature.css";
 import "../../css/css-featurelist/tail.css";

package/templates/documentation/metadata.json

@@ -86,16 +86,13 @@
   "navibar": {
     "home": "/",
     "logo": "res/logos/logo.medallion.png",
-    "displayTitle": false,
+    "displayTitle": true,
     "autoHide": true,
     "links": {
       "documents": {
         "static": true,
-        "icon": "file",
-        "class": "grows"
-      },
-      "SPACER": {
-        "separator": true
+        "icon": "file-alt",
+        "class": "inter"
       }
     }
   },

package/templates/landing/metadata.json

@@ -96,7 +96,7 @@
         "separator": true
       },
       "Documentation": {
-        "url": "/docs/index",
+        "url": "docs/index",
         "icon": "book"
       },
       "Contact": {

package/templates/landing/pages/docs/cookies.md

@@ -0,0 +1,25 @@
+# Cookies and Local Storage
+
+**Example policy — replace before publishing. Last updated: September 17, 2026.**
+
+This page explains how the Brightfield Labs website uses cookies and browser storage.
+
+## What we store
+
+The website does not use advertising or third-party tracking cookies. It stores only preferences requested by the visitor.
+
+| Storage key | Purpose | Duration |
+| --- | --- | --- |
+| `brightfield.preferences` | Remembers theme and policy-notice choices | Until changed or deleted |
+
+This information remains in the visitor's browser and is not used to create an advertising profile.
+
+## Managing stored data
+
+Visitors can remove local preferences through their browser's privacy or site-data settings. Removing them resets the saved theme and may display the policy notice again.
+
+If optional analytics or other cookies are introduced, this policy and the website's consent controls should be updated before those technologies are enabled.
+
+## Contact
+
+Questions about this example policy can be sent to [privacy@example.com](mailto:privacy@example.com).

package/templates/landing/pages/docs/index.md

@@ -0,0 +1,13 @@
+# Documentation
+
+Welcome to the Brightfield Labs documentation center. Use this template for product guides, company policies, technical references, or any other structured content.
+
+## Company Policies
+
+* [Terms of Service](tos.md)
+* [Privacy Policy](privacy.md)
+* [Cookies and Local Storage](cookies.md)
+
+## Getting Started
+
+Add Markdown files anywhere inside the `pages` folder. Subfolders become sections, and ordinary assets such as stylesheets and downloads are copied into the generated site.

package/templates/landing/pages/docs/privacy.md

@@ -0,0 +1,50 @@
+# Privacy Policy
+
+**Example policy — obtain appropriate legal review before publishing. Last updated: September 17, 2026.**
+
+This policy describes how **Brightfield Labs** (**we**, **us**, or **our**) handles personal information when someone visits **example.com** or contacts us.
+
+## Information we process
+
+We aim to collect only the information needed to operate and protect the website, communicate with visitors, and provide requested services.
+
+This may include:
+
+* ordinary technical request data, such as IP address, browser information, requested pages, and timestamps;
+* preferences stored locally in the visitor's browser;
+* contact details and message content supplied when someone writes to us; and
+* information required to provide a service requested by a customer.
+
+We do not sell personal information or use website visitor information to create advertising profiles.
+
+## Why we use information
+
+We may use information to operate and secure the website, prevent abuse, respond to enquiries, deliver requested services, meet legal obligations, and protect our rights. The appropriate legal basis depends on the context and applicable law.
+
+## Cookies and local storage
+
+The website may store limited preferences in the visitor's browser. See our [Cookies and Local Storage Policy](cookies.md) for details.
+
+## Service providers and transfers
+
+Trusted providers may process information when they host, maintain, deliver, or secure the website. We expect providers to handle information under suitable contractual and legal safeguards, including safeguards for international transfers where required.
+
+## Retention and security
+
+We retain information only as long as reasonably necessary for its purpose, legal obligations, security, and dispute resolution. We use reasonable technical and organizational safeguards, although no internet service can guarantee absolute security.
+
+## Individual rights
+
+Depending on location, individuals may have rights to access, correct, delete, restrict, or receive a copy of their personal information, or to object to certain processing. Identity verification may be required before a request is completed.
+
+## Changes
+
+We may update this policy as the website, our practices, or applicable requirements change. The revision date above identifies the latest version.
+
+## Contact
+
+**Brightfield Labs**  
+100 Example Street  
+Sample City, EX 10000
+
+Email: [privacy@example.com](mailto:privacy@example.com)

package/templates/landing/pages/docs/tos.md

@@ -0,0 +1,49 @@
+# Website Terms
+
+**Example terms — obtain appropriate legal review before publishing. Last updated: September 17, 2026.**
+
+These terms govern access to the Brightfield Labs website at **example.com**. By using the website, visitors agree to these terms.
+
+## Website purpose
+
+The website provides general information about Brightfield Labs, its services, and example work. Descriptions, demonstrations, roadmaps, and other materials are informational and do not create a binding offer, warranty, or service commitment.
+
+Separate agreements may govern paid products, professional services, software licenses, support, or customer projects. Those agreements take precedence for the services they cover.
+
+## Intellectual property
+
+Unless stated otherwise, Brightfield Labs owns the original website content and design or uses them with permission. Visitors may view the website for ordinary informational and business-evaluation purposes, but may not republish or commercially exploit substantial content without permission.
+
+Third-party names, trademarks, and materials remain the property of their respective owners.
+
+## Acceptable use
+
+Visitors must not use the website unlawfully, interfere with its operation or security, attempt unauthorized access, introduce malicious code, impose unreasonable automated load, or misrepresent an affiliation with Brightfield Labs.
+
+## External services
+
+Links to third-party websites are provided for convenience. Brightfield Labs does not control their availability, security, content, or terms.
+
+## Availability and disclaimer
+
+We may change, suspend, or discontinue the website at any time. The website and its informational content are provided on an **"as available"** basis. To the extent permitted by law, we do not guarantee that the website will always be available, error-free, complete, or suitable for a particular purpose.
+
+## Liability
+
+To the extent permitted by law, Brightfield Labs is not liable for indirect or consequential losses arising solely from use of, inability to use, or reliance on this public website. Nothing here excludes rights or liabilities that cannot legally be excluded.
+
+## Privacy
+
+Our handling of personal information is described in the [Privacy Policy](privacy.md), and browser storage is described in the [Cookies and Local Storage Policy](cookies.md).
+
+## Changes
+
+We may update these terms from time to time. Updated terms apply from publication unless otherwise stated.
+
+## Contact
+
+**Brightfield Labs**  
+100 Example Street  
+Sample City, EX 10000
+
+Email: [hello@example.com](mailto:hello@example.com)

package/templates/landing/pages/index.json

@@ -250,17 +250,17 @@
       },
       {
         "title": "Cookies",
-        "href": "/docs/cookies",
+        "href": "docs/cookies",
         "target": "doc"
       },
       {
         "title": "Privacy",
-        "href": "/docs/privacy",
+        "href": "docs/privacy",
         "target": "doc"
       },
       {
         "title": "Terms",
-        "href": "/docs/tos",
+        "href": "docs/tos",
         "target": "doc"
       }
     ]