@flamingo-stack/openframe-frontend-core 0.0.698-2527.7789.1 → 0.0.698

package/dist/utils/path-pattern.d.ts

@@ -0,0 +1,5 @@
+export declare function isValidPathPattern(pattern: string): boolean;
+export declare function matchesPathPattern(pathname: string, pattern: string): boolean;
+/** True when the pathname matches any pattern of the list. */
+export declare function pathMatchesAny(pathname: string, patterns: readonly string[] | null | undefined): boolean;
+//# sourceMappingURL=path-pattern.d.ts.map

package/dist/utils/path-pattern.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"path-pattern.d.ts","sourceRoot":"","sources":["../../src/utils/path-pattern.ts"],"names":[],"mappings":"AAmBA,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAE3D;AAED,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAE7E;AAED,8DAA8D;AAC9D,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAExG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.698-2527.7789.1",
+  "version": "0.0.698",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/announcement-bar.tsx

@@ -13,6 +13,7 @@ import {
 } from '../utils/announcement-storage';
 import { getAppType } from '../utils/app-config';
 import { pickReadableTextColor } from '../utils/color-analysis';
+import { pathMatchesAny } from '../utils/path-pattern';
 import { EntityIcon } from './icon-display';
 import { AnnouncementBarView } from './ui/announcement-bar-view';
 import { Button } from './ui/button';
@@ -141,8 +142,8 @@ export function AnnouncementBar({
 
   // Preview always mirrors the draft directly (storage is not consulted there).
   // A page that shows the news itself (a hero's news pill) is listed in the
-  // announcement's `excluded_paths`; the bar stays collapsed there.
-  const excludedHere = pathname != null && (announcement?.excluded_paths ?? []).includes(pathname);
+  // announcement's `excluded_paths` (path patterns); the bar stays collapsed there.
+  const excludedHere = pathname != null && pathMatchesAny(pathname, announcement?.excluded_paths);
   const expanded = previewMode
     ? announcement != null
     : announcement != null && expandedState && !dismissed && !excludedHere;

package/src/hooks/__tests__/use-scenario-player.test.tsx

@@ -188,6 +188,54 @@ describe('useScenarioPlayer', () => {
     expect(result.current.step).toBe(7);
   });
 
+  it('takes its first step within a third of a second of becoming playable, then keeps the beat', () => {
+    stubReducedMotion(false);
+    const { result, rerender } = renderHook(({ enabled }) => useScenarioPlayer({ ...OPTIONS, enabled }), {
+      initialProps: { enabled: false },
+    });
+    rerender({ enabled: true });
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    expect(result.current.step).toBe(1);
+    // The next one takes a whole beat.
+    act(() => {
+      vi.advanceTimersByTime(1600);
+    });
+    expect(result.current.step).toBe(1);
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+    expect(result.current.step).toBe(2);
+
+    // Coming back on screen is the same: it moves at once.
+    rerender({ enabled: false });
+    rerender({ enabled: true });
+    act(() => {
+      vi.advanceTimersByTime(300);
+    });
+    expect(result.current.step).toBe(3);
+  });
+
+  it('still holds a finished scenario its full time when it becomes playable', () => {
+    stubReducedMotion(false);
+    const { result, rerender } = renderHook(
+      ({ enabled }) => useScenarioPlayer({ ...OPTIONS, enabled, startAtEnd: true }),
+      {
+        initialProps: { enabled: false },
+      },
+    );
+    rerender({ enabled: true });
+    act(() => {
+      vi.advanceTimersByTime(4000);
+    });
+    expect(result.current).toMatchObject({ scenario: 0, step: 8 });
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+    expect(result.current).toMatchObject({ scenario: 1, step: 0 });
+  });
+
   it('parks on the last step under reduced motion and never advances', () => {
     stubReducedMotion(true);
     const { result } = renderHook(() => useScenarioPlayer(OPTIONS));

package/src/hooks/use-scenario-player.ts

@@ -1,8 +1,16 @@
 'use client';
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useAutoplay } from './ui/use-autoplay';
 
+/**
+ * How soon the first step follows the moment the demo becomes playable (it
+ * scrolled into view, the tab came back, play was pressed). A demo that sits
+ * still for a whole step after it appears reads as broken; one that moves
+ * within a third of a second reads as responding to you.
+ */
+const START_MS = 300;
+
 export interface UseScenarioPlayerOptions {
   /** How many scenarios (tabs) the stage cycles through. */
   scenarioCount: number;
@@ -55,6 +63,9 @@ export interface UseScenarioPlayerResult {
  * not paused, motion allowed. Under reduced motion it parks on the last step
  * of the current scenario, and every scenario can still be read by choosing it.
  *
+ * The moment it becomes playable its first step follows within `START_MS`,
+ * not a whole step later; from there every step takes `stepMs`.
+ *
  * A visitor's own choice (`go`, `setStep`) moves the clock there and un-pauses
  * it; the rotation carries on from that point.
  */
@@ -79,9 +90,18 @@ export function useScenarioPlayer({
 
   const playing = auto.playing && scenarioCount > 0;
 
+  // True from the moment it becomes playable until its first tick has been scheduled.
+  const starting = useRef(false);
+  const wasPlaying = useRef(false);
   useEffect(() => {
+    if (playing && !wasPlaying.current) starting.current = true;
+    wasPlaying.current = playing;
     if (!playing) return undefined;
     const atEnd = rawStep >= lastStep;
+    // The first step after it becomes playable comes quickly. A finished
+    // scenario still holds its full time: it is there to be read.
+    const quickStart = starting.current && !atEnd;
+    starting.current = false;
     const timer = setTimeout(
       () => {
         if (atEnd) {
@@ -91,7 +111,7 @@ export function useScenarioPlayer({
           setRawStep(current => Math.min(current, lastStep) + 1);
         }
       },
-      atEnd ? holdMs : stepMs,
+      atEnd ? holdMs : quickStart ? Math.min(START_MS, stepMs) : stepMs,
     );
     return () => clearTimeout(timer);
   }, [playing, rawStep, lastStep, stepMs, holdMs, scenario, scenarioCount]);

package/src/utils/__tests__/path-pattern.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { isValidPathPattern, matchesPathPattern, pathMatchesAny } from '../path-pattern';
+
+describe('path patterns', () => {
+  it('a plain path matches itself and nothing longer', () => {
+    expect(matchesPathPattern('/', '/')).toBe(true);
+    expect(matchesPathPattern('/blog', '/')).toBe(false);
+    expect(matchesPathPattern('/blog/post', '/blog')).toBe(false);
+  });
+
+  it('a regular expression matches the whole pathname', () => {
+    expect(matchesPathPattern('/blog/post', '/blog/.*')).toBe(true);
+    expect(matchesPathPattern('/blog', '/blog(/.*)?')).toBe(true);
+    expect(matchesPathPattern('/pricing', '/(pricing|trial)')).toBe(true);
+    expect(matchesPathPattern('/pricing/enterprise', '/(pricing|trial)')).toBe(false);
+  });
+
+  it('a pattern that does not compile is invalid and matches nothing', () => {
+    expect(isValidPathPattern('/blog/(')).toBe(false);
+    expect(matchesPathPattern('/blog/(', '/blog/(')).toBe(false);
+    expect(isValidPathPattern('  ')).toBe(false);
+    expect(isValidPathPattern('/blog/.*')).toBe(true);
+  });
+
+  it('matches against a list', () => {
+    expect(pathMatchesAny('/careers', ['/', '/careers'])).toBe(true);
+    expect(pathMatchesAny('/about', ['/', '/careers'])).toBe(false);
+    expect(pathMatchesAny('/about', null)).toBe(false);
+  });
+});

package/src/utils/index.ts

@@ -460,3 +460,4 @@ export type { ProgramDateFields, ProgramInstant, ProgramMetaRenderers } from './
 
 // Footer copyright line (one owner; never a double period after "Inc.").
 export { copyrightLine } from './copyright-line';
+export * from './path-pattern';

package/src/utils/path-pattern.ts

@@ -0,0 +1,31 @@
+/**
+ * A PATH PATTERN is a regular expression matched against a WHOLE pathname:
+ * `/` matches the home page only, `/blog/.*` every page under the blog,
+ * `/(pricing|trial)` either page. A plain path is a pattern that matches
+ * itself. Used wherever an admin lists the pages something applies to (an
+ * announcement's "hidden on" list).
+ *
+ * The whole pathname must match (the pattern is anchored at both ends), so
+ * `/blog` never matches `/blog/post`. A pattern that does not compile matches
+ * nothing; `isValidPathPattern` lets a form say so before it is saved.
+ */
+function compile(pattern: string): RegExp | null {
+  try {
+    return new RegExp(`^(?:${pattern})$`);
+  } catch {
+    return null;
+  }
+}
+
+export function isValidPathPattern(pattern: string): boolean {
+  return pattern.trim().length > 0 && compile(pattern.trim()) !== null;
+}
+
+export function matchesPathPattern(pathname: string, pattern: string): boolean {
+  return compile(pattern.trim())?.test(pathname) ?? false;
+}
+
+/** True when the pathname matches any pattern of the list. */
+export function pathMatchesAny(pathname: string, patterns: readonly string[] | null | undefined): boolean {
+  return (patterns ?? []).some(pattern => matchesPathPattern(pathname, pattern));
+}