@allbluecn/web-app 0.17.2 → 0.18.0

package/src/shared/design-ai/__tests__/ndjson.test.ts

@@ -0,0 +1,317 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { describe, expect, it, vi } from "vitest"
+
+import {
+  AI_PRODUCIBLE_TYPES,
+  SHAPE_TYPES,
+  sanitizeAiNodes,
+} from "@/design-engine/ai/ai"
+import { createNdjsonParser, designOpSchema } from "@/shared/design-ai/ndjson"
+
+const doneLine = JSON.stringify({ op: "done", message: "ok" })
+const doneOp = { op: "done", message: "ok" }
+
+const frameNode = {
+  type: "frame",
+  name: "登录页",
+  x: 0,
+  y: 0,
+  width: 375,
+  height: 812,
+}
+
+const rectNode = {
+  type: "rect",
+  name: "主按钮",
+  x: 16,
+  y: 24,
+  width: 343,
+  height: 48,
+  fills: [{ type: "solid", color: "#2563eb" }],
+}
+
+const gradientFills = [
+  {
+    type: "linear",
+    stops: [
+      { offset: 0, color: "#ff0000" },
+      { offset: 1, color: "#0000ff" },
+    ],
+    from: { x: 0, y: 0 },
+    to: { x: 1, y: 0 },
+  },
+]
+
+describe("createNdjsonParser", () => {
+  it("半行缓冲：不完整的 delta 不吐，补齐换行后吐完整行对象", () => {
+    const parser = createNdjsonParser()
+    expect(parser.push('{"op":"done","mess')).toEqual([])
+    expect(parser.push('age":"ok"}\n')).toEqual([doneOp])
+  })
+
+  it("一次 push 多行时逐行吐出", () => {
+    const parser = createNdjsonParser()
+    const ops = parser.push(`${doneLine}\n{"op":"done","message":"第二行"}\n`)
+    expect(ops).toHaveLength(2)
+    expect(ops[1]).toEqual({ op: "done", message: "第二行" })
+  })
+
+  it("CRLF 行结尾兼容", () => {
+    const parser = createNdjsonParser()
+    expect(parser.push(`${doneLine}\r\n`)).toEqual([doneOp])
+  })
+
+  it("CRLF 跨 delta 拆分仍兼容", () => {
+    const parser = createNdjsonParser()
+    expect(parser.push(`${doneLine}\r`)).toEqual([])
+    expect(parser.push("\n")).toEqual([doneOp])
+  })
+
+  it("空行与纯空白行跳过，不算非法", () => {
+    const onInvalid = vi.fn()
+    const parser = createNdjsonParser({ onInvalid })
+    const ops = parser.push(["", "   ", doneLine, ""].join("\n") + "\n")
+    expect(ops).toEqual([doneOp])
+    expect(onInvalid).not.toHaveBeenCalled()
+  })
+
+  it("非法 JSON 行触发 onInvalid（reason=json）且不中断流", () => {
+    const onInvalid = vi.fn()
+    const parser = createNdjsonParser({ onInvalid })
+    const ops = parser.push(`{not json\n${doneLine}\n`)
+    expect(onInvalid).toHaveBeenCalledTimes(1)
+    expect(onInvalid.mock.calls[0]?.[0]?.reason).toBe("json")
+    expect(ops).toEqual([doneOp])
+  })
+
+  it("schema 非法行（未知 op）触发 onInvalid（reason=schema）且流继续", () => {
+    const onInvalid = vi.fn()
+    const parser = createNdjsonParser({ onInvalid })
+    const ops = parser.push(`{"op":"teleport"}\n${doneLine}\n`)
+    expect(onInvalid).toHaveBeenCalledTimes(1)
+    expect(onInvalid.mock.calls[0]?.[0]?.reason).toBe("schema")
+    expect(ops).toEqual([doneOp])
+  })
+
+  it("flush 吐出无尾换行的最后一行，随后缓冲清空", () => {
+    const parser = createNdjsonParser()
+    expect(parser.push(`${doneLine}\n`)).toHaveLength(1)
+    expect(parser.push(doneLine)).toEqual([])
+    expect(parser.flush()).toEqual([doneOp])
+    expect(parser.flush()).toEqual([])
+  })
+
+  it("flush 无残留时返回空数组", () => {
+    const parser = createNdjsonParser()
+    expect(parser.flush()).toEqual([])
+    parser.push(`${doneLine}\n`)
+    expect(parser.flush()).toEqual([])
+  })
+
+  it("FS-8.1 四种操作逐行解析（frame/nodes/replace/done）", () => {
+    const parser = createNdjsonParser()
+    const payload = [
+      JSON.stringify({ op: "frame", node: frameNode }),
+      JSON.stringify({ op: "nodes", nodes: [rectNode] }),
+      JSON.stringify({ op: "replace", removeIds: ["n_12"], nodes: [rectNode] }),
+      JSON.stringify({ op: "done", message: "已生成登录页：包含标题、输入框与主按钮" }),
+      "",
+    ].join("\n")
+    const ops = parser.push(payload)
+    expect(ops.map((op) => op.op)).toEqual(["frame", "nodes", "replace", "done"])
+  })
+})
+
+describe("designOpSchema", () => {
+  it("frame op：node 无 kind 亦通过（流式节点不要求 kind）", () => {
+    const result = designOpSchema.safeParse({ op: "frame", node: frameNode })
+    expect(result.success).toBe(true)
+  })
+
+  it("nodes op：接受扩展 NodePaint（线性渐变 stops/from/to）", () => {
+    const result = designOpSchema.safeParse({
+      op: "nodes",
+      nodes: [{ ...rectNode, fills: gradientFills }],
+    })
+    expect(result.success).toBe(true)
+  })
+
+  it("nodes op：nodes 为空数组拒绝", () => {
+    expect(designOpSchema.safeParse({ op: "nodes", nodes: [] }).success).toBe(false)
+  })
+
+  it("replace op：removeIds 至少一个", () => {
+    expect(
+      designOpSchema.safeParse({ op: "replace", removeIds: ["n_12"], nodes: [rectNode] }).success,
+    ).toBe(true)
+    expect(designOpSchema.safeParse({ op: "replace", removeIds: [], nodes: [rectNode] }).success).toBe(
+      false,
+    )
+  })
+
+  it("done op：message 可选", () => {
+    expect(designOpSchema.safeParse({ op: "done", message: "完成" }).success).toBe(true)
+    expect(designOpSchema.safeParse({ op: "done" }).success).toBe(true)
+  })
+
+  it("op 节点携带 parentId 被剥离（FS-8.1：nodes 不含 parentId）", () => {
+    const result = designOpSchema.safeParse({
+      op: "nodes",
+      nodes: [{ ...rectNode, parentId: "n_1" }],
+    })
+    expect(result.success).toBe(true)
+    if (!result.success || result.data.op !== "nodes") return
+    expect("parentId" in result.data.nodes[0]).toBe(false)
+  })
+
+  it("解析产物不保留 parentId（frame op 同样剥离）", () => {
+    const parser = createNdjsonParser()
+    const ops = parser.push(
+      JSON.stringify({ op: "frame", node: { ...frameNode, parentId: "board" } }) + "\n",
+    )
+    expect(ops).toHaveLength(1)
+    if (ops[0].op !== "frame") throw new Error("expected frame op")
+    expect("parentId" in ops[0].node).toBe(false)
+  })
+
+  it("shader / image paint 在 schema 层拒绝（FS-8.5）", () => {
+    const shaderFill = { type: "shader", shaderId: "s1", props: {} }
+    const imageFill = { type: "image", url: "https://example.com/a.png", mode: "cover" }
+    expect(
+      designOpSchema.safeParse({ op: "nodes", nodes: [{ ...rectNode, fills: [shaderFill] }] })
+        .success,
+    ).toBe(false)
+    expect(
+      designOpSchema.safeParse({ op: "nodes", nodes: [{ ...rectNode, fills: [imageFill] }] })
+        .success,
+    ).toBe(false)
+  })
+
+  it("strokes 携带四类 paint 亦通过", () => {
+    const result = designOpSchema.safeParse({
+      op: "nodes",
+      nodes: [
+        {
+          ...rectNode,
+          strokes: [
+            {
+              paint: { type: "solid", color: "#111111" },
+              width: 2,
+            },
+          ],
+        },
+      ],
+    })
+    expect(result.success).toBe(true)
+  })
+})
+
+describe("sanitizeAiNodes", () => {
+  it("SHAPE_TYPES 白名单扩展 polygon/star/path 且剔除 pen-path", () => {
+    expect(SHAPE_TYPES).toContain("polygon")
+    expect(SHAPE_TYPES).toContain("star")
+    expect(SHAPE_TYPES).toContain("path")
+    expect(SHAPE_TYPES).not.toContain("pen-path")
+    expect(AI_PRODUCIBLE_TYPES.has("polygon")).toBe(true)
+    expect(AI_PRODUCIBLE_TYPES.has("pen-path")).toBe(false)
+  })
+
+  it("白名单外 type 拒绝", () => {
+    const nodes = sanitizeAiNodes([
+      { kind: "shape", type: "pen-path", x: 0, y: 0, width: 10, height: 10 },
+      { kind: "shape", type: "mystery", x: 0, y: 0, width: 10, height: 10 },
+      { kind: "shape", type: "rect", x: 0, y: 0, width: 10, height: 10 },
+      { type: "button", x: 0, y: 0, width: 100, height: 40 },
+    ])
+    expect(nodes.map((node) => node.type)).toEqual(["rect", "button"])
+  })
+
+  it("shader / image fill 拒绝（FS-8.5：shader 只能用户手动加）", () => {
+    const nodes = sanitizeAiNodes([
+      {
+        type: "rect",
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 10,
+        fills: [{ type: "shader", shaderId: "s1", props: {} }],
+      },
+      {
+        type: "rect",
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 10,
+        fills: [{ type: "image", url: "https://example.com/a.png", mode: "cover" }],
+      },
+      { type: "rect", x: 0, y: 0, width: 10, height: 10 },
+    ])
+    expect(nodes).toHaveLength(1)
+    expect(nodes[0]?.fills).toBeUndefined()
+  })
+
+  it("坐标 clamp 为有限数（NaN/Infinity 不外泄）", () => {
+    const nodes = sanitizeAiNodes([
+      {
+        type: "rect",
+        x: Number.NaN,
+        y: Number.POSITIVE_INFINITY,
+        width: -10,
+        height: 50,
+      },
+    ])
+    expect(nodes).toHaveLength(1)
+    const node = nodes[0]
+    expect(Number.isFinite(node?.x)).toBe(true)
+    expect(Number.isFinite(node?.y)).toBe(true)
+    expect(Number.isFinite(node?.width)).toBe(true)
+    expect(node?.x).toBe(0)
+    expect(node?.width).toBe(1)
+    expect(node?.height).toBe(50)
+  })
+
+  it("kind 缺省按 type 派生，parentId 置空，paint 回填 id/opacity/visible", () => {
+    const nodes = sanitizeAiNodes([
+      { type: "button", x: 0, y: 0, width: 100, height: 40, parentId: "n_9" },
+      {
+        type: "rect",
+        x: 0,
+        y: 0,
+        width: 10,
+        height: 10,
+        fills: [{ type: "solid", color: "#ffffff" }],
+      },
+    ])
+    expect(nodes[0]?.kind).toBe("component")
+    expect(nodes[0]?.parentId).toBeNull()
+    expect(nodes[1]?.kind).toBe("shape")
+    const fills = nodes[1]?.fills ?? []
+    expect(fills).toHaveLength(1)
+    expect(typeof fills[0]?.id).toBe("string")
+    expect(fills[0]?.id.length).toBeGreaterThan(0)
+    expect(fills[0]?.opacity).toBe(1)
+    expect(fills[0]?.visible).toBe(true)
+  })
+
+  it("allowedTypes 参数可覆盖默认白名单（如 op:frame 的 frame 节点）", () => {
+    const nodes = sanitizeAiNodes([frameNode], new Set(["frame"]))
+    expect(nodes).toHaveLength(1)
+    expect(nodes[0]?.type).toBe("frame")
+  })
+})

package/src/shared/design-ai/ndjson.ts

@@ -0,0 +1,124 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import { z } from "zod"
+
+import { aiNodeSchema, formatIssues } from "@/design-engine/ai/ai"
+
+// ===== FS-8.1 设计稿流式生成 NDJSON 行协议 =====
+// 模型逐行输出操作流；每行独立 JSON。节点结构与 prototypeSchema（sceneNodeSchema）
+// 共用定义（aiNodeSchema）；parentId 字段被 omit 剥离——即使模型携带也不会出现在
+// 解析产物，归属规则由服务端回填（frame op 之后的 nodes 挂到该 frame；
+// replace 继承 removeIds[0] 的 parentId/x/y）。
+
+export const designOpSchema = z.discriminatedUnion("op", [
+  z.object({ op: z.literal("frame"), node: aiNodeSchema }),
+  z.object({ op: z.literal("nodes"), nodes: z.array(aiNodeSchema).min(1) }),
+  z.object({
+    op: z.literal("replace"),
+    removeIds: z.array(z.string().min(1)).min(1),
+    nodes: z.array(aiNodeSchema).min(1),
+  }),
+  z.object({ op: z.literal("done"), message: z.string().optional() }),
+])
+
+export type DesignOp = z.infer<typeof designOpSchema>
+
+export type NdjsonInvalidReason = "json" | "schema"
+
+export type NdjsonInvalidInfo = {
+  /** 触发解析失败的原始行（已去除行尾换行符与空白） */
+  line: string
+  reason: NdjsonInvalidReason
+  /** json = JSON.parse 异常信息；schema = zod issue 摘要 */
+  error?: string
+}
+
+export type NdjsonParserOptions = {
+  /** 非法行回调（JSON 解析失败或 op schema 校验失败）；不中断流，调用方按需上报/忽略 */
+  onInvalid?: (info: NdjsonInvalidInfo) => void
+}
+
+export type NdjsonParser = {
+  /** 追加一段流式 delta，返回由此凑完整的合法 op 列表；截断行继续缓冲不吐 */
+  push(delta: string): DesignOp[]
+  /** 流结束：处理无尾换行的最后一行（有则吐出），并清空行缓冲 */
+  flush(): DesignOp[]
+}
+
+/** 行缓冲 NDJSON 解析器（纯内存、有状态）：逐 delta 拼缓冲、遇 \n 吐完整行，
+ *  截断行不吐；CRLF 兼容（行尾 \r 剥离，可跨 delta 拆分）；空行跳过；
+ *  非法行（JSON 或 op schema）经 onInvalid 上报后丢弃，不中断流。 */
+export function createNdjsonParser(options: NdjsonParserOptions = {}): NdjsonParser {
+  let buffer = ""
+  const { onInvalid } = options
+
+  const acceptLine = (rawLine: string): DesignOp | null => {
+    const line = rawLine.trim()
+    if (!line) return null
+    let raw: unknown
+    try {
+      raw = JSON.parse(line)
+    } catch (error) {
+      onInvalid?.({
+        line,
+        reason: "json",
+        error: error instanceof Error ? error.message : String(error),
+      })
+      return null
+    }
+    const parsed = designOpSchema.safeParse(raw)
+    if (!parsed.success) {
+      onInvalid?.({ line, reason: "schema", error: formatIssues(parsed.error) })
+      return null
+    }
+    return parsed.data
+  }
+
+  // 行尾 \r 剥离需在按 \n 切行后进行，故 CRLF 拆到两个 delta 也能正确拼回
+  const stripCr = (line: string): string => (line.endsWith("\r") ? line.slice(0, -1) : line)
+
+  const drainBuffer = (): DesignOp[] => {
+    const ops: DesignOp[] = []
+    let newlineIndex = buffer.indexOf("\n")
+    while (newlineIndex >= 0) {
+      const line = buffer.slice(0, newlineIndex)
+      buffer = buffer.slice(newlineIndex + 1)
+      const op = acceptLine(stripCr(line))
+      if (op) ops.push(op)
+      newlineIndex = buffer.indexOf("\n")
+    }
+    return ops
+  }
+
+  return {
+    push(delta: string): DesignOp[] {
+      buffer += delta
+      return drainBuffer()
+    },
+    flush(): DesignOp[] {
+      if (!buffer.trim()) {
+        buffer = ""
+        return []
+      }
+      const line = stripCr(buffer)
+      buffer = ""
+      const op = acceptLine(line)
+      return op ? [op] : []
+    },
+  }
+}

package/src/start.ts

@@ -36,8 +36,21 @@ if (import.meta.env.SSR && !globalAny.__githubSyncTimer) {
 
 const isDesktop = process.env.DEPLOY_TARGET === 'desktop'
 
+// CSRF 豁免清单（规格 §8.6/§10.1）：SDK 上报 / Chrome 扩展 / 公开收集页 / MCP
+// 客户端的 POST 来自第三方 origin 或无 Origin/Referer 的工具进程，鉴权完全依赖
+// token header（无 cookie 会话），跨域无 CSRF 风险，豁免无安全损失。
+// collect-upload 为 P3 端点提前入清单，/api/mcp/bugs 为 MCP 端点（任务 20）。
+const CSRF_EXEMPT_PATHS = [
+  '/api/bugs/report',
+  '/api/bugs/collect-upload',
+  '/api/mcp/bugs',
+]
+
 const csrfMiddleware = createCsrfMiddleware({
-  filter: (ctx) => ctx.handlerType === 'serverFn' && !isDesktop,
+  filter: (ctx) =>
+    ctx.handlerType === 'serverFn' &&
+    !isDesktop &&
+    !CSRF_EXEMPT_PATHS.some((path) => ctx.request.url.includes(path)),
 })
 
 const aiPortsMiddleware = createMiddleware().server(async ({ next }) => {
@@ -45,6 +58,11 @@ const aiPortsMiddleware = createMiddleware().server(async ({ next }) => {
   return next()
 })
 
+// BUG 接入端点跨域放行（规格 §8.6）：/api/bugs/ 前缀对任意 origin 开放
+//（上报无 cookie，凭证在 X-Bug-Key header，`*` 安全；不可与 Allow-Credentials 同用）
+const BUG_CORS_PREFIX = '/api/bugs/'
+const BUG_CORS_HEADERS = 'Content-Type, X-Bug-Key'
+
 const apiCorsMiddleware = createMiddleware().server(async ({ request, next }: any) => {
   const needsCors = request.url.includes('/api/') || request.url.includes('/_serverFn/')
   if (!needsCors) {
@@ -55,7 +73,11 @@ const apiCorsMiddleware = createMiddleware().server(async ({ request, next }: an
   const origin = request.headers.get('origin')
 
   const headers = new Headers(result?.headers || result?.response?.headers || {})
-  if (origin) {
+  if (request.url.includes(BUG_CORS_PREFIX)) {
+    headers.set('Access-Control-Allow-Origin', '*')
+    headers.set('Access-Control-Allow-Methods', 'POST, OPTIONS')
+    headers.set('Access-Control-Allow-Headers', BUG_CORS_HEADERS)
+  } else if (origin) {
     const allowedOrigins = [
       new URL(process.env.AUTH_URL || 'http://localhost:3000').origin,
       new URL(process.env.APP_URL || 'http://localhost:3000').origin,
@@ -81,6 +103,19 @@ const apiCorsMiddleware = createMiddleware().server(async ({ request, next }: an
     return newResponse
   }
 
+  // server 路由（server.handlers）的 next() 返回 { request, pathname, handlerType,
+  // context, response } 载体而非裸 Response：合并后的头必须写回载体 response，
+  // 否则 ACAO 静默丢失——跨域浏览器拦截响应 → SDK 误判失败 → 重试重复投递
+  // （实测 2026-10-03：/api/bugs/report POST 200 无 ACAO，demo 跨域上报全部双发）。
+  const carrierResponse = (result as any)?.response
+  if (carrierResponse instanceof Response) {
+    ;(result as any).response = new Response(carrierResponse.body, {
+      status: carrierResponse.status,
+      statusText: carrierResponse.statusText,
+      headers,
+    })
+  }
+
   return result
 })
 

package/src/styles/globals.css

@@ -50,6 +50,7 @@
   --color-accent-3: oklch(69.6% 0.165 251);
   --color-accent-4: oklch(80.2% 0.134 225);
   --color-accent-5: oklch(90.7% 0.231 133);
+  --canvas-bg: oklch(0.985 0.003 106.5);
 }
 
 .typeset-article {
@@ -79,6 +80,7 @@
   --radius-xl: calc(var(--radius) + 4px);
 
   --color-background: var(--background);
+  --color-canvas-bg: var(--canvas-bg);
   --color-foreground: var(--foreground);
 
   --color-sidebar: var(--sidebar);
@@ -232,6 +234,7 @@
   --color-accent-3: oklch(69.6% 0.165 251);
   --color-accent-4: oklch(80.2% 0.134 225);
   --color-accent-5: oklch(90.7% 0.231 133);
+  --canvas-bg: oklch(0.22 0.007 107.1);
 }
 
 /* 知识库快捷文档标签莫兰迪色板（LABEL_COLORS 消费，light 原色 / dark 从种子色派生） */
@@ -556,6 +559,15 @@ html.theme-transitioning *::after {
   pointer-events: none;
 }
 
+/* Harness 输入框：空态未聚焦也显示占位提示 */
+.harness-composer-editor .is-editor-empty::before {
+  color: var(--color-muted-foreground);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
 .knowledge-doc-editor .notion-like-editor-header {
   display: none !important;
 }
@@ -625,6 +637,14 @@ html.theme-transitioning *::after {
   padding: 0.5rem 1.5rem 0.5rem;
   padding-left: 1.5rem;
 }
+
+/* Design doc panel: wrapper fills scroll container so content overflow scrolls */
+.design-doc-scroll .notion-like-editor-wrapper {
+  min-height: 100%;
+}
+.design-doc-scroll .notion-like-editor-content {
+  height: auto;
+}
 /* emoji-picker-react Reactions mode: compact height with matching pill radius */
 .epr-reactions {
   height: 40px !important;

package/vite.shared.ts

@@ -70,7 +70,7 @@ function prismaDirnamePolyfill(rootDir: string): PluginOption {
         for (const f of files) {
           if (!f.startsWith('database-') || !f.endsWith('.mjs')) continue
           const fp = path.join(ssrDir, f)
-          let code = await readFile(fp, 'utf8')
+          const code = await readFile(fp, 'utf8')
           if (code.includes('__dirname')) {
             await writeFile(fp, polyfill + code)
           }
@@ -252,7 +252,9 @@ export function createWebViteConfig(opts: WebViteConfigOptions) {
       },
       optimizeDeps: {
         exclude: ['@allbluecn/database', '@allbluecn/kernel', ],
-        include: ['@tanstack/react-router'],
+        // leafer-editor 在 engine.ts 中动态 import，不预构建时 dev 冷启动会触发
+        // Vite「new dependencies optimized → page reload」，表现为首次画图页面自动刷新
+        include: ['@tanstack/react-router', 'leafer-editor'],
       },
       ssr: {
         noExternal: [

package/src/components/animated-icons/bell.tsx

@@ -1,109 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import type { Variants } from "motion/react";
-import { m, useAnimation } from "motion/react";
-import type { HTMLAttributes } from "react";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-
-import { cn } from "@/lib/utils";
-
-export interface BellIconHandle {
-  startAnimation: () => void;
-  stopAnimation: () => void;
-}
-
-interface BellIconProps extends HTMLAttributes<HTMLDivElement> {
-  size?: number;
-}
-
-const SVG_VARIANTS: Variants = {
-  normal: { rotate: 0 },
-  animate: { rotate: [0, -10, 10, -10, 0] },
-};
-
-const BellIcon = forwardRef<BellIconHandle, BellIconProps>(
-  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
-    const controls = useAnimation();
-    const isControlledRef = useRef(false);
-
-    useImperativeHandle(ref, () => {
-      isControlledRef.current = true;
-
-      return {
-        startAnimation: () => controls.start("animate"),
-        stopAnimation: () => controls.start("normal"),
-      };
-    });
-
-    const handleMouseEnter = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        if (isControlledRef.current) {
-          onMouseEnter?.(e);
-        } else {
-          controls.start("animate");
-        }
-      },
-      [controls, onMouseEnter]
-    );
-
-    const handleMouseLeave = useCallback(
-      (e: React.MouseEvent<HTMLDivElement>) => {
-        if (isControlledRef.current) {
-          onMouseLeave?.(e);
-        } else {
-          controls.start("normal");
-        }
-      },
-      [controls, onMouseLeave]
-    );
-    return (
-      <div
-        className={cn(className)}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        {...props}
-      >
-        <m.svg
-          animate={controls}
-          fill="none"
-          height={size}
-          stroke="currentColor"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="2"
-          transition={{
-            duration: 0.5,
-            ease: "easeInOut",
-          }}
-          variants={SVG_VARIANTS}
-          viewBox="0 0 24 24"
-          width={size}
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-        </m.svg>
-      </div>
-    );
-  }
-);
-
-BellIcon.displayName = "BellIcon";
-
-export { BellIcon };