fuji_admin 0.1.0

data/app/assets/stylesheets/fuji_admin/components/_filter_form.scss

@@ -0,0 +1,85 @@
+// Filter form — lives in the sidebar on index pages. AA emits each filter
+// as `.filter_form_field` with a label and a control; search submit at the
+// end. We keep the stacked layout and match the panel aesthetic.
+
+form.filter_form {
+  display: flex;
+  flex-direction: column;
+  gap: $space-3;
+  padding: 0;
+  margin: 0;
+
+  .filter_form_field {
+    display: flex;
+    flex-direction: column;
+    gap: $space-2;
+    margin: 0;
+
+    label {
+      font-size: $font-size-xs;
+      font-weight: $font-weight-medium;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: $text-color-secondary;
+      margin: 0;
+    }
+
+    input[type="text"],
+    input[type="email"],
+    input[type="number"],
+    input[type="search"],
+    input[type="date"],
+    select,
+    textarea {
+      @include fuji-input-base;
+      font-size: $font-size-sm;
+    }
+
+    // Date range widget — pair of inputs with a separator.
+    &.filter_date_range {
+      flex-direction: column;
+
+      .seperator,
+      .separator {
+        color: $text-color-muted;
+        font-size: $font-size-xs;
+        padding: 0 $space-1;
+      }
+    }
+
+    // Check-box lists for boolean filters
+    .check_boxes,
+    .radio_buttons {
+      display: flex;
+      flex-wrap: wrap;
+      gap: $space-2;
+
+      label {
+        display: inline-flex;
+        align-items: center;
+        gap: $space-1;
+        text-transform: none;
+        letter-spacing: 0;
+        color: $text-color;
+        font-weight: $font-weight-regular;
+        font-size: $font-size-sm;
+      }
+    }
+  }
+
+  .buttons,
+  fieldset.buttons {
+    display: flex;
+    flex-direction: column;
+    gap: $space-2;
+    padding-top: $space-2;
+    border: 0;
+    margin: 0;
+  }
+
+  a.clear_filters_btn {
+    @include fuji-button-secondary;
+    width: 100%;
+    justify-content: center;
+  }
+}

data/app/assets/stylesheets/fuji_admin/components/_flash.scss

@@ -0,0 +1,55 @@
+// Flash messages — rendered by AA as `<div class="flashes"><div class="flash flash_notice">...</div></div>`.
+// Shown at the top of the main content area.
+
+// `.flashes` lives in #wrapper as a sibling of #title_bar / #active_admin_content.
+// Since those siblings supply their own horizontal padding, we repeat the same
+// values here so a flash message sits in the same visual gutter.
+.flashes {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+  padding: $space-4 $content-padding-mobile 0;
+  margin: 0;
+
+  @include media-up(md) {
+    padding: $space-4 $content-padding 0;
+  }
+
+  &:empty {
+    display: none; // avoid reserving space when no flash present
+  }
+}
+
+.flash {
+  padding: $space-3 $space-4;
+  border-radius: $border-radius;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  border: 1px solid transparent;
+
+  &.flash_notice,
+  &.flash_success {
+    background-color: rgba($color-success, 0.1);
+    border-color: rgba($color-success, 0.3);
+    color: darken($color-success, 12%);
+  }
+
+  &.flash_alert,
+  &.flash_error {
+    background-color: rgba($color-danger, 0.1);
+    border-color: rgba($color-danger, 0.3);
+    color: darken($color-danger, 8%);
+  }
+
+  &.flash_warning {
+    background-color: rgba($color-warning, 0.12);
+    border-color: rgba($color-warning, 0.3);
+    color: darken($color-warning, 14%);
+  }
+
+  &.flash_info {
+    background-color: rgba($color-info, 0.1);
+    border-color: rgba($color-info, 0.3);
+    color: darken($color-info, 10%);
+  }
+}

data/app/assets/stylesheets/fuji_admin/components/_float_labels.scss

@@ -0,0 +1,77 @@
+// Float labels — applied by fuji_admin/floats.js to text-like formtastic
+// wrappers inside `fieldset.inputs`. The label rests inside the input at
+// baseline, then animates up to sit on the top border when the input has
+// focus or a value (matching PrimeReact Verona's float label pattern).
+//
+// Only `.fuji-float` wrappers get this treatment; selects, booleans, radios
+// and date pickers keep their stacked label so their native controls stay
+// predictable.
+
+fieldset.inputs ol > li.fuji-float {
+  position: relative;
+
+  // The original fieldset rule adds label { margin-bottom: $space-2 } —
+  // override so the absolute label doesn't drag layout.
+  > label {
+    position: absolute;
+    top: calc(#{$input-padding-y} + 1px);  // aligns with input's text line
+    left: calc(#{$input-padding-x} - #{$space-1} + 1px);
+    padding: 0 $space-1;
+    margin: 0;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-regular;
+    line-height: 1.4;
+    color: $text-color-muted;
+    background-color: $surface-0; // masks input border when floated
+    pointer-events: none;
+    text-transform: none;
+    letter-spacing: 0;
+    white-space: nowrap;
+    max-width: calc(100% - #{$space-4});
+    overflow: hidden;
+    text-overflow: ellipsis;
+    z-index: 1;
+    transition:
+      top 0.18s ease,
+      font-size 0.18s ease,
+      color 0.18s ease;
+
+    // The required asterisk / abbr should sit tightly next to the label.
+    abbr {
+      border: 0;
+      text-decoration: none;
+      color: inherit;
+      margin-left: $space-1;
+    }
+  }
+
+  // Floated state — label sits on the input's top border, smaller & coloured.
+  &.fuji-float-focused > label,
+  &.fuji-float-filled > label {
+    top: calc(-#{$space-1} - 1px);  // straddles the input top border
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+  }
+
+  &.fuji-float-focused > label {
+    color: $primary-color;
+  }
+
+  &.fuji-float-filled:not(.fuji-float-focused) > label {
+    color: $text-color-secondary;
+  }
+
+  // Hints under the input; same spacing whether floated or resting.
+  > .inline-hints,
+  > .inline-errors {
+    margin-top: $space-1;
+  }
+}
+
+// Textarea variant — label docks at the top of the textarea when resting,
+// not centred (textareas are tall so centring would look awkward).
+fieldset.inputs ol > li.text.fuji-float {
+  > label {
+    top: calc(#{$input-padding-y} + 1px);
+  }
+}

data/app/assets/stylesheets/fuji_admin/components/_inputs.scss

@@ -0,0 +1,237 @@
+// Form inputs — text, email, password, number, search, tel, url, textarea,
+// and native selects. Select2 and date pickers get their own components.
+//
+// Sizing approach: pad to ~40px total height (10px y / 12px x + 1px borders +
+// ~1.4 line-height on 14px text). Matches Verona's InputText aesthetic so
+// stacked forms breathe and feel touch-friendly.
+
+$input-padding-y: 10px;
+$input-padding-x: $space-3;
+
+@mixin fuji-input-base {
+  display: block;
+  width: 100%;
+  padding: $input-padding-y $input-padding-x;
+  font-family: inherit;
+  font-size: $font-size-sm;
+  line-height: 1.4;
+  color: $text-color;
+  background-color: $surface-0;
+  border: 1px solid $surface-border;
+  border-radius: $border-radius;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    color 0.2s ease;
+  appearance: none;
+  -webkit-appearance: none;
+
+  &::placeholder {
+    color: $text-color-muted;
+    opacity: 1; // Firefox applies its own opacity otherwise
+  }
+
+  &:hover:not(:disabled):not(:focus) {
+    border-color: $surface-400;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $primary-500;
+    box-shadow: 0 0 0 3px rgba($primary-500, 0.18);
+  }
+
+  &:disabled,
+  &[readonly] {
+    background-color: $surface-50;
+    color: $text-color-muted;
+    cursor: not-allowed;
+    border-color: $surface-200;
+
+    &::placeholder {
+      color: $surface-400;
+    }
+  }
+
+  &.invalid,
+  &[aria-invalid="true"] {
+    border-color: $color-danger;
+
+    &:focus {
+      box-shadow: 0 0 0 3px rgba($color-danger, 0.18);
+    }
+  }
+}
+
+form {
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"],
+  textarea {
+    @include fuji-input-base;
+  }
+
+  textarea {
+    height: 144px;        // sensible default regardless of `rows` attribute
+    min-height: 108px;
+    line-height: 1.5;
+    resize: vertical;     // user can drag taller if needed
+  }
+
+  select {
+    @include fuji-input-base;
+    padding-right: $space-7;
+    background-image: linear-gradient(45deg, transparent 50%, $text-color-secondary 50%),
+                      linear-gradient(135deg, $text-color-secondary 50%, transparent 50%);
+    background-position: right $space-4 center, right $space-3 center;
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+  }
+
+  // Fieldset wrapper used throughout AA forms. We treat it as a card with a
+  // distinct header bar; the legend replaces the fieldset's top border so the
+  // border never passes behind the title.
+  fieldset.inputs {
+    background-color: $surface-0;
+    border: 1px solid $surface-border;
+    border-radius: $border-radius-card;
+    padding: 0;
+    margin: 0 0 $space-5;
+    overflow: hidden; // keep the header's rounded top corners clean
+
+    legend {
+      display: block;
+      float: left;       // lets the legend own the card's top row
+      width: 100%;
+      padding: $space-3 $space-5;
+      margin: 0;
+      background-color: $surface-50;
+      color: $text-color;
+      font-size: $font-size-xs;
+      font-weight: $font-weight-semibold;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      border-bottom: 1px solid $surface-200;
+
+      span {
+        background: transparent;
+        color: inherit;
+        padding: 0;
+      }
+    }
+
+    ol {
+      clear: both; // clear the floated legend above
+      list-style: none;
+      padding: $space-5;
+      margin: 0;
+
+      > li {
+        padding: 0 0 $space-4;
+        margin: 0;
+
+        &:last-child {
+          padding-bottom: 0;
+        }
+
+        > label {
+          display: block;
+          margin-bottom: $space-2;
+          font-size: $font-size-sm;
+          font-weight: $font-weight-medium;
+          color: $text-color-secondary;
+        }
+
+        p.inline-hints,
+        .inline-hints {
+          margin-top: $space-1;
+          font-size: $font-size-xs;
+          color: $text-color-muted;
+        }
+
+        p.inline-errors,
+        .inline-errors {
+          margin-top: $space-1;
+          font-size: $font-size-xs;
+          color: $color-danger;
+        }
+      }
+
+      // Boolean input — AA wraps the checkbox + label text inside a single
+      // <label>, so we just style that label as an inline-flex row and let
+      // the hint drop naturally below.
+      li.boolean {
+        > label {
+          display: inline-flex;
+          align-items: center;
+          gap: $space-2;
+          margin: 0;
+          font-size: $font-size-sm;
+          font-weight: $font-weight-regular;
+          color: $text-color;
+          text-transform: none;
+          letter-spacing: 0;
+          cursor: pointer;
+
+          input[type="checkbox"] {
+            margin: 0;
+          }
+        }
+
+        > .inline-hints,
+        > p.inline-hints {
+          display: block;
+          margin: $space-1 0 0;
+          font-size: $font-size-xs;
+          color: $text-color-muted;
+        }
+      }
+    }
+  }
+
+  // Button row at the bottom of a form.
+  fieldset.actions,
+  fieldset.buttons {
+    display: flex;
+    gap: $space-3;
+    padding: $space-4 0 0;
+    margin: 0;
+    border: 0;
+
+    ol {
+      display: flex;
+      gap: $space-3;
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    li {
+      display: inline-flex;
+    }
+  }
+}
+
+// Radio + checkbox native styling — tidy size + primary accent.
+input[type="checkbox"],
+input[type="radio"] {
+  width: 16px;
+  height: 16px;
+  accent-color: $primary-color;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: $shadow-focus;
+  }
+}

data/app/assets/stylesheets/fuji_admin/components/_menu_toggle.scss

@@ -0,0 +1,61 @@
+// Mobile menu toggle (hamburger). Injected by fuji_admin/menu.js into the
+// header. Visible below lg; hidden on desktop where the sidebar is fixed.
+
+.fuji-menu-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 4px;
+  width: 40px;
+  height: 40px;
+  margin-left: $space-2;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: $border-radius;
+  cursor: pointer;
+  color: $text-color-secondary;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background-color: $surface-100;
+    color: $text-color;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: $shadow-focus;
+  }
+
+  &__bar {
+    display: block;
+    width: 20px;
+    height: 2px;
+    background-color: currentColor;
+    border-radius: 1px;
+  }
+
+  @include media-up(lg) {
+    display: none;
+  }
+}
+
+// Shared backdrop for both drawers (mobile menu, filters). Pseudo-element can
+// only exist once per element, so both states listed together.
+body.fuji-menu-open::after,
+body.fuji-filters-open::after {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.35);
+  z-index: 14;
+}
+
+// Menu drawer is only a drawer below lg (sidebar is inline at lg+). Hide the
+// backdrop above lg *unless* the filters drawer is the reason it's there.
+@include media-up(lg) {
+  body.fuji-menu-open:not(.fuji-filters-open)::after {
+    display: none;
+  }
+}

data/app/assets/stylesheets/fuji_admin/components/_pagination.scss

@@ -0,0 +1,70 @@
+// Pagination — AA uses kaminari, rendered as a `.pagination` div containing
+// `<span>` wrappers around `<a>` links, plus `span.page.current`.
+
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-1;
+  align-items: center;
+  padding: $space-4 0 0;
+  font-size: $font-size-sm;
+
+  > span,
+  > a,
+  > em {
+    display: inline-flex;
+  }
+
+  a,
+  span.page.current,
+  span.current,
+  .first a,
+  .last a,
+  .prev a,
+  .next a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 $space-3;
+    border: 1px solid $surface-border;
+    border-radius: $border-radius;
+    color: $text-color-secondary;
+    background-color: $surface-0;
+    text-decoration: none;
+    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      background-color: $surface-100;
+      border-color: $surface-400;
+      color: $text-color;
+      text-decoration: none;
+    }
+  }
+
+  span.page.current,
+  span.current {
+    background-color: $primary-color;
+    border-color: $primary-color;
+    color: $primary-color-text;
+
+    &:hover {
+      background-color: $primary-700;
+      border-color: $primary-700;
+      color: $primary-color-text;
+    }
+  }
+
+  .gap {
+    padding: 0 $space-2;
+    color: $text-color-muted;
+  }
+}
+
+// Pagination summary text ("Displaying 1 - 30 of 521")
+.pagination_information {
+  padding: $space-3 0 0;
+  color: $text-color-muted;
+  font-size: $font-size-sm;
+}