@workbench-kit/react 0.0.2-prototype.0.2.4 → 0.0.2-prototype.0.2.6

package/src/primitives/library-detail-layout/LibraryDetailLayout.tsx

@@ -1,135 +1,135 @@
-import './library-detail-layout.css';
-import type { ComponentPropsWithRef, ReactNode } from 'react';
-
-import { cx } from '../../utils/cx';
-import { WorkbenchMediaSlot } from '../workbench-media-slot';
-import { RecordMediaHero } from '../record-media-hero';
-import { ScrollArea } from '../scroll-area';
-
-export type LibraryDetailLayoutMode = 'background' | 'banner' | 'compact';
-
-export interface LibraryDetailLayoutProps extends Omit<
-  ComponentPropsWithRef<'div'>,
-  'children' | 'title'
-> {
-  readonly actions?: ReactNode;
-  readonly backgroundImageUrl?: string | null | undefined;
-  readonly children?: ReactNode;
-  readonly coverAlt?: string | undefined;
-  readonly coverImageUrl?: string | null | undefined;
-  readonly description?: ReactNode;
-  readonly logoImageUrl?: string | null | undefined;
-  readonly mode?: LibraryDetailLayoutMode | undefined;
-  readonly summary?: ReactNode;
-  readonly title: ReactNode;
-  readonly toolbar?: ReactNode;
-}
-
-export function LibraryDetailLayout({
-  actions,
-  backgroundImageUrl = null,
-  children,
-  className,
-  coverAlt,
-  coverImageUrl = null,
-  description,
-  logoImageUrl = null,
-  mode = 'banner',
-  summary,
-  title,
-  toolbar,
-  ...props
-}: LibraryDetailLayoutProps): ReactNode {
-  const resolvedMode =
-    mode === 'background' ? 'background' : mode === 'compact' ? 'compact' : 'banner';
-
-  return (
-    <div
-      className={cx(
-        'ui-library-detail-layout',
-        `ui-library-detail-layout--${resolvedMode}`,
-        className,
-      )}
-      data-ui-library-detail-layout={resolvedMode}
-      {...props}
-    >
-      {toolbar}
-      {resolvedMode === 'background' ? (
-        <div className="ui-library-detail-layout__band" data-ui-library-detail-band="true">
-          <RecordMediaHero
-            alt={coverAlt}
-            className="ui-library-detail-layout__band-media"
-            fallbackIcon="library"
-            imageUrl={backgroundImageUrl}
-            layout="background"
-          />
-          <div aria-hidden className="ui-library-detail-layout__band-overlay" />
-          <div className="ui-library-detail-layout__band-content">
-            <LibraryDetailIdentity logoImageUrl={logoImageUrl} summary={summary} title={title} />
-            {actions ? <div className="ui-library-detail-layout__actions">{actions}</div> : null}
-            {description ? (
-              <div className="ui-library-detail-layout__description">{description}</div>
-            ) : null}
-          </div>
-        </div>
-      ) : (
-        <div className="ui-library-detail-layout__hero" data-ui-library-detail-hero="true">
-          <RecordMediaHero
-            alt={coverAlt}
-            className="ui-library-detail-layout__cover"
-            fallbackIcon="library"
-            imageUrl={coverImageUrl}
-            layout="compact"
-            logoUrl={logoImageUrl}
-          />
-          <div className="ui-library-detail-layout__hero-content">
-            <div className="ui-library-detail-layout__title">{title}</div>
-            {summary ? <div className="ui-library-detail-layout__summary">{summary}</div> : null}
-            {actions ? <div className="ui-library-detail-layout__actions">{actions}</div> : null}
-            {description ? (
-              <div className="ui-library-detail-layout__description">{description}</div>
-            ) : null}
-          </div>
-        </div>
-      )}
-      {children ? (
-        <ScrollArea
-          className="ui-library-detail-layout__body"
-          data-ui-library-detail-body="true"
-          orientation="vertical"
-        >
-          {children}
-        </ScrollArea>
-      ) : null}
-    </div>
-  );
-}
-
-function LibraryDetailIdentity({
-  logoImageUrl,
-  summary,
-  title,
-}: {
-  logoImageUrl: string | null | undefined;
-  summary: ReactNode | undefined;
-  title: ReactNode;
-}): ReactNode {
-  return (
-    <div className="ui-library-detail-layout__identity">
-      <WorkbenchMediaSlot
-        as="div"
-        className="ui-library-detail-layout__logo-slot"
-        fallbackClassName="ui-library-detail-layout__logo-fallback"
-        fallbackIcon="library"
-        fill
-        imageClassName="ui-library-detail-layout__logo"
-        imageUrl={logoImageUrl}
-        loading="eager"
-      />
-      <div className="ui-library-detail-layout__identity-text">
-        <div className="ui-library-detail-layout__title">{title}</div>
-        {summary ? <div className="ui-library-detail-layout__summary">{summary}</div> : null}
-      </div>
-    </div>
-  );
-}
+import './library-detail-layout.css';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+
+import { cx } from '../../utils/cx';
+import { WorkbenchMediaSlot } from '../workbench-media-slot';
+import { RecordMediaHero } from '../record-media-hero';
+import { ScrollArea } from '../scroll-area';
+
+export type LibraryDetailLayoutMode = 'background' | 'banner' | 'compact';
+
+export interface LibraryDetailLayoutProps extends Omit<
+  ComponentPropsWithRef<'div'>,
+  'children' | 'title'
+> {
+  readonly actions?: ReactNode;
+  readonly backgroundImageUrl?: string | null | undefined;
+  readonly children?: ReactNode;
+  readonly coverAlt?: string | undefined;
+  readonly coverImageUrl?: string | null | undefined;
+  readonly description?: ReactNode;
+  readonly logoImageUrl?: string | null | undefined;
+  readonly mode?: LibraryDetailLayoutMode | undefined;
+  readonly summary?: ReactNode;
+  readonly title: ReactNode;
+  readonly toolbar?: ReactNode;
+}
+
+export function LibraryDetailLayout({
+  actions,
+  backgroundImageUrl = null,
+  children,
+  className,
+  coverAlt,
+  coverImageUrl = null,
+  description,
+  logoImageUrl = null,
+  mode = 'banner',
+  summary,
+  title,
+  toolbar,
+  ...props
+}: LibraryDetailLayoutProps): ReactNode {
+  const resolvedMode =
+    mode === 'background' ? 'background' : mode === 'compact' ? 'compact' : 'banner';
+
+  return (
+    <div
+      className={cx(
+        'ui-library-detail-layout',
+        `ui-library-detail-layout--${resolvedMode}`,
+        className,
+      )}
+      data-ui-library-detail-layout={resolvedMode}
+      {...props}
+    >
+      {toolbar}
+      {resolvedMode === 'background' ? (
+        <div className="ui-library-detail-layout__band" data-ui-library-detail-band="true">
+          <RecordMediaHero
+            alt={coverAlt}
+            className="ui-library-detail-layout__band-media"
+            fallbackIcon="library"
+            imageUrl={backgroundImageUrl}
+            layout="background"
+          />
+          <div aria-hidden className="ui-library-detail-layout__band-overlay" />
+          <div className="ui-library-detail-layout__band-content">
+            <LibraryDetailIdentity logoImageUrl={logoImageUrl} summary={summary} title={title} />
+            {actions ? <div className="ui-library-detail-layout__actions">{actions}</div> : null}
+            {description ? (
+              <div className="ui-library-detail-layout__description">{description}</div>
+            ) : null}
+          </div>
+        </div>
+      ) : (
+        <div className="ui-library-detail-layout__hero" data-ui-library-detail-hero="true">
+          <RecordMediaHero
+            alt={coverAlt}
+            className="ui-library-detail-layout__cover"
+            fallbackIcon="library"
+            imageUrl={coverImageUrl}
+            layout="compact"
+            logoUrl={logoImageUrl}
+          />
+          <div className="ui-library-detail-layout__hero-content">
+            <div className="ui-library-detail-layout__title">{title}</div>
+            {summary ? <div className="ui-library-detail-layout__summary">{summary}</div> : null}
+            {actions ? <div className="ui-library-detail-layout__actions">{actions}</div> : null}
+            {description ? (
+              <div className="ui-library-detail-layout__description">{description}</div>
+            ) : null}
+          </div>
+        </div>
+      )}
+      {children ? (
+        <ScrollArea
+          className="ui-library-detail-layout__body"
+          data-ui-library-detail-body="true"
+          orientation="vertical"
+        >
+          {children}
+        </ScrollArea>
+      ) : null}
+    </div>
+  );
+}
+
+function LibraryDetailIdentity({
+  logoImageUrl,
+  summary,
+  title,
+}: {
+  logoImageUrl: string | null | undefined;
+  summary: ReactNode | undefined;
+  title: ReactNode;
+}): ReactNode {
+  return (
+    <div className="ui-library-detail-layout__identity">
+      <WorkbenchMediaSlot
+        as="div"
+        className="ui-library-detail-layout__logo-slot"
+        fallbackClassName="ui-library-detail-layout__logo-fallback"
+        fallbackIcon="library"
+        fill
+        imageClassName="ui-library-detail-layout__logo"
+        imageUrl={logoImageUrl}
+        loading="eager"
+      />
+      <div className="ui-library-detail-layout__identity-text">
+        <div className="ui-library-detail-layout__title">{title}</div>
+        {summary ? <div className="ui-library-detail-layout__summary">{summary}</div> : null}
+      </div>
+    </div>
+  );
+}

package/src/primitives/library-detail-layout/index.ts

@@ -1 +1 @@
-export * from './LibraryDetailLayout';
+export * from './LibraryDetailLayout';

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

@@ -1,169 +1,169 @@
-.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-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 {
+  --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-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;
+}