npm - @dxos/app-framework - Versions diffs - 0.8.4-main.ead640a → 0.8.4-main.effb148878 - Mend

@dxos/app-framework 0.8.4-main.ead640a → 0.8.4-main.effb148878

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 (572) hide show

package/src/vite-plugin/boot-loader/boot-loader.css ADDED Viewed

@@ -0,0 +1,320 @@
+/*
+ * Boot loader stylesheet — injected into the host's `<head>` by `bootLoaderPlugin`.
+ * The keyframe animation runs on the browser's compositor thread, so the bar
+ * keeps moving even while the JS main thread is busy parsing modules.
+ */
+/*
+ * Defaults match `@dxos/ui-theme`'s `--color-base-surface`, which resolves to
+ * Tailwind's `neutral-50` / `neutral-950` in light / dark mode respectively
+ * (see `packages/ui/ui-theme/src/css/theme/semantic.css`). Hosts can override
+ * with the `--boot-loader-bg-*` / `--boot-loader-fg-*` custom properties on
+ * `:root` if they need a different palette. Keeping the boot loader's
+ * background identical to the app's `body` eliminates the flash on handoff
+ * to React's `<Placeholder>`.
+ */
+#boot-loader {
+  /*
+   * Tunable sizes — change these in one place and every derived calc()
+   * (mark size, dot orbit radius, status offset, …) follows.
+   */
+  /*
+   * Caps the disc / mark at the design pixel sizes on roomy viewports while
+   * shrinking proportionally on narrow ones (`vmin` follows the smaller of
+   * width / height) so neither the ring nor the mark crops on phones.
+   */
+  --boot-loader-disc-size: min(384px, 80vmin);
+  /*
+   * Match the React `Placeholder`'s logo box (`h-[300px] w-[300px]` at the
+   * `stage >= 1` keyframe) so the brand mark doesn't visibly jump size when
+   * the loader hands off — the responsive cap keeps the same 300/384 ratio
+   * (≈78%) at any viewport width.
+   */
+  --boot-loader-mark-size: min(300px, 62.5vmin);
+  --boot-loader-dot-size: 6px;
+  --boot-loader-line-thickness: 1px;
+  --boot-loader-line-feather: 1px;
+  --boot-loader-status-gap: 32px;
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  background: var(--boot-loader-bg-light, #fafafa);
+  color: var(--boot-loader-fg-light, #0a0a0a);
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  font-size: 13px;
+}
+@media (prefers-color-scheme: dark) {
+  #boot-loader {
+    background: var(--boot-loader-bg-dark, #0a0a0a);
+    color: var(--boot-loader-fg-dark, #fafafa);
+  }
+}
+/*
+ * Register the progress var as a typed custom property so the browser can
+ * interpolate it. Both the conic-gradient arc and the orbiting dot derive
+ * their angle from `--boot-loader-bar-progress`, so animating the var (rather
+ * than the resulting `background` / `transform`) keeps them in lockstep —
+ * `transition: background` on a conic-gradient doesn't interpolate smoothly
+ * in all engines, which previously caused the head of the arc to flicker
+ * against the dot during each progress step.
+ */
+@property --boot-loader-bar-progress {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+/*
+ * Stack the ring and the brand mark in the same square so the mark sits
+ * centered inside the circle. Grid stacking keeps the mark outside the ring's
+ * mask (the mask would otherwise clip the SVG to the 1px-thick arc shape).
+ */
+#boot-loader-disc {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  place-items: center;
+  width: var(--boot-loader-disc-size);
+  height: var(--boot-loader-disc-size);
+  transform: translate(-50%, -50%);
+  transition: --boot-loader-bar-progress 240ms ease-out;
+}
+#boot-loader-disc > * {
+  grid-column: 1;
+  grid-row: 1;
+}
+/*
+ * Default to grayscale so the mark reads as a quiet monochrome silhouette
+ * before any host-driven progress lands; the brand palette swaps in once
+ * the driver flips `data-host-driven` on the disc (state-2 entry — the
+ * first `__bootLoader.progress()` call). Hover keeps a parallel reveal
+ * affordance for inspection in the storybook. The 600ms ease lets the
+ * grayscale → color transition play through the activation phase rather
+ * than snapping.
+ */
+#boot-loader-mark {
+  width: var(--boot-loader-mark-size);
+  height: var(--boot-loader-mark-size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  filter: grayscale(100%);
+  transition: filter 1000ms ease-out;
+}
+/*
+ * `grayscale(0%)` (identity) rather than `none` — `filter: none` changes
+ * the filter function list and most engines treat that as a discrete
+ * transition (snap, not ease). Keeping `grayscale(...)` on both sides of
+ * the rule lets the browser interpolate the percentage smoothly.
+ */
+#boot-loader-disc[data-host-driven] #boot-loader-mark,
+#boot-loader-mark:hover {
+  filter: grayscale(0%);
+}
+#boot-loader-mark svg {
+  width: 100%;
+  height: 100%;
+  /*
+   * The host SVG carries its own brand-palette fills, so we don't apply a
+   * `color` cascade here. SVGs that intentionally use `fill="currentColor"`
+   * still pick up the loader's text colour via `#boot-loader`'s `color`.
+   */
+}
+/*
+ * Circular determinate progress — a 1px-thick ring carved out of a filled
+ * disc by a radial-gradient mask. The mask applies to the element and its
+ * descendants so the `::before` progress arc is clipped to the ring shape
+ * too. There is no indeterminate state: the ring sits empty (0%) until the
+ * host calls `__bootLoader.progress(fraction)`, then the arc grows in place.
+ * The fill repaints on the compositor thread so progress remains visually
+ * smooth even while the JS main thread is busy parsing modules.
+ */
+#boot-loader-bar {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: rgba(127, 127, 127, 0.18);
+  opacity: 0.3;
+  /*
+   * Feather the inner edge so the thin line gets soft anti-aliased edges
+   * instead of a hard pixel cutoff (which can look stair-stepped on
+   * non-retina screens). The outer edge is clipped by `border-radius: 50%`,
+   * so only the inner side of the ring needs the gradient feather. The
+   * solid line lives in the outermost `--boot-loader-line-thickness` of the
+   * disc; the feather extends `--boot-loader-line-feather` further inward.
+   */
+  mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--boot-loader-line-thickness) - var(--boot-loader-line-feather)),
+    #000 calc(100% - var(--boot-loader-line-thickness))
+  );
+  -webkit-mask: radial-gradient(
+    circle closest-side,
+    transparent calc(100% - var(--boot-loader-line-thickness) - var(--boot-loader-line-feather)),
+    #000 calc(100% - var(--boot-loader-line-thickness))
+  );
+}
+/*
+ * The host writes 0–100 into `--boot-loader-bar-progress` via
+ * `__bootLoader.progress(fraction)`. The `transition: background` smooths
+ * the transitions between counter ticks so the arc grows continuously
+ * rather than snapping. `conic-gradient` is clockwise-only, so the arc is
+ * mirrored horizontally with `scaleX(-1)` to grow anticlockwise from
+ * 12 o'clock.
+ */
+#boot-loader-bar::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(currentcolor calc(var(--boot-loader-bar-progress, 0) * 1%), transparent 0);
+  transform: scaleX(-1);
+  opacity: 0.5;
+}
+/*
+ * A small dot at the leading edge of the arc. Lives as a sibling of the
+ * masked ring (inside `#boot-loader-disc`) so the radial-gradient mask
+ * doesn't clip it. The `rotate(...) translateY(-50%)` recipe orbits the
+ * dot around the disc centre: at progress 0 it sits at 12 o'clock; the
+ * negative rotation grows it anticlockwise to match the arc.
+ */
+#boot-loader-dot {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: var(--boot-loader-dot-size);
+  height: var(--boot-loader-dot-size);
+  margin: calc(var(--boot-loader-dot-size) / -2) 0 0 calc(var(--boot-loader-dot-size) / -2);
+  border-radius: 50%;
+  background: currentcolor;
+  opacity: 0.5;
+  /*
+   * Orbit radius = `disc/2 - line/2` so the dot's centre lands on the solid
+   * line's centre rather than on the disc's outer edge (the line lives in
+   * the outermost `--boot-loader-line-thickness` of the disc).
+   */
+  transform: rotate(calc(var(--boot-loader-bar-progress, 0) * -3.6deg))
+    translateY(calc(var(--boot-loader-disc-size) / -2 + var(--boot-loader-line-thickness) / 2));
+  transition: opacity 200ms ease-out;
+}
+/*
+ * The driver sets `data-progress-active` on `#boot-loader-disc` while
+ * progress is strictly between 0 and 1, hiding the dot at the empty (0%)
+ * and full (100%) ring states where it would either sit on a bare ring or
+ * coincide with the start of the arc.
+ */
+#boot-loader-disc[data-progress-active] #boot-loader-dot {
+  opacity: 0.5;
+}
+#boot-loader-status {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  /*
+   * Sit just below the centered disc — half the disc plus the configured gap.
+   */
+  transform: translate(0, calc(var(--boot-loader-disc-size) / 2 + var(--boot-loader-status-gap)));
+  /*
+   * Slightly de-emphasised vs body text so the brand mark + ring stay the
+   * dominant focus, but high enough to remain legible on both light and dark
+   * backgrounds without a custom palette.
+   */
+  opacity: 0.5;
+  /*
+   * Terminal-style log viewport (3 rows at the default `line-height`) over
+   * a vertically-stacked track of every status the driver has emitted. The
+   * track is bottom-anchored via `justify-content: flex-end` so the newest
+   * line always sits on the last visible row, older lines stack above it,
+   * and anything that doesn't fit is clipped at the top by
+   * `overflow: hidden`. The driver runs a FLIP-style transform animation
+   * per append so each new line slides up from below the bottom edge —
+   * independent of any `scroll-behavior` smooth-scroll support, which
+   * Playwright/headless Chrome strips even from spec-compliant
+   * `scrollTo({ behavior: 'smooth' })` calls.
+   */
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 4.5em;
+  line-height: 1.5;
+  letter-spacing: 0.01em;
+  /*
+   * Fixed-width digits so the `(i/n)` counter on range-bearing status
+   * updates ("Loading plugins (12/80)") doesn't jitter as the index
+   * ticks through different glyph widths.
+   */
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  overflow: hidden;
+}
+#boot-loader-status-fade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 32px;
+  background: linear-gradient(to bottom, var(--boot-loader-bg-light, #fafafa), transparent);
+  z-index: 1;
+}
+@media (prefers-color-scheme: dark) {
+  #boot-loader-status-fade {
+    background: linear-gradient(to bottom, var(--boot-loader-bg-dark, #0a0a0a), transparent);
+  }
+}
+/*
+ * Track of every appended `.boot-loader-status-line`. The driver writes
+ * `--boot-loader-line` (0 = first line visible, 1 = second, …) on this
+ * element and the `transform` interpolates because `--boot-loader-line` is
+ * registered as a typed `<number>` custom property below.
+ */
+#boot-loader-status-track {
+  display: flex;
+  flex-direction: column;
+  /*
+   * Resting transform is `translateY(0)` — the bottom-anchored flex
+   * parent already positions the newest line on the last visible row.
+   * On each append the driver does a one-shot FLIP: snap to
+   * `translateY(<lineHeight>px)` with no transition (placing the new
+   * line just below the viewport), force a reflow, then animate back to
+   * 0 so the track rises by one line-height and the new entry slides up
+   * into the bottom row. See `boot-loader.js`.
+   */
+  transform: translateY(0);
+  transition: transform 500ms ease-out;
+}
+/* Honour reduced-motion preferences explicitly — `transition` doesn't auto-respect it. */
+@media (prefers-reduced-motion: reduce) {
+  #boot-loader-status-track {
+    transition: none;
+  }
+}
+.boot-loader-status-line {
+  flex: 0 0 auto;
+  height: 1.5em;
+  white-space: nowrap;
+}

package/src/vite-plugin/boot-loader/boot-loader.js ADDED Viewed

@@ -0,0 +1,325 @@
+//
+// Copyright 2026 DXOS.org
+//
+// Inline driver script — injected into the host's `<body>` by `bootLoaderPlugin`.
+// Runs before the module bundle is fetched, so the host can observe `boot:html-parsed`
+// and update the visible status from `main.tsx` between phases.
+//
+// The loader has two host-driven states (plus an unobserved idle state on
+// script entry that's promoted automatically — there's no API to opt out of
+// motion on cold load, by design):
+//   - State 1 (slow tick):  auto-entered the moment the inline script runs;
+//                           asymptotic creep toward `STATE_1_ASYMPTOTE`%.
+//   - State 2 (progress):   host-driven, value supplied to `progress(fraction)`.
+//                           The creep stays alive in state 2 too, with a
+//                           ceiling that climbs `STATE_2_BUMP` percent ahead
+//                           of the most recent `progress()` call (capped at
+//                           `ABSOLUTE_CEILING`). Between sparse host updates
+//                           the ring keeps inching forward toward that
+//                           ceiling, so a long activation gap doesn't read
+//                           as a frozen disc.
+//
+// `window.__bootLoader.status(text)`        updates the visible status line.
+// `window.__bootLoader.progress(fraction)`  enter state 2 with `fraction` ∈ [0, 1].
+// `window.__bootLoader.dismiss()`           remove the loader DOM (terminal).
+//
+// Kept ES5-flavoured so the bundler never has to touch it.
+(function () {
+  performance.mark('boot:html-parsed');
+  // Asymptotic creep — `next = raw + (ceiling - raw) * creepRate` per tick,
+  // so the var eases toward `ceiling` and never quite reaches it.
+  var CREEP_TICK_MS = 100;
+  // State 1 creep is a "we're alive" hint before any real progress lands,
+  // so it eases gently toward a low asymptote.
+  var STATE_1_RATE = 0.04;
+  var STATE_1_ASYMPTOTE = 20;
+  // State 2 creep bridges the gap between sparse `progress()` calls.
+  // Tuning is a trade-off:
+  //   - Larger `STATE_2_RATE` → fills faster, but reaches the ceiling
+  //     sooner and then sits idle (looks "paused").
+  //   - Larger `STATE_2_BUMP` → ring leads further ahead of the host's
+  //     last reported value, so subsequent host updates feel "behind"
+  //     until they cross the lead.
+  // Current values aim for continuous-but-modest motion through a ~5 s
+  // activation silence: 50 % → ~64 % over 5 s, ceiling at host + 15 % so
+  // real progress can catch up via `Math.max` without big jumps.
+  var STATE_2_RATE = 0.05;
+  var STATE_2_BUMP = 15;
+  // Ring never auto-creeps past this — keeps the user from interpreting the
+  // ring as "almost done" while the host hasn't actually said so.
+  var ABSOLUTE_CEILING = 90;
+  // 0 = idle (transient — auto-promoted to 1 immediately below),
+  // 1 = slow tick, 2 = host-driven progress.
+  var state = 0;
+  var creepHandle = null;
+  var creepCeiling = STATE_1_ASYMPTOTE;
+  var creepRate = STATE_1_RATE;
+  var trace = /(?:^|[?&])trace=1(?:&|$)/.test(window.location.search);
+  var start = Date.now();
+  var last = Date.now();
+  var timings = [];
+  function ensureCreep() {
+    if (creepHandle != null) {
+      return;
+    }
+    creepHandle = setInterval(function () {
+      var element = document.getElementById('boot-loader-disc');
+      if (!element) {
+        return;
+      }
+      var raw = parseFloat(element.style.getPropertyValue('--boot-loader-bar-progress')) || 0;
+      // Already at (or above) the ceiling — nothing to do this tick.
+      if (raw >= creepCeiling - 0.1) {
+        return;
+      }
+      var next = raw + (creepCeiling - raw) * creepRate;
+      element.style.setProperty('--boot-loader-bar-progress', String(next));
+      if (next > 0 && next < 100) {
+        element.setAttribute('data-progress-active', '');
+      }
+    }, CREEP_TICK_MS);
+  }
+  function stopCreep() {
+    if (creepHandle != null) {
+      clearInterval(creepHandle);
+      creepHandle = null;
+    }
+  }
+  // Read the element's *current animated* translateY in pixels — the
+  // interpolated value mid-transition, not the property as last written.
+  // `getComputedStyle(...).transform` returns a `matrix(...)` /
+  // `matrix3d(...)` string with the live, interpolated translation.
+  // Used by the status FLIP so successive appends chain off the in-flight
+  // position instead of yanking the track back to a fixed invert target.
+  function readTranslateY(element) {
+    var computed = window.getComputedStyle(element).transform;
+    if (!computed || computed === 'none') {
+      return 0;
+    }
+    var match = computed.match(/matrix.*\(([^)]+)\)/);
+    if (!match) {
+      return 0;
+    }
+    var values = match[1].split(',');
+    // 2D `matrix(a, b, c, d, tx, ty)` → ty at index 5.
+    // 3D `matrix3d(...)` (16 entries) → ty at index 13.
+    if (values.length === 6) {
+      return parseFloat(values[5]) || 0;
+    }
+    if (values.length === 16) {
+      return parseFloat(values[13]) || 0;
+    }
+    return 0;
+  }
+  window.__bootLoader = {
+    /**
+     * Update the visible status line. The caller owns formatting — the
+     * loader just renders `humanized` and records the structured fields
+     * for the trace. Idempotent on the full structured payload: equal
+     * back-to-back updates are a no-op, but two updates with the same
+     * visible text and different `event` / `module` ids still produce a
+     * fresh trace entry so the timeline can distinguish those transitions.
+     *
+     * Payload: `{ event?, module?, humanized, range? }`.
+     *   - `humanized`: the exact string to display (e.g. "Loading framework…",
+     *     "Activating Observability: react-surface").
+     *   - `event` / `module`: optional raw ids for the trace, when the
+     *     update originates from an activation transition.
+     *   - `range`: optional `{ index, total }` for ticking progress within
+     *     a single phase (e.g. "Loading plugins (12/80)"). When present,
+     *     the loader replaces the current line in place rather than
+     *     appending a new one — so 80 plugin loads produce one trace
+     *     entry with an updating suffix instead of 80 separate lines.
+     */
+    status: function (payload) {
+      if (!payload || typeof payload !== 'object') {
+        return;
+      }
+      var humanized = payload.humanized || '';
+      var event = payload.event || null;
+      var moduleId = payload.module || null;
+      var range =
+        payload.range && typeof payload.range.index === 'number' && typeof payload.range.total === 'number'
+          ? payload.range
+          : null;
+      // Display text appends the (i/n) suffix when a range is provided so
+      // the same `humanized` string can tick through a count without the
+      // caller having to format it.
+      var displayText = range ? humanized + ' (' + range.index + '/' + range.total + ')' : humanized;
+      // Compare against the previous entry's structured fields, not the
+      // DOM text alone — two different transitions can humanize to the same
+      // visible string (e.g. an event-level "Activating Foo" followed by a
+      // module-level "Activating Foo: react-surface" reduced to "Activating
+      // Foo" by a custom formatter), and the trace should still carry both.
+      var previous = timings.length > 0 ? timings[timings.length - 1] : null;
+      if (
+        previous &&
+        previous.text === displayText &&
+        (previous.event || null) === event &&
+        (previous.module || null) === moduleId
+      ) {
+        return;
+      }
+      if (range && previous) {
+        // Range tick — collapse into the previous trace entry instead of
+        // appending. The trace timeline records one transition per phase,
+        // not one per `(i/n)` step, keeping the boot trace compact.
+        previous.text = displayText;
+      } else {
+        if (previous) {
+          previous.duration = Date.now() - last;
+        }
+        var entry = { text: displayText };
+        if (event) {
+          entry.event = event;
+        }
+        if (moduleId) {
+          entry.module = moduleId;
+        }
+        timings.push(entry);
+        last = Date.now();
+      }
+      var element = document.getElementById('boot-loader-status');
+      if (!element) {
+        return;
+      }
+      // The track holds every appended status line. On the first
+      // `status()` call we hoist any pre-existing lines (the initial
+      // status injected by `bootLoaderPlugin`) into the track so the
+      // CSS `transform` translation applies uniformly.
+      var track = document.getElementById('boot-loader-status-track');
+      var lastLine = track.lastElementChild;
+      if (range && lastLine) {
+        // Range tick — replace the current visible line's text in place,
+        // no slide. The line keeps its position so the (i/n) counter just
+        // updates over the same row.
+        lastLine.textContent = displayText;
+      } else {
+        // Fresh phase (or first line) — append to the bottom-anchored track
+        // (see `#boot-loader-status`'s `justify-content: flex-end` in
+        // `boot-loader.css`) and run a FLIP-style slide so the new line
+        // rises from below the viewport's bottom edge instead of snapping
+        // into place. The flex layout handles which lines are visible at
+        // rest (newest on the last row, older lines stacked above, anything
+        // that overflows is clipped at the top by `overflow: hidden`), so
+        // this code only owns the animation.
+        var line = document.createElement('div');
+        line.className = 'boot-loader-status-line';
+        line.textContent = displayText;
+        // Read the track's current animated translateY before mutating
+        // anything. When a previous slide is still in flight this is
+        // somewhere in (0, lineHeight]; when the track is at rest it's 0.
+        // Reading via `getComputedStyle` (not `style.transform`) gives the
+        // interpolated mid-transition value, which is what the chain math
+        // below needs.
+        var currentY = readTranslateY(track);
+        // Measure the line height from a sibling when one exists — the
+        // newly appended line may not have laid out yet at the moment of
+        // the bounding-rect read in some engines. Pixels (not `em`) because
+        // some engines (and headless Chromium) don't reliably interpolate
+        // `transform` between `em`-valued translateY's.
+        var probe = track.lastElementChild;
+        track.appendChild(line);
+        var lineHeight = (probe || line).getBoundingClientRect().height || 0;
+        // Invert: snap the track down to `currentY + lineHeight` with no
+        // transition. The `+ lineHeight` is the usual FLIP offset (the
+        // track just grew by a row, so this keeps every existing line at
+        // the pixel position it had before the append). The `+ currentY`
+        // is the chain term — if a previous slide was still in flight we
+        // pin the track to its in-flight position instead of yanking it
+        // back to its pre-animation start, so the previous line keeps
+        // rising smoothly through the append rather than jumping down.
+        // Then force a reflow and animate to translateY(0); the track
+        // covers the full `currentY + lineHeight` distance in one ride
+        // and bursts of rapid updates read as a continuous scroll rather
+        // than overlapping snaps.
+        track.style.transition = 'none';
+        track.style.transform = `translateY(${currentY + lineHeight}px)`;
+        void track.offsetHeight;
+        track.style.transition = '';
+        track.style.transform = 'translateY(0)';
+      }
+    },
+    /**
+     * Enter state 2 (host-driven progress) — set the determinate ring to
+     * `fraction` ∈ [0, 1]. Invalid / negative / non-finite values clamp to
+     * 0 (the empty ring) rather than letting `NaN`/`Infinity` slip into
+     * `--boot-loader-bar-progress`, which CSS would treat as invalid and
+     * silently reset to the 0% var() default. The state-1 creep timer is
+     * left running with a new ceiling so the ring keeps inching forward
+     * between host updates.
+     *
+     * The ring never regresses: if the requested value is below the
+     * current var (e.g. the host's first call is `progress(0)` while the
+     * creep had already reached ~12%), the existing value is held. The
+     * host's progress catches up once it exceeds the held floor, so the
+     * ring's motion stays monotonic across the state-1 → state-2 boundary.
+     */
+    progress: function (fraction) {
+      state = 2;
+      // Set the var on the disc so both the masked ring and the orbiting
+      // dot (siblings inside `#boot-loader-disc`) inherit the same value.
+      var element = document.getElementById('boot-loader-disc');
+      if (!element) {
+        return;
+      }
+      // Flip into "host-driven" mode the first time `progress()` lands —
+      // CSS keys the brand mark's grayscale→color transition off this
+      // attribute, so the mark eases from monochrome to full palette as
+      // real progress starts arriving.
+      element.setAttribute('data-host-driven', '');
+      var clamped = typeof fraction !== 'number' || !isFinite(fraction) || fraction < 0 ? 0 : Math.min(1, fraction);
+      var requestedPct = clamped * 100;
+      var currentPct = parseFloat(element.style.getPropertyValue('--boot-loader-bar-progress')) || 0;
+      var nextPct = Math.max(currentPct, requestedPct);
+      element.style.setProperty('--boot-loader-bar-progress', String(nextPct));
+      // Switch the ongoing creep to its state-2 cadence — faster ease and
+      // a larger lead bump so the ring keeps moving while the host is
+      // silent (e.g. composer-app's "Starting Composer…" stretch while the
+      // first slow plugin module activates).
+      creepRate = STATE_2_RATE;
+      var newCeiling = Math.min(nextPct + STATE_2_BUMP, ABSOLUTE_CEILING);
+      if (newCeiling > creepCeiling) {
+        creepCeiling = newCeiling;
+      }
+      ensureCreep();
+      // Toggle the leading-edge dot only while progress is strictly in (0, 1).
+      if (nextPct > 0 && nextPct < 100) {
+        element.setAttribute('data-progress-active', '');
+      } else {
+        element.removeAttribute('data-progress-active');
+      }
+    },
+    dismiss: function () {
+      stopCreep();
+      var element = document.getElementById('boot-loader');
+      if (element && element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+      if (trace) {
+        if (timings.length > 0) {
+          timings[timings.length - 1].duration = Date.now() - last;
+        }
+        console.log(JSON.stringify({ total: Date.now() - start, timings }, null, 2));
+      }
+    },
+  };
+  // Auto-promote idle → slow tick the moment this inline script executes,
+  // so the disc starts moving on the very first frame the loader paints.
+  // The host calls `progress()` later to take over.
+  state = 1;
+  ensureCreep();
+})();

package/src/vite-plugin/boot-loader/index.ts ADDED Viewed

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+export * from './loader';