@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/styles/library.css

@@ -0,0 +1,512 @@
+/* The Library browse surface (panels/library/): the page under the top bar,
+   its rail, the catalog and its cards, the empty states and the status bar.
+   The right column's CONTENT is library-preview.css; its box is here, because
+   the three columns are one layout and are sized together. */
+
+/* ---- the page ------------------------------------------------------------
+   A `Dialog` (z 1100, its own focus trap and Escape) dressed as a page: it
+   starts BELOW the 64px top bar, with no scrim and no padding, so the bar
+   stays visible and the library reads as part of the workspace rather than a
+   box over it. The bar is `inert` meanwhile (Header.tsx), so it is seen but
+   never pressed: a menu opened there would paint under this dialog. `:has`
+   targets this one overlay; every other dialog keeps the scrim and the
+   centred card. */
+.dialog-overlay:has(> .dialog.library-browser) {
+  top: var(--topbar-h);
+  padding: 0;
+  background: transparent;
+}
+
+.dialog.library-browser {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: none;
+  gap: 0;
+  padding: 0;
+  background: var(--surface-app);
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* The dialog's title is its accessible name (`aria-labelledby`); the rail
+   draws the visible "Library" in Paper's place and type, so this copy is
+   hidden from sight only. */
+.dialog.library-browser > .dialog-title {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* `.dialog-body` scrolls by default. Here each COLUMN scrolls on its own, so
+   the rail, the search row's context and the status bar never scroll away. */
+.dialog.library-browser > .dialog-body {
+  flex: 1 1 auto;
+  gap: 0;
+  overflow: hidden;
+}
+
+.library-main {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+}
+
+/* ---- the rail ------------------------------------------------------------ */
+.library-rail {
+  flex: none;
+  width: 224px;
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-7);
+  overflow-y: auto;
+  background: var(--surface-panel);
+  border-right: 1px solid var(--line);
+}
+
+.library-back,
+.library-rail-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  height: var(--row-h-field);
+  font: inherit;
+  font-size: var(--type-lg);
+  line-height: var(--leading-xs);
+  text-align: left;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+}
+
+.library-back {
+  flex: none;
+  padding: 0;
+  color: var(--ink-1);
+}
+
+.library-back > svg,
+.library-rail-row > svg {
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
+.library-back > span,
+.library-rail-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.library-rail-title {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  padding: var(--space-8) var(--space-4) var(--space-7);
+  font-size: var(--type-xl);
+  line-height: var(--leading-md);
+  font-weight: var(--weight-medium);
+  color: var(--ink-1);
+}
+
+.library-rail-sub {
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  font-weight: var(--weight-regular);
+  color: var(--ink-2);
+}
+
+.library-rail-rows {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.library-rail-row {
+  padding: 0 var(--space-4);
+  color: var(--ink-2);
+  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+.library-rail-row:hover {
+  color: var(--ink-1);
+  background: var(--fill-state-soft);
+}
+
+.library-rail-count {
+  flex: none;
+  font-size: var(--type-md);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-2);
+}
+
+/* Selected is the one signal: the quiet accent ground, the accent edge and
+   the accent ink on the label. The count stays secondary, as Paper draws it. */
+.library-rail-row[aria-pressed="true"] {
+  color: var(--accent-ink);
+  background: var(--accent-quiet);
+  border-color: var(--accent);
+}
+
+.library-rail-foot {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  /* The spacer: the footer sits on the rail's floor however few rows. */
+  margin-top: auto;
+  padding: var(--space-7) var(--space-4) var(--space-4);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  color: var(--ink-2);
+  border-top: 1px solid var(--line);
+}
+
+.library-rail-project {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-weight: var(--weight-medium);
+  color: var(--ink-1);
+}
+
+/* ---- the catalog --------------------------------------------------------- */
+.library-catalog {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  padding: var(--space-8);
+  overflow-y: auto;
+}
+
+.library-catalog-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-7);
+}
+
+.library-catalog-head > div {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+}
+
+/* The one heading spec on this surface (`--type-heading` 20/28). */
+.library-catalog-head h2 {
+  margin: 0;
+  font-size: var(--type-heading);
+  line-height: var(--leading-xl);
+  font-weight: var(--weight-semibold);
+  color: var(--ink-1);
+}
+
+.library-catalog-head p {
+  margin: 0;
+  font-size: var(--type-lg);
+  line-height: var(--leading-sm);
+  color: var(--ink-2);
+}
+
+.library-catalog-head > span {
+  flex: none;
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  color: var(--ink-2);
+}
+
+.library-search-row {
+  flex: none;
+  display: flex;
+  gap: var(--space-7);
+}
+
+.library-search-row > .search-field {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.library-search-row > .select {
+  flex: none;
+  width: 144px;
+}
+
+.library-gallery {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+}
+
+.library-section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+}
+
+/* "All items" only: a small heading per kind, with its count beside it. */
+.library-section-head {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-4);
+  margin: 0;
+  font-size: var(--type-title);
+  line-height: var(--leading-md);
+  font-weight: var(--weight-medium);
+  color: var(--ink-1);
+}
+
+.library-section-head > span {
+  font-size: var(--type-md);
+  font-weight: var(--weight-regular);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-2);
+}
+
+/* `auto-fill`, so a wide monitor buys more columns, not wider cards. Paper's
+   cards are 272 wide; 240 is the floor at which three still fit beside the
+   rail and the preview on a 1280 laptop. */
+.library-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  column-gap: var(--space-7);
+  row-gap: var(--space-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.library-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  min-width: 0;
+  outline: none;
+  cursor: pointer;
+}
+
+/* THE RATIO IS RESERVED BEFORE ANY IMAGE LOADS, so a late thumb never shifts
+   the grid under the pointer mid-click. Components and the rest sit on the
+   well; a sound pack's art is its own clip, with no ground behind it. */
+.library-card-art {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  background: var(--surface-well);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  transition: border-color var(--dur-fast) var(--ease);
+}
+
+.library-card.is-sounds .library-card-art {
+  background: none;
+}
+
+.library-card-art img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.library-card:hover .library-card-art {
+  border-color: var(--line-strong);
+}
+
+/* Selected: a 2px accent edge (the 1px border plus a 1px inset ring drawn
+   OVER the picture, so the thumb cannot cover it) and the accent-ink name. */
+.library-card[aria-selected="true"] .library-card-art {
+  border-color: var(--accent);
+}
+
+.library-card[aria-selected="true"] .library-card-art::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--accent);
+  pointer-events: none;
+}
+
+.library-card:focus-visible .library-card-art {
+  box-shadow: var(--focus-ring);
+}
+
+/* A row with no thumb: its kind's icon and its name, centred in the same
+   16:9 box, so the cards stay one height. */
+.library-card-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-6);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  text-align: center;
+  color: var(--ink-2);
+}
+
+.library-card-placeholder > svg {
+  width: 24px;
+  height: 24px;
+}
+
+.library-card-name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: var(--type-title);
+  line-height: var(--leading-md);
+  font-weight: var(--weight-medium);
+  color: var(--ink-1);
+}
+
+.library-card[aria-selected="true"] .library-card-name {
+  color: var(--accent-ink);
+}
+
+/* Clamped rather than ellipsised on one line: `description` is a sentence,
+   and one line of it says nothing useful. */
+.library-card-note {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: var(--type-md);
+  line-height: var(--leading-sm);
+  color: var(--ink-2);
+}
+
+/* ---- the states ----------------------------------------------------------
+   Loading, a failed read, an empty build or kind, and no match: quiet centred
+   copy under an icon, with the one action that changes it. */
+.library-state {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-6);
+  padding: var(--space-8);
+  font-size: var(--type-lg);
+  line-height: var(--leading-md);
+  text-align: center;
+  color: var(--ink-2);
+}
+
+.library-state > svg {
+  width: 24px;
+  height: 24px;
+}
+
+.library-state > p {
+  margin: 0;
+  max-width: 480px;
+}
+
+.library-state > .library-state-detail {
+  font-size: var(--type-md);
+  line-height: var(--leading-sm);
+  overflow-wrap: anywhere;
+}
+
+/* ---- the preview column's box (its content is library-preview.css) ------ */
+.library-preview {
+  flex: none;
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-8);
+  padding: var(--space-8);
+  overflow-y: auto;
+  background: var(--surface-panel);
+  border-left: 1px solid var(--line);
+}
+
+/* ---- the status bar ------------------------------------------------------ */
+.library-status {
+  position: relative; /* the Details list's anchor */
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-7);
+  height: var(--panel-head-h);
+  padding-inline: var(--space-8);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  color: var(--ink-2);
+  background: var(--surface-panel);
+  border-top: 1px solid var(--line);
+}
+
+.library-status-problems {
+  display: flex;
+  align-items: center;
+  gap: var(--space-6);
+}
+
+.library-status-details {
+  padding: 0;
+  font: inherit;
+  color: var(--accent-ink);
+  background: none;
+  border: 0;
+  border-radius: var(--radius-xs);
+  cursor: pointer;
+}
+
+.library-status-details:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* The Details list renders INSIDE the dialog (an aria-modal sibling portal
+   was unreachable to assistive tech), anchored above the Details button's
+   corner of the status bar. `.popover` is only the raised surface here; z 1
+   lifts it over the catalog rows that come earlier in the dialog's DOM. */
+.popover.library-problems {
+  position: absolute;
+  right: var(--space-8);
+  bottom: calc(100% + var(--space-2));
+  z-index: 1;
+  max-width: 360px;
+  max-height: 240px;
+  padding: var(--space-6);
+  overflow-y: auto;
+}
+
+.library-problems ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.library-problems li {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  font-size: var(--type-md);
+  line-height: var(--leading-xs);
+  color: var(--ink-2);
+}
+
+.library-problems li > span:first-child {
+  font-family: var(--font-numeric);
+  color: var(--ink-1);
+  overflow-wrap: anywhere;
+}