@orcestr/ui 0.0.3 → 0.1.1

package/dist/example/styles.css

@@ -29,6 +29,8 @@ body.oui-ui-document-lock {
 
 .oui-ui-section {
   container-type: inline-size;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 560px;
   overflow: hidden;
   padding: 18px;
 }
@@ -53,20 +55,6 @@ body.oui-ui-document-lock {
   min-height: 0;
 }
 
-.oui-ui-topbar {
-  display: flex;
-  min-width: 0;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-  border-radius: var(--oui-radius);
-  background: var(--oui-section-surface-bg, var(--oui-panel));
-  box-shadow: var(--oui-section-shadow, none);
-  margin: 0 28px 10px 22px;
-  padding: 14px 16px;
-}
-
 .oui-ui-brand {
   display: inline-flex;
   min-width: 0;
@@ -117,31 +105,27 @@ body.oui-ui-document-lock {
   white-space: nowrap;
 }
 
-.oui-app-shell-sidebar-title .oui-ui-brand {
+.oui-ui-main-sidebar .oui-ui-brand {
   width: 100%;
 }
 
-.oui-app-shell-sidebar-title .oui-ui-brand-text {
+.oui-ui-main-sidebar .oui-ui-brand-text {
   flex: 1 1 auto;
 }
 
-.oui-ui-topbar-actions {
-  display: inline-flex;
-  min-width: 0;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
+.oui-app-shell-header > .oui-ui-brand {
+  flex: 1 1 auto;
 }
 
-.oui-ui-topbar-slogan {
+.oui-ui-header-title {
   display: flex;
   min-width: 0;
+  flex: 1 1 auto;
   flex-direction: column;
   gap: 2px;
 }
 
-.oui-ui-topbar-slogan strong {
+.oui-ui-header-title strong {
   overflow: hidden;
   color: var(--oui-text);
   font-size: 14px;
@@ -151,7 +135,7 @@ body.oui-ui-document-lock {
   white-space: nowrap;
 }
 
-.oui-ui-topbar-slogan span {
+.oui-ui-header-title span {
   overflow: hidden;
   color: var(--oui-muted);
   font-size: 12px;
@@ -160,7 +144,16 @@ body.oui-ui-document-lock {
   white-space: nowrap;
 }
 
-.oui-ui-topbar-link {
+.oui-ui-header-actions {
+  display: inline-flex;
+  min-width: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.oui-ui-header-link {
   display: inline-flex;
   min-height: 30px;
   align-items: center;
@@ -178,64 +171,20 @@ body.oui-ui-document-lock {
   font-family: inherit;
 }
 
-.oui-ui-topbar-link {
+.oui-ui-header-link {
   background: var(--oui-pad-bg);
   padding: 0 9px;
 }
 
-.oui-ui-language-switch {
-  display: inline-flex;
-  min-height: 30px;
-  align-items: center;
-  gap: 3px;
-  border: 0;
-  border-radius: var(--oui-radius-sm);
-  background: var(--oui-pad-bg);
-  padding: 2px;
-}
-
-.oui-ui-language-label {
-  padding: 0 6px;
-  color: var(--oui-muted);
-  font-size: 12px;
-  font-weight: 720;
-  line-height: 1;
-  white-space: nowrap;
-}
-
-.oui-ui-language-option {
-  display: inline-flex;
-  min-width: 32px;
-  min-height: 24px;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--oui-muted);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 800;
-  line-height: 1;
-}
-
-.oui-ui-language-option:hover,
-.oui-ui-language-option:focus-visible {
-  color: var(--oui-text);
-  outline: none;
-}
-
-.oui-ui-language-option[data-active=true] {
-  background: var(--oui-brand-soft);
-  color: var(--oui-brand-strong);
+.oui-ui-language-button {
+  flex: 0 0 auto;
 }
 
-.oui-ui-topbar-link:hover {
+.oui-ui-header-link:hover {
   background: var(--oui-pad-hover-bg);
 }
 
-.oui-ui-topbar-link:focus-visible {
+.oui-ui-header-link:focus-visible {
   outline: none;
   box-shadow: var(--oui-ring);
 }
@@ -347,55 +296,202 @@ body.oui-ui-document-lock {
   flex: 0 0 auto;
 }
 
-.oui-ui-sidebar-groups {
+.oui-ui-context-menu-demo {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: 10px;
+  gap: 3px;
+  border: 1px dashed var(--oui-border);
+  border-radius: var(--oui-radius-sm);
+  background: var(--oui-pad-bg);
+  cursor: context-menu;
+  padding: 12px;
+}
+
+.oui-ui-inline-edit-popover {
+  width: 280px;
+}
+
+.oui-ui-inline-edit-option {
+  min-height: 34px;
+  padding: 6px 8px;
+}
+
+.oui-ui-inline-edit-option .oui-combobox-option-main {
+  align-self: auto;
+  padding: 0;
 }
 
-.oui-ui-sidebar-group {
+.oui-ui-app-sidebar-demo {
+  width: min(100%, 300px);
+  height: 440px;
+  overflow: hidden;
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius);
+  background: var(--oui-bg);
+}
+
+.oui-ui-app-sidebar-demo .oui-app-sidebar {
+  width: 100%;
+  height: 100%;
+}
+
+.oui-ui-app-shell-modal {
   display: flex;
-  min-width: 0;
+  width: min(100vw - 32px, 1720px) !important;
+  height: min(100vh - 32px, 940px);
+  max-height: calc(100vh - 32px);
   flex-direction: column;
-  gap: 5px;
 }
 
-.oui-ui-sidebar-group-label {
+.oui-ui-app-shell-modal-header {
+  border-bottom: 1px solid var(--oui-border);
+  padding: 10px 12px;
+}
+
+.oui-ui-app-shell-modal-body {
   display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  align-items: stretch;
+  justify-content: center;
+  overflow: hidden;
+  padding: 12px;
+}
+
+.oui-special-modal-scroll-body .oui-ui-app-shell-modal-body {
+  overflow: hidden;
+}
+
+.oui-ui-app-shell-preview-stage {
+  width: 100%;
+  height: 100%;
   min-width: 0;
-  align-items: center;
-  gap: 8px;
-  color: var(--oui-muted);
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.04em;
-  line-height: 1;
-  text-transform: uppercase;
+  min-height: 520px;
+  overflow: hidden;
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius);
+  background: var(--oui-bg);
 }
 
-.oui-ui-sidebar-group-label::after {
-  content: "";
-  display: block;
+.oui-ui-app-shell-preview-stage[data-mode=phone] {
+  width: min(100%, 410px);
+  min-height: 0;
+  border-radius: 14px;
+}
+
+.oui-ui-app-shell-preview-stage .oui-app-shell {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--oui-bg);
+  padding: 0;
+}
+
+.oui-ui-app-shell-preview-stage .oui-app-shell-frame {
+  height: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+
+.oui-ui-app-shell-preview-stage .oui-app-shell[data-has-header=true] .oui-app-shell-frame {
+  height: 100%;
+}
+
+.oui-ui-app-shell-preview-stage .oui-app-shell[data-sidebar-mode=mobile] .oui-app-shell-frame,
+.oui-ui-app-shell-preview-stage .oui-app-shell[data-sidebar-mode=mobile][data-has-header=true] .oui-app-shell-frame {
+  height: 100%;
+}
+
+.oui-ui-app-shell-preview-stage[data-mode=phone] .oui-app-shell-frame {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.oui-ui-app-shell-preview-stage .oui-app-shell-header {
+  min-height: 56px;
+  padding: 8px 12px;
+}
+
+.oui-ui-app-shell-preview-stage[data-mode=phone] .oui-app-shell-header {
+  padding: 8px 18px 8px 10px;
+}
+
+.oui-ui-app-shell-header-main {
   min-width: 0;
-  height: 1px;
   flex: 1 1 auto;
-  background: var(--oui-border);
 }
 
-.oui-ui-sidebar-nav {
-  width: 100%;
-  gap: 4px;
+.oui-ui-app-shell-header-actions-demo {
+  min-width: 0;
 }
 
-.oui-ui-sidebar-nav .oui-app-shell-nav-item {
-  min-height: 34px;
-  padding: 7px 9px;
+.oui-ui-app-shell-preview-stage[data-mode=phone] .oui-ui-app-shell-quick-jump .oui-icon-text-button-label,
+.oui-ui-app-shell-preview-stage[data-mode=phone] .oui-ui-app-shell-header-actions-demo > .oui-icon-button:nth-last-child(-n+3) {
+  display: none;
 }
 
-.oui-ui-sidebar-nav .oui-app-shell-nav-label {
+.oui-ui-app-shell-preview-stage .oui-app-shell-content {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  padding: 18px 18px 22px;
+}
+
+.oui-ui-app-shell-preview-stage .oui-app-sidebar {
+  border-right: 1px solid var(--oui-border);
+}
+
+@media (max-width: 980px) {
+  .oui-ui-app-shell-mode-toggle {
+    display: none;
+  }
+  .oui-ui-app-shell-modal {
+    width: 100dvw !important;
+    height: 100dvh;
+    max-height: 100dvh;
+  }
+  .oui-ui-app-shell-modal-body {
+    padding: 8px;
+  }
+}
+.oui-ui-main-sidebar {
+  height: 100%;
+  border-radius: var(--oui-radius);
+  background: var(--oui-section-surface-bg, var(--oui-panel));
+  box-shadow: var(--oui-section-shadow, none);
+}
+
+.oui-ui-demo-logo {
+  display: inline-flex;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  background: var(--oui-primary-surface);
+  color: var(--oui-primary-text);
   font-size: 14px;
-  font-weight: 760;
+  font-weight: 820;
+  line-height: 1;
+}
+
+.oui-ui-application-table-preview {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: 1fr 1.4fr 1fr 0.6fr 0.7fr;
+  overflow: hidden;
+  border: 1px solid var(--oui-border);
+  border-radius: var(--oui-radius-sm);
+}
+
+.oui-ui-application-table-preview > * {
+  min-width: 0;
+  border-bottom: 1px solid var(--oui-border);
+  padding: 9px 10px;
+}
+
+.oui-ui-application-table-preview > :nth-last-child(-n+5) {
+  border-bottom: 0;
 }
 
 .oui-ui-theme-rail {
@@ -465,8 +561,8 @@ body.oui-ui-document-lock {
 }
 
 .oui-ui-theme-rail-item[data-active=true] {
-  background: var(--oui-brand-soft);
-  color: var(--oui-brand-strong);
+  background: var(--oui-primary-surface);
+  color: var(--oui-primary-text);
 }
 
 .oui-ui-theme-rail-preview {
@@ -586,7 +682,7 @@ body.oui-ui-document-lock {
 }
 
 .oui-theme-preset-card[data-active=true] {
-  background: var(--oui-brand-soft);
+  background: var(--oui-primary-surface);
 }
 
 .oui-theme-preset-preview {
@@ -673,8 +769,8 @@ body.oui-ui-document-lock {
 }
 
 .oui-theme-surface-button[data-active=true] {
-  border-color: color-mix(in srgb, var(--oui-brand) 68%, var(--oui-border));
-  background: var(--oui-brand-soft);
+  border-color: color-mix(in srgb, var(--oui-primary-base) 68%, var(--oui-border));
+  background: var(--oui-primary-surface);
 }
 
 .oui-theme-surface-label {
@@ -802,8 +898,8 @@ body.oui-ui-document-lock {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--oui-brand-soft);
-  color: var(--oui-brand-strong);
+  background: var(--oui-primary-surface);
+  color: var(--oui-primary-text);
   font-size: 11px;
   font-weight: 760;
 }
@@ -838,21 +934,6 @@ body.oui-ui-document-lock {
   padding: 10px;
 }
 
-.oui-ui-state-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
-  align-items: start;
-  gap: 8px;
-}
-
-.oui-ui-icon-text-list {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 10px 16px;
-}
-
 :root[data-oui-theme=dark] .oui-ui-light-only,
 .oui-root[data-oui-theme=dark] .oui-ui-light-only {
   display: none;
@@ -861,18 +942,22 @@ body.oui-ui-document-lock {
 .oui-code-info-button {
   display: none;
   flex: 0 0 auto;
-  color: var(--oui-info);
+  color: var(--oui-info-base);
 }
 
 .oui-code-inline-panel {
   position: relative;
+  --oui-code-collapsed-height: 180px;
+  --oui-code-expanded-height: calc((var(--oui-code-lines, 9) * 20.15px) + 66px);
   width: min(52%, 760px);
   min-width: 0;
   flex: 1 1 420px;
   align-self: flex-start;
+  height: var(--oui-code-collapsed-height);
+  contain: layout paint style;
   overflow: hidden;
   border-radius: var(--oui-radius);
-  transition: height 260ms cubic-bezier(0.22, 1, 0.36, 1);
+  transition: height 460ms cubic-bezier(0.2, 0, 0.2, 1), padding-bottom 320ms ease;
 }
 
 .oui-code-inline-content {
@@ -883,18 +968,18 @@ body.oui-ui-document-lock {
   max-height: none;
 }
 
-.oui-code-inline-panel .oui-code-preview-scroll .oui-scroll-area-viewport {
-  max-height: none;
-  overflow-x: auto;
-  overflow-y: hidden;
+.oui-code-inline-panel[data-expanded=true] {
+  height: var(--oui-code-expanded-height);
+  padding-bottom: 38px;
 }
 
-.oui-code-inline-panel[data-expanded=false][data-collapsible=true] .oui-code-preview-scroll .oui-scroll-area-viewport {
-  overflow: hidden;
+.oui-code-inline-panel[data-collapsible=false] {
+  height: auto;
 }
 
-.oui-code-inline-panel[data-expanded=true] {
-  padding-bottom: 38px;
+.oui-code-inline-panel[data-collapsible=false] .oui-code-inline-toggle,
+.oui-code-inline-panel[data-collapsible=false] .oui-code-inline-fade {
+  display: none;
 }
 
 .oui-code-inline-fade {
@@ -904,8 +989,14 @@ body.oui-ui-document-lock {
   left: 0;
   z-index: 2;
   height: 92px;
+  opacity: 1;
   pointer-events: none;
   background: linear-gradient(to bottom, transparent, var(--oui-bg) 72%);
+  transition: opacity 180ms ease;
+}
+
+.oui-code-inline-panel[data-expanded=true] .oui-code-inline-fade {
+  opacity: 0;
 }
 
 .oui-code-inline-toggle {
@@ -943,11 +1034,44 @@ body.oui-ui-document-lock {
   overflow: hidden;
 }
 
+.oui-code-preview-wrap {
+  position: relative;
+  min-width: 0;
+}
+
+.oui-code-preview-copy {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 4;
+  opacity: 0;
+  transform: translateY(-2px);
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+
+.oui-code-preview-wrap:hover .oui-code-preview-copy,
+.oui-code-preview-wrap:focus-within .oui-code-preview-copy {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.oui-code-preview-scroll-inline {
+  overflow: hidden;
+}
+
 .oui-code-preview-scroll .oui-scroll-area-viewport {
   max-height: min(62vh, 620px);
   overflow: auto;
 }
 
+.oui-code-preview-scroll-inline .oui-scroll-area-viewport {
+  max-height: none;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  overscroll-behavior-y: auto;
+}
+
 .oui-code-preview {
   min-width: max-content;
   margin: 0;
@@ -963,23 +1087,27 @@ body.oui-ui-document-lock {
   white-space: pre;
 }
 
+.oui-code-inline-panel .oui-code-preview {
+  padding-bottom: 42px;
+}
+
 .oui-code-line {
   display: block;
   min-height: 1.55em;
 }
 
 .oui-code-keyword {
-  color: var(--oui-brand-strong);
+  color: var(--oui-primary-text);
   font-weight: 650;
 }
 
 .oui-code-component {
-  color: var(--oui-info);
+  color: var(--oui-info-base);
   font-weight: 650;
 }
 
 .oui-code-string {
-  color: var(--oui-success);
+  color: var(--oui-success-base);
 }
 
 .oui-code-comment {
@@ -1002,9 +1130,6 @@ body.oui-ui-document-lock {
   }
 }
 @media (max-width: 860px) {
-  .oui-ui-topbar {
-    display: none;
-  }
   .oui-ui-workspace {
     display: flex;
     flex-direction: column;
@@ -1020,10 +1145,19 @@ body.oui-ui-document-lock {
   .oui-ui-brand[data-compact=true] .oui-ui-brand-text span {
     display: none;
   }
-  .oui-ui-topbar-actions[data-compact=true] .oui-ui-topbar-link span {
+  .oui-ui-header-title {
+    gap: 0;
+  }
+  .oui-ui-header-title strong {
+    font-size: 14px;
+  }
+  .oui-ui-header-title span {
     display: none;
   }
-  .oui-ui-topbar-actions[data-compact=true] .oui-ui-topbar-link {
+  .oui-ui-header-actions[data-compact=true] .oui-ui-header-link span {
+    display: none;
+  }
+  .oui-ui-header-actions[data-compact=true] .oui-ui-header-link {
     width: 30px;
     min-height: 30px;
     padding: 0;
@@ -1091,9 +1225,6 @@ body.oui-ui-document-lock {
     flex-direction: column;
     gap: 8px;
   }
-  .oui-ui-state-grid {
-    grid-template-columns: minmax(0, 1fr);
-  }
   .oui-ui-language-label {
     display: none;
   }

package/dist/hooks/useFloatingPosition.js

@@ -69,7 +69,7 @@ export function useFloatingPosition({ triggerRef, contentRef, open, side = 'bott
             position: 'fixed',
             left,
             top,
-            minWidth: matchTriggerWidth ? triggerRect.width : undefined,
+            minWidth: matchTriggerWidth ? contentWidth : undefined,
             maxWidth: `calc(100vw - ${collisionPadding * 2}px)`,
             maxHeight: `calc(100vh - ${collisionPadding * 2}px)`,
             visibility: 'visible',

package/dist/hooks/usePresence.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePresence.d.ts","sourceRoot":"","sources":["../../src/hooks/usePresence.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,SAAM;;;EAsC1D"}
+{"version":3,"file":"usePresence.d.ts","sourceRoot":"","sources":["../../src/hooks/usePresence.ts"],"names":[],"mappings":"AAIA,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,UAAU,SAAM;;;EAwC1D"}

package/dist/hooks/usePresence.js

@@ -1,15 +1,19 @@
 'use client';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 export function usePresence(open, durationMs = 220) {
     const [present, setPresent] = useState(open);
     const [state, setState] = useState(open ? 'open' : 'closed');
+    const previousOpenRef = useRef(open);
     useEffect(() => {
+        if (previousOpenRef.current === open)
+            return;
+        previousOpenRef.current = open;
         let frame = 0;
         let timer = 0;
         if (open) {
+            setState('opening');
+            setPresent(true);
             frame = window.requestAnimationFrame(() => {
-                setPresent(true);
-                setState('opening');
                 timer = window.setTimeout(() => setState('open'), durationMs);
             });
             return () => {
@@ -17,10 +21,8 @@ export function usePresence(open, durationMs = 220) {
                 window.clearTimeout(timer);
             };
         }
-        if (!present)
-            return;
+        setState('closing');
         frame = window.requestAnimationFrame(() => {
-            setState('closing');
             timer = window.setTimeout(() => {
                 setPresent(false);
                 setState('closed');
@@ -30,6 +32,6 @@ export function usePresence(open, durationMs = 220) {
             window.cancelAnimationFrame(frame);
             window.clearTimeout(timer);
         };
-    }, [durationMs, open, present]);
+    }, [durationMs, open]);
     return { present, state };
 }