feat(ship-factory): implement module rotation functionality

Assets/DesignSystem/CHANGELOG.md

@@ -17,17 +17,17 @@ Initial open-source release. The design system has been used in production by [L
 - **Inputs** (`Inputs.uss`). `.ds-input` text field, `.ds-search` shell with leading-icon slot, `.ds-dropdown` for `<DropdownField>`, `.ds-textarea` with optional counter slot. All four target every Unity 6 inner-class variant (`.unity-text-input`, `.unity-text-field__input`, `.unity-base-text-field__input`, `.unity-base-field__input`) so the visual shell paints regardless of which name Unity emits for the field type.
 - **Tabs & filters** (`TabsAndFilters.uss`). `.ds-tabs` segmented strip, `.ds-tab` with `.is-active` state, `.ds-view-toggle` for grid/list switching.
 - **Controls** (`Controls.uss`). `.ds-toggle` iOS-style switch (knob auto-injected by the runtime), `.ds-check` square checkbox with shrunk tick to fit inside the 2 px border, `.ds-radio` styled radio button, `.ds-slider` single-value with cross-centred thumb, `.ds-range` MinMaxSlider with thumbs and dragger explicitly cross-centred via `top: 50%; margin-top: -<half>px;` (Unity stock layout floats them above the track).
-- **Cards** (`Cards.uss`). Animal-card example (game shape, demonstrates layered children + `.is-selected` / `.is-epic` modifiers + check pin), `.ds-info-row` for two-column attribute lists, `.ds-swatch-row` for tokens display.
+- **Cards** (`Cards.uss`). card example (game shape, demonstrates layered children + `.is-selected` / `.is-epic` modifiers + check pin), `.ds-info-row` for two-column attribute lists, `.ds-swatch-row` for tokens display.
 - **Navigation** (`Navigation.uss`). `.ds-side-nav` (full-width with labels), `.ds-side-rail` (icon-only), `.ds-bottom-nav` (mobile tab bar), `.ds-profile` chip with avatar slot.
 - **Badges & labels** (`Badges.uss`). Rarity pills (common / rare / epic / legendary), habitat tags, status chips (equipped / new / owned / limited / event / sale) with per-variant icon tints, notification dot (single-digit circle and multi-digit pill modes), avatar in 4 sizes.
 - **Overlays** (`Overlays.uss`). `.ds-modal` with header / body / actions slots, `.ds-dialog` for confirms, `.ds-toast` in success / info / warning / danger flavours, `.ds-sheet` mobile bottom drawer, `.ds-empty` empty-state.
 - **Feedback** (`Feedback.uss`). `.ds-progress` bar, `.ds-spinner` circular loader (driven by the runtime — USS transitions can't loop), `.ds-skeleton` placeholder card with shimmering overlay, `.ds-pagination`, `.ds-stepper` quantity selector.
 - **Mobile responsiveness** (`Mobile.uss`). One class on the screen root (`.mobile`) flips every spacing token, tap target, and dropdown to touch-friendly sizes. Same UXML, same components — two layouts. Buttons 36 → 48 px, inputs 40 → 48 px, slider thumbs 18 → 24 px with recomputed `margin-top` for centring, tabs grow, modals widen.
 - **`DesignSystemRuntime.cs`** auto-attaches to every `UIDocument` in a scene via `RuntimeInitializeOnLoadMethod` + `SceneManager.sceneLoaded`. Provides:
-    - **Toggle knob auto-injection** — Unity's `Toggle` element doesn't render the iOS-style sliding pill on its own. The runtime injects a child `.ds-toggle__knob` into `.unity-toggle__input` every 250 ms (idempotent, cheap), so toggles cloned in lazily by screen managers (Settings panels etc.) get the knob without per-screen wiring.
-    - **Spinner rotation** — increments transform rotate by 6° per frame on `.ds-spinner.is-spinning` elements. USS `transition` can't loop natively.
-    - **Skeleton shimmer** — animates the `.ds-skeleton__shimmer` child via `translate` for the loading-state placeholder.
-- **Showcase UXML** (`DesignSystemShowcase.uxml`) — a single scrollable view that renders every component, every state, every icon. Drop it on a `UIDocument`, hit Play, and you have a living style guide. 22 sections: Colors, Typography, Buttons, Inputs, Tabs & Filters, Animal Card, Animal Detail, Navigation, Badges & Labels, Icons, Toggles & Checks, Sliders, Modals / Panels, Toasts, Empty States, Bottom Sheet, Confirm Dialog, Quantity, Pagination, Loading States, Notification Badge, Avatar.
+  - **Toggle knob auto-injection** — Unity's `Toggle` element doesn't render the iOS-style sliding pill on its own. The runtime injects a child `.ds-toggle__knob` into `.unity-toggle__input` every 250 ms (idempotent, cheap), so toggles cloned in lazily by screen managers (Settings panels etc.) get the knob without per-screen wiring.
+  - **Spinner rotation** — increments transform rotate by 6° per frame on `.ds-spinner.is-spinning` elements. USS `transition` can't loop natively.
+  - **Skeleton shimmer** — animates the `.ds-skeleton__shimmer` child via `translate` for the loading-state placeholder.
+- **Showcase UXML** (`DesignSystemShowcase.uxml`) — a single scrollable view that renders every component, every state, every icon. Drop it on a `UIDocument`, hit Play, and you have a living style guide. 22 sections: Colors, Typography, Buttons, Inputs, Tabs & Filters, Card, Detail, Navigation, Badges & Labels, Icons, Toggles & Checks, Sliders, Modals / Panels, Toasts, Empty States, Bottom Sheet, Confirm Dialog, Quantity, Pagination, Loading States, Notification Badge, Avatar.
 
 ### Documentation
 

Assets/DesignSystem/CONTRIBUTING.md

@@ -4,7 +4,7 @@ Thanks for considering a contribution. The design system is small (~1700 lines U
 
 ## Ground rules
 
-1. **One style for one job.** A new component should not duplicate an existing one with a different prefix. If you need a "card with a price tag", extend `.ds-animal-card` with a `__price-tag` slot, don't fork it.
+1. **One style for one job.** A new component should not duplicate an existing one with a different prefix. If you need a "card with a price tag", extend `.ds-card` with a `__price-tag` slot, don't fork it.
 2. **Tokens, never hex.** Every colour, radius, spacing, motion timing must reference a `var(--…)` from `DesignTokens.uss`. If your design needs a value that doesn't exist as a token, add the token first (one PR), then the rule (next PR).
 3. **Comments answer "why", not "what".** A reader can see a `width: 18px;` declaration. The comment should explain *why 18px and not 16 or 20* — for example "= half of the 36 px button so the icon centres without `align-items: center` on every consumer."
 4. **The showcase is the test suite.** Every new component must appear in `DesignSystemShowcase.uxml` in at least one state. If your rule has hover / pressed / active / disabled / `--variant` modifiers, render each one. PRs that don't update the showcase get bounced.
@@ -74,9 +74,11 @@ If your new rule doesn't fit any file cleanly, you've probably invented a new co
 2. **Make sure the SVG fills are `white`** — `fill="white"` and `stroke="white"`. Black-fill SVGs render black regardless of tint because `-unity-background-image-tint-color` is multiplicative (`black × any_colour = black`). The bulk-conversion script in our 2026-05-01 commit converted 63 source icons; new contributions must arrive white-filled.
 3. After Unity reimports, set the importer's `SVG Type` to **Texture** (not Sprite, not VectorImage). The asset pipeline flag is `svgType: 3` in the `.svg.meta` file.
 4. Add one line to `Icons.uss`:
+
     ```css
     .ds-icon--newglyph        { background-image: resource("Textures/Icons/newglyph"); }
     ```
+
 5. Render it in `DesignSystemShowcase.uxml` under the ICONS section.
 6. Open a PR with a screenshot of the showcase row.
 

Assets/DesignSystem/Docs/ARCHITECTURE.md

@@ -16,7 +16,7 @@ DesignSystem.uss                 ← master, @imports the layers below
         ├── Buttons.uss          ← .ds-btn variants, sizes, icon button
         ├── Inputs.uss           ← .ds-input, .ds-search, .ds-dropdown, .ds-textarea
         ├── TabsAndFilters.uss   ← .ds-tabs, .ds-tab, .ds-view-toggle
-        ├── Cards.uss            ← .ds-animal-card, .ds-info-row, .ds-swatch-row
+        ├── Cards.uss            ← .ds-card, .ds-info-row, .ds-swatch-row
         ├── Navigation.uss       ← .ds-side-nav, .ds-side-rail, .ds-bottom-nav, .ds-profile
         ├── Badges.uss           ← .ds-badge, .ds-tag, .ds-chip, .ds-avatar, .ds-notif-*
         ├── Controls.uss         ← .ds-toggle, .ds-check, .ds-radio, .ds-slider, .ds-range

Assets/DesignSystem/Docs/COMPONENTS.md

@@ -77,11 +77,12 @@ Set placeholders via `field.textEdition.placeholder = "..."` in C#. Unity 6's AP
 
 | Class | Use |
 | --- | --- |
-| `.ds-animal-card` | Example product card; demonstrates layered children + `.is-selected` / `.is-epic` modifiers + check pin. |
-| `.ds-animal-card__image` | Top image area. |
-| `.ds-animal-card__rarity` | Top-right rarity badge slot. |
-| `.ds-animal-card__title-row` | Title + accessory icon row. |
-| `.ds-animal-card__check` | The selected-state check pin (rendered last so it z-orders on top). |
+| `.ds-card` | Example product card; demonstrates layered children + `.is-selected` / `.is-epic` modifiers + check pin. |
+| `.ds-card__image` | Top image area; clip child sprites with `overflow: hidden`. |
+| `.ds-card__sprite` | Child `<Image scaleMode="ScaleToFit">` filling the image well. |
+| `.ds-card__rarity` | Top-right rarity badge slot. |
+| `.ds-card__title-row` | Title + accessory icon row. |
+| `.ds-card__check` | The selected-state check pin (rendered last so it z-orders on top). |
 | `.ds-info-row` | Two-column attribute row (icon+label on left, value on right). |
 | `.ds-info-row__left` | The flex-row wrapper for the icon + label. |
 | `.ds-info-row__icon` | 16 × 16 leading icon. |
@@ -170,6 +171,18 @@ Set placeholders via `field.textEdition.placeholder = "..."` in C#. Unity 6's AP
 | `.ds-stepper` | Quantity selector container. |
 | `.ds-stepper__btn` | − / + button. |
 | `.ds-stepper__value` | Value display. |
+| `.ds-row` | Horizontal flex row with centred children; adds bottom margin for stacked showcase rows. |
+| `.ds-row__gap` | Margin-based horizontal spacing between direct children (`--space-2`). Use instead of CSS `gap`, which UI Toolkit does not support. Pair with `.ds-row` or any `flex-direction: row` container. |
+| `.ds-col-gap` | Margin-based vertical spacing between direct children (`--space-2`). Use on column-flex containers. |
+
+DOM (row gap):
+
+```xml
+<ui:VisualElement class="ds-row ds-row__gap">
+    <ui:Button class="ds-btn ds-btn--secondary" />
+    <ui:Button class="ds-btn ds-btn--secondary" />
+</ui:VisualElement>
+```
 
 ## Icons
 

Assets/DesignSystem/README.md

@@ -31,8 +31,8 @@ What you get on day one:
 Open `Assets/DesignSystem/Resources/UI/Styles/DesignSystem/DesignSystemShowcase.uxml` in the UI Builder or attach it to a `UIDocument`. Every component, every state, every icon — one screen, scrollable.
 
 ```txt
-COLORS         BUTTONS         INPUTS         TABS & FILTERS    ANIMAL CARD
-TYPOGRAPHY     ICONS           BADGES & LABELS  TOGGLES & CHECKS  ANIMAL DETAIL
+COLORS         BUTTONS         INPUTS         TABS & FILTERS    CARD
+TYPOGRAPHY     ICONS           BADGES & LABELS  TOGGLES & CHECKS  DETAIL
 NAVIGATION     SLIDERS         MODALS / PANELS  TOASTS            EMPTY STATES
 BOTTOM SHEET   CONFIRM DIALOG  QUANTITY        PAGINATION        LOADING STATES
 NOTIFICATION BADGE             AVATAR
@@ -166,7 +166,7 @@ DesignSystem.uss                  ← master, @imports the rest in order
 ├── Buttons.uss                   ← .ds-btn + variants + sizes + icon button
 ├── Inputs.uss                    ← .ds-input / .ds-search / .ds-dropdown / .ds-textarea
 ├── TabsAndFilters.uss            ← .ds-tabs / .ds-tab / .ds-view-toggle
-├── Cards.uss                     ← animal card, info row, swatch row
+├── Cards.uss                     ← card, info row, swatch row
 ├── Navigation.uss                ← .ds-side-nav / .ds-side-rail / .ds-bottom-nav / profile
 ├── Badges.uss                    ← .ds-badge / .ds-tag / .ds-chip / .ds-avatar / notif dot
 ├── Controls.uss                  ← .ds-toggle / .ds-check / .ds-radio / .ds-slider / .ds-range