TeamAI/Kagaku.UI
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
120 commits 1 branch 0 tags 947 KiB
  • C# 46.2%
  • HTML 30.5%
  • CSS 13.3%
  • JavaScript 10%
Find a file
Exact
scarlet 3dc59a04c4
All checks were successful
CI / build (push) Successful in 10s
Details
CI / test (push) Successful in 14s
Details
feat(mask): a rectangle eraser — the box counterpart of the stroke eraser (#15) 
The mask had one unmask gesture: the circular stroke eraser. This adds its box counterpart.

- **`MaskTool.RectangleEraser`** shares the drag-a-box gesture with `Rectangle` (tool key `rect-erase`); only the commit's polarity differs, so `CommitRect` now carries the additive flag the way `CommitStroke` always has. The primitive model needed nothing — subtractive rects were always representable (`MaskPrimitive.Rectangle(rect, additive: false)`), no tool produced them.
- The live preview cuts into the overlay in the surface color, mirroring the stroke eraser's absence-to-be styling.
- The `deselect` glyph joins the icon catalog for the consumer's toolbar button (official Material Symbols path).

Tests: `The_rectangle_eraser_commits_a_subtractive_rect` (tool key on the surface + subtractive commit) — red with the ToolKey mapping removed, green with it; the two existing `CommitRect` call sites gained the explicit flag. 296/296.

Consumer wiring (toolbar button + pointer bump) follows in Kagura.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: schattenan <schattenan@kagaku.eu>
Reviewed-on: #15
Co-authored-by: scarlet <scarlet@kagaku.eu>
Co-committed-by: scarlet <scarlet@kagaku.eu>
2026-08-12 18:05:33 +02:00
.github/workflows refactor(repo): Kagura.UI becomes Kagaku.UI, the standalone shared design system 2026-07-21 17:49:39 +02:00
src/Kagaku.UI feat(mask): a rectangle eraser — the box counterpart of the stroke eraser (#15) 2026-08-12 18:05:33 +02:00
tests/Kagaku.UI.Tests feat(mask): a rectangle eraser — the box counterpart of the stroke eraser (#15) 2026-08-12 18:05:33 +02:00
.gitattributes refactor(repo): Kagura.UI becomes Kagaku.UI, the standalone shared design system 2026-07-21 17:49:39 +02:00
.gitignore refactor(repo): Kagura.UI becomes Kagaku.UI, the standalone shared design system 2026-07-21 17:49:39 +02:00
Directory.Build.props refactor(repo): Kagura.UI becomes Kagaku.UI, the standalone shared design system 2026-07-21 17:49:39 +02:00
Directory.Packages.props refactor(repo): Kagura.UI becomes Kagaku.UI, the standalone shared design system 2026-07-21 17:49:39 +02:00
Kagaku.UI.slnx refactor(repo): Kagura.UI becomes Kagaku.UI, the standalone shared design system 2026-07-21 17:49:39 +02:00
README.md fix(inputs): a text field stops echoing keystrokes back at the element (#8) 2026-07-28 13:27:20 +02:00

README.md

Kagaku.UI

The shared design system for all Kagaku apps: a Blazor Razor Class Library with the design tokens, theming (light/dark/system), self-hosted Inter font, the global icon catalog, and a set of dumb, reusable components. No business logic, no app knowledge — components speak plain parameters and callbacks only.

What's inside

  • src/Kagaku.UI/wwwroot/css/kagaku-ui.css — the single source of the visual language: reset, tokens (:root), dark theme, base elements, utilities. Components consume var(--…) only; they never hardcode colors or magic numbers.
  • src/Kagaku.UI/Components/ — the component set (buttons, fields, overlays, navigation, tables, drag-reorder, region selector, markdown, …), each with scoped CSS.
  • src/Kagaku.UI/Icons/ — the global icon catalog: self-hosted Material Symbols path data rendered inline as SVG by <Icon>, so icons inherit currentColor and the theme. Add an entry to IconCatalog.cs to introduce a new icon (use the Material Symbols name).
  • src/Kagaku.UI/wwwroot/js/ — small self-contained interop scripts (kagakuTheme, kagakuOverlay, kagakuRegion, …); components invoke them via IJSRuntime.
  • tests/Kagaku.UI.Tests/ — the bunit suite; every component is covered here, not in consuming apps.

Consuming

Vendor as a git submodule and reference the project (the pattern all Kagaku apps use):

git submodule add ../Kagaku.UI.git external/Kagaku.UI

<ProjectReference Include="..\..\external\Kagaku.UI\src\Kagaku.UI\Kagaku.UI.csproj" />

Then load the assets from the host page (Blazor static web assets):

<link rel="stylesheet" href="_content/Kagaku.UI/css/kagaku-ui.css" />
<link rel="stylesheet" href="<YourApp>.styles.css" />   <!-- scoped-CSS bundle -->
<script src="_content/Kagaku.UI/js/theme.js"></script>
<script src="_content/Kagaku.UI/js/input.js"></script>  <!-- plus the interop scripts you use -->

and add @using Kagaku.UI to the consumer's _Imports.razor.

theme.js and input.js are not optional — the rest are needed only by the components that call them. input.js is what lets a text field finish an edit the render diff cannot express (see LiveValue.cs); without it, typing still works, but a field can keep showing the previous record's text when the new one happens to read the same.

Development

dotnet build
dotnet test

Component changes land here together with their bunit tests; consuming apps then bump their submodule pointer.

History

Extracted from Kagura (originally Kagura.UI), with full git history. Older commit messages and code comments reference Kagura ADRs (e.g. ADR 0003, 0023, 0025) — those decision records live in Kagura's docs/adr/.