@workbench-kit/react 0.0.2-prototype.0.1.4 → 0.0.2-prototype.0.2.11

package/src/primitives/library-detail-layout/library-detail-layout.css

@@ -0,0 +1,226 @@
+.ui-library-detail-layout {
+  --shell-library-capsule-aspect: 116 / 43;
+  --shell-library-capsule-list-width: 116px;
+  --shell-library-capsule-list-height: 43px;
+  --shell-detail-hero-cover-width: 231px;
+  --shell-detail-hero-cover-height: calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116);
+  --shell-detail-portrait-cover-width: 120px;
+  --shell-detail-portrait-cover-height: 160px;
+  --shell-detail-atmosphere-blur: 18px;
+  --shell-detail-atmosphere-scale: 1.12;
+  --shell-detail-atmosphere-opacity: 0.55;
+  --shell-library-detail-logo-size: 56px;
+  --shell-library-detail-thumb-width: var(--shell-library-capsule-list-width, 116px);
+  --shell-library-detail-thumb-height: var(--shell-library-capsule-list-height, 43px);
+  --shell-detail-hero-band-height: 200px;
+  --shell-detail-hero-region-height: var(--shell-detail-hero-band-height, 200px);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+  min-width: 0;
+  height: 100%;
+}
+
+.ui-library-detail-layout__hero {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+  height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+}
+
+.ui-library-detail-layout__hero-content {
+  display: grid;
+  flex: 1 1 auto;
+  gap: 8px;
+  min-width: 0;
+}
+
+.ui-library-detail-layout__title {
+  font-size: var(--shell-font-size-title, 1.125rem);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.ui-library-detail-layout__summary {
+  color: var(--shell-color-text-muted, var(--color-text-muted));
+  font-size: var(--shell-font-size-caption, 0.75rem);
+}
+
+.ui-library-detail-layout__description {
+  color: var(--shell-color-text-muted, var(--color-text-muted));
+  font-size: var(--shell-font-size-caption, 0.75rem);
+  line-height: 1.45;
+}
+
+.ui-library-detail-layout__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.ui-library-detail-layout__band {
+  position: relative;
+  box-sizing: border-box;
+  height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+  min-height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+  overflow: hidden;
+  border: 1px solid
+    var(--shell-color-border-subtle, var(--color-border-subtle, rgba(255, 255, 255, 0.08)));
+  border-radius: var(--shell-radius-md, 6px);
+}
+
+.ui-library-detail-layout__band-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.72) 100%);
+  pointer-events: none;
+}
+
+.ui-library-detail-layout__band-content {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  gap: 10px;
+  min-height: var(--shell-detail-hero-region-height, var(--shell-detail-hero-band-height, 200px));
+  padding: 16px;
+  justify-content: end;
+  align-content: end;
+}
+
+.ui-library-detail-layout__identity {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+}
+
+.ui-library-detail-layout__identity-text {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+
+.ui-library-detail-layout__logo-slot {
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  flex-shrink: 0;
+  width: var(--shell-library-detail-logo-size, 56px);
+  height: var(--shell-library-detail-logo-size, 56px);
+  min-width: var(--shell-library-detail-logo-size, 56px);
+  min-height: var(--shell-library-detail-logo-size, 56px);
+  max-width: var(--shell-library-detail-logo-size, 56px);
+  max-height: var(--shell-library-detail-logo-size, 56px);
+  overflow: hidden;
+  background: var(--shell-color-surface-sunken, rgba(255, 255, 255, 0.04));
+  border: 1px solid
+    var(--shell-color-border-subtle, var(--color-border-subtle, rgba(255, 255, 255, 0.08)));
+  border-radius: var(--shell-radius-sm, 4px);
+}
+
+.ui-library-detail-layout__logo {
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  object-fit: var(--shell-library-logo-object-fit, cover);
+  object-position: center;
+}
+
+.ui-library-detail-layout__logo-fallback,
+.ui-library-detail-layout__logo-slot .ui-workbench-media-slot__placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.ui-library-detail-layout__logo-fallback {
+  font-size: 28px;
+}
+
+.ui-library-detail-layout__body {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.ui-library-detail-layout--compact .ui-library-detail-layout__hero {
+  gap: 12px;
+}
+
+.ui-library-detail-layout__cover.ui-record-media-hero--compact {
+  box-sizing: border-box;
+  width: min(100%, var(--shell-detail-hero-cover-width, 231px));
+  min-width: min(100%, var(--shell-detail-hero-cover-width, 231px));
+  max-width: min(100%, var(--shell-detail-hero-cover-width, 231px));
+  height: var(
+    --shell-detail-hero-cover-height,
+    calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116)
+  );
+  min-height: var(
+    --shell-detail-hero-cover-height,
+    calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116)
+  );
+  max-height: var(
+    --shell-detail-hero-cover-height,
+    calc(var(--shell-detail-hero-cover-width, 231px) * 43 / 116)
+  );
+  aspect-ratio: var(--shell-library-capsule-aspect, 116 / 43);
+  flex: 0 0 auto;
+}
+
+.ui-library-detail-layout__hero-cover {
+  display: grid;
+  gap: 0;
+  min-width: 0;
+}
+
+.ui-library-detail-layout__hero-cover .ui-library-detail-layout__band {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.ui-library-detail-layout__band-media--atmosphere .ui-record-media-hero__image,
+.ui-library-detail-layout__band-media[data-atmosphere='true'] .ui-record-media-hero__image {
+  opacity: var(--shell-detail-atmosphere-opacity, 0.55);
+  filter: blur(var(--shell-detail-atmosphere-blur, 18px));
+  transform: scale(var(--shell-detail-atmosphere-scale, 1.12));
+  object-fit: cover;
+}
+
+.ui-library-detail-layout__hero-cover-body {
+  display: flex;
+  gap: 16px;
+  align-items: flex-end;
+  margin-top: -48px;
+  padding: 0 16px 8px;
+  position: relative;
+  z-index: 2;
+}
+
+.ui-library-detail-layout__portrait-cover.ui-record-media-hero--compact {
+  box-sizing: border-box;
+  width: var(--shell-detail-portrait-cover-width, 120px);
+  min-width: var(--shell-detail-portrait-cover-width, 120px);
+  max-width: var(--shell-detail-portrait-cover-width, 120px);
+  height: var(--shell-detail-portrait-cover-height, 160px);
+  min-height: var(--shell-detail-portrait-cover-height, 160px);
+  max-height: var(--shell-detail-portrait-cover-height, 160px);
+  aspect-ratio: auto;
+  flex: 0 0 auto;
+  border: 1px solid
+    var(--shell-color-border-subtle, var(--color-border-subtle, rgba(255, 255, 255, 0.12)));
+  border-radius: var(--shell-radius-sm, 4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+  overflow: hidden;
+}
+
+.ui-library-detail-layout__attribution {
+  color: var(--shell-color-text-subtle, var(--color-text-subtle, var(--color-text-muted)));
+  font-size: var(--shell-font-size-caption, 0.75rem);
+  line-height: 1.4;
+}

package/src/primitives/library-detail-layout/resolve-hero-cover-media.ts

@@ -0,0 +1,80 @@
+/**
+ * Pure media resolution for LibraryDetailLayout `hero-cover` mode.
+ * Implements atmosphere-from-cover when no distinct wide hero URL succeeds.
+ */
+
+export interface ResolveLibraryDetailHeroCoverMediaInput {
+  readonly heroImageUrl?: string | null;
+  readonly coverImageUrl?: string | null;
+  readonly heroFailed?: boolean;
+  readonly coverFailed?: boolean;
+}
+
+export interface ResolvedLibraryDetailHeroCoverMedia {
+  /** Trimmed cover URL when load has not failed. */
+  readonly resolvedCover: string | null;
+  /** Distinct wide hero URL (differs from cover) when load has not failed. */
+  readonly resolvedHero: string | null;
+  /**
+   * Soft backdrop URL when there is no successful distinct hero but cover is
+   * available. Must not be stretched as the sole full-bleed identity cover.
+   */
+  readonly atmosphereUrl: string | null;
+  /** Band media to render: distinct hero, else atmosphere, else null (fallback). */
+  readonly bandImageUrl: string | null;
+  readonly bandKind: 'hero' | 'atmosphere' | 'fallback';
+  readonly showPortraitCover: boolean;
+}
+
+function trimUrl(value: string | null | undefined): string | null {
+  if (value === null || value === undefined) {
+    return null;
+  }
+  const trimmed = value.trim();
+  return trimmed === '' ? null : trimmed;
+}
+
+export function resolveLibraryDetailHeroCoverMedia(
+  input: ResolveLibraryDetailHeroCoverMediaInput,
+): ResolvedLibraryDetailHeroCoverMedia {
+  const coverSource = trimUrl(input.coverImageUrl);
+  const heroSource = trimUrl(input.heroImageUrl);
+  const heroFailed = input.heroFailed ?? false;
+  const coverFailed = input.coverFailed ?? false;
+
+  const resolvedCover = coverSource && !coverFailed ? coverSource : null;
+  const distinctHero = heroSource && coverSource && heroSource === coverSource ? null : heroSource;
+  const resolvedHero = distinctHero && !heroFailed ? distinctHero : null;
+  const atmosphereUrl = !resolvedHero && resolvedCover ? resolvedCover : null;
+
+  if (resolvedHero) {
+    return {
+      resolvedCover,
+      resolvedHero,
+      atmosphereUrl: null,
+      bandImageUrl: resolvedHero,
+      bandKind: 'hero',
+      showPortraitCover: resolvedCover !== null,
+    };
+  }
+
+  if (atmosphereUrl) {
+    return {
+      resolvedCover,
+      resolvedHero: null,
+      atmosphereUrl,
+      bandImageUrl: atmosphereUrl,
+      bandKind: 'atmosphere',
+      showPortraitCover: true,
+    };
+  }
+
+  return {
+    resolvedCover,
+    resolvedHero: null,
+    atmosphereUrl: null,
+    bandImageUrl: null,
+    bandKind: 'fallback',
+    showPortraitCover: false,
+  };
+}