@birdycom/omniaui 0.11.0 → 0.11.2

package/dist/parts/media-browser-frame.css

@@ -1,73 +1,73 @@
-/* File: packages/ui/src/parts/media-browser-frame.css | Map: frame -> chrome bar (dots, address pill, actions)
-   -> view (screenshot slot, ratio) -> caption -> minimal / dark / tilt modifiers -> motion
-   Browser frame: fake browser chrome around a screenshot or any live content (portfolio, product shots). */
-
-.oc-browser-frame {
-  --oc-browser-frame-ratio: 16 / 10;
-  display: grid;
-  inline-size: 100%;
-  margin: 0;
-  overflow: hidden;
-  border: 1px solid var(--oc-border);
-  border-radius: calc(var(--oc-radius) + 4px);
-  background: var(--oc-card);
-  color: var(--oc-foreground);
-  box-shadow: 0 30px 60px -30px oklch(from var(--color-black-60) l c h / 0.45);
-}
-
-/* ---- Chrome bar ---- */
-.oc-browser-frame__bar {
-  display: flex;
-  align-items: center;
-  gap: 0.45rem;
-  padding: 0.55rem 0.8rem;
-  border-block-end: 1px solid var(--oc-border);
-  background: var(--oc-muted);
-}
-.oc-browser-frame__bar > i { flex: none; inline-size: 0.65rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-red-50); }
-.oc-browser-frame__bar > i:nth-of-type(2) { background: var(--color-orange-60); }
-.oc-browser-frame__bar > i:nth-of-type(3) { background: var(--color-green-20); }
-
-/* Address pill with a lock; the text is cut off with "…" when the frame is narrow. */
-.oc-browser-frame__address {
-  flex: 1;
-  min-inline-size: 0;
-  max-inline-size: 28rem;
-  margin-inline: auto;
-  padding: 0.2rem 0.75rem;
-  overflow: hidden;
-  border-radius: 999px;
-  background: var(--oc-card);
-  color: var(--oc-muted-foreground);
-  font-size: 0.75rem;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.oc-browser-frame__address::before { content: "\1F512\FE0E" / ""; margin-inline-end: 0.35rem; font-size: 0.65rem; opacity: 0.7; }
-/* Balance the dots on the left so the address stays centered. */
-.oc-browser-frame__actions { display: flex; gap: 0.35rem; min-inline-size: 2.4rem; justify-content: flex-end; color: var(--oc-muted-foreground); font-size: 0.8rem; }
-
-/* ---- View: the screenshot (or any content) ---- */
-.oc-browser-frame__view { position: relative; aspect-ratio: var(--oc-browser-frame-ratio); overflow: hidden; background: var(--oc-background); }
-.oc-browser-frame__view > :is(img, video, iframe, .oc-media-art) { display: block; inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; object-position: top; }
-/* Free height: the content decides (live HTML inside the frame). */
-.oc-browser-frame--auto .oc-browser-frame__view { aspect-ratio: auto; }
-
-.oc-browser-frame__caption { padding: 0.6rem 0.9rem; border-block-start: 1px solid var(--oc-border); font-size: 0.8125rem; color: var(--oc-muted-foreground); }
-
-/* ---- Modifiers ---- */
-.oc-browser-frame--minimal .oc-browser-frame__address,
-.oc-browser-frame--minimal .oc-browser-frame__actions { display: none; }
-/* Dark chrome in both themes (light-dark() tokens resolve to their dark side). */
-.oc-browser-frame--dark { color-scheme: dark; }
-
-/* Tilt: a slight 3D angle that straightens on hover / focus. Static with reduced motion. */
-.oc-browser-frame--tilt { transform: perspective(80rem) rotateX(6deg) rotateY(-8deg); transform-origin: center; }
-@media (prefers-reduced-motion: no-preference) {
-  .oc-browser-frame--tilt { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
-  .oc-browser-frame--tilt:is(:hover, :focus-within) { transform: none; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .oc-browser-frame--tilt { transform: none; }
-}
+/* File: packages/ui/src/parts/media-browser-frame.css | Map: frame -> chrome bar (dots, address pill, actions)
+   -> view (screenshot slot, ratio) -> caption -> minimal / dark / tilt modifiers -> motion
+   Browser frame: fake browser chrome around a screenshot or any live content (portfolio, product shots). */
+
+.oc-browser-frame {
+  --oc-browser-frame-ratio: 16 / 10;
+  display: grid;
+  inline-size: 100%;
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 4px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  box-shadow: 0 30px 60px -30px oklch(from var(--color-black-60) l c h / 0.45);
+}
+
+/* ---- Chrome bar ---- */
+.oc-browser-frame__bar {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.55rem 0.8rem;
+  border-block-end: 1px solid var(--oc-border);
+  background: var(--oc-muted);
+}
+.oc-browser-frame__bar > i { flex: none; inline-size: 0.65rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-red-50); }
+.oc-browser-frame__bar > i:nth-of-type(2) { background: var(--color-orange-60); }
+.oc-browser-frame__bar > i:nth-of-type(3) { background: var(--color-green-20); }
+
+/* Address pill with a lock; the text is cut off with "…" when the frame is narrow. */
+.oc-browser-frame__address {
+  flex: 1;
+  min-inline-size: 0;
+  max-inline-size: 28rem;
+  margin-inline: auto;
+  padding: 0.2rem 0.75rem;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--oc-card);
+  color: var(--oc-muted-foreground);
+  font-size: 0.75rem;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.oc-browser-frame__address::before { content: "\1F512\FE0E" / ""; margin-inline-end: 0.35rem; font-size: 0.65rem; opacity: 0.7; }
+/* Balance the dots on the left so the address stays centered. */
+.oc-browser-frame__actions { display: flex; gap: 0.35rem; min-inline-size: 2.4rem; justify-content: flex-end; color: var(--oc-muted-foreground); font-size: 0.8rem; }
+
+/* ---- View: the screenshot (or any content) ---- */
+.oc-browser-frame__view { position: relative; aspect-ratio: var(--oc-browser-frame-ratio); overflow: hidden; background: var(--oc-background); }
+.oc-browser-frame__view > :is(img, video, iframe, .oc-media-art) { display: block; inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; object-position: top; }
+/* Free height: the content decides (live HTML inside the frame). */
+.oc-browser-frame--auto .oc-browser-frame__view { aspect-ratio: auto; }
+
+.oc-browser-frame__caption { padding: 0.6rem 0.9rem; border-block-start: 1px solid var(--oc-border); font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+
+/* ---- Modifiers ---- */
+.oc-browser-frame--minimal .oc-browser-frame__address,
+.oc-browser-frame--minimal .oc-browser-frame__actions { display: none; }
+/* Dark chrome in both themes (light-dark() tokens resolve to their dark side). */
+.oc-browser-frame--dark { color-scheme: dark; }
+
+/* Tilt: a slight 3D angle that straightens on hover / focus. Static with reduced motion. */
+.oc-browser-frame--tilt { transform: perspective(80rem) rotateX(6deg) rotateY(-8deg); transform-origin: center; }
+@media (prefers-reduced-motion: no-preference) {
+  .oc-browser-frame--tilt { transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
+  .oc-browser-frame--tilt:is(:hover, :focus-within) { transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-browser-frame--tilt { transform: none; }
+}

package/dist/parts/media-card.css

@@ -1,83 +1,83 @@
-/* File: packages/ui/src/parts/media-card.css | Map: card grid -> body row (avatar | text | menu) -> title (stretched link)
-   -> meta -> menu button -> compact modifier -> hover
-   Media card: a .oc-media-thumb on top, then avatar + title + meta + an overflow menu button.
-   The title link stretches over the whole card (::after), the menu button sits above it. */
-
-.oc-media-card {
-  position: relative;
-  display: grid;
-  gap: 0.75rem;
-  align-content: start;
-  inline-size: 100%;
-  color: var(--oc-foreground);
-}
-
-/* Avatar | text | menu. */
-.oc-media-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; }
-.oc-media-card__body:not(:has(.oc-media-card__avatar)) { grid-template-columns: minmax(0, 1fr) auto; }
-
-.oc-media-card__avatar {
-  display: grid;
-  place-items: center;
-  inline-size: 2.25rem;
-  aspect-ratio: 1;
-  overflow: hidden;
-  border-radius: 50%;
-  background: var(--oc-muted);
-  color: var(--oc-foreground);
-  font-size: 0.8rem;
-  font-weight: 600;
-}
-.oc-media-card__avatar > * { inline-size: 100%; block-size: 100%; object-fit: cover; }
-
-.oc-media-card__text { display: grid; gap: 0.2rem; min-inline-size: 0; }
-
-/* Two lines max, then "…". */
-.oc-media-card__title {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: 600;
-  line-height: 1.35;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  overflow: hidden;
-}
-.oc-media-card__title > a { color: inherit; text-decoration: none; }
-.oc-media-card__title > a::after { content: ""; position: absolute; inset: 0; border-radius: var(--oc-radius); }
-.oc-media-card__title > a:focus-visible { outline: none; }
-.oc-media-card__title > a:focus-visible::after { outline: 2px solid var(--oc-ring); outline-offset: 4px; }
-
-.oc-media-card__meta { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
-.oc-media-card__meta > a { position: relative; z-index: 1; color: inherit; text-decoration: none; }
-.oc-media-card__meta > a:hover { color: var(--oc-foreground); }
-
-/* Overflow menu (⋮): above the stretched link, so it gets its own clicks. */
-.oc-media-card__menu {
-  position: relative;
-  z-index: 1;
-  display: grid;
-  place-items: center;
-  inline-size: 2rem;
-  aspect-ratio: 1;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--oc-muted-foreground);
-  font-size: 1.1rem;
-  cursor: pointer;
-}
-.oc-media-card__menu:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
-.oc-media-card__menu:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-
-/* Compact: smaller avatar and text, e.g. for a dense grid. */
-.oc-media-card--compact { gap: 0.5rem; }
-.oc-media-card--compact .oc-media-card__avatar { inline-size: 1.75rem; }
-.oc-media-card--compact .oc-media-card__title { font-size: 0.875rem; }
-
-/* Hovering the card zooms its thumb a little (the stretched link covers the thumb). */
-@media (prefers-reduced-motion: no-preference) {
-  .oc-media-card:hover .oc-media-thumb > :is(img, video, .oc-media-art) { transform: scale(1.04); }
-}
+/* File: packages/ui/src/parts/media-card.css | Map: card grid -> body row (avatar | text | menu) -> title (stretched link)
+   -> meta -> menu button -> compact modifier -> hover
+   Media card: a .oc-media-thumb on top, then avatar + title + meta + an overflow menu button.
+   The title link stretches over the whole card (::after), the menu button sits above it. */
+
+.oc-media-card {
+  position: relative;
+  display: grid;
+  gap: 0.75rem;
+  align-content: start;
+  inline-size: 100%;
+  color: var(--oc-foreground);
+}
+
+/* Avatar | text | menu. */
+.oc-media-card__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; }
+.oc-media-card__body:not(:has(.oc-media-card__avatar)) { grid-template-columns: minmax(0, 1fr) auto; }
+
+.oc-media-card__avatar {
+  display: grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 50%;
+  background: var(--oc-muted);
+  color: var(--oc-foreground);
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+.oc-media-card__avatar > * { inline-size: 100%; block-size: 100%; object-fit: cover; }
+
+.oc-media-card__text { display: grid; gap: 0.2rem; min-inline-size: 0; }
+
+/* Two lines max, then "…". */
+.oc-media-card__title {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  line-height: 1.35;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+}
+.oc-media-card__title > a { color: inherit; text-decoration: none; }
+.oc-media-card__title > a::after { content: ""; position: absolute; inset: 0; border-radius: var(--oc-radius); }
+.oc-media-card__title > a:focus-visible { outline: none; }
+.oc-media-card__title > a:focus-visible::after { outline: 2px solid var(--oc-ring); outline-offset: 4px; }
+
+.oc-media-card__meta { margin: 0; font-size: 0.8125rem; color: var(--oc-muted-foreground); }
+.oc-media-card__meta > a { position: relative; z-index: 1; color: inherit; text-decoration: none; }
+.oc-media-card__meta > a:hover { color: var(--oc-foreground); }
+
+/* Overflow menu (⋮): above the stretched link, so it gets its own clicks. */
+.oc-media-card__menu {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  inline-size: 2rem;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  font-size: 1.1rem;
+  cursor: pointer;
+}
+.oc-media-card__menu:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
+.oc-media-card__menu:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+/* Compact: smaller avatar and text, e.g. for a dense grid. */
+.oc-media-card--compact { gap: 0.5rem; }
+.oc-media-card--compact .oc-media-card__avatar { inline-size: 1.75rem; }
+.oc-media-card--compact .oc-media-card__title { font-size: 0.875rem; }
+
+/* Hovering the card zooms its thumb a little (the stretched link covers the thumb). */
+@media (prefers-reduced-motion: no-preference) {
+  .oc-media-card:hover .oc-media-thumb > :is(img, video, .oc-media-art) { transform: scale(1.04); }
+}

package/dist/parts/media-chat-composer.css

@@ -1,90 +1,90 @@
-/* File: packages/ui/src/parts/media-chat-composer.css | Map: frame (focus ring) -> textarea (grows with content)
-   -> bar (tools | hint | send) -> tool buttons -> send button (disabled while empty) -> inline modifier
-   Chat composer: a message field with a toolbar and a send button, in one rounded frame.
-   The textarea grows with field-sizing; the send button looks disabled while the field is empty (:placeholder-shown). */
-
-.oc-chat-composer {
-  display: grid;
-  gap: 0.25rem;
-  inline-size: 100%;
-  padding: 0.5rem;
-  border: 1px solid var(--oc-input);
-  border-radius: calc(var(--oc-radius) + 6px);
-  background: var(--oc-card);
-  color: var(--oc-foreground);
-  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
-}
-.oc-chat-composer:focus-within {
-  border-color: var(--oc-ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--oc-ring) 20%, transparent);
-}
-
-/* The field itself has no frame: the composer is the frame. */
-.oc-chat-composer__input {
-  inline-size: 100%;
-  min-block-size: 2.5rem;
-  max-block-size: 10rem;
-  padding: 0.375rem 0.5rem;
-  border: 0;
-  outline: 0;
-  resize: none;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 0.9375rem;
-  line-height: 1.5;
-  field-sizing: content;
-}
-.oc-chat-composer__input::placeholder { color: var(--oc-muted-foreground); }
-
-/* Toolbar: tools left, hint in the middle, send right. */
-.oc-chat-composer__bar { display: flex; align-items: center; gap: 0.25rem; }
-.oc-chat-composer__tools { display: flex; align-items: center; gap: 0.125rem; }
-.oc-chat-composer__hint { margin-inline-start: auto; padding-inline: 0.5rem; font-size: 0.75rem; color: var(--oc-muted-foreground); }
-
-.oc-chat-composer__tool {
-  display: inline-grid;
-  place-items: center;
-  inline-size: 2.25rem;
-  aspect-ratio: 1;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: transparent;
-  color: var(--oc-muted-foreground);
-  font-size: 1.05rem;
-  line-height: 1;
-  cursor: pointer;
-}
-.oc-chat-composer__tool:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
-.oc-chat-composer__tool:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
-
-.oc-chat-composer__send {
-  display: inline-grid;
-  place-items: center;
-  inline-size: 2.25rem;
-  aspect-ratio: 1;
-  margin-inline-start: auto;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: var(--oc-primary);
-  color: var(--oc-primary-foreground);
-  font-size: 1rem;
-  cursor: pointer;
-  transition: opacity var(--oc-transition-fast), transform var(--oc-transition-fast);
-}
-.oc-chat-composer__hint + .oc-chat-composer__send { margin-inline-start: 0; }
-.oc-chat-composer__send:hover { transform: scale(1.05); }
-.oc-chat-composer__send:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
-/* Empty field (placeholder visible) or a real disabled button: dimmed and not clickable. */
-.oc-chat-composer:has(.oc-chat-composer__input:placeholder-shown) .oc-chat-composer__send,
-.oc-chat-composer__send:disabled { opacity: 0.4; pointer-events: none; }
-
-/* Inline: one row — tools, field, send (for compact chat panels). */
-.oc-chat-composer--inline { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; padding: 0.375rem; border-radius: 1.4rem; }
-.oc-chat-composer--inline .oc-chat-composer__bar { display: contents; }
-.oc-chat-composer--inline .oc-chat-composer__tools { grid-column: 1; grid-row: 1; }
-.oc-chat-composer--inline .oc-chat-composer__input { grid-column: 2; grid-row: 1; min-block-size: 2.25rem; padding-block: 0.4rem; }
-.oc-chat-composer--inline .oc-chat-composer__send { grid-column: 3; grid-row: 1; }
-.oc-chat-composer--inline .oc-chat-composer__hint { display: none; }
+/* File: packages/ui/src/parts/media-chat-composer.css | Map: frame (focus ring) -> textarea (grows with content)
+   -> bar (tools | hint | send) -> tool buttons -> send button (disabled while empty) -> inline modifier
+   Chat composer: a message field with a toolbar and a send button, in one rounded frame.
+   The textarea grows with field-sizing; the send button looks disabled while the field is empty (:placeholder-shown). */
+
+.oc-chat-composer {
+  display: grid;
+  gap: 0.25rem;
+  inline-size: 100%;
+  padding: 0.5rem;
+  border: 1px solid var(--oc-input);
+  border-radius: calc(var(--oc-radius) + 6px);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+  transition: border-color var(--oc-transition-fast), box-shadow var(--oc-transition-fast);
+}
+.oc-chat-composer:focus-within {
+  border-color: var(--oc-ring);
+  box-shadow: 0 0 0 3px color-mix(in oklch, var(--oc-ring) 20%, transparent);
+}
+
+/* The field itself has no frame: the composer is the frame. */
+.oc-chat-composer__input {
+  inline-size: 100%;
+  min-block-size: 2.5rem;
+  max-block-size: 10rem;
+  padding: 0.375rem 0.5rem;
+  border: 0;
+  outline: 0;
+  resize: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  field-sizing: content;
+}
+.oc-chat-composer__input::placeholder { color: var(--oc-muted-foreground); }
+
+/* Toolbar: tools left, hint in the middle, send right. */
+.oc-chat-composer__bar { display: flex; align-items: center; gap: 0.25rem; }
+.oc-chat-composer__tools { display: flex; align-items: center; gap: 0.125rem; }
+.oc-chat-composer__hint { margin-inline-start: auto; padding-inline: 0.5rem; font-size: 0.75rem; color: var(--oc-muted-foreground); }
+
+.oc-chat-composer__tool {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--oc-muted-foreground);
+  font-size: 1.05rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.oc-chat-composer__tool:hover { background: var(--oc-surface-strong); color: var(--oc-foreground); }
+.oc-chat-composer__tool:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 1px; }
+
+.oc-chat-composer__send {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 2.25rem;
+  aspect-ratio: 1;
+  margin-inline-start: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--oc-primary);
+  color: var(--oc-primary-foreground);
+  font-size: 1rem;
+  cursor: pointer;
+  transition: opacity var(--oc-transition-fast), transform var(--oc-transition-fast);
+}
+.oc-chat-composer__hint + .oc-chat-composer__send { margin-inline-start: 0; }
+.oc-chat-composer__send:hover { transform: scale(1.05); }
+.oc-chat-composer__send:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 2px; }
+/* Empty field (placeholder visible) or a real disabled button: dimmed and not clickable. */
+.oc-chat-composer:has(.oc-chat-composer__input:placeholder-shown) .oc-chat-composer__send,
+.oc-chat-composer__send:disabled { opacity: 0.4; pointer-events: none; }
+
+/* Inline: one row — tools, field, send (for compact chat panels). */
+.oc-chat-composer--inline { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; padding: 0.375rem; border-radius: 1.4rem; }
+.oc-chat-composer--inline .oc-chat-composer__bar { display: contents; }
+.oc-chat-composer--inline .oc-chat-composer__tools { grid-column: 1; grid-row: 1; }
+.oc-chat-composer--inline .oc-chat-composer__input { grid-column: 2; grid-row: 1; min-block-size: 2.25rem; padding-block: 0.4rem; }
+.oc-chat-composer--inline .oc-chat-composer__send { grid-column: 3; grid-row: 1; }
+.oc-chat-composer--inline .oc-chat-composer__hint { display: none; }