Create a new <perspective-hypergrid> web component, and attach it to the DOM.

@param {HTMLElement} div Attachment point.
503757
async function getOrCreateHypergrid(div) {
    let perspectiveHypergridElement;
    if (!this.hypergrid) {
        perspectiveHypergridElement = this[PRIVATE].grid = document.createElement("perspective-hypergrid");
        Object.defineProperty(this, "hypergrid", {
            configurable: true,
            get: () => (this[PRIVATE].grid ? this[PRIVATE].grid.grid : undefined)
        });
    } else {
        perspectiveHypergridElement = this[PRIVATE].grid;
    }

    if (!perspectiveHypergridElement.isConnected) {
        div.innerHTML = "";
        div.appendChild(perspectiveHypergridElement);
        await new Promise(resolve => setTimeout(resolve));
        perspectiveHypergridElement.grid.canvas.resize(false, true);
    }
    return perspectiveHypergridElement;
}
1072732
function (subject, dom) {
    var outliner = panes.getOutliner(dom)
    var kb = UI.store
    var mainTable // This is a live synced table
/*
    var complain = function complain (message, color) {
      var pre = dom.createElement('pre')
      console.log(message)
      pre.setAttribute('style', 'background-color: ' + color || '#eed' + ';')
      div.appendChild(pre)
      pre.appendChild(dom.createTextNode(message))
    }
*/
    var div = dom.createElement('div')
    div.setAttribute('class', 'instancePane')
    div.setAttribute('style', '  border-top: solid 1px #777; border-bottom: solid 1px #777; margin-top: 0.5em; margin-bottom: 0.5em ')

    // If this is an LDP container just list the directory

    var noHiddenFiles = function (obj) { // @@ This hiddenness should actually be server defined
      var pathEnd = obj.uri.slice(obj.dir().uri.length)
      return !(pathEnd.startsWith('.') || pathEnd.endsWith('.acl') || pathEnd.endsWith('~'))
    }
    let thisDir = subject.uri.endsWith('/') ? subject.uri : subject.uri + '/'
    let indexThing = kb.sym(thisDir + 'index.ttl#this')
    if (kb.holds(subject, ns.ldp('contains'), indexThing.doc())) {
      console.log('View of folder with be view of indexThing. Loading ' + indexThing)
      let packageDiv = div.appendChild(dom.createElement('div'))
      packageDiv.style.cssText = 'border-top: 0.2em solid #ccc;' // Separate folder views above from package views below
      kb.fetcher.load(indexThing.doc()).then(function () {
        mainTable = packageDiv.appendChild(dom.createElement('table'))
        panes.getOutliner(dom).GotoSubject(indexThing, true, undefined, false, undefined, mainTable)
      })

      return div
    } else {
      mainTable = div.appendChild(dom.createElement('table'))
      var refresh = function () {
        var objs = kb.each(subject, ns.ldp('contains')).filter(noHiddenFiles)
        objs = objs.map(obj => [ UI.utils.label(obj).toLowerCase(), obj ])
        objs.sort() // Sort by label case-insensitive
        objs = objs.map(pair => pair[1])
        UI.utils.syncTableToArray(mainTable, objs, function (obj) {
          let st = kb.statementsMatching(subject, ns.ldp('contains'), obj)[0]
          let defaultpropview = outliner.VIEWAS_boring_default
          let tr = outliner.propertyTR(dom,
            st, false)
          tr.firstChild.textContent = '' // Was initialized to 'Contains'
          tr.firstChild.style.cssText += 'min-width: 3em;'
          tr.appendChild(outliner.outlineObjectTD(obj, defaultpropview, undefined, st))
          // UI.widgets.makeDraggable(tr, obj)
          return tr
        })
      }
      mainTable.refresh = refresh
      refresh()
    }

    // Allow user to create new things within the folder
    var creationDiv = div.appendChild(dom.createElement('div'))
    var me = UI.authn.currentUser()
    var creationContext = {folder: subject, div: creationDiv, dom: dom, statusArea: creationDiv, me: me}
    creationContext.refreshTarget = mainTable
    UI.create.newThingUI(creationContext, panes) // Have to pass panes down  newUI

    // /////////// Allow new file to be Uploaded
    var droppedFileHandler = function (files) {
      UI.widgets.uploadFiles(kb.fetcher, files, subject.uri, subject.uri, function (file, uri) {
        // A file has been uploaded
        let destination = kb.sym(uri)
        console.log(' Upload: put OK: ' + destination)
        kb.add(subject, ns.ldp('contains'), destination, subject.doc())
        mainTable.refresh()
      })
    }

    UI.aclControl.preventBrowserDropEvents(dom)

    const explictDropIcon = false
    var target
    if (explictDropIcon) {
      let iconStyleFound = creationDiv.firstChild.style.cssText
      target = creationDiv.insertBefore(dom.createElement('img'), creationDiv.firstChild)
      target.style.cssText = iconStyleFound
      target.setAttribute('src', UI.icons.iconBase + 'noun_748003.svg')
      target.setAttribute('style', 'width: 2em; height: 2em') // Safari says target.style is read-only
    } else {
      target = creationDiv.firstChild // Overload drop target semantics onto the plus sign
    }

    UI.widgets.makeDropTarget(target, null, droppedFileHandler)

    return div
  }
169479
function() {
    // Attach Cell Editor container element as first child of body
    var elCellEditor = document.createElement("div");
    elCellEditor.id = this._sId + "-celleditor";
    elCellEditor.style.display = "none";
    elCellEditor.tabIndex = 0;
    Dom.addClass(elCellEditor, DT.CLASS_EDITOR);
    var elFirstChild = Dom.getFirstChild(document.body);
    if(elFirstChild) {
        elCellEditor = Dom.insertBefore(elCellEditor, elFirstChild);
    }
    else {
        elCellEditor = document.body.appendChild(elCellEditor);
    }
    
    // Internal tracker of Cell Editor values
    var oCellEditor = {};
    oCellEditor.container = elCellEditor;
    oCellEditor.value = null;
    oCellEditor.isActive = false;
    this._oCellEditor = oCellEditor;
}
1052796
function initializeWhenRendered(element) {

  // If the component has been rendered, our height should be nonzero.
  if (element.clientHeight === 0) {
    // Not rendered yet: wait a bit before trying again.
    setTimeout(() => initializeWhenRendered(element), 10);
    return;
  }

  // If we reach this point, the component's elements should by styled.

  // For auto-sizing to work, we need the text copy to have the same border,
  // padding, and other relevant characteristics as the original text area.
  // Since those aspects are affected by CSS, we have to wait until the
  // element is in the document before we can update the text copy.
  const textBoxStyle = getComputedStyle(element.inner);
  const copyContainerStyle = element.$.copyContainer.style;
  copyContainerStyle.borderBottomStyle  = textBoxStyle.borderBottomStyle;
  copyContainerStyle.borderBottomWidth  = textBoxStyle.borderBottomWidth;
  copyContainerStyle.borderLeftStyle    = textBoxStyle.borderLeftStyle;
  copyContainerStyle.borderLeftWidth    = textBoxStyle.borderLeftWidth;
  copyContainerStyle.borderRightStyle   = textBoxStyle.borderRightStyle;
  copyContainerStyle.borderRightWidth   = textBoxStyle.borderRightWidth;
  copyContainerStyle.borderTopStyle     = textBoxStyle.borderTopStyle;
  copyContainerStyle.borderTopWidth     = textBoxStyle.borderTopWidth;
  copyContainerStyle.paddingBottom      = textBoxStyle.paddingBottom;
  copyContainerStyle.paddingLeft        = textBoxStyle.paddingLeft;
  copyContainerStyle.paddingRight       = textBoxStyle.paddingRight;
  copyContainerStyle.paddingTop         = textBoxStyle.paddingTop;

  // Use the extraLine member to gauge the expected height of a single line of
  // text. We can't use lineHeight, because that can be reported as "normal",
  // and we want to know the actual pixel height.
  element.$.extraLine.style.display = 'inherit';
  element[lineHeightSymbol] = element.$.extraLine.clientHeight;

  // Now that we know the line height, we can hide the extra line.
  element.$.extraLine.style.display = 'none';

  // Use the line height in conjunction with minimumRows to establish the
  // overall minimum height of the component.
  setMinimumHeight(element);
}
600528
function (div) {

            if (this._displayDiv != null) {
                return;
            }

            this.process();

            var document = Aria.$window.document;
            this._displayDiv = document.createElement('div');
            this._displayDiv.style.cssText = "position:absolute;top:0px;left:0px;width:100%;height:100%; z-index:99999999;overflow:auto;background:white";

            document.body.appendChild(this._displayDiv);

            Aria.loadTemplate({
                classpath : 'aria.utils.ProfilingDisplay',
                div : this._displayDiv,
                data : ariaUtilsJson.copy(this._logsPerClasspath, true)
            });
        }
602701
function(bindingString, data, children, callback, done) {
            container = document.createElement("div");
            container.setAttribute("data-bind", bindingString);
            container.innerHTML = children || "";

            sandbox.appendChild(container);

            ko.cleanNode(sandbox);
            ko.applyBindings(data, sandbox);

            setTimeout(callback, 50);
        }
973129
function addNodeTo ( target, className ) {
        var div = document.createElement('div');
        addClass(div, className);
        target.appendChild(div);
        return div;
    }
820671
function Canvas(htmlElement) {
	/*
	 * initialization
	 */
	this.id = htmlElement.id;
	this.htmlElement = htmlElement;
	this.blocks = new Array();
	this.connectors = new Array();
	this.offsetLeft = calculateOffsetLeft(this.htmlElement);
	this.offsetTop = calculateOffsetTop(this.htmlElement);	
	
	this.width;
	this.height;

	// create the inner div element
	this.innerDiv = document.createElement ("div");
	
	this.initCanvas = function() {
		// setup the inner div
		var children = this.htmlElement.childNodes;
		var el;
		var n = children.length;
		for(var i = 0; i < n; i++) {
			el = children[0];
			this.htmlElement.removeChild(el);
			this.innerDiv.appendChild(el);
			if(el.style)
				el.style.zIndex = "2";
		}
		this.htmlElement.appendChild(this.innerDiv);

		this.htmlElement.style.overflow = "auto";
		this.htmlElement.style.position = "relative";
		this.innerDiv.id = this.id + "_innerDiv";
		this.innerDiv.style.border = "none";
		this.innerDiv.style.padding = "0px";
		this.innerDiv.style.margin = "0px";
		this.innerDiv.style.position = "absolute";
		this.innerDiv.style.top = "0px";
		this.innerDiv.style.left = "0px";
		this.width = 0;
		this.height = 0;
		this.offsetLeft = calculateOffsetLeft(this.innerDiv);
		this.offsetTop = calculateOffsetTop(this.innerDiv);

		// inspect canvas children to identify first level blocks
		new DocumentScanner(this, true).scan(this.htmlElement);
		
		// now this.width and this.height are populated with minimum values needed for the inner
		// blocks to fit, add 2 to avoid border overlap;
		this.height += 2;
		this.width += 2;
		
		var visibleWidth = this.htmlElement.offsetWidth - 2; // - 2 is to avoid border overlap
		var visibleHeight = this.htmlElement.offsetHeight - 2; // - 2 is to avoid border overlap
		
		// consider the scrollbars width calculating the inner div size
		if(this.height > visibleHeight)
			visibleWidth -= SCROLLBARS_WIDTH;
		if(this.width > visibleWidth)
			visibleHeight -= SCROLLBARS_WIDTH;
			
		this.height = Math.max(this.height, visibleHeight);
		this.width = Math.max(this.width, visibleWidth);
		
		this.innerDiv.style.width = this.width + "px";
		this.innerDiv.style.height = this.height + "px";
		
		// init connectors
		for(i = 0; i < this.connectors.length; i++) {
			this.connectors[i].initConnector();
		}
	}
	
	this.visit = function(element) {
		if (element == this.htmlElement)
			return true;
	
		// check the element dimensions against the acutal size of the canvas
		this.width = Math.max(this.width, calculateOffsetLeft(element) - this.offsetLeft + element.offsetWidth);
		this.height = Math.max(this.height, calculateOffsetTop(element) - this.offsetTop + element.offsetHeight);
		
		if(isBlock(element)) {
			// block found initialize it
			var newBlock = new Block(element, this);
			newBlock.initBlock();
			this.blocks.push(newBlock);
			return false;
		} else if(isConnector(element)) {
			// connector found, just create it, source or destination blocks may not 
			// have been initialized yet
			var newConnector = new Connector(element, this);
			this.connectors.push(newConnector);
			return false;
		} else {
			// continue searching nested elements
			return true;
		}
	}
	
	/*
	 * methods
	 */	
	this.print = function()
	{
		var output = '<ul><legend>canvas: ' + this.id + '</legend>';
		var i;
		for(i = 0; i < this.blocks.length; i++)
		{
			output += '<li>';
			output += this.blocks[i].print();
			output += '</li>';
		}
		output += '</ul>';
		return output;
	}
	
	this.alignBlocks = function() {
		var i;
		var roof = 0;
		// TODO: implement proper layout
		for (i = 0; i < this.blocks.length ; i++) {
			var b = this.blocks[i]; //.findBlock(blockId);
			b.onMove();
			b.htmlElement.style.top =roof;
			roof += b.htmlElement.style.height+20;
			// TODO: alert ("align "+b);
		}
		for (i = 0; i < this.connectors.length; i++) {
			this.connectors[i].repaint();
			console.log( this.connectors[i]);
		}
	}

	this.fitBlocks = function() {
		for (var i = 0; i < this.blocks.length ; i++) {
			var b = this.blocks[i]; //.findBlock(blockId);
			this.blocks[i].fit ();
		}
	}
	/*
	 * This function searches for a nested block with a given id
	 */
	this.findBlock = function(blockId) {
		var result;
		for(var i = 0; i < this.blocks.length && !result; i++)
			result = this.blocks[i].findBlock(blockId);
		return result;
	}
	
	this.toString = function() {
		return 'canvas: ' + this.id;		
	}
}
1006687
async function onCreateNode({
  node,
  actions,
  loadNodeContent,
  createNodeId,
  createContentDigest,
}) {
  if (!canParse(node)) return

  const sourceText = await loadNodeContent(node);
  let parsed = null;
  try {
    if (isTSX(node)) {
      // Load up the already transpiled file
      const transpiledPath = node.absolutePath
        .replace(/react-(.*)\/src/, 'react-$1/dist/esm')
        .replace(/\.tsx?$/, '.js');
      const jsText = fs.readFileSync(transpiledPath, 'utf8');
      parsed = docgenJavascript.parse(jsText);
    }
    else if (isJSX(node)) {
      parsed = docgenJavascript.parse(sourceText);
    }
  } catch (err) {
    console.warn('No component found in', node.absolutePath);
  }

  if (parsed) {
    const metadataNode = {
      name: parsed.displayName,
      description: parsed.description,
      props: flattenProps(parsed.props),
      path: node.relativePath,
      basePath: node.relativePath.split('/')[0],
      id: createNodeId(`${node.id}imunique${node.relativePath}`),
      children: [],
      parent: node.id,
      internal: {
        contentDigest: createContentDigest(node),
        type: `ComponentMetadata`,
      },
    }
    actions.createNode(metadataNode)
    actions.createParentChildLink({ parent: node, child: metadataNode })
  }
}
73373
function fromHTML(html) {
                var div = document.createElement('div');
                div.innerHTML = html;
                return div.childNodes;
            }
415806
function( entireComponent ) {

                // Insert a new component holder in the root or box.
                if ( entireComponent ) P.$root.html( createWrappedComponent() )
                else P.$root.find( '.' + CLASSES.box ).html( P.component.nodes( STATE.open ) )

                // Trigger the queued “render” events.
                return P.trigger( 'render' )
            }
735684
function(dom, eventName, data) {
          data = data || {};

          var event = document.createEvent('HTMLEvents');

          for (var key in data) {
            if (data.hasOwnProperty(key)) {
              event[key] = data[key];
            }
          }

          event.component = dom ?
            angular.element(dom).data(dom.nodeName.toLowerCase()) || null : null;
          event.initEvent(dom.nodeName.toLowerCase() + ':' + eventName, true, true);

          dom.dispatchEvent(event);
        }
434668
function(elContainer) {
    SDT.superclass._initContainerEl.call(this, elContainer);
    
    if(this._elContainer) {
        elContainer = this._elContainer; // was constructor input, now is DOM ref
        Dom.addClass(elContainer, DT.CLASS_SCROLLABLE);
        
        // Container for header TABLE
        var elHdContainer = document.createElement("div");
        elHdContainer.style.width = this.get("width") || "";
        elHdContainer.style.backgroundColor = this.get("COLOR_COLUMNFILLER");
        Dom.addClass(elHdContainer, SDT.CLASS_HEADER);
        this._elHdContainer = elHdContainer;
        elContainer.appendChild(elHdContainer);
    
        // Container for body TABLE
        var elBdContainer = document.createElement("div");
        elBdContainer.style.width = this.get("width") || "";
        elBdContainer.style.height = this.get("height") || "";
        Dom.addClass(elBdContainer, SDT.CLASS_BODY);
        Ev.addListener(elBdContainer, "scroll", this._onScroll, this); // to sync horiz scroll headers
        this._elBdContainer = elBdContainer;
        elContainer.appendChild(elBdContainer);
    }
}
91520
function attachSelectionMethods(box) {
  box.selected = 0;

  var nextTop = 0;
  var items = {};

  box.layout = function() {
    nextTop = 1;
    box.children.forEach(function(child) {
      child.top = nextTop;
      child.height = child.getScreenLines().length;
      nextTop += child.height;
    })
  }

  box.addItem = function(text, itemKey, itemData) {
    var node = blessed.text({
        left: 0,
        right: 0,
        top: nextTop,
        height: 1,
        tags: true,
        content: text
    });
    node.itemData = itemData;
    items[itemKey] = node;
    box.append(node);
    node.height = node.getScreenLines().length;
    nextTop += node.height;
  }

  box.getItem = function(itemKey) {
    return items[itemKey];
  }

  box.selectItem = function(itemKey) {
    var item = box.getItem(itemKey);
    if (!item) {
      return;
    }
    var i = box.children.indexOf(item);
    if (i == -1) {
      return;
    }
    box.select(i);
  }

  box.removeItem = function(itemKey) {
    var item = items[itemKey];
    if (!item) {
      return;
    }
    delete items[itemKey];
    item.detach();
    box.layout();
  }

  box.clearItems = function() {
    box.children.slice().forEach(function(child) {
      child.detach();
    });
    box.selected = -1;
    nextTop = 0;
    items = {};
  }

  box.up = function(n) {
    if (box.selected == -1) {
      box.select(box.children.length - 1);
    } else {
      n = n === undefined ? 1 : n;
      box.select(box.selected - n);
    }
  }

  box.down = function(n) {
    if (box.selected == -1) {
      box.select(box.children.length - 1);
    } else {
      n = n === undefined ? 1 : n;
      box.select(box.selected + n);
    }
  }

  box.select = function(n) {
    highlight(box.selected, false);
    n = Math.max(0, Math.min(box.children.length - 1, n));
    if (n == -1) {
      return;
    }
    box.selected = n;
    highlight(n, true);
  }

  box.getSelectedItem = function() {
    return box.children[box.selected];
  }

  function highlight(n, on) {
    var item = box.children[n];
    if (!item) {
      return;
    }
    item.style.inverse = on;
  }
}
1068643
function render(event) {
    var tooltip = document.createElement('div')
      , element = $(event.element)
      , pos = element.get('data-placement')
      , offset = this.offset(event.element)
      , placement;

    //
    // Create the tooltip with the proper content and insert.
    //
    tooltip.id = "tooltip";
    tooltip.innerHTML = element.get('data-content');
    tooltip.className = ['animated', 'tooltip', 'fadeIn', pos].concat(
      element.get('data-color')
    ).filter(Boolean).join(' ');

    document.body.appendChild(tooltip);

    //
    // Update the position of the tooltip.
    //
    placement = this.placement(pos, tooltip, event.element);
    tooltip.setAttribute('style', [
      'left:' + (offset.left + placement.left) + 'px',
      'top:' + (offset.top + placement.top) + 'px'
    ].join(';'));
  }
233565
function(cmd) {
            var target = document.createElement("div");
            target.setAttribute('id', placeholderId);

            if (iframe) {
                _msgDispatcher && _msgDispatcher.unbindEvents();
                _detachMouseEvents();
                iframe.parentNode && iframe.parentNode.replaceChild(target, iframe);
            }
        }
2859
function createBaseCustomElementClass(win) {
  if (win.BaseCustomElementClass) {
    return win.BaseCustomElementClass;
  }
  const htmlElement = win.HTMLElement;
  /** @abstract @extends {HTMLElement} */
  class BaseCustomElement extends htmlElement {
    /**
     * @see https://github.com/WebReflection/document-register-element#v1-caveat
     * @suppress {checkTypes}
     */
    constructor(self) {
      self = super(self);
      self.createdCallback(self.getChildren());
      return self;
    }

    /**
     * Called when elements is created. Sets instance vars since there is no
     * constructor.
     * @this {!Element}
     */
    createdCallback() {
    }

    attributeChangedCallback(attrName, oldVal, newVal) {
    }

    /**
     * Called when the element is first connected to the DOM. Calls
     * {@link firstAttachedCallback} if this is the first attachment.
     * @final @this {!Element}
     */
    connectedCallback() {
    }

    /** The Custom Elements V0 sibling to `connectedCallback`. */
    attachedCallback() {
      this.connectedCallback();
    }

    /**
     * Called when the element is disconnected from the DOM.
     * @final @this {!Element}
     */
    disconnectedCallback() {
    }

    /** The Custom Elements V0 sibling to `disconnectedCallback`. */
    detachedCallback() {
      this.disconnectedCallback();
    }

    getChildren() {
      return [].slice.call(this.childNodes);
    }
  }

  win.BaseCustomElementClass = BaseCustomElement;
  return win.BaseCustomElementClass;
}