@mks2508/mks-ui 0.8.1 → 0.8.2

package/dist/react-ui/blocks/Terminal/panel/TerminalPanelHeader/TerminalPanelHeader.styles.d.ts

@@ -6,7 +6,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelHeader
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../../../core/types';
 /** Slot names for TerminalPanelHeader visual regions. */
 export type TerminalPanelHeaderSlot = 'root' | 'trafficLights' | 'titleArea' | 'titleIcon' | 'titleText' | 'viewModeControl' | 'viewModeButton' | 'statusDot' | 'statusLabel';
 /**

package/dist/react-ui/blocks/Terminal/panel/TerminalPanelHeader/TerminalPanelHeader.types.d.ts

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelHeader
  */
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../../../core/types';
 import type { TerminalPanelHeaderSlot } from './TerminalPanelHeader.styles';
 /**
  * Props for the TerminalPanelHeader component.

package/dist/react-ui/blocks/Terminal/panel/TerminalPanelToolbar/TerminalPanelToolbar.styles.d.ts

@@ -5,7 +5,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelToolbar
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../../../core/types';
 /** Slot names for TerminalPanelToolbar visual regions. */
 export type TerminalPanelToolbarSlot = 'root' | 'filterGroup' | 'filterButton' | 'separator' | 'toggleGroup' | 'toggleButton' | 'actionGroup' | 'actionButton';
 /**

package/dist/react-ui/blocks/Terminal/panel/TerminalPanelToolbar/TerminalPanelToolbar.types.d.ts

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalPanelToolbar
  */
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../../../core/types';
 import type { TLogLevel } from '../../parsing';
 import type { TerminalPanelToolbarSlot } from './TerminalPanelToolbar.styles';
 /** Log level filter type — 'all' or a specific level. */

package/dist/react-ui/blocks/Terminal/panel/TerminalSessionControl/TerminalSessionControl.styles.d.ts

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionControl
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../../../core/types';
 /** Slot names for TerminalSessionControl visual regions. */
 export type TerminalSessionControlSlot = 'root' | 'statusDot' | 'containerName' | 'liveLabel' | 'addButton' | 'refreshButton' | 'closeButton' | 'dropdown' | 'dropdownItem';
 /**

package/dist/react-ui/blocks/Terminal/panel/TerminalSessionControl/TerminalSessionControl.types.d.ts

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionControl
  */
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../../../core/types';
 import type { TerminalSessionControlSlot } from './TerminalSessionControl.styles';
 /**
  * Container information for dropdown display.

package/dist/react-ui/blocks/Terminal/panel/TerminalSessionTabs/TerminalSessionTabs.styles.d.ts

@@ -6,7 +6,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionTabs
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../../../core/types';
 /** Slot names for TerminalSessionTabs visual regions. */
 export type TerminalSessionTabsSlot = 'root' | 'tab' | 'tabIndicator' | 'tabGlowBar' | 'statusDot' | 'tabName' | 'closeButton' | 'addButton' | 'dropdown' | 'dropdownItem' | 'infoBadge';
 /**

package/dist/react-ui/blocks/Terminal/panel/TerminalSessionTabs/TerminalSessionTabs.types.d.ts

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSessionTabs
  */
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../../../core/types';
 import type { ITerminalSession } from '../TerminalLogsPanel.types';
 import type { TerminalSessionTabsSlot } from './TerminalSessionTabs.styles';
 /**

package/dist/react-ui/blocks/Terminal/panel/TerminalSessionTabs/terminal-session-tabs.module.css

@@ -0,0 +1,60 @@
+/**
+ * TerminalSessionTabs Dropdown Styles.
+ *
+ * Uses CSS Anchor Positioning API for the "add container" dropdown.
+ * The + button acts as anchor, dropdown is positioned below it
+ * with automatic flip behavior at viewport edges.
+ *
+ * @module components/devenv/terminal/panel/terminal-session-tabs/styles
+ */
+
+/* + button - acts as CSS anchor */
+.addButton {
+  anchor-name: --session-tabs-add-anchor;
+}
+
+/* Container dropdown - anchored to + button */
+.containerDropdown {
+  position-anchor: --session-tabs-add-anchor;
+  position: fixed;
+
+  /* Position below and left-aligned */
+  left: anchor(left);
+  top: anchor(bottom);
+  margin-top: 4px;
+
+  /* Flip to above if no room below */
+  position-try-fallbacks: flip-block, flip-inline;
+
+  min-width: 200px;
+  z-index: 50;
+
+  /* Hidden by default */
+  display: none;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  pointer-events: none;
+}
+
+.containerDropdown[data-open="true"] {
+  display: block;
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+/* Fallback for browsers without CSS Anchor Positioning */
+@supports not (anchor-name: none) {
+  .containerDropdown {
+    position: absolute;
+    left: 0;
+    top: calc(100% + 4px);
+    z-index: 50;
+  }
+
+  .containerDropdown[data-open="true"] {
+    display: block;
+  }
+}
+

package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/TerminalSettingsPopover.styles.d.ts

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSettingsPopover
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../../../core/types';
 /** Slot names for TerminalSettingsPopover visual regions. */
 export type TerminalSettingsPopoverSlot = 'root' | 'trigger' | 'header' | 'section' | 'sectionLabel' | 'segmentedControl' | 'segmentedButton' | 'fontControls' | 'toggle' | 'resetButton';
 /**

package/dist/react-ui/blocks/Terminal/panel/TerminalSettingsPopover/TerminalSettingsPopover.types.d.ts

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalSettingsPopover
  */
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../../../core/types';
 import type { TerminalSettingsPopoverSlot } from './TerminalSettingsPopover.styles';
 /**
  * Props for the TerminalSettingsPopover component.

package/dist/react-ui/blocks/Terminal/panel/TerminalThemeSelector/TerminalThemeSelector.styles.d.ts

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalThemeSelector
  */
-import type { StyleSlots } from '@/core/types';
+import type { StyleSlots } from '../../../../../core/types';
 /** Slot names for TerminalThemeSelector visual regions. */
 export type TerminalThemeSelectorSlot = 'root' | 'trigger' | 'searchInput' | 'themeList' | 'sectionLabel' | 'themeOption';
 /**

package/dist/react-ui/blocks/Terminal/panel/TerminalThemeSelector/TerminalThemeSelector.types.d.ts

@@ -3,7 +3,7 @@
  *
  * @module @mks2508/mks-ui/react/blocks/Terminal/panel/TerminalThemeSelector
  */
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../../../core/types';
 import type { TerminalThemeSelectorSlot } from './TerminalThemeSelector.styles';
 /**
  * Props for the TerminalThemeSelector component.

package/dist/react-ui/components/MorphingPopover/morphing-popover.module.css

@@ -0,0 +1,154 @@
+/* CSS Variables for anchor positioning */
+.morphingPopoverContainer {
+  position: relative;
+  display: inline-block;
+  --anchor-name: morphing-trigger;
+  --target-width: 220px;
+  --target-height: 120px;
+  --transition-duration: 0.2s;
+}
+
+/* Trigger button styles */
+.morphingTrigger {
+  anchor-name: var(--anchor-name);
+  width: 44px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 24px;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  transition: background-color 0.2s;
+}
+
+.morphingTrigger:hover {
+  background-color: hsl(var(--muted) / 0.5);
+}
+
+/* Popover styles - anchored to trigger by default */
+.morphingPopover {
+  position-anchor: var(--anchor-name);
+  left: anchor(left);
+  top: anchor(top);
+  width: anchor-size(width);
+  min-height: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  padding: 0;
+  height: anchor-size(height);
+  transition-behavior: allow-discrete;
+  transition-property: display, overlay, width, height, top,
+    border-radius, left, position-anchor, transform, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease-out;
+  transform-origin: center center;
+  opacity: 0;
+}
+
+/* When popover is open - expand to target size */
+.morphingPopover:popover-open {
+  position-anchor: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--target-width);
+  height: var(--target-height);
+  border-radius: 12px;
+  opacity: 1;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
+}
+
+/* Starting style for animation - browser support required */
+@starting-style {
+  .morphingPopover:popover-open {
+    position-anchor: var(--anchor-name);
+    left: anchor(left);
+    top: anchor(top);
+    transform: none;
+    border-radius: 50%;
+    width: anchor-size(width);
+    height: anchor-size(height);
+    opacity: 0;
+  }
+}
+
+/* Fallback for browsers without anchor positioning */
+@supports not (anchor-name: none) {
+  .morphingPopover {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.8);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .morphingPopover:popover-open {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  @starting-style {
+    .morphingPopover:popover-open {
+      transform: translate(-50%, -50%) scale(0.8);
+      opacity: 0;
+    }
+  }
+}
+
+/* Variant: Morphing to a specific target element */
+.morphingPopoverTargetContainer {
+  position: relative;
+  display: inline-block;
+  --anchor-name: morphing-trigger;
+  --target-anchor-name: morphing-target;
+  --transition-duration: 0.2s;
+}
+
+.morphingPopoverTarget {
+  position-anchor: var(--anchor-name);
+  left: anchor(left);
+  top: anchor(top);
+  width: anchor-size(width);
+  min-height: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  padding: 0;
+  height: anchor-size(height);
+  transition-behavior: allow-discrete;
+  transition-property: display, overlay, width, height, top,
+    border-radius, left, position-anchor, transform, opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease-out;
+}
+
+.morphingPopoverTarget:popover-open {
+  position-anchor: var(--target-anchor-name);
+  left: anchor(left);
+  top: anchor(top);
+  border-radius: 12px;
+  min-width: 200px;
+  min-height: 120px;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.3);
+  opacity: 1;
+}
+
+@starting-style {
+  .morphingPopoverTarget:popover-open {
+    position-anchor: var(--anchor-name);
+    left: anchor(left);
+    top: anchor(top);
+    border-radius: 50%;
+    width: anchor-size(width);
+    height: anchor-size(height);
+    opacity: 0;
+  }
+}
+

package/dist/react-ui/primitives/AutoHeight/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type HTMLMotionProps, type LegacyAnimationControls, type TargetAndTransition, type Transition } from 'motion/react';
-import { type WithAsChild } from '@/react-ui/primitives/Slot';
+import { type WithAsChild } from '../../../react-ui/primitives/Slot';
 /** Props for the AutoHeight primitive component. */
 type IAutoHeightProps = WithAsChild<{
     children: React.ReactNode;

package/dist/react-ui/primitives/CountingNumber/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type SpringOptions } from 'motion/react';
-import { type IUseIsInViewOptions } from '@/react-ui/hooks/DOM/UseIsInView';
+import { type IUseIsInViewOptions } from '../../../react-ui/hooks/DOM/UseIsInView';
 /** Props for the CountingNumber primitive. */
 type ICountingNumberProps = Omit<React.ComponentProps<'span'>, 'children'> & {
     /** Target number to animate to. */

package/dist/react-ui/primitives/DotMatrix/DotMatrix.types.d.ts

@@ -20,7 +20,7 @@
  *
  * @module @mks2508/mks-ui/react/primitives/DotMatrix
  */
-import type { SlotOverrides } from '@/core/types';
+import type { SlotOverrides } from '../../../core/types';
 import type { DotMatrixPattern } from './patterns';
 export type { DotMatrixPattern } from './patterns';
 /** Lifecycle status. Applied as a CSS data-attr on the root. */