@usequeek/theme-kit 0.1.2 → 0.1.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Queek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/hooks/use-announcement.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { HeaderProps } from '../types/theme';
+import { splitAnnouncement } from '../utils/announcement';
+
+const ROTATE_EVERY_MS = 6000;
+
+/**
+ * Turns the stored announcement into the rotating one every header receives:
+ * `text` is the message currently showing (so a header that only ever read
+ * `text` rotates with no change), `messages`/`index`/`next`/`prev` let a
+ * header draw its own pager (roast). Auto-advances while there is more than
+ * one message; a manual step restarts the clock so the message just chosen
+ * gets its full turn.
+ */
+export function useRotatingAnnouncement(announcement: HeaderProps['announcement']): HeaderProps['announcement'] {
+  const messages = announcement?.enabled ? splitAnnouncement(announcement.text) : [];
+  const count = messages.length;
+  const [index, setIndex] = useState(0);
+
+  const next = useCallback(() => setIndex((i) => (count > 0 ? (i + 1) % count : 0)), [count]);
+  const prev = useCallback(() => setIndex((i) => (count > 0 ? (i - 1 + count) % count : 0)), [count]);
+
+  useEffect(() => {
+    if (count < 2) return undefined;
+    const timer = window.setInterval(next, ROTATE_EVERY_MS);
+    return () => window.clearInterval(timer);
+  }, [count, index, next]);
+
+  if (!announcement) return announcement;
+
+  const current = count > 0 ? index % count : 0;
+
+  return {
+    ...announcement,
+    text: messages[current] ?? '',
+    messages,
+    index: current,
+    next,
+    prev,
+  };
+}

package/index.ts

@@ -47,6 +47,7 @@ export * from './utils/contact-location';
 export * from './utils/benefit-icon';
 export * from './utils/video-embed';
 export * from './utils/match-variant';
+export * from './utils/announcement';
 
 // Rendering a theme's own demo.json — what makes local preview possible.
 export * from './demo';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@usequeek/theme-kit",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
-  "license": "UNLICENSED",
+  "license": "MIT",
   "description": "The framework a Queek storefront theme is built against.",
   "repository": {
     "type": "git",
@@ -24,7 +24,8 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.css",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "peerDependencies": {
     "next": ">=15",

package/types/theme.ts

@@ -82,10 +82,21 @@ export interface SubscribeFormProps {
 export interface HeaderProps {
   menu: MenuItem[];
   logo?: string | null;
+  /**
+   * `text` is the message currently showing — the shell rotates it through
+   * the `|`/newline-separated list the vendor wrote (see
+   * hooks/use-announcement). A header that wants its own pager reads
+   * `messages`/`index` and calls `next`/`prev`; outside the shell (style
+   * guide, variant previews) only `text` is set.
+   */
   announcement?: {
     enabled: boolean;
     text: string;
     link?: string | null;
+    messages?: string[];
+    index?: number;
+    next?: () => void;
+    prev?: () => void;
   } | null;
   /** Site-wide header icon visibility — all default true (see config.header.show_*). */
   showSearch?: boolean;

package/utils/announcement.ts

@@ -0,0 +1,15 @@
+/**
+ * The announcement bar is ONE text field on the backend
+ * (`header.announcement.text`). A vendor writes several messages into it
+ * separated by `|` or a line break and the bar rotates them; a single
+ * message renders static. Roast's masthead set the convention; the merchant
+ * editor and Qee teach it. Split here, once, so every theme rotates the same
+ * list — a theme-local split meant the other themes showed the literal pipes
+ * after a switch.
+ */
+export function splitAnnouncement(text: string | null | undefined): string[] {
+  return (text ?? '')
+    .split(/\s*(?:\||\n)\s*/)
+    .map((s) => s.trim())
+    .filter(Boolean);
+}