fuji_admin 0.1.0

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

@@ -0,0 +1,110 @@
+// Row-action dropdown — injected by fuji_admin/row_actions.js into
+// `table.index_table td.col-actions` when the row has 2+ actions. Keeps the
+// column compact regardless of action count.
+
+.fuji-row-actions {
+  position: relative;
+  display: inline-flex;
+
+  &__trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    background: transparent;
+    border: 1px solid $surface-border;
+    border-radius: $radius-sm;
+    color: $text-color-secondary;
+    cursor: pointer;
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease,
+      border-color 0.15s ease;
+
+    &:hover {
+      background-color: $primary-50;
+      color: $primary-700;
+      border-color: $primary-200;
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: $shadow-focus;
+    }
+
+    &[aria-expanded="true"] {
+      background-color: $primary-50;
+      color: $primary-700;
+      border-color: $primary-200;
+    }
+
+    svg {
+      display: block;
+    }
+  }
+
+  &__menu {
+    // Fixed positioning — anchored to the trigger by JS using getBoundingClientRect.
+    // Sits above the filter drawer (z:30) and header (z:20); `.paginated_collection`
+    // has `overflow: hidden` so absolute positioning would clip us. Fixed sidesteps
+    // that entirely.
+    position: fixed;
+    min-width: 180px;
+    padding: $space-1;
+    background-color: $surface-0;
+    border: 1px solid $surface-border;
+    border-radius: $border-radius;
+    box-shadow: $shadow-md;
+    z-index: 50;
+    text-align: left;
+    white-space: normal;
+
+    &[hidden] {
+      display: none;
+    }
+  }
+
+  // Links in the menu — override the outlined-pill fallback styles so they
+  // render as menu rows instead.
+  .col-actions &__item,
+  &__item {
+    display: block;
+    width: 100%;
+    padding: $space-2 $space-3;
+    margin: 0;
+    border: 0;
+    border-radius: $radius-sm;
+    background-color: transparent;
+    color: $text-color;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-regular;
+    line-height: 1.4;
+    text-align: left;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background-color 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      background-color: $surface-100;
+      color: $primary-700;
+      border: 0;
+      text-decoration: none;
+    }
+
+    &:focus-visible {
+      outline: none;
+      background-color: $surface-100;
+    }
+
+    &--danger {
+      color: $color-danger;
+
+      &:hover {
+        background-color: rgba($color-danger, 0.08);
+        color: $color-danger;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+// Scope bar — index-page tabs like "All · Active · Archived".
+// AA emits as `ul.scopes > li > a` or `div.scopes > ul > li > a`, with
+// `li.selected` for the current one.
+
+.scopes,
+.table_tools .scopes {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0;
+  padding: $space-1;
+  background-color: $surface-100;
+  border-radius: $border-radius;
+  list-style: none;
+  margin: 0;
+
+  > ul {
+    display: inline-flex;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    display: inline-flex;
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      padding: $space-1 $space-4;
+      font-size: $font-size-sm;
+      font-weight: $font-weight-medium;
+      color: $text-color-secondary;
+      border-radius: $radius-sm;
+      transition: background-color 0.15s ease, color 0.15s ease;
+
+      &:hover {
+        color: $text-color;
+        text-decoration: none;
+      }
+
+      .count {
+        margin-left: $space-2;
+        font-size: $font-size-xs;
+        color: $text-color-muted;
+      }
+    }
+
+    &.selected a {
+      background-color: $surface-0;
+      color: $text-color;
+      box-shadow: $shadow-xs;
+
+      .count {
+        color: $primary-color;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,194 @@
+// Select2 — AA uses this for relation selectors and enum dropdowns. The
+// library renders its own DOM; we match the native input aesthetic so
+// single/multi selects feel like first-class members of a form.
+
+.select2-container--default {
+  width: 100% !important;
+
+  // --- Trigger (closed state) -------------------------------------------
+  .select2-selection--single,
+  .select2-selection--multiple {
+    min-height: 38px;
+    padding: 0;
+    background-color: $surface-0;
+    border: 1px solid $surface-border;
+    border-radius: $border-radius;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    &:hover {
+      border-color: $surface-400;
+    }
+  }
+
+  &.select2-container--focus .select2-selection--single,
+  &.select2-container--focus .select2-selection--multiple,
+  &.select2-container--open .select2-selection--single,
+  &.select2-container--open .select2-selection--multiple {
+    border-color: $primary-color;
+    box-shadow: $shadow-focus;
+  }
+
+  // Single
+  .select2-selection--single {
+    display: flex;
+    align-items: center;
+
+    .select2-selection__rendered {
+      padding: 0 $space-7 0 $space-3;
+      font-size: $font-size-sm;
+      color: $text-color;
+      line-height: 1.5;
+    }
+
+    .select2-selection__placeholder {
+      color: $text-color-muted;
+    }
+
+    .select2-selection__arrow {
+      top: 50%;
+      right: $space-3;
+      height: 0;
+      width: 0;
+      transform: translateY(-50%);
+      background: none;
+      border: 0;
+
+      b {
+        margin: 0;
+        border: 0;
+        width: 0;
+        height: 0;
+        border-left: 4px solid transparent;
+        border-right: 4px solid transparent;
+        border-top: 5px solid $text-color-secondary;
+      }
+    }
+
+    .select2-selection__clear {
+      margin-right: $space-2;
+      color: $text-color-muted;
+      font-weight: $font-weight-regular;
+
+      &:hover {
+        color: $color-danger;
+      }
+    }
+  }
+
+  // Multi
+  .select2-selection--multiple {
+    padding: $space-1 $space-2;
+
+    .select2-selection__rendered {
+      padding: 0;
+      display: flex;
+      flex-wrap: wrap;
+      gap: $space-1;
+    }
+
+    .select2-selection__choice {
+      display: inline-flex;
+      align-items: center;
+      gap: $space-1;
+      margin: 2px 0;
+      padding: 2px $space-2;
+      background-color: $primary-50;
+      border: 1px solid $primary-100;
+      border-radius: $radius-sm;
+      color: $primary-700;
+      font-size: $font-size-xs;
+      font-weight: $font-weight-medium;
+    }
+
+    .select2-selection__choice__remove {
+      order: 2;
+      margin: 0 0 0 $space-1;
+      color: $primary-700;
+      cursor: pointer;
+      font-weight: $font-weight-bold;
+
+      &:hover {
+        color: $color-danger;
+      }
+    }
+
+    .select2-search--inline .select2-search__field {
+      margin: 0;
+      padding: 2px 0;
+      font-family: inherit;
+      font-size: $font-size-sm;
+      color: $text-color;
+    }
+  }
+}
+
+// --- Dropdown (open state) ----------------------------------------------
+// Select2 appends .select2-container--open / .select2-dropdown to <body>,
+// so these selectors are global.
+.select2-dropdown {
+  background-color: $surface-0;
+  border: 1px solid $surface-border;
+  border-radius: $border-radius;
+  box-shadow: $shadow-md;
+  overflow: hidden;
+
+  .select2-search--dropdown {
+    padding: $space-2;
+
+    .select2-search__field {
+      @include fuji-input-base;
+      font-size: $font-size-sm;
+    }
+  }
+
+  .select2-results__options {
+    max-height: 280px;
+    padding: $space-1;
+    overflow-y: auto;
+  }
+
+  .select2-results__option {
+    padding: $space-2 $space-3;
+    font-size: $font-size-sm;
+    color: $text-color;
+    border-radius: $radius-sm;
+    cursor: pointer;
+
+    &[aria-selected="true"] {
+      background-color: $primary-50;
+      color: $primary-700;
+      font-weight: $font-weight-medium;
+    }
+
+    &--highlighted {
+      background-color: $surface-100;
+      color: $text-color;
+
+      &[aria-selected="true"] {
+        background-color: $primary-100;
+        color: $primary-700;
+      }
+    }
+
+    &[aria-disabled="true"] {
+      color: $text-color-muted;
+      cursor: not-allowed;
+    }
+  }
+
+  .select2-results__group {
+    padding: $space-2 $space-3;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    color: $text-color-muted;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  .select2-results__message {
+    padding: $space-3;
+    font-size: $font-size-sm;
+    color: $text-color-muted;
+    text-align: center;
+  }
+}

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

@@ -0,0 +1,59 @@
+// Status tags — AA renders as `<span class="status_tag <value>">` where
+// `<value>` is the dasherised string (e.g. "yes", "published", "draft").
+// We style a neutral default plus conventional semantic variants.
+
+.status_tag {
+  display: inline-flex;
+  align-items: center;
+  padding: $space-1 $space-3;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  border-radius: $radius-full;
+  background-color: $surface-200;
+  color: $text-color-secondary;
+  line-height: 1.4;
+  white-space: nowrap;
+
+  // Semantic variants (AA dasherises the value into the class name).
+  &.yes,
+  &.ok,
+  &.active,
+  &.published,
+  &.completed,
+  &.approved,
+  &.success {
+    background-color: rgba($color-success, 0.12);
+    color: darken($color-success, 8%);
+  }
+
+  &.no,
+  &.error,
+  &.failed,
+  &.rejected,
+  &.danger {
+    background-color: rgba($color-danger, 0.12);
+    color: $color-danger;
+  }
+
+  &.warning,
+  &.pending,
+  &.draft {
+    background-color: rgba($color-warning, 0.14);
+    color: darken($color-warning, 10%);
+  }
+
+  &.info,
+  &.processing,
+  &.running {
+    background-color: rgba($color-info, 0.12);
+    color: darken($color-info, 8%);
+  }
+
+  &.empty {
+    background-color: transparent;
+    color: $text-color-muted;
+    font-style: italic;
+  }
+}

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

@@ -0,0 +1,14 @@
+// Table tools — the toolbar above index_table containing scopes, batch
+// actions selector, and download formats dropdown.
+
+.table_tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-3;
+  align-items: center;
+  padding: 0 0 $space-4;
+
+  > * {
+    display: inline-flex;
+  }
+}

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

@@ -0,0 +1,262 @@
+// Tables — primarily `table.index_table` (AA resource index pages) and
+// `.attributes_table` (AA resource show pages).
+
+table.index_table {
+  width: 100%;
+  background-color: $surface-0;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 1px solid $surface-border;
+  border-radius: $border-radius-card;
+  overflow: hidden;
+  font-size: $font-size-sm;
+
+  thead {
+    background-color: $surface-50;
+
+    th {
+      padding: $space-3 $space-4;
+      font-weight: $font-weight-semibold;
+      color: $text-color-secondary;
+      text-align: left;
+      border-bottom: 1px solid $surface-200;
+      white-space: nowrap;
+
+      a {
+        color: inherit;
+
+        &:hover {
+          color: $primary-color;
+          text-decoration: none;
+        }
+      }
+
+      &.sortable.asc a::after,
+      &.sorted-asc a::after {
+        content: " ↑";
+        color: $primary-color;
+      }
+
+      &.sortable.desc a::after,
+      &.sorted-desc a::after {
+        content: " ↓";
+        color: $primary-color;
+      }
+
+      // Bulk-select column
+      &.col-selectable {
+        width: 32px;
+        padding-right: 0;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      transition: background-color 0.15s ease;
+
+      &:hover {
+        background-color: $surface-50;
+      }
+
+      &.selected {
+        background-color: $primary-50;
+      }
+
+      td {
+        padding: $space-3 $space-4;
+        border-bottom: 1px solid $surface-200;
+        color: $text-color;
+        vertical-align: middle;
+      }
+
+      &:last-child td {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  // Per-row actions column — the dropdown trigger and menu live in
+  // components/_row_actions.scss. When JS hasn't wrapped the actions (no-JS
+  // fallback, or only one action), links inside `.table_actions` still get
+  // a small outlined-button style so the cell doesn't look broken.
+  .col-actions,
+  td.col-actions {
+    text-align: right;
+    white-space: nowrap;
+    width: 1%; // shrink-to-fit so the actions column doesn't steal width
+
+    .table_actions {
+      display: inline-flex;
+      gap: $space-1;
+      align-items: center;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+
+      > a {
+        display: inline-flex;
+        align-items: center;
+        padding: $space-1 $space-2;
+        margin: 0;
+        font-size: $font-size-xs;
+        font-weight: $font-weight-medium;
+        line-height: 1.4;
+        color: $text-color-secondary;
+        background-color: transparent;
+        border: 1px solid $surface-border;
+        border-radius: $radius-sm;
+        text-decoration: none;
+        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+
+        &:hover {
+          background-color: $primary-50;
+          color: $primary-700;
+          border-color: $primary-200;
+          text-decoration: none;
+        }
+
+        &:focus-visible {
+          outline: none;
+          box-shadow: $shadow-focus;
+        }
+
+        &.delete_link:hover {
+          background-color: rgba($color-danger, 0.08);
+          color: $color-danger;
+          border-color: rgba($color-danger, 0.3);
+        }
+      }
+    }
+  }
+}
+
+// Show-page attributes table — two-column label/value rows.
+.attributes_table {
+  table {
+    width: 100%;
+    font-size: $font-size-sm;
+    border-collapse: separate;
+    border-spacing: 0;
+
+    th,
+    td {
+      padding: $space-3 $space-4;
+      border-bottom: 1px solid $surface-200;
+      vertical-align: top;
+    }
+
+    th {
+      width: 30%;
+      min-width: 180px;
+      font-size: $font-size-xs;
+      font-weight: $font-weight-semibold;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: $text-color-muted;
+      text-align: left;
+      padding-right: $space-5;
+    }
+
+    td {
+      color: $text-color;
+      word-break: break-word;
+    }
+
+    tr:hover {
+      background-color: $surface-50;
+    }
+
+    tr:last-child th,
+    tr:last-child td {
+      border-bottom: 0;
+    }
+  }
+}
+
+// Generic `table_for` / bare `<table>` output. Matches:
+//   * direct children of #main_content (custom index pages like /admin/favorites)
+//   * tables inside `.panel .panel_contents` (show-page entities, related docs)
+//   * tables with a `.summary-table` class (reporting dashboards)
+//
+// Using `> table` in the first selector avoids matching `.attributes_table`'s
+// inner table (which lives deeper than a direct child of #main_content).
+#main_content > table:not(.index_table):not(.ui-datepicker-calendar),
+#main_content table.summary-table,
+.panel .panel_contents table:not(.index_table):not(.ui-datepicker-calendar) {
+  width: 100%;
+  background-color: $surface-0;
+  border: 1px solid $surface-border;
+  border-radius: $border-radius;
+  border-collapse: separate;
+  border-spacing: 0;
+  overflow: hidden;
+  font-size: $font-size-sm;
+  margin-bottom: $space-3;
+
+  thead {
+    background-color: $surface-50;
+
+    th {
+      padding: $space-2 $space-3;
+      font-size: $font-size-xs;
+      font-weight: $font-weight-semibold;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      color: $text-color-muted;
+      text-align: left;
+      border-bottom: 1px solid $surface-200;
+      white-space: nowrap;
+    }
+  }
+
+  tbody {
+    tr {
+      transition: background-color 0.15s ease;
+
+      &:hover {
+        background-color: $surface-50;
+      }
+
+      &.odd {
+        background-color: transparent; // we handle alternation via hover
+      }
+
+      td {
+        padding: $space-2 $space-3;
+        border-bottom: 1px solid $surface-200;
+        color: $text-color;
+        vertical-align: top;
+      }
+
+      &:last-child td {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+
+// AA's `columns` helper — two (or more) tables laid out side-by-side inside
+// a single panel. Stack below md.
+.columns {
+  display: flex;
+  flex-direction: column;
+  gap: $space-4;
+
+  @include media-up(md) {
+    flex-direction: row;
+    gap: $space-5;
+  }
+
+  > .column {
+    flex: 1 1 0;
+    min-width: 0; // allow shrink for wide columns
+  }
+}
+
+// Empty state inside table panels
+.blank_slate_container {
+  padding: $space-9 $space-5;
+  text-align: center;
+  color: $text-color-muted;
+  font-size: $font-size-sm;
+}