@aidget-community/sticky-todos 0.0.0-stage → 0.1.1

package/agents.md

@@ -0,0 +1,31 @@
+# sticky-todos · 待办事项
+
+## 用途
+
+桌面便签，展示可勾选事项。勾选状态由宿主按 widget id 持久化，重启 aidget 后恢复。
+
+## 可改区域
+
+- `todos`：任务列表容器。每条 `li` 必须保留唯一的 `data-todo-id`，对应一条 `<label>` 和原生 `<input type="checkbox">`。
+- 修改任务后，同步更新标题旁的完成计数总数。
+
+## 存储与权限
+
+- 必须保留 `script` 与 `storage` 权限。
+- 浏览器原生 `localStorage` 在 opaque-origin 沙箱中不可用；脚本只使用异步 `window.aidget.storage`。
+- 持久化 key 为 `todo-checked-v1`，值是 `data-todo-id -> boolean` 的 JSON 字符串。
+- 加载成功后才启用复选框；保存失败时回滚本次勾选，并通过隐藏的 `role=status` 显示“保存失败”。
+- 主窗口预览没有宿主桥时会禁用复选框并显示“预览模式”，这是预期行为。
+- 异步初始化结束后调用 `window.aidget?.ready?.()`。
+
+## 布局
+
+- 窗口固定为 360×260，页面声明 `aidget-surface=none` 并绘制完整便签表面。
+- 顶部 28px 是宿主拖拽区；纸张从 13px 开始，胶带超出纸张上边界且不能被裁剪。
+- 纸面由 `.paper` 负责不规则纸边、水彩纹理和阴影；`.note::before` 是半透明胶带。
+- 纸张纹理使用 `assets/watercolor-paper-texture.png`；不使用 `backdrop-filter`、横线或点阵背景。
+- 任务列表保持单列紧凑排列，与标题间距 18px，底部留 16px。
+
+## 刷新
+
+无定时刷新。状态未恢复时检查 `storage` 权限、宿主存储和底部状态文案。

package/config.json

@@ -0,0 +1,12 @@
+{
+  "id": "sticky-todos",
+  "title": "待办事项",
+  "minHostVersion": "0.1.1",
+  "logo": null,
+  "screenshots": ["assets/screenshot.png"],
+  "platforms": ["macos", "windows", "linux"],
+  "size": { "width": 360, "height": 260 },
+  "dragMode": "all",
+  "permissions": ["script", "storage"],
+  "network": []
+}

package/index.html

@@ -0,0 +1,128 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="aidget-surface" content="none" />
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <main class="note" aria-labelledby="note-title">
+      <div class="paper" aria-hidden="true"></div>
+      <header class="note-head">
+        <h1 id="note-title">待办事项</h1>
+        <p class="count" aria-label="已完成事项"><span data-done-count>0</span><span>/2</span></p>
+      </header>
+
+      <ul class="todos" data-aidget-region="todos">
+        <li data-todo-id="try-checkbox">
+          <label class="todo-option">
+            <input type="checkbox" />
+            <span class="todo-text">点击复选框标记完成，状态会自动保存。</span>
+          </label>
+        </li>
+        <li data-todo-id="ask-agent">
+          <label class="todo-option">
+            <input type="checkbox" />
+            <span class="todo-text">让 Agent 添加、删除或整理待办事项。</span>
+          </label>
+        </li>
+      </ul>
+
+      <span class="visually-hidden" data-storage-status role="status" aria-live="polite"></span>
+    </main>
+
+    <script>
+      const STORAGE_KEY = 'todo-checked-v1';
+      const inputs = Array.from(document.querySelectorAll('[data-todo-id] input'));
+      const status = document.querySelector('[data-storage-status]');
+      const doneCount = document.querySelector('[data-done-count]');
+      const storage = window.aidget && window.aidget.storage;
+      let statusTimer;
+
+      function setStatus(message, isError = false) {
+        window.clearTimeout(statusTimer);
+        status.textContent = message;
+        status.classList.toggle('is-error', isError);
+        if (!isError && message === '已自动保存') {
+          statusTimer = window.setTimeout(() => {
+            status.textContent = '勾选后自动保存';
+          }, 1600);
+        }
+      }
+
+      function setDisabled(disabled) {
+        for (const input of inputs) input.disabled = disabled;
+      }
+
+      function syncItem(input) {
+        input.closest('[data-todo-id]').classList.toggle('is-done', input.checked);
+      }
+
+      function syncAll() {
+        for (const input of inputs) syncItem(input);
+        doneCount.textContent = String(inputs.filter((input) => input.checked).length);
+      }
+
+      function snapshot() {
+        const values = {};
+        for (const input of inputs) {
+          values[input.closest('[data-todo-id]').dataset.todoId] = input.checked;
+        }
+        return JSON.stringify(values);
+      }
+
+      async function save(input, previous) {
+        setDisabled(true);
+        setStatus('正在保存…');
+        try {
+          await storage.setItem(STORAGE_KEY, snapshot());
+          setStatus('已自动保存');
+        } catch {
+          input.checked = previous;
+          syncAll();
+          setStatus('保存失败', true);
+        } finally {
+          setDisabled(false);
+        }
+      }
+
+      async function boot() {
+        if (!storage) {
+          setDisabled(true);
+          setStatus('预览模式');
+          window.aidget?.ready?.();
+          return;
+        }
+
+        setDisabled(true);
+        try {
+          const saved = await storage.getItem(STORAGE_KEY);
+          if (saved !== null) {
+            const values = JSON.parse(saved);
+            for (const input of inputs) {
+              const id = input.closest('[data-todo-id]').dataset.todoId;
+              if (typeof values[id] === 'boolean') input.checked = values[id];
+            }
+          }
+          syncAll();
+          setDisabled(false);
+          setStatus('勾选后自动保存');
+          for (const input of inputs) {
+            input.addEventListener('change', () => {
+              syncAll();
+              void save(input, !input.checked);
+            });
+          }
+        } catch {
+          setDisabled(true);
+          setStatus('存储不可用', true);
+        }
+        window.aidget?.ready?.();
+      }
+
+      syncAll();
+      void boot();
+    </script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,26 @@
 {
   "name": "@aidget-community/sticky-todos",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "水彩纸张风格的桌面待办便签，勾选状态自动保存。",
+  "license": "MIT",
+  "author": {
+    "name": "micooz",
+    "email": "micooz@hotmail.com",
+    "url": "https://github.com/micooz"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aidget-ai/widgets.git",
+    "directory": "packages/sticky-todos"
+  },
+  "files": [
+    "config.json",
+    "index.html",
+    "style.css",
+    "agents.md",
+    "assets"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/style.css

@@ -0,0 +1,336 @@
+:root {
+  color-scheme: light;
+  --ink: #241d0d;
+  --ink-soft: #564722;
+  --paper: #f8e994;
+  --paper-deep: #efd874;
+  --line: rgb(106 88 35 / 0.14);
+  --check: #4d5a2d;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: transparent;
+}
+
+body {
+  color: var(--ink);
+  font-family: 'Kaiti SC', 'STKaiti', 'KaiTi', 'Songti SC', serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.note {
+  position: absolute;
+  inset: 13px 8px 8px;
+  display: flex;
+  flex-direction: column;
+  padding: 26px 18px 8px;
+  overflow: visible;
+  isolation: isolate;
+}
+
+.paper {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  clip-path: polygon(
+    1% 1%,
+    6% 0.5%,
+    12% 1.4%,
+    18% 0.4%,
+    25% 0.8%,
+    34% 0.3%,
+    42% 0.9%,
+    51% 0.5%,
+    59% 0.8%,
+    68% 0.4%,
+    76% 0.9%,
+    84% 0.5%,
+    91% 1.1%,
+    97% 0.7%,
+    99.5% 4%,
+    99% 12%,
+    99.6% 20%,
+    99.1% 29%,
+    99.5% 39%,
+    99% 50%,
+    99.6% 59%,
+    99.2% 68%,
+    99.5% 78%,
+    99.4% 90%,
+    98.7% 94.5%,
+    99.2% 96.8%,
+    98.8% 98.1%,
+    99.3% 99.1%,
+    96.5% 98.7%,
+    94.5% 99.4%,
+    90.8% 98.9%,
+    88.3% 99.3%,
+    84.5% 98.8%,
+    82% 99.4%,
+    74% 98.5%,
+    66% 99.5%,
+    58% 98.7%,
+    50% 99.4%,
+    42% 98.8%,
+    34% 99.5%,
+    26% 98.6%,
+    18% 99.3%,
+    10% 98.6%,
+    3% 96%,
+    0.8% 91%,
+    1.2% 83%,
+    0.6% 74%,
+    1.1% 65%,
+    0.7% 55%,
+    1% 45%,
+    0.6% 35%,
+    1.1% 25%,
+    0.7% 15%
+  );
+  background: #f4df83 url('./assets/watercolor-paper-texture.png') center / cover no-repeat;
+  filter: saturate(0.92) drop-shadow(0 10px 13px rgb(55 42 15 / 0.16));
+}
+
+.paper::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  box-shadow:
+    inset 0 0 0 1px rgb(122 89 11 / 0.18),
+    inset 0 0 22px rgb(165 111 0 / 0.12),
+    inset 0 2px 0 rgb(255 255 231 / 0.46);
+  pointer-events: none;
+}
+
+.note::before {
+  content: '';
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  z-index: 4;
+  width: 96px;
+  height: 34px;
+  opacity: 0.9;
+  clip-path: polygon(
+    3% 4%,
+    20% 0,
+    43% 3%,
+    68% 0,
+    98% 2%,
+    100% 30%,
+    97% 67%,
+    100% 96%,
+    70% 100%,
+    37% 98%,
+    10% 100%,
+    0 87%,
+    3% 58%,
+    0 31%
+  );
+  background:
+    linear-gradient(
+      104deg,
+      rgb(255 255 255 / 0.2),
+      transparent 28%,
+      rgb(255 255 255 / 0.12) 52%,
+      transparent 74%
+    ),
+    repeating-linear-gradient(97deg, transparent 0 5px, rgb(255 255 255 / 0.12) 5px 6px),
+    linear-gradient(180deg, rgb(246 240 215 / 0.74), rgb(224 211 176 / 0.6));
+  box-shadow: 0 3px 5px rgb(65 53 22 / 0.12);
+  transform: translateX(-50%) rotate(-1.2deg);
+  pointer-events: none;
+}
+
+.note-head,
+.todos {
+  position: relative;
+  z-index: 3;
+}
+
+.note-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  min-height: 24px;
+}
+
+h1 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: 0.04em;
+}
+
+.count {
+  display: flex;
+  align-items: baseline;
+  margin: 0 1px 1px 0;
+  color: var(--ink-soft);
+  font-family: 'SF Mono', 'Menlo', monospace;
+  font-size: 10px;
+  letter-spacing: 0.02em;
+}
+
+.count span:first-child {
+  color: var(--check);
+  font-size: 17px;
+  font-weight: 650;
+}
+
+.todos {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 18px 0 16px;
+  padding: 0;
+  list-style: none;
+}
+
+.todos li {
+  min-width: 0;
+}
+
+.todo-option {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  min-height: 34px;
+  padding: 2px;
+  cursor: pointer;
+  user-select: none;
+}
+
+input[type='checkbox'] {
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  width: 1.125rem;
+  aspect-ratio: 1;
+  margin: 1px 0 0;
+  border: 1.5px solid var(--check);
+  border-radius: 5px;
+  background: rgb(255 252 223 / 0.45);
+  color: var(--check);
+  cursor: pointer;
+}
+
+input[type='checkbox']::after {
+  content: '';
+  width: 4px;
+  height: 8px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: translateY(-1px) rotate(45deg) scale(0);
+}
+
+input[type='checkbox']:checked {
+  background: rgb(77 90 45 / 0.12);
+}
+
+input[type='checkbox']:checked::after {
+  transform: translateY(-1px) rotate(45deg) scale(1);
+}
+
+input[type='checkbox']:focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 3px;
+}
+
+input[type='checkbox']:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.todo-text {
+  color: var(--ink);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.28;
+  text-wrap: pretty;
+}
+
+.is-done .todo-text {
+  color: var(--ink-soft);
+  text-decoration: line-through;
+  text-decoration-thickness: 1.5px;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .note {
+    animation: note-in 220ms ease-out both;
+  }
+
+  .todos li {
+    animation: item-in 240ms ease-out both;
+  }
+
+  .todos li:nth-child(2) {
+    animation-delay: 35ms;
+  }
+
+  .todos li:nth-child(3) {
+    animation-delay: 70ms;
+  }
+
+  .todos li:nth-child(4) {
+    animation-delay: 105ms;
+  }
+
+  input[type='checkbox']::after,
+  .todo-text {
+    transition:
+      transform 140ms ease,
+      color 140ms ease;
+  }
+}
+
+@media (forced-colors: active) {
+  input[type='checkbox']::after {
+    border-color: CanvasText;
+  }
+}
+
+@keyframes note-in {
+  from {
+    transform: translateY(4px) rotate(-0.35deg);
+  }
+
+  to {
+    transform: translateY(0) rotate(0);
+  }
+}
+
+@keyframes item-in {
+  from {
+    transform: translateY(3px);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.