@kenkaiiii/ggcoder 5.20.2 → 5.20.4

package/assets/skills/evidence-led-ui/SKILL.md

@@ -21,8 +21,12 @@ Apply these on every UI task. Read `references/craft-rulings.md` when implementi
 
 - **No emoji UI:** Never use emoji as icons, bullets, status marks, or decoration unless explicitly requested. Reuse the project icon system; otherwise use one coherent icon package.
 - **Uniform geometry:** Align containers, columns, section edges, baselines, dividers, control heights, and repeated component anatomy. Break alignment only for a clear content reason.
+- **One shared content rail:** Default navigation, header, main content, footer, and adjacent sections to the same max-width, inline gutters, and breakpoint padding. Full-bleed backgrounds may differ, but their inner content edges must align. Any different width or offset needs an explicit user or content reason, never one-off margin or padding.
+- **No edge-hugging control icons:** Select, dropdown, and combobox chevrons and other trailing icons need a deliberate inline-end inset plus enough reserved text padding for the icon and gap. They must never touch the control edge or overlap content; use logical properties so the anatomy also works in RTL.
 - **Reuse first:** Search for existing components, variants, tokens, utilities, icon wrappers, focus rings, and motion curves before creating new ones.
 - **Purposeful feedback:** Relevant hover, focus, press, selected, expanded, loading, success, and error states need clear feedback. Avoid abrupt changes when a short transition improves continuity.
+- **No soft semantic tint-on-tint:** Do not default badges, buttons, toasts, cards, selected states, or icon medallions to a low-opacity semantic-color background with saturated same-hue text or icons, with or without a matching border. Unless the user explicitly requests that treatment or an established system must be preserved, choose a product-specific alternative rather than imposing one universal replacement style.
+- **No sticky pointer focus:** Clicking or tapping must not leave a focus ring, highlighted border, shadow, background, or container `:focus-within` treatment stuck after the interaction ends, a native popup closes, or the user clicks elsewhere. Preserve immediate, visible keyboard focus by distinguishing input modality instead of suppressing focus globally.
 - **No generic hover lift:** Do not default to `translateY`, bobbing, floating, or scale-up on hover. Prefer color, border, underline, icon fill, opacity, or restrained shadow changes.
 - **No `transition: all`:** Name transition properties, reuse duration/easing tokens, and provide a reduced-motion path.
 - **Intentional type:** Reuse the existing type system. For net-new web work, select an appropriate modern family or pairing; do not use Arial, Helvetica, or bare `system-ui` as the aesthetic direction.
@@ -90,7 +94,7 @@ One thesis leads. Do not combine several aesthetic directions into a mood-board
 
 ### 5. Run the anti-default check
 
-For broad visual work, read `references/anti-defaults.md`. Flag emoji UI, mixed icon families, arbitrary misalignment, duplicated local styling, abrupt interaction, generic hover lift, generic type, generated em dashes, centered gradient heroes, glass cards, equal card grids, decorative eyebrows, random metric blocks, ubiquitous pills, dark-premium assumptions, fake terminals, floating screenshots, bento layouts, ambient motion, icon medallions, and invented proof.
+For broad visual work, read `references/anti-defaults.md`. Flag emoji UI, mixed icon families, arbitrary misalignment, duplicated local styling, abrupt interaction, generic hover lift, soft semantic tint-on-tint treatments, generic type, generated em dashes, centered gradient heroes, glass cards, equal card grids, decorative eyebrows, random metric blocks, ubiquitous pills, dark-premium assumptions, fake terminals, floating screenshots, bento layouts, ambient motion, icon medallions, and invented proof.
 
 Keep a flagged pattern only after completing: **“This belongs because…”** with a product-specific reason. Replace choices that could survive unchanged in an unrelated product.
 
@@ -101,6 +105,7 @@ Plan only relevant states, but include the complete primary path and recovery:
 - loading, empty, error, retry, offline, success, disabled, and destructive outcomes;
 - hover, focus-visible, press, selected, expanded, and pending feedback;
 - keyboard order, accessible names/status, overlay focus, and drag alternatives;
+- pointer-versus-keyboard focus behavior, including native popup dismissal and clicks onto non-focusable space;
 - narrow, intermediate, desktop, wide/resizable, pointer, touch, and no-hover behavior;
 - reduced motion, forced colors, zoom/reflow, long/localized/RTL text, missing media, and realistic data extremes.
 
@@ -114,7 +119,7 @@ For a broad page, multi-screen feature, or redesign, create or update `DESIGN.md
 
 Use real project content and data. Label fixtures honestly. Never invent testimonials, customer logos, ratings, metrics, or claims as fact.
 
-Reuse dependencies and primitives. Use one coherent icon system. Maintain semantic controls, visible focus, keyboard operation, measured contrast, readable line lengths, stable adaptive layout, and reduced-motion support. Implement the complete planned flow, not only its first screenshot.
+Reuse dependencies and primitives. Use one coherent icon system. Maintain semantic controls, visible keyboard focus, keyboard operation, measured contrast, readable line lengths, stable adaptive layout, and reduced-motion support. Pointer interaction must not leave a false focus, active, or selected-looking highlight behind. Implement the complete planned flow, not only its first screenshot.
 
 The representative initial state must keep decision-critical information and the primary action visible or one obvious action away on desktop and mobile. Preserve selected context through master-detail recomposition. Keep demo, debug, and state-switching controls subordinate and non-obscuring.
 

package/assets/skills/evidence-led-ui/references/anti-defaults.md

@@ -3,7 +3,7 @@
 ## Contents
 
 - Purpose and review method
-- Template composition: centered gradient hero, glass cards, equal card grids, eyebrows, metric blocks, pills, dark-premium assumptions, huge type, fake terminals, floating screenshots, and bento layouts
+- Template composition: centered gradient hero, glass cards, equal card grids, eyebrows, metric blocks, pills, soft semantic tint-on-tint treatments, dark-premium assumptions, huge type, fake terminals, floating screenshots, and bento layouts
 - Decoration and truth: ambient motion, icon medallions, false authenticity, emoji, and mixed icon language
 - Craft regressions: generic hover lift, abrupt states, accidental misalignment, reimplemented local styling, generic type, and generated em dashes
 - Final anti-default review
@@ -62,6 +62,14 @@ For every flagged pattern, write one sentence: **“This belongs because…”**
 
 **Legitimate when:** The project already uses an orbital/capsule motif, a control’s variable label length needs it, or tactile consumer friendliness is a deliberate material rule.
 
+## Soft semantic tint-on-tint
+
+**AI tell:** Badges, buttons, toasts, cards, selected states, status rows, and icon medallions repeatedly use low-opacity semantic-color backgrounds with saturated same-hue text or icons, sometimes with a matching border. Component libraries often name this formula `soft`, `subtle`, `surface`, or `tonal`.
+
+**Default action:** Replace the formula, then derive the new treatment from the product's actual aesthetic and component role. A neutral surface with one semantic marker, a solid fill with neutral high-contrast text, monochrome styling, product accent, typography, or another coherent local material model can work; none is the universal replacement.
+
+**Legitimate when:** The user explicitly requests tint-on-tint or exact reuse of an established design-system variant is required by scope. Unlike most patterns in this file, this is a binding craft default rather than a pattern justified by generic claims such as `clean`, `friendly`, or `modern`.
+
 ## Dark equals premium
 
 **AI tell:** Near-black canvas, purple glow, thin gray borders, and muted text chosen without product evidence.

package/assets/skills/evidence-led-ui/references/craft-rulings.md

@@ -38,6 +38,22 @@ Uniformity means shared geometry, not equal visual importance.
 - Preserve alignment through responsive recomposition. Mobile may change order or layout, but repeated controls and content edges remain internally consistent.
 - Break the grid only to express real hierarchy, media behavior, or editorial emphasis. A deliberate exception should be visible as an exception, not look accidental.
 
+### Shared content rails and spacing ownership
+
+Establish one page-shell or container primitive that owns the default max-width and responsive inline gutters. Reuse it for navigation, headers, breadcrumbs, main content, adjacent sections, and footers. A full-bleed background or divider may span the viewport, but its inner content returns to the shared rail. A navbar that is slightly wider or narrower than the page body, or neighboring sections with almost-matching edges, is a craft failure unless the user or content explicitly requires a different composition.
+
+Use the project's spacing tokens for repeated section padding, stack gaps, grid gaps, and component insets. The parent layout owns spacing between siblings; each component owns its internal padding. Do not combine ad hoc child margins, wrapper padding, and arbitrary offsets until one section merely looks close to another. A deliberate nested rail, breakout, or asymmetric section needs a visible hierarchy or content reason and must resolve cleanly at every breakpoint.
+
+Test by drawing vertical guides through navigation, header, main, repeated sections, and footer at narrow, intermediate, desktop, and wide sizes. Their inner edges and breakpoint changes must align exactly by default. Compare repeated vertical gaps and section padding side by side; equal roles use equal tokens.
+
+### Control icon insets
+
+A select, dropdown, or combobox chevron is part of the control anatomy, not decoration pasted onto its edge. Give every trailing icon a deliberate `inset-inline-end` that follows the control's horizontal-padding token. Reserve `padding-inline-end` for the outer inset, icon width, and a readable gap so labels, selected values, placeholders, loading indicators, clear buttons, and long or localized content never collide with it. An icon at `right: 0`, touching the border, or squeezed into an unreserved text area is a craft failure.
+
+Keep the icon optically centered and preserve the full control hit area. For a decorative custom chevron over a native select, avoid stacking it over the browser indicator and ensure the overlay does not create a dead pointer zone. Use logical inline properties and verify RTL rather than hard-coding right-side geometry.
+
+Test every control size with the longest plausible value, 200% text zoom, narrow width, RTL, disabled/error/loading states, and both native and custom rendering paths. The trailing inset should visually belong to the same spacing rhythm as the leading content inset.
+
 Carbon's grid guidance uses consistent mini-unit multiples, key lines, fixed padding within breakpoints, and type aligned to box padding. Apply the principle through the project's own grid rather than copying Carbon's exact values.
 
 ## 3. Reuse before invention
@@ -65,6 +81,14 @@ Default motion behavior:
 - Avoid animating layout properties such as `width`, `height`, `top`, and `left` unless spatial change is the meaning and performance is verified.
 - Keep focus indication immediate and visible. A transition must never delay awareness of keyboard focus.
 
+### No sticky pointer focus
+
+Pointer focus must not masquerade as a persistent selected, active, or error state. Clicking or tapping a control, native select, combobox, card, or focusable container must not leave a focus ring, highlighted border, shadow, background, or ancestor `:focus-within` treatment stuck after activation, popup dismissal, or a click elsewhere. A genuine selected, expanded, validation, or drag state may persist, but it must use its own semantics and styling rather than an accidental focus treatment.
+
+Prefer `:focus-visible` where it behaves correctly. For native controls or browser quirks that expose focus-visible after pointer activation, track the input modality locally and suppress only the pointer-originated focus treatment. Never solve this with a global `outline: none`, by hiding all focus, or by blurring controls in a way that breaks keyboard operation; keyboard-originated focus must remain immediate, visible, correctly ordered, and restored after overlays.
+
+Test mouse and touch activation separately from Tab and Shift+Tab. Include opening and dismissing native dropdowns, selecting an option, clicking non-focusable blank space, clicking the next control, closing overlays, and switching back to keyboard navigation. No pointer-only highlight may remain after its interaction context ends.
+
 Reuse existing motion tokens first. If none exist, begin with these restrained bands, then tune by component size and distance:
 
 | Role | Typical duration | Use |
@@ -130,6 +154,14 @@ Never use faint light-gray text on white, faint dark-gray text on black, or low-
 - Aim above the minimum for small, thin, long-form, or mission-critical text. Verify computed colors rather than judging from a screenshot alone.
 - Do not use color as the only status cue. Pair color with text, shape, icon, or pattern.
 
+### No soft semantic tint-on-tint
+
+Do not default badges, buttons, toasts, alerts, cards, selected states, status rows, or icon medallions to the familiar `soft`, `subtle`, `surface`, or `tonal` formula: a low-opacity red, green, amber, blue, or purple background paired with saturated same-hue text or icons, often finished with a same-hue border. The border is optional; the same-hue tinted surface plus same-hue foreground is the rejected pattern.
+
+Choose the replacement from the product's existing aesthetic and the component's role. Viable directions include a neutral surface with an isolated semantic icon, dot, or edge; a solid semantic fill with neutral high-contrast text; monochrome treatment; a product accent; plain typography; or another coherent local material model. These are options, not a new house style. Preserve hierarchy, measured contrast, and a non-color cue for status.
+
+Retain tint-on-tint only when the user explicitly asks for it or exact reuse of an established design-system variant is required by scope. Existing examples are evidence to inspect, not permission to spread the treatment into new component families.
+
 ## 7. Consistency and flow
 
 A polished interface feels like one system from section to section, component to component, and page to page.
@@ -163,5 +195,6 @@ Before calling UI work complete, verify:
 - reduced motion preserves state meaning;
 - typography is intentional, loaded efficiently, and stable during fallback;
 - all text and meaningful non-text contrast is measured;
+- no soft semantic tint-on-tint treatment was introduced without an explicit user request or required existing-system match;
 - repeated navigation/actions remain consistent across sections and pages;
 - generated UI copy contains no em dashes unless explicitly allowed.

package/assets/skills/evidence-led-ui/references/production-contract.md

@@ -29,6 +29,7 @@ This is a binding, pass/fail quality floor for implemented web and native UI. Ap
 WCAG 2.2 Level AA is the web conformance floor. Project, platform, legal, or contractual requirements may be stricter.
 
 - Keep a visible focus indicator and ensure sticky headers, footers, cookie bars, drawers, and overlays do not obscure the focused control.
+- Pointer activation, native popup dismissal, and clicks elsewhere must not leave a focus ring, highlighted border, shadow, background, or container focus treatment stuck as a false selected or active state. Distinguish pointer from keyboard focus and distinguish focus from genuine selected, expanded, and error states; never suppress visible keyboard focus globally.
 - WCAG 2.2 Target Size (Minimum) is 24 by 24 CSS pixels with defined exceptions. Default touch-oriented web controls to a 44 by 44 CSS-pixel hit area where layout permits. Native work follows its platform target guidance, such as 44 by 44 points on Apple platforms and 48 by 48 density-independent pixels in Material guidance.
 - Provide a single-pointer alternative for every non-essential drag interaction. Reordering also needs keyboard and assistive-technology operation.
 - Do not require users to re-enter information already supplied in the same process when it can be selected or populated. Preserve data across validation errors and recoverable navigation.
@@ -42,6 +43,7 @@ Automated accessibility tooling is a defect detector, not proof of conformance.
 
 - Every control has a persistent programmatic label. Associate help, units, requirements, and errors with the field; placeholder text is an example, never the only label.
 - Use the correct input type, `autocomplete`, `inputmode`, and semantic grouping. Keep browser autofill, password-manager, paste, and native validation affordances working unless the product has a verified reason to replace them.
+- Select, dropdown, and combobox indicators must have a deliberate logical trailing inset and reserved content padding for the icon width and gap. They fail when the indicator touches the edge, overlaps text or adjacent actions, duplicates the native indicator, or creates a dead pointer zone; verify long values, narrow widths, zoom, and RTL.
 - Validate at a helpful time. Do not show errors before the user can reasonably act. On submit, summarize errors when the form is long, focus or link to the first problem, preserve values, and explain how to recover.
 - Async actions expose pending, success, failure, retry, and duplicate-submission behavior. Do not silently lose work or replace the whole layout with a spinner.
 - Match safeguards to consequence. Prefer undo for cheap reversible actions; use explicit confirmation for destructive, expensive, security-sensitive, or irreversible actions. State the object and consequence in concrete language.
@@ -49,6 +51,7 @@ Automated accessibility tooling is a defect detector, not proof of conformance.
 ## 4. Responsive and international resilience
 
 - Use viewport queries for page composition and container queries for reusable components when the support policy permits. Use Grid, Flexbox, and `subgrid` to maintain key lines instead of JavaScript layout or breakpoint-specific duplication.
+- Navigation, header, main content, adjacent sections, and footer must reuse a shared content rail, responsive gutters, and spacing tokens by default. Full-bleed outer surfaces may differ, but inner edges must align. Any width, offset, margin, or padding exception needs an explicit content or user reason and must remain coherent at every breakpoint.
 - Prefer logical properties and flow-relative alignment. Declare document language and direction, use locale-aware number/date/plural formatting, and avoid sentence construction by string concatenation.
 - Test right-to-left layout when localization is relevant, long German-like expansion, short labels, CJK text, long unbroken values, dynamic type or 200% text, and missing media. Essential content must not depend on truncation.
 - Account for safe areas, on-screen keyboards, dynamic viewport units, orientation, window resizing, no-hover input, coarse pointers, and split-screen or large-screen layouts where the platform can expose them.
@@ -75,6 +78,7 @@ For web surfaces, use current Core Web Vitals as the shared target at the 75th p
 ## 7. Tokens and component contracts
 
 - Reuse the host system first. For a net-new scalable system, separate primitive values from semantic roles and component tokens; define modes without duplicating meaning.
+- Do not introduce soft semantic tint-on-tint as the default status variant: low-opacity semantic backgrounds paired with saturated same-hue text or icons, with or without matching borders. Derive a replacement from the host aesthetic and preserve non-color status cues; retain the treatment only when explicitly requested or exact established-system reuse is required.
 - The Design Tokens Community Group 2025.10 format is a stable interoperability option, not a W3C Standard and not a mandatory migration target. Use it only when tools need a portable source of truth.
 - Each shared component documents anatomy, semantic element, variants, sizes, content limits, states, keyboard behavior, responsive behavior, and accessibility name/description rules.
 - Keep one source of truth. Generated platform outputs must not become competing hand-edited token stores.

package/assets/skills/evidence-led-ui/references/quality-rubric.md

@@ -36,11 +36,11 @@ Maximum: **24 points**. Ship broad UI work only at **20/24 or higher**, with no
 
 ## 3. Composition
 
-- **0:** Layout breaks, clips, ignores shared key lines, or relies on arbitrary modules.
-- **1:** Grid is stable but generic, repetitive, or weakly related to content; some section edges or component geometry drift.
-- **2:** Scale, key lines, alignment, whitespace, and asymmetry/symmetry express content relationships and remain deliberate across viewports.
+- **0:** Layout breaks, clips, ignores shared key lines, uses arbitrary modules, or lets navigation, header, main, section, and footer rails drift without a content reason.
+- **1:** Grid is stable but generic, repetitive, or weakly related to content; some section edges, spacing tokens, or component geometry drift.
+- **2:** Scale, shared content rails, key lines, alignment, whitespace, and asymmetry/symmetry express content relationships and remain deliberate across viewports.
 
-**Test:** Draw vertical and horizontal guides through major regions. Shared edges, baselines, dividers, and repeated component anatomy should align unless an exception communicates real hierarchy.
+**Test:** Draw vertical and horizontal guides through navigation, header, main, repeated sections, and footer at every representative breakpoint. Full-bleed outer surfaces may differ, but their inner content edges must align by default. Compare repeated margins, padding, and gaps side by side; equal roles use equal tokens unless an exception communicates real hierarchy.
 
 ## 4. Consistency and flow
 
@@ -48,7 +48,7 @@ Maximum: **24 points**. Ship broad UI work only at **20/24 or higher**, with no
 - **1:** Most patterns repeat, but spacing cadence, icon treatment, controls, actions, or section transitions contain visible inconsistencies.
 - **2:** Existing primitives are reused; one icon family, spacing rhythm, component anatomy, navigation order, action placement, and surface logic carry through the full flow.
 
-**Test:** Compare adjacent sections and pages side by side. Trace one repeated action through every occurrence, then inspect container edges, control heights, icon weight, spacing, borders, labels, and state behavior.
+**Test:** Compare adjacent sections and pages side by side. Trace one repeated action through every occurrence, then inspect container edges, control heights, icon weight, spacing, borders, labels, and state behavior. For selects, dropdowns, and comboboxes, verify the trailing icon has intentional edge inset and reserved text clearance at every size, in RTL, and with the longest plausible value. Flag any low-opacity semantic background paired with saturated same-hue text or icons; it fails unless the user requested it or exact established-system reuse is required.
 
 ## 5. Typography
 
@@ -72,7 +72,7 @@ Maximum: **24 points**. Ship broad UI work only at **20/24 or higher**, with no
 - **1:** Happy-path interaction works, but secondary states, feedback, timing, recovery, or layout continuity are generic or incomplete.
 - **2:** Relevant loading, empty, error, validation, retry, offline, focus, hover/press, selected, expanded, pending, disabled, destructive, and success states are coherent, preserve work and layout, and provide purposeful feedback.
 
-**Test:** Trigger each relevant state with realistic content length and failure wording. Confirm preservation, recovery, duplicate-submission behavior, status announcement, and that any transition improves continuity rather than decoration.
+**Test:** Trigger each relevant state with realistic content length and failure wording. Confirm preservation, recovery, duplicate-submission behavior, status announcement, and that any transition improves continuity rather than decoration. Test pointer and keyboard focus separately, including native dropdown dismissal and clicks onto non-focusable space; no pointer-only highlight may stick, and keyboard focus must remain visible.
 
 ## 8. Responsive behavior
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenkaiiii/ggcoder",
-  "version": "5.20.2",
+  "version": "5.20.4",
   "type": "module",
   "description": "CLI coding agent with OAuth authentication for Anthropic, OpenAI, and Gemini",
   "license": "MIT",
@@ -114,9 +114,9 @@
     "typescript-language-server": "^5.3.0",
     "wrap-ansi": "^10.0.0",
     "zod": "^4.4.3",
-    "@kenkaiiii/gg-agent": "5.20.2",
-    "@kenkaiiii/gg-ai": "5.20.2",
-    "@kenkaiiii/gg-core": "5.20.2"
+    "@kenkaiiii/gg-agent": "5.20.4",
+    "@kenkaiiii/gg-ai": "5.20.4",
+    "@kenkaiiii/gg-core": "5.20.4"
   },
   "optionalDependencies": {
     "@huggingface/transformers": "^3.6.0",