@sirenodeck/sirenodeck 0.1.1-alpha.0

package/src/builtin-addons/date-time/buttons/time/frontend.tsx

@@ -0,0 +1,29 @@
+import type { AddonFrontendButton } from "@/addon/api"
+import { Text } from "@/ui/index"
+import { ConfigSchema } from "./config"
+
+import { formatDigitalDateTimeLabel } from "../../shared/format"
+import { useNow } from "../../shared/use-now"
+
+const INTERVAL_MS = 1000
+
+const TimeButtonFrontend: AddonFrontendButton<ConfigSchema> = ({ config }) => {
+  const now = useNow(INTERVAL_MS)
+  const variant =
+    (config as { variant?: "default" | "big" }).variant ?? "default"
+  const format =
+    variant === "big"
+      ? "<4xl>&nbsp;*HH*<blink>.</blink>|mm</4xl>"
+      : "<2xl>*HH*<blink>:</blink>mm</2xl>"
+  return (
+    <Text
+      size={variant === "big" ? "lg" : "md"}
+      tone="fg"
+      lineHeight="1.6em"
+      className="flex h-full w-full items-center justify-center"
+      text={formatDigitalDateTimeLabel(format, now)}
+    />
+  )
+}
+
+export default TimeButtonFrontend

package/src/builtin-addons/date-time/index.d.ts

@@ -0,0 +1,5 @@
+import type { NewAddonManifest } from "@/addon/api"
+
+declare const manifest: NewAddonManifest
+export default manifest
+export { manifest }

package/src/builtin-addons/date-time/index.ts

@@ -0,0 +1,30 @@
+import type { AddonManifestV1 } from "@/addon/api"
+
+import analogClockBackend from "./buttons/analog-clock/backend"
+import analogClockFrontend from "./buttons/analog-clock/frontend"
+import dateTimeBackend from "./buttons/custom/backend"
+import dateTimeFrontend from "./buttons/custom/frontend"
+import dateBackend from "./buttons/date/backend"
+import dateFrontend from "./buttons/date/frontend"
+import timeBackend from "./buttons/time/backend"
+import timeFrontend from "./buttons/time/frontend"
+
+export const manifest: AddonManifestV1 = {
+  apiVersion: 1,
+  name: "date-time",
+  buttonTypes: {
+    "date-time:date-time": {
+      frontend: dateTimeFrontend,
+      service: dateTimeBackend,
+    },
+    "date-time:time": { frontend: timeFrontend, service: timeBackend },
+    "date-time:date": { frontend: dateFrontend, service: dateBackend },
+    "date-time:analog-clock": {
+      frontend: analogClockFrontend,
+      service: analogClockBackend,
+    },
+  },
+  publishIntervalMs: 1000,
+}
+
+export default manifest

package/src/builtin-addons/date-time/poller.ts

@@ -0,0 +1,11 @@
+import type { AddonPoller } from "@/addon/api-types"
+
+export const createPoller = (): AddonPoller => ({
+  channels: [
+    {
+      channel: "date-time:now",
+      intervalMs: 1_000,
+      poll: () => ({ now: Date.now() }),
+    },
+  ],
+})

package/src/builtin-addons/date-time/shared/format-date.ts

@@ -0,0 +1,36 @@
+export const formatDateParts = (
+  config: {
+    locale?: string
+    time_zone?: string
+    weekDayFormat?: "long" | "short" | "narrow"
+    dateFormat?: "numeric" | "2-digit"
+    monthFormat?: "numeric" | "2-digit" | "long" | "short" | "narrow"
+    yearFormat?: "numeric" | "2-digit"
+  },
+  date: Date,
+) => {
+  const locale = config.locale ?? "en-US"
+  const tz = config.time_zone
+  const monthFmt = new Intl.DateTimeFormat(locale, {
+    month: config.monthFormat ?? "short",
+    ...(tz ? { timeZone: tz } : {}),
+  })
+  const dayFmt = new Intl.DateTimeFormat(locale, {
+    day: config.dateFormat ?? "numeric",
+    ...(tz ? { timeZone: tz } : {}),
+  })
+  const weekdayFmt = new Intl.DateTimeFormat(locale, {
+    weekday: config.weekDayFormat ?? "long",
+    ...(tz ? { timeZone: tz } : {}),
+  })
+  const yearFmt = new Intl.DateTimeFormat(locale, {
+    year: config.yearFormat ?? "numeric",
+    ...(tz ? { timeZone: tz } : {}),
+  })
+  return {
+    day: dayFmt.format(date),
+    month: monthFmt.format(date).toUpperCase(),
+    weekday: weekdayFmt.format(date).toUpperCase(),
+    year: yearFmt.format(date),
+  }
+}

package/src/builtin-addons/date-time/shared/format.ts

@@ -0,0 +1,105 @@
+import type { ConfigSchema as BuiltinDisplayDateTimeButtonConfig } from "../buttons/custom/config"
+
+interface FormatSegment {
+  kind: "markup" | "token"
+  value: string
+}
+
+const escapeLiteral = (value: string): string =>
+  `[${value.replaceAll("]", "\\]")}]`
+
+const TOKEN_MAP: Record<string, (d: Date) => string> = {
+  YY: (d) => String(d.getFullYear() % 100).padStart(2, "0"),
+  YYYY: (d) => String(d.getFullYear()),
+  M: (d) => String(d.getMonth() + 1),
+  MM: (d) => String(d.getMonth() + 1).padStart(2, "0"),
+  MMM: (d) => d.toLocaleString("en-US", { month: "short" }),
+  MMMM: (d) => d.toLocaleString("en-US", { month: "long" }),
+  D: (d) => String(d.getDate()),
+  DD: (d) => String(d.getDate()).padStart(2, "0"),
+  d: (d) => String(d.getDay()),
+  ddd: (d) => d.toLocaleString("en-US", { weekday: "short" }),
+  dddd: (d) => d.toLocaleString("en-US", { weekday: "long" }),
+  H: (d) => String(d.getHours()),
+  HH: (d) => String(d.getHours()).padStart(2, "0"),
+  h: (d) => String(((d.getHours() + 11) % 12) + 1),
+  hh: (d) => String(((d.getHours() + 11) % 12) + 1).padStart(2, "0"),
+  m: (d) => String(d.getMinutes()),
+  mm: (d) => String(d.getMinutes()).padStart(2, "0"),
+  s: (d) => String(d.getSeconds()),
+  ss: (d) => String(d.getSeconds()).padStart(2, "0"),
+  SSS: (d) => String(d.getMilliseconds()).padStart(3, "0"),
+  A: (d) => (d.getHours() < 12 ? "AM" : "PM"),
+  a: (d) => (d.getHours() < 12 ? "am" : "pm"),
+}
+
+const splitFormat = (pattern: string): FormatSegment[] => {
+  const segments: FormatSegment[] = []
+  let cursor = 0
+  while (cursor < pattern.length) {
+    const tagStart = pattern.indexOf("<", cursor)
+    if (tagStart === -1) {
+      if (cursor < pattern.length) {
+        segments.push({ kind: "token", value: pattern.slice(cursor) })
+      }
+      break
+    }
+    if (tagStart > cursor) {
+      segments.push({ kind: "token", value: pattern.slice(cursor, tagStart) })
+    }
+    const tagEnd = pattern.indexOf(">", tagStart + 1)
+    if (tagEnd === -1) {
+      segments.push({
+        kind: "token",
+        value: escapeLiteral(pattern.slice(tagStart)),
+      })
+      break
+    }
+    segments.push({
+      kind: "markup",
+      value: pattern.slice(tagStart, tagEnd + 1),
+    })
+    cursor = tagEnd + 1
+  }
+  return segments
+}
+
+const expandTokens = (tokenString: string, date: Date): string => {
+  let result = ""
+  let i = 0
+  while (i < tokenString.length) {
+    if (tokenString.slice(i, i + 6) === "&nbsp;") {
+      result += "\u00A0"
+      i += 6
+      continue
+    }
+    let matched = false
+    for (const len of [4, 3, 2, 1]) {
+      const slice = tokenString.slice(i, i + len)
+      const handler = TOKEN_MAP[slice]
+      if (handler) {
+        result += handler(date)
+        i += len
+        matched = true
+        break
+      }
+    }
+    if (!matched) {
+      result += tokenString[i]
+      i += 1
+    }
+  }
+  return result
+}
+
+export const formatDigitalDateTimeLabel = (
+  format: BuiltinDisplayDateTimeButtonConfig["format"],
+  date = new Date(),
+): string =>
+  splitFormat(format)
+    .map((segment) =>
+      segment.kind === "markup"
+        ? segment.value
+        : expandTokens(segment.value, date),
+    )
+    .join("")

package/src/builtin-addons/date-time/shared/use-now.ts

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react"
+
+export const useNow = (intervalMs: number): Date => {
+  const [now, setNow] = useState(() => new Date())
+  useEffect(() => {
+    const id = setInterval(() => setNow(new Date()), intervalMs)
+    return () => clearInterval(id)
+  }, [intervalMs])
+  return now
+}

package/src/builtin-addons/date-time/sirenodeck.json

@@ -0,0 +1,6 @@
+{
+  "kind": "addon",
+  "apiVersion": 1,
+  "name": "date-time",
+  "entry": "index.ts"
+}

package/src/builtin-addons/emoji-selector/README.md

@@ -0,0 +1,45 @@
+# emoji-selector
+
+Adds an emoji deck to your config. Users open it via the `emoji-selector:launcher` button (or any `core:change-deck` pointing to `emoji-selector`), pick from 11 categories (Smileys, People, Animals, Nature, Food, Drink, Activities, Travel, Objects, Symbols, Flags). Each category deck is paginated automatically using `core:page-nav` buttons.
+
+Tapping an emoji sends it directly through the core `type://` dispatch channel — the OS key-input tool (ydotool on Linux with `wtype` as wlroots-only fallback, osascript on macOS, Win32 SendInput on Windows) types the character verbatim, including emoji. On Linux non-ASCII text routes through `wl-copy` + ctrl+v because `ydotool type` does not handle non-BMP characters; the `wl-clipboard` package and `ydotoold` daemon are both required. Double-tapping an emoji with a shortcode types `:shortcode:` as literal text instead.
+
+## Decks
+
+The addon produces:
+
+- `emoji-selector` — the top-level routing deck with one button per category
+- `emoji-selector-<categoryId>` — one deck per category (e.g., `emoji-selector-smileys`). Each is marked `paginated: true` so the core splits it into pages with `core:page-nav` buttons.
+
+## Buttons
+
+| Type                      | Gesture    | Behavior                                       |
+| ------------------------- | ---------- | ---------------------------------------------- |
+| `emoji-selector:launcher` | tap        | Navigate to the `emoji-selector` routing deck  |
+| `emoji-selector:category` | tap        | Navigate to the target category deck           |
+| `emoji-selector:emoji`    | tap        | Dispatch `type://<emoji>` to type it           |
+| `emoji-selector:emoji`    | dblTap     | Dispatch `type://:<shortcode>:` to type it     |
+| `emoji-selector:back`     | tap        | Navigate to previous deck                      |
+| `core:page-nav`           | tap/dbltap | Navigate to next/previous page (auto-injected) |
+
+## Config
+
+```yaml
+decks:
+  main:
+    name: Main
+    buttons:
+      # Launcher button (type shortcut uses the addon name)
+      - position: 9
+        type: emoji-selector
+        config:
+          favorites: ["😀", "😃", "😄"] # optional: shown first in the Smileys category
+```
+
+### How pagination works
+
+Each category deck is marked `paginated: true`. The core automatically splits decks containing more buttons than `keyCount - 2` (13 on a 15-key device) into multiple pages and injects `core:page-nav` buttons. You do not need to configure page navigation manually.
+
+## See also
+
+- [../core/README.md](../core/README.md) — `core:page-nav` and the dispatch channel

package/src/builtin-addons/emoji-selector/assets/launcher.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="72" height="72">
+  <rect x="2" y="2" width="32" height="32" rx="6" fill="#fde68a"/>
+  <rect x="38" y="2" width="32" height="32" rx="6" fill="#fca5a5"/>
+  <rect x="2" y="38" width="32" height="32" rx="6" fill="#86efac"/>
+  <rect x="38" y="38" width="32" height="32" rx="6" fill="#93c5fd"/>
+  <text x="18" y="26" font-size="18" text-anchor="middle">😂</text>
+  <text x="54" y="26" font-size="18" text-anchor="middle">🔥</text>
+  <text x="18" y="62" font-size="18" text-anchor="middle">⭐</text>
+  <text x="54" y="62" font-size="18" text-anchor="middle">🎵</text>
+</svg>

package/src/builtin-addons/emoji-selector/assets/smileys.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 72 72" width="72" height="72">
+  <circle cx="24" cy="28" r="20" fill="#fde68a"/>
+  <circle cx="48" cy="28" r="20" fill="#fca5a5"/>
+  <circle cx="36" cy="52" r="20" fill="#86efac"/>
+  <text x="24" y="36" font-size="22" text-anchor="middle">😀</text>
+  <text x="48" y="36" font-size="22" text-anchor="middle">😂</text>
+  <text x="36" y="60" font-size="22" text-anchor="middle">😍</text>
+</svg>

package/src/builtin-addons/emoji-selector/buttons/category/backend.ts

@@ -0,0 +1,14 @@
+import type { AddonButtonTypeService } from "@/addon/api"
+
+import { configSchema } from "./config"
+
+export default {
+  configSchema,
+  defaultRenderIntervalMs: 60000,
+  gestureHandlers: ["tap"] as const,
+  onTap: ({ config, publish }) => {
+    const target = (config as { target_deck?: string }).target_deck
+    if (target === undefined) return
+    publish("runtime:navigate-deck", { deckId: target, addToHistory: true })
+  },
+} satisfies AddonButtonTypeService

package/src/builtin-addons/emoji-selector/buttons/category/config.ts

@@ -0,0 +1,8 @@
+import { z } from "zod"
+
+export const configSchema = z.object({
+  target_deck: z.string().min(1),
+  icon: z.string().min(1),
+  label: z.string().min(1),
+})
+export type ConfigSchema = z.infer<typeof configSchema>

package/src/builtin-addons/emoji-selector/buttons/category/frontend.tsx

@@ -0,0 +1,19 @@
+import { Label } from "@/ui"
+
+import { AddonFrontendButton } from "@/addon"
+import { ConfigSchema } from "./config"
+
+const CategoryButtonFrontend: AddonFrontendButton<ConfigSchema> = ({
+  config,
+}) => {
+  const iconRef = config.icon ?? "🙂"
+  const labelRef = config.label ?? "Category"
+  return (
+    <span className="flex h-full w-full flex-col items-center justify-center gap-1">
+      <span className="text-3xl leading-none">{iconRef}</span>
+      <Label text={labelRef} variant="secondary" />
+    </span>
+  )
+}
+
+export default CategoryButtonFrontend

package/src/builtin-addons/emoji-selector/buttons/emoji/backend.ts

@@ -0,0 +1,7 @@
+import type { AddonButtonTypeService } from "@/addon/api"
+
+import { configSchema } from "./config"
+
+export default {
+  configSchema,
+} satisfies AddonButtonTypeService

package/src/builtin-addons/emoji-selector/buttons/emoji/config.ts

@@ -0,0 +1,9 @@
+import { z } from "zod"
+
+import { EMOJI_RE } from "@/core/icon-source"
+
+export const configSchema = z.object({
+  emoji: z.string().regex(EMOJI_RE),
+  shortcode: z.string().optional(),
+})
+export type ConfigSchema = z.infer<typeof configSchema>

package/src/builtin-addons/emoji-selector/buttons/emoji/frontend.tsx

@@ -0,0 +1,11 @@
+import type { AddonFrontendButton } from "@/addon/api"
+import { IconLabelSurface } from "@/ui"
+import { ConfigSchema } from "./config"
+
+const EmojiButtonFrontend: AddonFrontendButton<ConfigSchema> = ({ config }) => {
+  const emoji = config.emoji
+  const shortCode = `:${config.shortcode}:`
+  return <IconLabelSurface source={emoji} label={shortCode} variant="small" />
+}
+
+export default EmojiButtonFrontend

package/src/builtin-addons/emoji-selector/buttons/launcher/backend.ts

@@ -0,0 +1,13 @@
+import type { AddonButtonTypeService } from "@/addon/api"
+
+import { configSchema } from "./config"
+
+export default {
+  configSchema,
+  onTap: ({ publish }) => {
+    publish("runtime:navigate-deck", {
+      deckId: "emoji-selector",
+      addToHistory: true,
+    })
+  },
+} satisfies AddonButtonTypeService

package/src/builtin-addons/emoji-selector/buttons/launcher/config.ts

@@ -0,0 +1,6 @@
+import { z } from "zod"
+
+import { EmojiLauncherButtonSchema } from "../../support"
+
+export const configSchema = EmojiLauncherButtonSchema
+export type ConfigSchema = z.infer<typeof configSchema>

package/src/builtin-addons/emoji-selector/buttons/launcher/frontend.tsx

@@ -0,0 +1,31 @@
+import { Label } from "@/ui"
+
+import { EMOJI_FONT_STACK, EMOJI_LAUNCHER_GRID } from "../../support"
+
+import type { AddonFrontendButton } from "@/addon/api"
+import type { ConfigSchema } from "./config"
+
+const LauncherButtonFrontend: AddonFrontendButton<ConfigSchema> = ({
+  config,
+}) => (
+  <div className="flex flex-col gap-1">
+    <div
+      className="grid grid-cols-3 grid-rows-2 w-15 h-10 gap-0 p-1"
+      data-sireno-launcher-grid="true"
+    >
+      {EMOJI_LAUNCHER_GRID.map((char) => (
+        <div
+          className="-mx-1 -my-1 flex items-center justify-center text-md"
+          data-sireno-launcher-cell="true"
+          key={char}
+          style={{ fontFamily: EMOJI_FONT_STACK }}
+        >
+          {char}
+        </div>
+      ))}
+    </div>
+    <Label text={config.label ?? "Emojis"} />
+  </div>
+)
+
+export default LauncherButtonFrontend