goey-toast 0.4.0 → 0.5.0

package/README.md

@@ -44,6 +44,24 @@ npx shadcn@latest add https://goey-toast.vercel.app/r/goey-toaster.json
 
 This installs a thin wrapper component at `components/ui/goey-toaster.tsx` and auto-installs the `goey-toast` and `framer-motion` packages.
 
+### AI Agents (Skill)
+
+goey-toast ships a bundled [Agent Skill](https://www.skills.sh/) (`SKILL.md`) so coding agents (Claude Code, Cursor, etc.) know how to install and use it correctly — the required `<GooeyToaster />` mount, the `styles.css` import, and the full API.
+
+Install from the skills.sh registry:
+
+```bash
+npx skills add anl331/goey-toast
+```
+
+Or copy the skill into your project from the package itself:
+
+```bash
+npx goey-toast add-skill            # -> .claude/skills/goey-toast/SKILL.md
+npx goey-toast add-skill --agents   # also append an AGENTS.md pointer
+npx goey-toast add-skill --dir .cursor/skills/goey-toast
+```
+
 ### Peer Dependencies
 
 goey-toast requires the following peer dependencies:
@@ -224,6 +242,7 @@ Props for the `<GooeyToaster />` component.
 | `queueOverflow` | `'drop-oldest' \| 'drop-newest'`   | `'drop-oldest'`  | Queue overflow strategy                       |
 | `dir`        | `'ltr' \| 'rtl'`                     | `'ltr'`          | Layout direction                              |
 | `swipeToDismiss` | `boolean`                         | `true`           | Enable swipe-to-dismiss on mobile             |
+| `showTimestamp` | `boolean`                         | `true`           | Show/hide timestamp on all toasts globally     |
 
 ### `GooeyPromiseData<T>`
 
@@ -439,10 +458,12 @@ The close button inherits the toast's border and fill color styling. Hidden duri
 
 ### Hiding Timestamps
 
-Hide the timestamp from toasts:
-
 ```tsx
+// Per-toast: hide timestamp for this toast only
 gooeyToast.success('Saved', { showTimestamp: false })
+
+// Globally: hide timestamp for all toasts
+<GooeyToaster showTimestamp={false} />
 ```
 
 ## Exports

package/bin/cli.mjs

@@ -0,0 +1,110 @@
+#!/usr/bin/env node
+// goey-toast CLI — install the agent skill into a project so coding agents
+// (Claude Code, Cursor, etc.) know how to install and use goey-toast.
+//
+// Usage:
+//   npx goey-toast add-skill            # -> ./.claude/skills/goey-toast/SKILL.md
+//   npx goey-toast add-skill --agents   # also write ./AGENTS.md pointer
+//   npx goey-toast add-skill --dir .codex/skills
+//   npx goey-toast print-skill          # print SKILL.md to stdout
+
+import { fileURLToPath } from 'node:url'
+import { dirname, join, resolve } from 'node:path'
+import {
+  mkdirSync,
+  copyFileSync,
+  readFileSync,
+  writeFileSync,
+  existsSync,
+} from 'node:fs'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const SKILL_SRC = resolve(__dirname, '..', 'skills', 'goey-toast', 'SKILL.md')
+
+const argv = process.argv.slice(2)
+const cmd = argv[0]
+
+function getFlag(name) {
+  const i = argv.indexOf(`--${name}`)
+  if (i === -1) return undefined
+  const next = argv[i + 1]
+  return next && !next.startsWith('--') ? next : true
+}
+
+function readSkill() {
+  if (!existsSync(SKILL_SRC)) {
+    console.error(`goey-toast: skill source not found at ${SKILL_SRC}`)
+    process.exit(1)
+  }
+  return readFileSync(SKILL_SRC, 'utf8')
+}
+
+function addSkill() {
+  const dir = typeof getFlag('dir') === 'string'
+    ? getFlag('dir')
+    : '.claude/skills/goey-toast'
+  const dest = resolve(process.cwd(), dir)
+  mkdirSync(dest, { recursive: true })
+  const out = join(dest, 'SKILL.md')
+  copyFileSync(SKILL_SRC, out)
+  console.log(`✓ goey-toast skill installed: ${out}`)
+
+  if (getFlag('agents')) {
+    const agentsPath = resolve(process.cwd(), 'AGENTS.md')
+    const pointer =
+      '\n## goey-toast\n\n' +
+      `See \`${dir}/SKILL.md\` for how to install and use goey-toast ` +
+      '(gooey morphing React toasts). Mount `<GooeyToaster />` once and ' +
+      "import `'goey-toast/styles.css'` at the app entry.\n"
+    if (existsSync(agentsPath)) {
+      const cur = readFileSync(agentsPath, 'utf8')
+      if (!cur.includes('## goey-toast')) {
+        writeFileSync(agentsPath, cur.trimEnd() + '\n' + pointer)
+        console.log(`✓ appended goey-toast pointer to ${agentsPath}`)
+      } else {
+        console.log('• AGENTS.md already references goey-toast — skipped')
+      }
+    } else {
+      writeFileSync(agentsPath, '# AGENTS.md\n' + pointer)
+      console.log(`✓ created ${agentsPath}`)
+    }
+  }
+
+  console.log('\nNext: restart your agent so it picks up the new skill.')
+}
+
+function help() {
+  console.log(`goey-toast CLI
+
+Commands:
+  add-skill              Install the agent skill into ./.claude/skills/goey-toast
+    --dir <path>         Custom target dir (e.g. .codex/skills, .cursor/skills)
+    --agents             Also add/append an AGENTS.md pointer
+  print-skill            Print SKILL.md to stdout
+  help                   Show this help
+
+Examples:
+  npx goey-toast add-skill
+  npx goey-toast add-skill --agents
+  npx goey-toast add-skill --dir .cursor/skills/goey-toast
+`)
+}
+
+switch (cmd) {
+  case 'add-skill':
+    addSkill()
+    break
+  case 'print-skill':
+    process.stdout.write(readSkill())
+    break
+  case undefined:
+  case 'help':
+  case '--help':
+  case '-h':
+    help()
+    break
+  default:
+    console.error(`goey-toast: unknown command "${cmd}"\n`)
+    help()
+    process.exit(1)
+}

package/dist/index.cjs

@@ -86,6 +86,13 @@ function setGooeyShowProgress(show) {
 function getGooeyShowProgress() {
   return _showProgress;
 }
+var _showTimestamp = true;
+function setGooeyShowTimestamp(show) {
+  _showTimestamp = show;
+}
+function getGooeyShowTimestamp() {
+  return _showTimestamp;
+}
 var _closeButton = false;
 function setGooeyCloseButton(value) {
   _closeButton = value;
@@ -341,23 +348,23 @@ function registerSonnerObserver(ol, callback) {
   let entry = observerRegistry.get(ol);
   if (!entry) {
     const callbacks = /* @__PURE__ */ new Set();
-    let applying = false;
-    const observer = new MutationObserver(() => {
-      if (applying) return;
-      applying = true;
-      requestAnimationFrame(() => {
-        callbacks.forEach((cb) => cb());
-        requestAnimationFrame(() => {
-          applying = false;
-        });
-      });
-    });
-    observer.observe(ol, {
+    const observeOptions = {
       attributes: true,
       attributeFilter: ["style", "data-visible"],
       subtree: true,
       childList: true
+    };
+    const observer = new MutationObserver(() => {
+      observer.disconnect();
+      try {
+        for (const cb of callbacks) {
+          cb();
+        }
+      } finally {
+        observer.observe(ol, observeOptions);
+      }
     });
+    observer.observe(ol, observeOptions);
     entry = { observer, callbacks };
     observerRegistry.set(ol, entry);
   }
@@ -385,17 +392,10 @@ function syncSonnerHeights(wrapperEl, includeOffsets = false) {
     const h = content ? content.getBoundingClientRect().height : 0;
     return h > 0 ? h : PH;
   });
-  const isExpanded = includeOffsets && toasts[0]?.getAttribute("data-expanded") === "true";
-  if (isExpanded) {
-    for (const t of toasts) t.style.setProperty("transition", "none", "important");
-  }
   for (let i = 0; i < toasts.length; i++) {
     toasts[i].style.setProperty("--initial-height", `${heights[i]}px`);
   }
   if (!includeOffsets) {
-    if (isExpanded) {
-      for (const t of toasts) t.style.removeProperty("transition");
-    }
     return;
   }
   const gapStr = getComputedStyle(ol).getPropertyValue("--gap").trim();
@@ -411,10 +411,6 @@ function syncSonnerHeights(wrapperEl, includeOffsets = false) {
       runningOffset += heights[i] + gap;
     }
   }
-  if (isExpanded) {
-    void ol.offsetHeight;
-    for (const t of toasts) t.style.removeProperty("transition");
-  }
 }
 function memoizePath(fn) {
   let lastArgs = null;
@@ -545,7 +541,7 @@ var GooeyToast = ({
   preset,
   spring: springProp,
   bounce: bounceProp,
-  showTimestamp = true,
+  showTimestamp: showTimestampProp,
   showProgress: showProgressProp,
   toastId
 }) => {
@@ -563,6 +559,7 @@ var GooeyToast = ({
   const useSpring = springProp ?? presetConfig?.spring ?? getGooeySpring();
   const bounceVal = bounceProp ?? presetConfig?.bounce ?? getGooeyBounce() ?? 0.4;
   const showProgress = showProgressProp ?? getGooeyShowProgress();
+  const showTimestamp = showTimestampProp ?? getGooeyShowTimestamp();
   const [actionSuccess, setActionSuccess] = react.useState(null);
   const [dismissing, setDismissing] = react.useState(false);
   const [progressKey, setProgressKey] = react.useState(0);
@@ -1767,7 +1764,8 @@ function GooeyToaster({
   closeOnEscape = true,
   maxQueue = Infinity,
   queueOverflow = "drop-oldest",
-  showProgress = false
+  showProgress = false,
+  showTimestamp = true
 }) {
   const presetConfig = preset ? animationPresets[preset] : void 0;
   const resolvedSpring = spring ?? presetConfig?.spring ?? true;
@@ -1820,6 +1818,9 @@ function GooeyToaster({
   react.useEffect(() => {
     setGooeyCloseButton(closeButton ?? false);
   }, [closeButton]);
+  react.useEffect(() => {
+    setGooeyShowTimestamp(showTimestamp);
+  }, [showTimestamp]);
   react.useEffect(() => {
     let expandObs = null;
     let currentOl = null;