zugzbot 1.2.0 → 1.4.0

package/.opencode/oh-my-design/design-md/freee/_research.md

@@ -1,116 +0,0 @@
-# Research Sources for freee
-
-추출 일자: 2026-04-17
-스킬: `omd:add-reference` (5-tier methodology)
-입력 URL: `https://vibes.freee.co.jp` + `https://github.com/freee/vibes`
-
-## Tier 1 — Official Design System
-
-**Status: FULLY FOUND — open-source design system with public source code**
-
-freee's design system is named **Vibes** and is fully open source at [github.com/freee/vibes](https://github.com/freee/vibes). All design tokens are committed to the repo as SCSS partials in `stylesheets/lv0/`:
-- `_colors.scss` (2.6KB) — full color palette: 9 hue scales × 5-10 shades + semantic aliases
-- `_size.scss` (4.6KB) — spacing scale, type scale, form-control heights, z-index hierarchy, container widths, line-height, font family
-- `_fonts.scss` (385B) — `freee-logo` font definition (Noto Sans CJK JP Medium)
-- `_focus.scss` (644B) — focus ring styles
-
-Plus a public Storybook hosted at [vibes.freee.co.jp](https://vibes.freee.co.jp) showcasing every component with live previews.
-
-Distribution: `@freee_jp/vibes` npm package. CSS imported via `@freee_jp/vibes/css` (`vibes_2021.css` or `.min.css`).
-
-## Tier 2 — Brand / Press Kit
-
-Not investigated — Tier 1 source is comprehensive and authoritative.
-
-## Tier 3 — Engineering / Design Blog
-
-[freee Developers Hub](https://developers.freee.co.jp) hosts technical articles. Specific design system writeups not deeply mined for this initial extraction.
-
-## Tier 4 — Live Site Recon
-
-**Method**: Playwright MCP screenshot of [vibes.freee.co.jp](https://vibes.freee.co.jp) Storybook (verifies the docs site is live and accessible).
-
-Storybook navigation confirms:
-- DOC section: Readme, Colors, Contribution, Design, Storybook, Stylesheets, TypeScript
-- EXAMPLES: Collection, Forms, ImportWizard, Pages, ResponsiveLayout, ThroughCommonProps
-- LV2 components: accordionPanel, breadcrumbs, bulletedList, buttonGroup, calendar, cardNavigation, combobox, descriptionList, dialogs, dropdown, dropdownButton, emptyStates, fileUploader, filterTag, filterableDropdownButton, ...
-
-Screenshot saved: `_research/vibes-storybook-1440px.png`
-
-## Extraction details (from raw GitHub source)
-
-Raw URLs fetched via curl:
-- https://raw.githubusercontent.com/freee/vibes/master/stylesheets/lv0/_colors.scss
-- https://raw.githubusercontent.com/freee/vibes/master/stylesheets/lv0/_size.scss
-- https://raw.githubusercontent.com/freee/vibes/master/stylesheets/lv0/_fonts.scss
-
-All token values quoted in DESIGN.md are direct copies from these source files — zero inference.
-
-## Confidence
-
-### High Confidence (direct from open-source SCSS source code)
-- Entire 9-hue color palette (Primary, Secondary, Red, Orange, Yellow, Yellow-Green, Green, Blue-Green, Purple, Gray)
-- Semantic color aliases (`$vbPrimaryColor`, `$vbAccentColor`, `$vbAlertColor`, etc.)
-- Type scale (5 sizes: 10/12/14/16/24dp)
-- Spacing scale (4/8/16/24/32/48dp)
-- Form-control heights (24/36/48dp)
-- Three shadow recipes (`$vbCardShadow`, `$vbFloatingShadow`, `$vbPopupShadow`)
-- Z-index hierarchy (10 named layers: overlay 100 → max 2147483647)
-- Font stack (Hiragino-led Japanese system stack)
-- Line height 1.5
-- Container max-width 1120dp, mobile boundary 768dp
-- `freee-logo` brand wordmark uses Noto Sans CJK JP Medium
-
-### Medium Confidence (inferred from token usage patterns + general SaaS conventions)
-- Per-component patterns (button padding, table styling) — inferred from spacing scale + semantic colors; specific component code not exhaustively read
-- Default `border-radius: 4px` for buttons/cards — vibes does not tokenize radius; observed in component examples
-
-### Inferred (verify before relying on)
-- Brand wordmark explicitly uses `freee-logo` font; everywhere else uses the system stack — confirmed by `_fonts.scss` showing only the wordmark face is loaded
-- Animation timing — not in token files; assumed `0.2-0.3s ease`
-
-## Notes
-- freee Vibes is the **most cleanly architected** of the OMD references — three-tier token system (scale → semantic → component) with explicit naming conventions.
-- The 9-hue palette + per-hue 5-10 shade scale gives this system unusual breadth (vs. e.g., Mercari which is more focused on a few brand colors).
-- The brand color pattern (`$vbPrimaryColor === $vbLinkColor === $vbColorsP07`) means buttons and links share the same blue — a deliberate visual coherence choice.
-- Open-source license + active maintenance makes this a particularly durable reference; tokens won't silently drift.
-- Re-running `omd:add-reference` against this reference can pull updates from the GitHub repo's latest commit.
-
----
-
-## Philosophy Layer — added 2026-04-20
-
-Style reference: `line` (JP peer; best density match per Phase 10-2 auto-pick matrix for 🇯🇵 JP targets).
-
-### Sources used (Philosophy augmentation)
-- [corp.freee.co.jp/mission](https://corp.freee.co.jp/mission/) — used for: §10 voice samples ("スモールビジネスを、世界の主役に。"), §11 brand narrative (mission verbatim, SMB-as-catalyst framing).
-- [corp.freee.co.jp/company](https://corp.freee.co.jp/company/) — used for: §11 founder biography (Daisuke Sasaki, ex-Google SMB marketing APAC, 2012 founding).
-- [corp.freee.co.jp/sustainability/social/accessibility](https://corp.freee.co.jp/sustainability/social/accessibility/) — used for: §10 voice sample ("だれでもビジネスの主役になれる"), §11 closing paragraph, §12 Principle 7.
-- [a11y-guidelines.freee.co.jp/intro/intro.html](https://a11y-guidelines.freee.co.jp/intro/intro.html) — used for: §12 Principle 7 (WCAG 2.1 AA, concrete-over-abstract editorial stance).
-- [developers.freee.co.jp/entry/growing-vibes](https://developers.freee.co.jp/entry/growing-vibes) — used for: §12 Principle 7 (accessibility-as-foundation, tiered responsibility model), §11 (Vibes open-source rationale).
-- [brand.freee.co.jp/designphilosophy](https://brand.freee.co.jp/designphilosophy/) — used for: §10 intro (four-adjective register: かろやか / シンプル / あんしん / インテリジェント), §10 forbidden-phrases register, §12 Principles 2–4. *Note: page returned minimal markdown to WebFetch; the four-adjective register is confirmed across search-surface summaries and third-party writeups (Takram rebrand case, note.com, developers.freee.co.jp reading-group post) rather than by a single full-content fetch.*
-- [speakerdeck.com/magi1125/dezainpurinsipurunotukurikata](https://speakerdeck.com/magi1125/dezainpurinsipurunotukurikata) — used for: §12 Principles 1 and 8 (segment-by-workflow, helper-text-only-at-costly-fields framing).
-- [corp.freee.co.jp/news/20231219_design.html](https://corp.freee.co.jp/news/20231219_design.html) — used for: §11 (Vibes open-source announcement framing accessibility as the headline asset).
-
-### Gaps / concerns flagged
-- Three of six §10 voice samples are `<!-- illustrative -->` rather than `<!-- verified -->`. freee's customer-facing product UI is behind login, so in-app microcopy could not be scraped. All three illustrative samples are modeled on plain 丁寧語 observed on `corp.freee.co.jp` and `a11y-guidelines.freee.co.jp`. Reviewer with freee product access should cross-check before they are used as microcopy source.
-- §15 motion stance ("no spring, no overshoot") is an editorial derivation from product category + the four-adjective register. freee does not publish a motion spec; a reviewer with Vibes component source can verify or refute.
-- `brand.freee.co.jp/designphilosophy` page is heavily image/JS-driven; WebFetch returned only the page title. Content used was confirmed via search-surface cross-checks but not by a single full-markdown fetch.
-
-## Philosophy Layer QA (2026-04-20) — Diagnostic Rubric
-
-| # | Dimension | Score | Notes |
-|---|---|---|---|
-| D1 | §10 intro standalone, 3–5 lines, voice qualifiers | 🟢 | Standalone opener (no comparative reference to LINE / Mercari / Apple). 5 lines of prose. Four brand-published voice qualifiers (かろやか / シンプル / あんしん / インテリジェント) plus "plain, reassuring, unobtrusively competent" synthesis adjectives. |
-| D2 | §10 tone table 7–10 rows with brand-surface | 🟢 | 8 rows. Includes CTAs / Errors (2 variants) / Success / Onboarding (mandatory) + brand-specific rows: Help/inline explanation (tax-term gloss) and Accessibility surfaces (screen-reader + visible copy parity). |
-| D3 | §10 forbidden phrases with brand-specific items | 🟢 | Generic bans (革命的 / revolutionary / game-changer) + JP-specific カタカナ jargon bans (イノベーティブ / ディスラプティブ) + category-specific bans (emoji on money-moved, absolutes like 完全自動 / 100% 正確 that a tax authority could contradict). |
-| D4 | §10 voice samples ≥3 with verification tier markers | 🟢 | 6 samples total. 2 verified (mission tagline + accessibility tagline, both with URL + yyyy-mm markers). 1 cited (four-adjective register). 3 illustrative (empty state, validation error, success toast) with explicit illustrative markers. All 6 marked. |
-| D5 | §11 narrative with inline citations + footer manifest | 🟢 | Inline markdown links to corp.freee.co.jp/company, /mission, /sustainability/social/accessibility, a11y-guidelines.freee.co.jp, github.com/freee/vibes. Full source manifest in HTML comment footer with tiering (Direct / Cited / JP-translated / Base-carry / Interpretive). |
-| D6 | §12 principles with explicit UI implication | 🟢 | All 8 principles use explicit `*UI implication:*` label followed by concrete rule and example. |
-| D7 | §12 count 5–10 (target 7–9) | 🟢 | 8 principles. |
-| D8 | §13 personas ≤3 sentences, behavior-first, disclaimer | 🟢 | 4 archetypes, each ≤3 sentences. Disclaimer present. Japanese SMB context respected (ramen shop owner, sole-proprietor illustrator, 税理士, design-studio back-office lead). Behaviors dominate over background. |
-| D9 | §14 states 10–12, core types covered, no UI-pattern pollution | 🟢 | 12 rows. Core types covered: Empty (2), Loading (2), Error (3), Success (2), Skeleton, Disabled. Brand-authentic row: Approval pending (HR/expense workflow) — unique to SMB back-office context. No UI-pattern pollution. |
-| D10 | §15 spring stance explicit + rationale | 🟢 | Explicit: "No spring. No overshoot. No bounce." Rationale: accounting/tax product + four-adjective register; spring tells a user "watch this", which is wrong next to a ledger balance. |
-| D11 | §15 reduce-motion rule present | 🟢 | Present. All `motion-*` tokens collapse to `motion-instant` under `prefers-reduced-motion: reduce`. No exceptions; cross-referenced to Principle 7 (accessibility as product constraint). |
-
-**Result**: 11 🟢 / 0 🟡 / 0 🔴. **PASS.**

package/.opencode/oh-my-design/design-md/fugle/.verification.md

@@ -1,40 +0,0 @@
-# Fugle — Verification Notes (2026-06-03)
-
-## Proof — Tier 1 live inspect
-**Inspected:** 2026-06-03
-**Method:** raw source-file fetch (homepage HTML + CSS bundles + PWA manifest + developer portal CSS + Apple App Store listing)
-**Sources:**
-- https://www.fugle.tw (full HTML, inline `<style>`, meta tags)
-- https://dk91kmsnfr6kg.cloudfront.net/desktop/assets/fugle-desktop.d5b14f507dc94191ea072af78696b931.css (156,854 bytes)
-- https://dk91kmsnfr6kg.cloudfront.net/desktop/assets/chunk.ac7daef9fdaa5882212c.css (54,782 bytes)
-- https://dk91kmsnfr6kg.cloudfront.net/desktop/assets/chunk.ac7daef9fdaa5882212c.js (1,649,565 bytes)
-- https://www.fugle.tw/manifest.json
-- https://developer.fugle.tw/assets/css/styles.46d8cd92.css (129,961 bytes)
-- https://apps.apple.com/tw/app/fugle/id1542310263
-
-### Raw samples
-1. `www.fugle.tw` HTML inline style: `.lds-ellipsis div { background:#f4af1c; animation-timing-function:cubic-bezier(0,1,1,0) }` — primary amber, loading dot easing
-2. `www.fugle.tw` HTML meta: `<meta name="theme-color" content="#f4af1c">` — confirmed brand primary
-3. `www.fugle.tw/manifest.json`: `"theme_color": "#fbcc67"` — PWA manifest uses a lighter amber (conflict noted; CSS canonical value `#f4af1c` used as primary)
-4. `fugle-desktop.css` CSS custom properties: `--color-neutral-00-white:#ffffff; --color-neutral-04:#f5f5f5; --color-neutral-08:#eaeaea; --color-neutral-46:#8b8a8a; --color-neutral-80:#323232; --color-neutral-93:#131313` — full neutral scale
-5. `fugle-desktop.css` component: `.fugle-trade-box { border-radius:4px; box-shadow:0 2px 2px 0 rgba(0,0,0,.08),0 2px 7px 0 rgba(0,0,0,.1) }` — card radius and shadow
-6. `fugle-desktop.css` component: `.watchlist-stock { min-height:55px; border-bottom:1px solid var(--t20) }` — stock row height 55px, border rule
-7. `fugle-desktop.css` component: `input { height:32px; border-radius:4px; background-color:var(--t20); font-size:16px }` — input field tokens
-8. `chunk.ac7daef9fdaa5882212c.js` JS object: `red:"#f3746d",green:"#6c9c46",grey:"#545454"` — light theme trading colors
-9. `chunk.ac7daef9fdaa5882212c.js` JS object: `dark:{red:"#ff3737",green:"#6fda1a"}` — dark theme trading colors
-10. `developer.fugle.tw` CSS custom properties: `--p:#f4af1c; --p20:#fef4cf; --p60:#e49b00; --s:#4c85a0; --s60:#36708c` — full developer palette, confirms primary and secondary hues
-11. `developer.fugle.tw` CSS: `--ifm-color-primary:#f4af1c; --ifm-color-primary-dark:#e49b00` — Docusaurus override confirms brand primary
-12. `developer.fugle.tw` CSS: `font-family:"Noto Sans TC","Microsoft JhengHei"` — Traditional Chinese typeface
-13. `fugle-desktop.css` transition: `transition:all .2s cubic-bezier(.4,.6,.2,1)` — standard easing curve
-14. `apps.apple.com/tw/app/fugle/id1542310263` App Store description (zh-TW): `"認真的投資人值得更好的工具"` — core brand tagline
-
-## Tier 2 — cross-check
-- getdesign.md/fugle — **NOT LISTED**: "No designs found for 'fugle'."
-- refero — no TW/Fugle results; not applicable for Taiwan-based fintech.
-
-## Country + regional sources
-- Country: TW (Taiwan); parent company Fortuna Intelligence (富果股份有限公司), headquartered in Taipei, Taiwan
-- Brand-owned regional sources (≥2):
-  1. https://www.fugle.tw — main product domain, served from Taiwan, language `zh-Hant-TW`
-  2. https://developer.fugle.tw — official developer API portal, fugle.tw subdomain, Traditional Chinese product description
-  3. https://apps.apple.com/tw/app/fugle/id1542310263 — App Store Taiwan listing under developer "Fortuna Intelligence", app id `tw.fugle.flutter.app`

package/.opencode/oh-my-design/design-md/fugle/DESIGN.md

@@ -1,290 +0,0 @@
----
-id: fugle
-name: "Fugle"
-country: TW
-category: fintech
-homepage: "https://www.fugle.tw"
-primary_color: "#f4af1c"
-logo:
-  type: favicon
-  slug: "https://www.fugle.tw/images/favicon.ico"
-verified: "2026-06-03"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#f4af1c"
-    primary-hover: "#e49b00"
-    primary-tint: "#fef4cf"
-    secondary: "#4c85a0"
-    secondary-hover: "#36708c"
-    canvas: "#ffffff"
-    bg-secondary: "#f5f5f5"
-    border: "#eaeaea"
-    border-heavy: "#dfdfdf"
-    text: "#323232"
-    text-muted: "#8b8a8a"
-    dark-surface: "#131313"
-    rise: "#f3746d"
-    fall: "#6c9c46"
-    error: "#d12a2a"
-  typography:
-    family: { sans: "Lato", mono: "Lato" }
-    highlight: { size: 24, weight: 700, lineHeight: 1.4, use: "Data highlight values" }
-    heading:   { size: 20, weight: 700, lineHeight: 1.4, use: "Dialog / section headings" }
-    modal:     { size: 16, weight: 400, lineHeight: 1.5, use: "Modal body, form inputs" }
-    body:      { size: 14, weight: 400, lineHeight: 1.4, use: "Dense data rows" }
-    label:     { size: 12, weight: 400, lineHeight: 1.4, use: "Secondary labels, timestamps" }
-  spacing: { xs: 5, sm: 8, base: 16, lg: 20, xl: 32, section: 50 }
-  rounded: { sm: 4, md: 4, lg: 8, full: 9999 }
-  shadow:
-    card: "0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1)"
-    popover: "0 0 24px 0 rgba(0,0,0,.08)"
-    modal: "0 0 17px 0 rgba(0,0,0,.14), 0 8px 9px 0 rgba(0,0,0,.12)"
-  components:
-    button-primary: { type: button, bg: "#f4af1c", fg: "#ffffff", radius: "4px", font: "14px / 700", use: "Amber CTA; hover #e49b00" }
-    input-default: { type: input, bg: "#eaeaea", radius: "4px", padding: "0 5px", font: "16px / 400", use: "Search / trade input, 32px height" }
-    list-item-stock: { type: listItem, bg: "#ffffff", radius: "0px", font: "14px / 400", use: "Watchlist row, 55px height, 1px #eaeaea border; hover rgba(0,0,0,0.04)" }
-    card-trade: { type: card, bg: "#ffffff", radius: "4px", padding: "20px 0", use: "Surface trade box card" }
-    card-info: { type: card, bg: "#eaeaea", radius: "8px", use: "Highlighted info box" }
-    dialog: { type: dialog, bg: "#ffffff", radius: "4px", padding: "16px", font: "16px / 400", use: "Modal dialog container" }
-  components_harvested: true
----
-
-# Fugle
-
-Taiwan's visual-first stock research and trading platform, built by investors for serious investors.
-
-## 1. Visual Theme & Atmosphere
-
-Fugle's interface speaks the language of precision and calm confidence. A predominantly light, near-white canvas — `#f5f5f5` for secondary surfaces, `#ffffff` for foreground containers — keeps the dense data of Taiwan equity markets easy to scan without overwhelming the eye. Against this quiet ground, the brand's signature amber `#f4af1c` appears sparingly but unmistakably: loading indicators, live-chat buttons, version badges, and chart reference lines all carry the same warm gold tone. The dark theme inverts the arrangement, dropping to a near-black `#131313` base with `#323232` surface layers, letting red and green trading signals pop with strong luminance contrast. Two modes share the same structural rhythm — compact rows, 4 px and 8 px radii, tight 12–14 px body type — giving both themes an identical sense of discipline and information density appropriate to active trading.
-
-## 2. Color Palette & Roles
-
-- **Brand Amber:** `#f4af1c` — primary brand color; loading spinners, live-chat button, version badges, chart line accent, primary CTA background
-- **Amber Dark:** `#e49b00` — hover state for primary buttons (`--p60`), icon fills on emphasis
-- **Amber Tint:** `#fef4cf` — soft background for amber-highlighted content areas (`--p20`)
-- **Secondary Blue:** `#4c85a0` — secondary interactive elements, link text default (`--s`, `--color-neutral-link-50`)
-- **Secondary Blue Dark:** `#36708c` — secondary blue hover (`--s60`)
-- **Surface White:** `#ffffff` — card backgrounds, modal surfaces, `--color-neutral-00-white`
-- **Background Secondary:** `#f5f5f5` — page backgrounds, hover fills (`--color-neutral-04`)
-- **Border Default:** `#eaeaea` — dividers, default strokes (`--color-neutral-08`)
-- **Border Heavy:** `#dfdfdf` — emphasized borders (`--color-neutral-13`)
-- **Secondary Text:** `#8b8a8a` — muted labels, helper text (`--color-neutral-46`)
-- **Body Text:** `#323232` — primary foreground text (`--color-neutral-80`)
-- **Dark Surface:** `#131313` — dark-mode primary background (`--color-neutral-93`)
-- **Rise (Light):** `#f3746d` — stock price rise in light theme (TW convention: red = up)
-- **Fall (Light):** `#6c9c46` — stock price fall in light theme (TW convention: green = down)
-- **Error:** `#d12a2a` — system errors, form validation (`--color-red-600`)
-
-## 3. Typography Rules
-
-Fugle uses **Lato** (via Google Fonts) as the Latin character family across the main web trading platform, complemented by **Noto Sans TC** and **Microsoft JhengHei** on the developer documentation portal for Traditional Chinese text. The Material Icons font handles iconography throughout.
-
-Body text runs at **14 px / normal** weight for dense data rows, **12 px** for secondary labels and timestamps, and **16 px** for modal body copy and form inputs. Section headings use **20 px / 700** in dialogs, and data highlight values reach **18–24 px**. Line heights are kept tight to maximize data density — approximately 1.4–1.5× for multi-line text. Font weight vocabulary: 400 for body, 700 for emphasis and headings. No custom variable fonts detected.
-
-## 4. Component Stylings
-
-### Primary Button
-
-**Amber CTA (e.g. "開始交易")**
-- Background: `#f4af1c`
-- Text: `#ffffff`
-- Border: none
-- Radius: 4px
-- Font: 14px / 700
-
-**Amber CTA Hover**
-- Background: `#e49b00`
-- Text: `#ffffff`
-- Radius: 4px
-
-### Input Field
-
-**Default Search / Trade Input**
-- Background: `#eaeaea`
-- Border: none
-- Radius: 4px
-- Height: 32px
-- Padding: 0 5px 0 5px
-- Font: 16px / 400
-
-**Input Group (with label)**
-- Border: 1px solid `#eaeaea`
-- Radius: 4px
-- Height: 32px
-
-### Stock Row (Watchlist)
-
-**Default Stock List Item**
-- Background: `#ffffff`
-- Border: 1px solid `#eaeaea`
-- Radius: 0px
-- Height: 55px
-- Font: 14px / 400
-
-**Hovered Stock Row**
-- Background: `rgba(0,0,0,0.04)`
-
-### Card / Trade Box
-
-**Surface Card (e.g. fugle-trade-box)**
-- Background: `#ffffff`
-- Border: none
-- Radius: 4px
-- Padding: 20px 0
-
-**Info Card (e.g. watchlist-stock__box)**
-- Background: `#eaeaea`
-- Radius: 8px
-
-### Modal
-
-**Dialog Container**
-- Background: `#ffffff`
-- Radius: 4px
-- Font: 16px / 400
-- Padding: 16px
-
----
-**Verified:** 2026-06-03
-**Tier 1 sources:** https://www.fugle.tw (HTML, inline CSS, manifest.json), https://dk91kmsnfr6kg.cloudfront.net/desktop/assets/fugle-desktop.d5b14f507dc94191ea072af78696b931.css, https://dk91kmsnfr6kg.cloudfront.net/desktop/assets/chunk.ac7daef9fdaa5882212c.css, https://developer.fugle.tw/assets/css/styles.46d8cd92.css, https://apps.apple.com/tw/app/fugle/id1542310263
-**Tier 2 sources:** getdesign.md/fugle — No designs found for "fugle". refero — no TW/Fugle results expected.
-**Conflicts unresolved:** HTML `theme-color` is `#f4af1c`; PWA manifest `theme_color` is `#fbcc67` (a lighter amber). The CSS custom property `--p` and developer portal's `--ifm-color-primary` both canonically define `#f4af1c`; the manifest value is likely a PWA splash-screen approximation. Primary recorded as `#f4af1c`.
-
-## 5. Layout Principles
-
-Fugle's web trading platform is a dense multi-panel grid. The header is fixed at **50 px** height. A left sidebar watchlist panel (configurable width via `--watchListWidth`) sits beside a scrollable main canvas. The trading panel (`--tradingWidth`) expands from the right edge. The main content container caps at **1508 px** max-width for standard market views, but trading views use `max-width: initial` for full-bleed chart display. Column grids follow Bootstrap-compatible breakpoints: 576 px (sm), 768 px (md), 1280 px (lg), 1440 px / 1680 px (xl variants for watchlist density). Card grids use CSS grid with responsive `repeat(N, 1fr)` columns that scale from 2 up to 5 columns depending on viewport.
-
-## 6. Depth & Elevation
-
-Fugle uses a layered shadow system that signals interactive hierarchy without dramatic depth:
-
-- **Resting card:** `box-shadow: 0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1)`
-- **Dropdown / popover:** `box-shadow: 0 0 24px 0 rgba(0,0,0,.08)`
-- **Modal / elevated panel:** `box-shadow: 0 0 17px 0 rgba(0,0,0,.14), 0 8px 9px 0 rgba(0,0,0,.12)`
-- **Focus / active ring:** `box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 3px rgba(0,0,0,.12), 0 4px 15px 0 rgba(0,0,0,.2)`
-- **Side panel frame:** `box-shadow: 0 4px 8px -4px var(--color-component-web-frame-shadow-default), 0 8px 16px -4px var(--color-component-web-frame-shadow-default)` — `rgba(0,0,0,0.08)` in light, `rgba(255,255,255,0.08)` in dark
-
-Dark mode shadows use white-alpha variants to create the inverse glow effect. No `z-index`-heavy stacking unless modals are active.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use `#f4af1c` amber as the single primary CTA color across light and dark modes
-- Show red (`#f3746d`) for rising prices and green (`#6c9c46`) for falling prices — follow Taiwan Stock Exchange convention, opposite of Western norms
-- Keep card surfaces white (`#ffffff`) in light mode and dark (`#131313`) in dark mode; always separate with subtle border `#eaeaea` rather than heavy shadows
-- Use Lato for Latin numerals in data-dense contexts; pair with Noto Sans TC for Chinese labels
-- Apply `border-radius: 4px` uniformly to buttons, inputs, and cards; reserve `8px` for highlighted info boxes
-- Limit the primary amber to interactive hotspots — loading states, primary buttons, notification badges — so it retains signal value
-
-### Don't
-- Don't use amber as a neutral fill or background wash — it should always signal action or system state
-- Don't swap the red/green convention to Western defaults; Fugle's users rely on red = up, green = down
-- Don't use heavy drop shadows on resting states; the light `rgba(0,0,0,.08)` layered shadow is intentional
-- Don't exceed 16 px body font in data rows — density is a core UX value
-- Don't add decorative illustration or gradient washes to the trading canvas; the chart data is the visual
-- Don't use the dark theme in onboarding or marketing contexts; it's designed for active-trading sessions
-
-## 8. Responsive Behavior
-
-The platform targets desktop-first (min 1024 px canvas) and degrades gracefully to tablet. Breakpoints mirror Bootstrap: 576 px, 768 px, 1280 px, 1440 px, 1680 px. The watchlist sidebar collapses on narrow viewports. The trading panel (`--tradingWidth`) is hidden by default and slides in over the canvas on demand. Card grids scale: 1 column below 576 px, 2 columns at md, 3–5 at xl depending on feature area. Mobile is covered by the native iOS/Android app (Fugle app id 1542310263), which shares the brand's color and typography tokens but uses a card-based vertical scroll layout optimized for thumb navigation.
-
-## 9. Agent Prompt Guide
-
-When building Fugle-style interfaces:
-
-- Start with a white (`#ffffff`) or light-grey (`#f5f5f5`) canvas, dense 12–14 px body text in Lato, no decorative imagery
-- Primary CTAs: `background #f4af1c`, white text, 4 px radius, no visible border, hover to `#e49b00`
-- Data rows: `min-height 55px`, `border-bottom 1px solid #eaeaea`, hover `rgba(0,0,0,0.04)` background
-- Price changes: **always** red for rise, green for fall (TW convention); use `#f3746d` / `#6c9c46` in light mode
-- Cards: `border-radius 4px`, `box-shadow 0 2px 2px 0 rgba(0,0,0,.08), 0 2px 7px 0 rgba(0,0,0,.1)`, no border
-- Form inputs: `height 32px`, `border-radius 4px`, background `#eaeaea`, `font-size 16px`
-- Transitions: `0.2s cubic-bezier(.4,.6,.2,1)` for most UI state changes
-- Dark mode: swap backgrounds to `#131313` / `#222222` surfaces; keep `#f4af1c` amber unchanged
-
-## 10. Voice & Tone
-
-Fugle's voice is **precise, empowering, and peer-to-peer** — a fellow investor who happens to have built better tools, speaking directly to another serious investor.
-
-| Dimension | Do | Don't |
-|---|---|---|
-| Register | Conversational but expert; uses financial terminology naturally | Dumbed-down language or over-explaining basics |
-| Stance | Equal peer — "we research too" | Corporate authority — "our platform provides" |
-| Framing | Research space, decision clarity, serious purpose | FOMO urgency, get-rich language, hype |
-| Sentence length | Short to medium; punchy declaratives | Long compound clauses |
-
-Voice samples (illustrative, modelled on App Store copy tone):
-
-- "告別密密麻麻數字的傳統看盤軟體。" — *Illustrative: crisp one-liner that rejects the status quo without drama.*
-- "認真的投資人，值得更好的工具。" — *Illustrative: the core brand promise stated as self-evident truth, not a sales claim.*
-- "把時間花在決策，而非整理資料。" — *Illustrative: frames value through the user's time, not the product's features.*
-
-## 11. Brand Narrative
-
-Fugle (富果, "rich harvest") was founded in Taiwan by Fortuna Intelligence, a team that describes itself as being simultaneously developers and practicing investors who watch the markets daily. The animating frustration was the poor quality of existing retail trading interfaces — dense, noisy, built around brokerage workflow rather than investor research workflow — and the refusal to accept that as the only option.
-
-The platform launched as a web trading app paired with a market data API, positioning itself at the intersection of fintech and developer tooling. The developer portal (developer.fugle.tw) made real-time Taiwan stock data accessible via clean REST and WebSocket APIs, partnering with Fubon, Taishin, and E.Sun securities to offer actual order execution. This dual strategy — beautiful research UI for investors, clean API for developers — reflects a philosophy that serious financial tools should meet users where they are, whether at a trading terminal or a code editor.
-
-Today Fugle frames its mission around a simple belief: "認真的投資人值得更好的工具" — serious investors deserve better tools. The product is designed not to compete with professional Bloomberg terminals or to simplify investing into a game, but to occupy a deliberate middle ground: rigorous, visual, and genuinely pleasant to use for hours of research.
-
-## 12. Principles
-
-1. **Data clarity over data density.** Every number on screen should earn its place. When a display becomes crowded, the answer is smarter information architecture — heatmaps, visual cards — not smaller type. *UI implication:* use whitespace and visual hierarchy in card layouts rather than cramming more data into fewer pixels.
-
-2. **Investor perspective, not brokerage perspective.** The interface is organized around how an investor thinks (by thesis, sector, comparison) not how a brokerage processes orders. *UI implication:* watchlists, custom research cards, and side-by-side comparisons are first-class features; order ticket is secondary until the user is ready to transact.
-
-3. **Amber signals action.** The brand's single accent color is reserved for interactive moments — loading, primary buttons, live notifications. Overuse dilutes the signal. *UI implication:* no decorative amber, no amber text, no amber borders; only amber fills on actionable elements.
-
-4. **Both modes are production-quality.** Light mode for daytime research, dark mode for active trading sessions — neither is an afterthought. *UI implication:* every component must be spec'd for both themes with equal care; dark mode uses near-black surfaces, not grey.
-
-5. **Serious tools should still feel fast.** Transitions are tight (0.2 s) and purposeful. Animation is reserved for loading states and layout expansions, not decoration. *UI implication:* use `cubic-bezier(.4,.6,.2,1)` easing on state changes; avoid entrance animations on data rows.
-
-## 13. Personas
-
-*Illustrative — not based on published Fugle user research.*
-
-**Illustrative: The Research-First Investor (個人投資者)**
-Mid-career professional, 35–50, investing personal savings in Taiwan equities. Spends evenings building sector maps and comparing fundamentals across 5–15 stocks. Values clarity and speed; deeply annoyed by noise. Uses Fugle's custom card layout to structure a personal research SOP.
-
-**Illustrative: The Developer-Investor (開發者投資人)**
-Software engineer in their late 20s–early 40s who approaches investing algorithmically. Builds personal screeners using Fugle's marketdata API. Values API quality, documentation clarity, and free-tier access for prototyping. Attracted by the developer-friendly portal and Noto Sans TC-styled docs.
-
-**Illustrative: The Active Trader (短線交易者)**
-Experienced retail trader who watches intraday tick data and uses the dark theme during market hours. Needs every pixel to serve a function. Relies heavily on the watchlist panel and real-time price update animations. Irritated by anything that obscures the bid/ask spread display.
-
-**Illustrative: The Student Investor (學習型投資人)**
-University student or new entrant to Taiwan equity investing, 20–28. Discovered Fugle through a campus or online investing community. Drawn to the clean visual design compared to legacy broker platforms. Starts with the mobile app and explores web tools as confidence grows.
-
-## 14. States
-
-- **Empty — Watchlist:** Watchlist panel shows a placeholder prompt to add a stock ticker; no skeleton rows; single amber CTA button "新增自選股"
-- **Loading — Data fetch:** Three amber `#f4af1c` bouncing dots (border-radius 50%, 11 px, `lds-ellipsis` animation at 0.6 s cubic-bezier(0,1,1,0)); used both on initial page load and in-panel data refresh
-- **Error — No data / API timeout:** Inline message inside the affected card or panel; muted text `#8b8a8a`; no modal interruption; retry link styled as secondary text link
-- **Error — Form validation:** Input border switches to `#d12a2a` (`--color-red-600`); error message appears below field at 12 px muted red
-- **Success — Order submitted:** In-panel confirmation message with a green `#6c9c46` checkmark icon; auto-dismisses after 3 s without blocking interaction
-- **Skeleton — Chart/card loading:** Placeholder shimmer animation (`placeHolderShimmer` keyframe, 500 ms interval defined in `loadingDelay`); uses `#eaeaea` animated gradient across content areas
-- **Disabled — Button:** `background-color rgba(0,0,0,.12)`, `color rgba(0,0,0,.26)`, `box-shadow none`, `cursor not-allowed`; no amber used on disabled state
-
-## 15. Motion & Easing
-
-**Duration scale:**
-- Micro (icon state): 0.1 s
-- Fast (hover, focus): 0.2 s
-- Standard (panel expand, input transitions): 0.3 s
-- Moderate (fade, scroll animation): 0.425 s
-- Slow (panel slide, complex layout): 0.6–0.65 s
-- Extra-slow (chart loading dot): 0.6 s loop, 9 s total for secondary spinners
-
-**Primary easing:** `cubic-bezier(.4,.6,.2,1)` — Fugle's signature curve, used on layout transitions, header animations, and most interactive state changes. It has a sharp initial acceleration (the `.6` control point) and a gentle deceleration that gives the UI a confident, purposeful feel.
-
-**Secondary easing:** `cubic-bezier(0,1,.5,1)` — used for panel reveal/collapse; starts slow and exits fast, creating a "snap open" character.
-
-**Loading animation:** `cubic-bezier(0,1,1,0)` — the bouncing dot easing; exaggerated overshoot gives the brand's only playful motion moment.
-
-**Rules:**
-- All data-row hover transitions use `0.2s` or less; never animate data values themselves
-- Layout changes (watchlist open/close, trading panel) use the `--layoutDuration` CSS variable with the primary cubic-bezier curve
-- No entrance animations on stock rows or chart data; they appear instantly
-- Opacity fades use 0.425 s for modals and overlays

package/.opencode/oh-my-design/design-md/funnow/.verification.md

@@ -1,62 +0,0 @@
-# FunNow — Verification Notes (2026-06-10)
-
-## Proof — Tier 1 live inspect
-
-**Inspected:** 2026-06-10
-**Method:** playwright getComputedStyle (live DOM) — global playwright (chromium, headless), goto domcontentloaded + 3.5–4.5s settle, modal/cookie dismissal pass, then `getComputedStyle` on body, h1/h2/h3, buttons, inputs, tabs, badges/chips, plus full-DOM background/text color frequency scans on three surfaces.
-**Sources:**
-- https://www.myfunnow.com/en (homepage — toolbar, hero, booking bar, product cards, tags)
-- https://www.myfunnow.com/en/regions/1/categories/10265 (Taipei Hot Spring category — page title, filter tabs, listing chrome)
-- https://www.events.myfunnow.com/booking-en (FunNow Booking merchant surface — CTAs, headings)
-
-### Raw samples
-- `myfunnow.com/en` · body · `font-family: "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang TC", "Microsoft JhengHei", ...` · `color: rgb(37, 39, 41)` (#252729) · `font-size: 15px` · `line-height: 22.5px` · `background-color: rgb(244, 244, 245)` (#f4f4f5)
-- `myfunnow.com/en` · hero H1 "Explore & book your fun activities in Ta…" · `font-size: 36px` · `font-weight: 500` · `color: rgba(0, 0, 0, 0.87)` · height 88px (2 lines ≈ 44px lh)
-- `myfunnow.com/en` · hero H2 "Book motel & hotel, massage & spa, resta…" · `font-size: 17px` · `font-weight: 400` · `color: rgb(37, 39, 41)`
-- `myfunnow.com/en` · search submit button · `background-color: rgb(255, 85, 55)` (#ff5537) · `color: rgb(255, 255, 255)` · `border-radius: 4px` · `padding: 0px 16px` · height 40px · `font-size: 14px` · Material elevation shadow `rgba(0, 0, 0, 0.2) 0px 0px 0px 0px, rgba(0, 0, 0, 0.14) 0px …`
-- `myfunnow.com/en` · "Download App" button · `color: rgb(77, 203, 203)` (#4dcbcb) · `border: 1px solid rgb(77, 203, 203)` · `border-radius: 4px` · `padding: 0px 8px` · height 36px · `font-size: 15px`
-- `myfunnow.com/en` · "Login / Sign Up" button · transparent bg · `color: rgb(0, 0, 0)` · `border-radius: 4px` · `padding: 0px 8px` · height 36px · `font-size: 15px`
-- `myfunnow.com/en` · booking bar buttons (Category/Now/Date/Time/Pax) · transparent bg · `color: rgba(0, 0, 0, 0.87)` · `border-radius: 4px` · `padding: 0px 12px` · height 40px · `font-size: 17px`
-- `myfunnow.com/en` · search input · `font-size: 16px` · `padding: 8px 16px` · height 40px · `border-radius: 0px`
-- `myfunnow.com/en` · badge "Available now" · `background-color: rgb(255, 85, 55)` (#ff5537) · `color: rgb(255, 255, 255)` · `border-radius: 4px` · `padding: 2px 8px` · `font-size: 12px` · `font-weight: 500`
-- `myfunnow.com/en` · badge "Flash Sales Now" / "06:00 Flash Sale" · `background-color: rgb(90, 105, 235)` (#5a69eb) · `color: rgb(255, 255, 255)` · `border-radius: 4px` · `padding: 0px 8px` · `font-size: 12px` · `font-weight: 400`
-- `myfunnow.com/en` · product tiles · class `v-card v-card--flat` · `background-color: rgb(255, 255, 255)` · `border-radius: 4px` · `box-shadow: none` · measured 360×135 (list) and 233×146 (carousel)
-- `myfunnow.com/en` · bg frequency scan (top): `rgba(0,0,0,0.87)` ×387, `rgb(255,255,255)` ×175, `rgb(255,85,55)` ×43 (#ff5537), `rgba(0,0,0,0.4)` ×19, `rgb(255,177,7)` ×17 (#ffb107), `rgb(90,105,235)` ×13 (#5a69eb), `rgb(37,39,41)` ×9, `rgb(167,167,169)` ×6 (#a7a7a9), `rgb(77,203,203)` ×1 (#4dcbcb), `rgb(255,216,209)` ×1 (#ffd8d1), `rgb(255,238,235)` ×1 (#ffeeeb)
-- `myfunnow.com/en` · fg frequency scan (top): `rgba(0,0,0,0.87)` ×1770, `rgb(37,39,41)` ×502 (#252729), `rgb(255,255,255)` ×466, `rgb(255,85,55)` ×221 (#ff5537), `rgb(0,0,0)` ×125, `rgb(167,167,169)` ×60 (#a7a7a9), `rgb(77,203,203)` ×18 (#4dcbcb)
-- `regions/1/categories/10265` · page H1 "Taipei｜TaoyuanHot Spring" · `font-size: 24px` · `font-weight: 700` · height 36px
-- `regions/1/categories/10265` · page H2 intro · `font-size: 18px` · `font-weight: 400`
-- `regions/1/categories/10265` · filter tab "All" (active) · `color: rgb(255, 85, 55)` (#ff5537) · `font-size: 17px` · `padding: 0px 16px` · height 48px; inactive tabs ("Beitou Hot Spring Hotel" …) `color: rgb(37, 39, 41)` (#252729) · height 48px
-- `events.myfunnow.com/booking-en` · CTA "Reach Out to Us" / "Get Started" / "Grow with Us" · `background-color: rgb(255, 85, 55)` (#ff5537) · `border-radius: 5px` · height 35–40px
-- `events.myfunnow.com/booking-en` · H1 "FunNow Booking — Help you stay on top" · `font-size: 46px` · `color: rgb(37, 39, 41)`; H2 sections `font-size: 34–38px` · `font-weight: 400`
-
-## Country sources (TW — brand-owned ≥2 requirement)
-
-1. **https://www.myfunnow.com** — FunNow official consumer platform (Tier 1 live-inspected on two surfaces: homepage + category listing).
-2. **https://blog.myfunnow.com** — FunNow official lifestyle blog 「FunNow｜生活玩樂誌」 (brand-owned; deal guides and brand voice).
-3. **https://www.events.myfunnow.com/whyfunnow-zh** — official "Why FunNow" brand page (brand-owned; mission, slogans: "Last minute unlimited", "線上一鍵預訂，線下即刻出發！", "尖峰有優惠，離峰更划算！").
-4. **https://www.events.myfunnow.com/booking-en** — FunNow Booking merchant SaaS surface (brand-owned; live-inspected).
-
-Note: getdesign.md / styles.refero.design / Google favicon proxy are explicitly NOT counted toward the TW brand-owned requirement.
-
-## Tier 2 attempts
-
-- **getdesign.md/funnow** — WebFetch 2026-06-10 → 404 / "No designs found for 'funnow'". No brand-name variant exists (myfunnow also implausible; site search itself reported zero results).
-- **styles.refero.design/?q=funnow** — playwright navigate 2026-06-10 → search executed, results returned unrelated brands only (Wizz, Fold, Foodnoms, Fuser, Busuu…). FunNow not listed.
-
-→ Tier 2: none available. Tier 1 live inspect carries all token claims (TW policy per `spec/regional-sources.yaml`).
-
-## Conflict matrix
-
-| Field | Tier 1 (live) | getdesign | refero | Resolution |
-|---|---|---|---|---|
-| Primary color | `#ff5537` (CTA, tags, active tab, favicon SVG fill) | n/a (404) | n/a (not listed) | `#ff5537` — Tier 1 only, cross-confirmed by official favicon SVG `fill="#FF5537"` |
-| Radius | 4px (consumer product), 5px (events/merchant pages) | n/a | n/a | 4px canonical; 5px noted as merchant-surface variant — documented, not a conflict |
-| Heading color | `rgba(0,0,0,0.87)` (homepage H1) vs `rgb(37,39,41)` (events headings, body) | n/a | n/a | Both kept: Material 87%-black default + `#252729` charcoal; documented in §2 |
-
-No unresolved conflicts.
-
-## Logo decision
-
-- Google s2 favicon proxy (`domain=myfunnow.com&sz=128`): 223 B PNG at **32×32** only (Google lacks a 128px render) — but visually verified as the real FunNow "f" mark in brand orange, NOT a generic globe.
-- `cdn.simpleicons.org/funnow` → 404. `github.com/FunNow` org exists but avatar is an auto-generated identicon (not a logo).
-- **Chosen:** `type: favicon, slug: https://cdn.myfunnow.com/web/images/funnow_favicon.svg` — the site's own `<link rel="icon">` asset, 517 B SVG, HTTP 200, vector brand mark with `fill="#FF5537"`. (Precedent: 29cm uses a direct brand-CDN asset URL as favicon slug.)