@difizen/libro-core 0.2.40-next.4 → 0.2.41-next.0

package/src/module.ts

@@ -15,11 +15,13 @@ import {
   CellExecutionTimeProvider,
   CellInputBottonBlankProvider,
   CellOutputBottomBlankProvider,
+  CellOutputTopProvider,
   CellOutputVisulizationProvider,
   LibroBetweenCellContent,
   LibroCellExecutionTime,
   LibroCellInputBottonBlank,
   LibroCellOutputBottomBlank,
+  LibroCellTopBlank,
   LibroCellVisualization,
 } from './components/index.js';
 import { LibroContentModule } from './content/index.js';
@@ -99,6 +101,10 @@ export const LibroModule = ManaModule.create()
       token: CellOutputBottomBlankProvider,
       useValue: LibroCellOutputBottomBlank,
     },
+    {
+      token: CellOutputTopProvider,
+      useValue: LibroCellTopBlank,
+    },
     {
       token: CellOutputVisulizationProvider,
       useValue: LibroCellVisualization,

package/src/slot/libro-slot-view.tsx

@@ -1,3 +1,4 @@
+import type { View, ViewOpenOption, Disposable } from '@difizen/mana-app';
 import { DefaultSlotView, view, ViewRender, ViewInstance } from '@difizen/mana-app';
 import { transient } from '@difizen/mana-app';
 import { equals, prop, useInject } from '@difizen/mana-app';
@@ -21,13 +22,12 @@ export const LibroExtensionViewComponent = forwardRef(
         </div>
       );
     } else {
-      const activeView =
-        filteredChildren.find(
-          (item) => instance.active && equals(item, instance.active),
-        ) || filteredChildren[filteredChildren.length - 1];
+      const activeView = filteredChildren.find(
+        (item) => instance.active && equals(item, instance.active),
+      );
       return (
         <div className={'libro-slot-container'} ref={ref}>
-          <ViewRender view={activeView} />
+          {activeView && <ViewRender view={activeView} />}
           {instance.children.map(
             (item) => !isDisplayView(item) && <ViewRender view={item} key={item.id} />,
           )}
@@ -45,4 +45,31 @@ export class LibroSlotView extends DefaultSlotView {
   @prop()
   override sort?: boolean = false;
   // sort?: boolean = true;
+
+  protected history: View[] = [];
+
+  override async addView(
+    viewInstance: View,
+    option?: ViewOpenOption,
+  ): Promise<Disposable> {
+    if (option?.reveal) {
+      this.history.push(viewInstance);
+    }
+    const toDispose = super.addView(viewInstance, option);
+    return toDispose;
+  }
+
+  revertActive() {
+    const index = this.history.findIndex((item) => item.id === this.active?.id);
+    if (index < 0) {
+      return;
+    }
+    this.history.splice(index, 1);
+    if (this.history.length > 0) {
+      const last = this.history[this.history.length - 1];
+      this.active = last;
+    } else {
+      this.active = undefined;
+    }
+  }
 }

package/src/theme/libro-color-registry.ts

@@ -308,6 +308,11 @@ export class LibroColorRegistry implements ColorContribution {
         defaults: { dark: '#E3E4E6', light: '#212121' },
         description: '',
       },
+      {
+        id: 'libro.editor.class.color',
+        defaults: { dark: '#6868f3', light: '#0000ff' },
+        description: '',
+      },
       {
         id: 'libro.editor.def.color',
         defaults: { dark: '#187DFF', light: '#003CFF' },

package/src/utils/index.ts

@@ -0,0 +1,48 @@
+import { useUnmount } from '@difizen/mana-app';
+import type { RefObject } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+
+function useRafState<S>(initialState?: S) {
+  const ref = useRef(0);
+  const [state, setState] = useState<S | undefined>(initialState);
+
+  const setRafState = useCallback((value: S) => {
+    cancelAnimationFrame(ref.current);
+
+    ref.current = requestAnimationFrame(() => {
+      setState(value);
+    });
+  }, []);
+
+  useUnmount(() => {
+    cancelAnimationFrame(ref.current);
+  });
+
+  return [state, setRafState] as const;
+}
+
+type Size = { width: number; height: number };
+export function useSize(ref: RefObject<HTMLDivElement>): Size | undefined {
+  const [size, setSize] = useRafState<Size>();
+  useLayoutEffect(() => {
+    const el = ref?.current;
+    if (!el) {
+      return;
+    }
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const { clientWidth, clientHeight } = entry.target;
+        setSize({
+          width: clientWidth,
+          height: clientHeight,
+        });
+      });
+    });
+
+    resizeObserver.observe(el);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [ref, setSize]);
+  return size;
+}